From c0ca0f3510ba720faafcd3fdb04d99b9262d1e4c Mon Sep 17 00:00:00 2001 From: Ege Korkan Date: Fri, 8 Mar 2024 12:17:31 +0100 Subject: [PATCH 1/5] add google analytics --- themes/thingweb/layouts/partials/head.html | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/themes/thingweb/layouts/partials/head.html b/themes/thingweb/layouts/partials/head.html index be22198..94a22e9 100644 --- a/themes/thingweb/layouts/partials/head.html +++ b/themes/thingweb/layouts/partials/head.html @@ -1,4 +1,13 @@ + + + @@ -27,4 +36,4 @@ - \ No newline at end of file + From c5a7933e043056de93ce373948127a7497dbed3d Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Fri, 12 Apr 2024 14:15:55 +0200 Subject: [PATCH 2/5] Update head.html --- themes/thingweb/layouts/partials/head.html | 1 - 1 file changed, 1 deletion(-) diff --git a/themes/thingweb/layouts/partials/head.html b/themes/thingweb/layouts/partials/head.html index 94a22e9..4941acc 100644 --- a/themes/thingweb/layouts/partials/head.html +++ b/themes/thingweb/layouts/partials/head.html @@ -9,7 +9,6 @@ gtag('config', 'G-FTBPVB8Z65'); - Eclipse Thingweb Date: Tue, 16 Apr 2024 17:10:23 +0200 Subject: [PATCH 3/5] Implemented new consent banner for google analytics --- themes/thingweb/layouts/partials/footer.html | 17 ++++++ themes/thingweb/layouts/partials/head.html | 64 ++++++++++---------- themes/thingweb/static/css/style.css | 34 ++++++----- themes/thingweb/static/js/consent-banner.js | 57 +++++++++++++++++ themes/thingweb/static/js/default-consent.js | 19 ++++++ 5 files changed, 145 insertions(+), 46 deletions(-) create mode 100644 themes/thingweb/static/js/consent-banner.js create mode 100644 themes/thingweb/static/js/default-consent.js diff --git a/themes/thingweb/layouts/partials/footer.html b/themes/thingweb/layouts/partials/footer.html index b0c6be1..67b662a 100644 --- a/themes/thingweb/layouts/partials/footer.html +++ b/themes/thingweb/layouts/partials/footer.html @@ -41,6 +41,8 @@ Copyright Agent | Legal + | + Manage Cookies


