From 18706c44c291ff2510acf6d4255940b383aed908 Mon Sep 17 00:00:00 2001 From: Scott Straughan Date: Tue, 9 Jan 2024 12:24:51 +0000 Subject: [PATCH] Added support for Google Analytics. --- _configs/_config.yml | 3 + _configs/_config_production.yml | 3 + _includes/cookies.html | 17 ++++ _layouts/page.html | 23 +++++- cookies.html | 97 +++++++++++++++++++++- privacy.html | 1 + static/css/styled.scss | 121 ++++++++++++++++++++++++---- static/js/index.js | 13 +++ static/js/jquery.cookiesaccepted.js | 79 ++++++++++++++++++ 9 files changed, 336 insertions(+), 21 deletions(-) create mode 100644 _includes/cookies.html create mode 100644 static/js/index.js create mode 100644 static/js/jquery.cookiesaccepted.js diff --git a/_configs/_config.yml b/_configs/_config.yml index 5a50b2a..96aaf80 100644 --- 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 index 9e7b901..8ee45a6 100644 --- 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 new file mode 100644 index 0000000..0afc5d1 --- /dev/null +++ b/_includes/cookies.html @@ -0,0 +1,17 @@ +
+
+

Cookies

+

Please note that we use cookies on this website to enhance your experience, provide features and to track how + the website is used.

+

Please click accept to accept our privacy & cookie polices or click decline to disable + cookies and related features.

+ +
+ + +
+
+
diff --git a/_layouts/page.html b/_layouts/page.html index 34d0655..54080f4 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -36,6 +36,15 @@ type="image/png" href="{{'favicon.png' | absolute_url}}"/> + + + + + - + {%- if header == 'expanded' -%} {%- include _includes/headers/expanded.html -%} {%- else -%} @@ -109,5 +123,6 @@ +{%- include _includes/cookies.html -%} diff --git a/cookies.html b/cookies.html index 68b8827..962f341 100644 --- a/cookies.html +++ b/cookies.html @@ -3,10 +3,103 @@ --- -
+

cookieCookies Policy

-

We currently do not store any cookies on your browser.

+

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.

+ +

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 + "accept" 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 "reject", we will disable all cookies but some elements of our website + may not function correctly or will be disabled.

+ +

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.

+ + + +

Essential Cookies

+ +

syclops.org Privacy Policy Acceptance

+

We will set a cookie to determine if you are blocking specific access to cookies across + this site.

+ + + + + + + + + + + + + + +
Cookie NameWhats It For?Type
cookies-acceptedUsed to determine if you have accepted (or not) cookies on this site. +
1st Party Cookie
+
+ +

Google Analytics

+ +

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.

+ +

Please note 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.

+ +

+ View Google's Privacy Policy

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Cookie NameWhats It For?Type
_gaUsed to distinguish users. +
1st Party Cookie
+
_gidUsed to distinguish users. +
1st Party Cookie
+
_ga_<container-id>Used to persist session state. +
1st Party Cookie
+
_gac_gb_<container-id>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. +
1st Party Cookie
+
diff --git a/privacy.html b/privacy.html index bdfe8ea..657b147 100644 --- a/privacy.html +++ b/privacy.html @@ -65,6 +65,7 @@

Where your information is stored

  • Formspree
  • Microsoft Office 365
  • JIRA
    • +
  • Google Analytics (limited information, if accepted)

    • Your data protection rights

    diff --git a/static/css/styled.scss b/static/css/styled.scss index 451c2aa..b6123dc 100644 --- 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 new file mode 100644 index 0000000..59744dc --- /dev/null +++ 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); + } +}); diff --git a/static/js/jquery.cookiesaccepted.js b/static/js/jquery.cookiesaccepted.js new file mode 100644 index 0000000..a239662 --- /dev/null +++ b/static/js/jquery.cookiesaccepted.js @@ -0,0 +1,79 @@ +(function ($) { + /** + * Plugin to allow a user to enable or disable cookies, easily. + * @returns {jQuery.CookiesAccepted} + * @constructor + */ + $.fn.CookiesAccepted = function () { + const container = $(this); + const cookieExpiryInDays = 365; + const cookieName = 'cookies-accepted'; + + /** + * Set a cookie. + * @param key + * @param value + */ + function setCookie(key, value) { + const expires = new Date(); + expires.setTime(expires.getTime() + (cookieExpiryInDays * 24 * 60 * 60 * 1000)); + + document.cookie = key + '=' + value + ';expires=' + expires.toUTCString() + ';path=/' + + ';Secure;SameSite=Strict;'; + } + + /** + * Get a cookie. + * @param key + * @returns {string|null} + */ + function getCookie(key) { + const keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)'); + return keyValue ? keyValue[2] : null; + } + + /** + * Initialize the cookie accepted plugin. + */ + function init() { + $(() => { + if (getCookie(cookieName) === null) { + container.show(); + } + + container.find('button.accept').click(function() { + setCookie(cookieName, 'true', cookieExpiryInDays); + container.hide(); + }); + + container.find('button.reject').click(function() { + setCookie(cookieName, 'false', cookieExpiryInDays); + container.hide(); + }); + + $('body').find('.cookies-accepted-change').click(function() { + container.show(); + }); + }); + } + + /** + * Returns true if the user has chosen to enable cookies. If the cookie is not set or is false, will return + * false. + * @returns {boolean} + */ + this.isEnabled = function() { + return getCookie(cookieName) === 'true'; + } + + /** + * Show the poup. + */ + this.show = function() { + alert(); + } + + init(); + return this; + } +})(jQuery);