Merge pull request #17 from codeplaysoftware/google-analytics-tracking

Google Analytics Support
codeplaysoftware · Feb 9, 2024 · ee71ba9 · ee71ba9
2 parents cf9fe88 + 18706c4
commit ee71ba9
Show file tree

Hide file tree

Showing 9 changed files with 336 additions and 21 deletions.
diff --git a/_configs/_config.yml b/_configs/_config.yml
@@ -20,6 +20,9 @@ exclude:
 twitter: https://twitter.com/syclopseu
 youtube: https://www.youtube.com/@syclopseu
 
+# Google Analytics Token
+ga: ''
+
 # List of consortium members (in alphabetical order)
 consortium_members:
   - name: "Accelom"

diff --git a/_configs/_config_production.yml b/_configs/_config_production.yml
@@ -1 +1,4 @@
 url: https://www.syclops.org
+
+# Google Analytics Token
+ga: 'G-CZ9WF91EQN'
diff --git a/_includes/cookies.html b/_includes/cookies.html
@@ -0,0 +1,17 @@
+<div id="cookies-accept-dialog">
+    <div>
+        <h1>Cookies</h1>
+        <p>Please note that we use cookies on this website to enhance your experience, provide features and to track how
+            the website is used.</p>
+        <p>Please click <b>accept</b> to accept our privacy &amp; cookie polices or click <b>decline</b> to disable
+            cookies and related features. </p>
+        <ul>
+            <li><a href="/privacy/">Privacy Policy</a></li>
+            <li><a href="/cookies/">Cookie Policy</a></li>
+        </ul>
+        <div class="buttons">
+            <button class="accept">Accept</button>
+            <button class="reject">Decline</button>
+        </div>
+    </div>
+</div>
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -36,6 +36,15 @@
           type="image/png"
           href="{{'favicon.png' | absolute_url}}"/>
 
+    <!-- Scripts -->
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
+            integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
+            crossorigin="anonymous"></script>
+    <script src="{{'/static/js/jquery.cookiesaccepted.js' | absolute_url}}"
+            type="text/javascript"></script>
+    <script src="{{'/static/js/index.js' | absolute_url}}"
+            type="text/javascript"></script>
+
     <!-- Content security policy -->
     <meta content="
                 default-src
@@ -49,19 +58,24 @@
                     'self'
                     https://fonts.googleapis.com;
                 script-src
-                    'self';
+                    'self'
+                    https://code.jquery.com
+                    https://www.googletagmanager.com
+                    https://www.google-analytics.com;
                 connect-src
-                    'self';
+                    'self'
+                    https://*.google-analytics.com;
                 img-src
                     'self'
                     https:
                     http:
-                    data:;
+                    data:
+                    https://*.google-analytics.com;
                 frame-src
                     'self';"
           http-equiv="Content-Security-Policy"/>
 </head>
-<body>
+<body data-ga="{{site.ga}}">
 {%- if header == 'expanded' -%}
 {%- include _includes/headers/expanded.html -%}
 {%- else -%}
@@ -109,5 +123,6 @@
         </div>
     </div>
 </section>
+{%- include _includes/cookies.html -%}
 </body>
 </html>
diff --git a/cookies.html b/cookies.html
@@ -3,10 +3,103 @@
 ---
 
 <!-- Section: Cookies -->
-<section id="cookies">
+<section class="cookies">
     <div class="wrapper">
         <h1><span class="material-icons">cookie</span>Cookies Policy</h1>
 
-        <p>We currently do not store any cookies on your browser.</p>
+        <p>Our website uses cookies to help it function and to improve it. Cookies are small files saved to
+            the user’s computer’s hard drive that track, save and store information about the user’s
+            interactions and usage of the website.</p>
+
+        <p>We use cookies to improve our services, provide specific functionality and track how our
+            website is used. Below is a list of the features we use, how cookies are used and also what
+            3rd party services may store cookies. If you continue to use this website or click
+            <b>"accept"</b> on the privacy policy popup, you will be agreeing to our use of cookies and
+            both "essential" and "performance" cookies/services listed below will be enabled. If you
+            click <b>"reject"</b>, we will disable all cookies but some elements of our website
+            may not function correctly or will be disabled.</p>
+
+        <p>We also use some third-party widgets on the site, such as Google Analytics and Twitter.
+            These widgets may set cookies. However, the cookie information from each of these sites
+            is usually anonymous, unless you are logged in to those third-party systems while you
+            are on our site.</p>
+
+        <button class="cookies-accepted-change">Change Your Cookie Settings</button>
+
+        <h2>Essential Cookies</h2>
+
+        <h3>syclops.org Privacy Policy Acceptance</h3>
+        <p>We will set a cookie to determine if you are blocking specific access to cookies across
+            this site.</p>
+
+        <table>
+            <thead>
+            <tr>
+                <th>Cookie Name</th>
+                <th>Whats It For?</th>
+                <th>Type</th>
+            </tr>
+            </thead>
+            <tr>
+                <td>cookies-accepted</td>
+                <td>Used to determine if you have accepted (or not) cookies on this site.</td>
+                <td>
+                    <div class="tag">1st Party Cookie</div>
+                </td>
+            </tr>
+        </table>
+
+        <h3>Google Analytics</h3>
+
+        <p>We use Google Analytics to track how our website is used to help us improve our
+            services. Google Analytics will often set a tracking cookie on your system.</p>
+
+        <p><b>Please note </b> that we have enabled "anonymous" mode on Google Analytics. As a result,
+            we do not store any information that directly identifies you but we can still capture visitor
+            interactions. If you wish to disable these completely, please reject them using the button
+            above.</p>
+
+        <p><a href="https://policies.google.com/privacy" target="_blank">
+            View Google's Privacy Policy</a></p>
+
+        <table>
+            <thead>
+            <tr>
+                <th>Cookie Name</th>
+                <th>Whats It For?</th>
+                <th>Type</th>
+            </tr>
+            </thead>
+            <tr>
+                <td>_ga</td>
+                <td>Used to distinguish users.</td>
+                <td>
+                    <div class="tag">1st Party Cookie</div>
+                </td>
+            </tr>
+            <tr>
+                <td>_gid</td>
+                <td>Used to distinguish users.</td>
+                <td>
+                    <div class="tag">1st Party Cookie</div>
+                </td>
+            </tr>
+            <tr>
+                <td>_ga_&lt;container-id&gt;</td>
+                <td>Used to persist session state.</td>
+                <td>
+                    <div class="tag">1st Party Cookie</div>
+                </td>
+            </tr>
+            <tr>
+                <td>_gac_gb_&lt;container-id&gt;</td>
+                <td>Contains campaign related information. If you have linked your Google
+                    Analytics and Google Ads accounts, Google Ads website conversion tags will
+                    read this cookie unless you opt-out.</td>
+                <td>
+                    <div class="tag">1st Party Cookie</div>
+                </td>
+            </tr>
+        </table>
     </div>
 </section>