@@ -57,9 +59,24 @@ + + + \ No newline at end of file diff --git a/themes/thingweb/layouts/partials/head.html b/themes/thingweb/layouts/partials/head.html index 4941acc..ca467c6 100644 --- a/themes/thingweb/layouts/partials/head.html +++ b/themes/thingweb/layouts/partials/head.html @@ -1,38 +1,38 @@ - - - - + Eclipse Thingweb + + + - Eclipse Thingweb - - - + + + + + + + + + + + - - - - - - - - - - - + + + - - - + + + + + + - - - - + \ No newline at end of file diff --git a/themes/thingweb/static/css/style.css b/themes/thingweb/static/css/style.css index dfa1556..ee923de 100644 --- a/themes/thingweb/static/css/style.css +++ b/themes/thingweb/static/css/style.css @@ -99,10 +99,6 @@ h6 {font-size:12px;} .test-holder .owl-next{ background:url(img/icons/pro-2.png) no-repeat !important; text-indent:-9999px; width:28px; height:57px; border:none !important; position:absolute; right:-65px; bottom:42%;} - - - - /*footer*/ footer { background: #141414 ; padding:5px 0 45px; } footer .container.sp { background:url(img/others/foot-logo.png) center right no-repeat; padding:25px 15px; } @@ -117,10 +113,23 @@ footer .copy p a { color:#fff; text-decoration:none; } .footer-shape { margin-top:20px; } +/*Analytics Banner*/ +.analytics-banner { position: fixed; bottom: 0; left: 0; width: 100%; padding: 2rem; text-align: left; background-color: #141414; box-shadow: 0px -5px 10px #7f7f7f73; font-family: 'Open Sans'; } +.analytics-banner.hidden { display: none; } +.analytics-banner__disclaimer { color: #eeeeee; margin-bottom: 1rem; } +.analytics-banner__disclaimer h4{ color: #33b8a4; font-weight: 700; margin-bottom: 1rem; text-transform: uppercase; } +.analytics-banner__disclaimer p{ margin-bottom: 0; } +.analytics-banner__disclaimer p a{ color: #838383; text-decoration: underline; } +.analytics-banner__interactions { display: flex; align-items: center; justify-content: left; gap: 1rem; } +.analytics-banner__interactions button{ padding: 0.35rem 1.5rem; border: none; cursor: pointer; font-weight: 600; color: #ffffff; border-radius: 50vw; border: 2px solid #33b8a4; transition: all 250ms ease-in-out; } +.analytics-banner__interactions button:hover{ background-color: #2d9687; color: #ffffff; border-color: #2d9687; } +.analytics-banner__interactions .accept-btn{ background-color: #33b8a4; } +.analytics-banner__interactions .decline-btn{ background-color: transparent; color: #33b8a4; } + + /*Responsive*/ @media (max-width: 1320px) - { header .mainmenu nav.navbar .navbar-nav li.nav-item a.nav-link { font-family: 'Open Sans'; font-size: 14px; color: #676767; font-weight: 600; text-transform: uppercase; padding: 5px 11px;} header .mainmenu .navbar { margin: 0px; padding: 0; text-align: right; margin-top: 18px;} @@ -139,9 +148,9 @@ footer .copy p a { color:#fff; text-decoration:none; } .wel-holder h1 { color: #1a1818; font-size: 28px; text-transform: uppercase; font-weight: 700; font-family: "Open Sans"; padding-top: 20px;} .project-holder .owl-prev{ background:url(img/icons/our-1.png) no-repeat !important; text-indent:-9999px; width:28px; height:57px; border:none !important; position:absolute; left:-35px; bottom:42%;} -.project-holder .owl-next{ background:url(img/icons/our-2.png) no-repeat !important; text-indent:-9999px; width:28px; height:57px; border:none !important; position:absolute; right:-35px; bottom:42%;} + .project-holder .owl-next{ background:url(img/icons/our-2.png) no-repeat !important; text-indent:-9999px; width:28px; height:57px; border:none !important; position:absolute; right:-35px; bottom:42%;} -header .mainmenu { position:relative; top:0px; } + header .mainmenu { position:relative; top:0px; } .test-holder .owl-prev{ background:url(img/icons/pro-1.png) no-repeat !important; text-indent:-9999px; width:28px; height:57px; border:none !important; position:absolute; left:-35px; bottom:42%;} .test-holder .owl-next{ background:url(img/icons/pro-2.png) no-repeat !important; text-indent:-9999px; width:28px; height:57px; border:none !important; position:absolute; right:-35px; bottom:42%;} @@ -150,7 +159,6 @@ header .mainmenu { position:relative; top:0px; } } @media (max-width: 1023px) - { header .mainmenu nav.navbar .navbar-nav li.nav-item a.nav-link { font-family: 'Open Sans'; font-size: 12px; color: #676767; font-weight: 600; text-transform: uppercase; padding: 5px 5px;} header .mainmenu .navbar { margin: 0px; padding: 0; text-align: right; margin-top: 10px;} @@ -168,10 +176,9 @@ header .mainmenu { position:relative; top:0px; } .test-bottom h5 { color: #414141; font-size: 10px; font-family: 'Open Sans';} .test-bottom h6 { color: #414141; font-size: 8px; font-family: 'Open Sans';} */ - } +} @media (max-width: 767px) - { header .header-bottom .carousel-content-panel { display:none; } header .navbar-expand-md .navbar-nav { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-left: auto;} @@ -193,10 +200,10 @@ header .mainmenu { position:relative; top:0px; } .project-holder h1 {color: black; font-size: 28px; text-transform: uppercase; font-weight: 700; font-family: "Open Sans"; padding-bottom: 0;} /* color: #ffffff; */ .project-holder .owl-prev{ background:url(img/icons/our-1.png) no-repeat !important; text-indent:-9999px; width:28px; height:57px; border:none !important; position:absolute; left:-05px; top:-45px;} -.project-holder .owl-next{ background:url(img/icons/our-2.png) no-repeat !important; text-indent:-9999px; width:28px; height:57px; border:none !important; position:absolute; right:-05px; top:-45px;} + .project-holder .owl-next{ background:url(img/icons/our-2.png) no-repeat !important; text-indent:-9999px; width:28px; height:57px; border:none !important; position:absolute; right:-05px; top:-45px;} .test-holder .owl-prev{ background:url(img/icons/pro-1.png) no-repeat !important; text-indent:-9999px; width:28px; height:57px; border:none !important; position:absolute; left:-05px; top:-75px;} .test-holder .owl-next{ background:url(img/icons/pro-2.png) no-repeat !important; text-indent:-9999px; width:28px; height:57px; border:none !important; position:absolute; right:-05px; top:-75px;} -.pro-all { background: #fff; margin: 45px 0 0; padding: 10px;} + .pro-all { background: #fff; margin: 45px 0 0; padding: 10px;} .web-sh.sp1 { position: absolute; z-index: 9999; width: 100%; top: -2px;} .why-sh { position: relative; top: -2px;} .why-sh.sp { position: relative; top: 2px;} @@ -213,7 +220,6 @@ header .mainmenu { position:relative; top:0px; } border-radius: 0.25rem; color: #fff; margin-left: auto; -} - + } } \ No newline at end of file diff --git a/themes/thingweb/static/js/consent-banner.js b/themes/thingweb/static/js/consent-banner.js new file mode 100644 index 0000000..3b9086f --- /dev/null +++ b/themes/thingweb/static/js/consent-banner.js @@ -0,0 +1,57 @@ +const analyticsAcceptBtn = document.getElementById("accept-analytics-btn") +const analyticsDeclineBtn = document.getElementById("decline-analytics-btn") +const cookieBanner = document.querySelector(".analytics-banner") +const manageCookiesLink = document.querySelector(".manage-cookies-link") + +// Show banner if the user has not set any preference +if(localStorage.getItem('consentMode') === null){ + cookieBanner.classList.remove("hidden") +} + +//If analytics are rejected, close the banner and update the new user preference +analyticsDeclineBtn.addEventListener("click", () => { + cookieBanner.classList.add("hidden") + + const consentPreferences = { + 'ad_storage': 'denied', + 'analytics_storage': 'denied', + 'ad_user_data': 'denied', + 'ad_personalization': 'denied', + 'personalization_storage': 'denied', + 'functionality_storage': 'denied', + 'security_storage': 'denied', + } + + updateConsentMode(consentPreferences) +}) + +//If analytics are accepted, close the banner and update the new user preference +analyticsAcceptBtn.addEventListener("click", () => { + cookieBanner.classList.add("hidden") + + const consentPreferences = { + 'ad_storage': 'denied', + 'analytics_storage': 'granted', + 'ad_user_data': 'denied', + 'ad_personalization': 'denied', + 'personalization_storage': 'denied', + 'functionality_storage': 'denied', + 'security_storage': 'denied', + } + + updateConsentMode(consentPreferences) +}) + +// Open analytics banner when clicking on the cookie manager link +manageCookiesLink.addEventListener("click", () => { + cookieBanner.classList.remove("hidden") +}) + +/** + * Update the user preferences to grant or decline google analytics tracking + * @param { Object } preferences + */ +function updateConsentMode(preferences) { + gtag('consent', 'update', preferences) + localStorage.setItem('consentMode', JSON.stringify(preferences)) +} \ No newline at end of file diff --git a/themes/thingweb/static/js/default-consent.js b/themes/thingweb/static/js/default-consent.js new file mode 100644 index 0000000..5034abd --- /dev/null +++ b/themes/thingweb/static/js/default-consent.js @@ -0,0 +1,19 @@ +window.dataLayer = window.dataLayer || []; +function gtag() { + dataLayer.push(arguments); +} + +if (localStorage.getItem('consentMode') === null) { + gtag('consent', 'default', { + 'ad_storage': 'denied', + 'analytics_storage': 'denied', + 'ad_user_data': 'denied', + 'ad_personalization': 'denied', + 'personalization_storage': 'denied', + 'functionality_storage': 'denied', + 'security_storage': 'denied', + }); +} +else { + gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode'))) +} \ No newline at end of file From 286e8b4f1ca3d6e33f500c5efe74c5fe4e854948 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Tue, 16 Apr 2024 20:15:03 +0200 Subject: [PATCH 4/5] Fixed the overlay of the header and the consent banner --- themes/thingweb/static/css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/thingweb/static/css/style.css b/themes/thingweb/static/css/style.css index ee923de..cb0b5aa 100644 --- a/themes/thingweb/static/css/style.css +++ b/themes/thingweb/static/css/style.css @@ -114,7 +114,7 @@ footer .copy p a { color:#fff; text-decoration:none; } /*Analytics Banner*/ -.analytics-banner { position: fixed; bottom: 0; left: 0; width: 100%; padding: 2rem; text-align: left; background-color: #141414; box-shadow: 0px -5px 10px #7f7f7f73; font-family: 'Open Sans'; } +.analytics-banner { position: fixed; bottom: 0; left: 0; z-index: 99999; width: 100%; padding: 2rem; text-align: left; background-color: #141414; box-shadow: 0px -5px 10px #7f7f7f73; font-family: 'Open Sans'; } .analytics-banner.hidden { display: none; } .analytics-banner__disclaimer { color: #eeeeee; margin-bottom: 1rem; } .analytics-banner__disclaimer h4{ color: #33b8a4; font-weight: 700; margin-bottom: 1rem; text-transform: uppercase; } From a90a594623eb4bb28d618ef8903c14ba59d8f7ba Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Fri, 19 Apr 2024 13:40:08 +0200 Subject: [PATCH 5/5] Changed consent banner text --- themes/thingweb/layouts/partials/footer.html | 7 ++++--- themes/thingweb/static/css/style.css | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/themes/thingweb/layouts/partials/footer.html b/themes/thingweb/layouts/partials/footer.html index 67b662a..b7b0775 100644 --- a/themes/thingweb/layouts/partials/footer.html +++ b/themes/thingweb/layouts/partials/footer.html @@ -42,7 +42,7 @@ | Legal | - Manage Cookies + Manage Consent


@@ -61,11 +61,12 @@