diff --git a/privacy.html b/privacy.html
@@ -65,6 +65,7 @@ <h2>Where your information is stored</h2>
             <li>Formspree</li>
             <li>Microsoft Office 365</li>
             <li>JIRA</li>
+            <li>Google Analytics (limited information, if accepted)</li>
         </ul>
 
         <h2>Your data protection rights</h2>

diff --git a/static/css/styled.scss b/static/css/styled.scss
@@ -39,11 +39,46 @@ body {
         opacity: .5;
     }
 
+    table {
+        thead {
+            tr {
+                background-color: var(--hint-color);
+                color: white;
+
+                th {
+                    padding: 1rem 0;
+                }
+            }
+        }
+
+        td {
+            padding: .5rem;
+        }
+    }
+
     .wrapper {
         margin: auto;
         max-width: 1300px;
     }
 
+    button {
+        padding: 1rem;
+        font-size: 1rem;
+        border: 0;
+        background-color: var(--hint-color);
+        color: white;
+        border-radius: 6px;
+        cursor: pointer;
+        opacity: .8;
+        transition: .1s all;
+        display: block;
+
+        &:hover {
+            opacity: 1;
+            transform: scale(1.05);
+        }
+    }
+
     section {
         padding: 4rem 2rem;
         position: relative;
@@ -263,21 +298,6 @@ body {
         textarea {
             min-height: 300px;
         }
-
-        button {
-            padding: 1rem;
-            border: 0;
-            background-color: var(--hint-color);
-            color: white;
-            border-radius: 6px;
-            cursor: pointer;
-            opacity: .8;
-            transition: .1s all;
-
-            :hover {
-                opacity: 1;
-            }
-        }
     }
 
     /**
@@ -857,4 +877,75 @@ body {
             }
         }
     }
+
+    /**
+     * Popup: EU Cookie
+     */
+    #cookies-accept-dialog {
+        background-color: rgba(0, 3, 14, .9);
+        backdrop-filter: blur(30px);
+        color: white;
+        width: 100%;
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        z-index: 99999999999999;
+        box-sizing: border-box;
+        font-size: 1rem;
+        border-radius: 12px;
+        display: none;
+
+        @media screen and (min-width: 45rem) {
+            & {
+                background-color: rgba(0, 0, 0, .8);
+                width: 400px;
+                bottom: 2rem;
+                right: 2rem;
+                left: auto;
+            }
+        }
+
+        h1, h2, p, ul {
+            padding: 0;
+            margin: 0;
+        }
+
+        > div {
+            padding: 2rem;
+        }
+
+        > div h1,
+        > div p {
+            padding-bottom: 1rem;
+        }
+
+        ul {
+            padding-bottom: 1rem;
+            list-style: none;
+            color: #ccc;
+
+            li a {
+                padding: 0.3rem;
+                display: block;
+            }
+
+            li:not(:last-of-type) {
+                border-bottom: rgba(255, 255, 255, .1) 1px solid;
+            }
+        }
+
+        .buttons {
+            display: flex;
+            gap: .5rem;
+
+            button {
+                flex: 1;
+
+                &.reject {
+                    background-color: #444;
+                }
+            }
+        }
+    }
 }
diff --git a/static/js/index.js b/static/js/index.js
@@ -0,0 +1,13 @@
+$(() => {
+    const cookies = $('#cookies-accept-dialog').CookiesAccepted();
+
+    if(cookies.isEnabled()) {
+        // Google Analytics
+        const gaToken = $('body').data('ga');
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', gaToken);
+        $.getScript('https://www.googletagmanager.com/gtag/js?id=' + gaToken);
+    }
+});