Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Google analytics #73

Merged
merged 6 commits into from
Apr 23, 2024
Merged

Google analytics #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c0ca0f3
add google analytics
egekorkan Mar 8, 2024
c5a7933
Update head.html
SergioCasCeb Apr 12, 2024
d703515
Implemented new consent banner for google analytics
SergioCasCeb Apr 16, 2024
286e8b4
Fixed the overlay of the header and the consent banner
SergioCasCeb Apr 16, 2024
a90a594
Changed consent banner text
SergioCasCeb Apr 19, 2024
e94d750
Merge pull request #74 from SergioCasCeb/patch-1
egekorkan Apr 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions themes/thingweb/layouts/partials/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@
<a href="http://www.eclipse.org/legal/copyright.php">Copyright Agent</a>
<span>|</span>
<a href="http://www.eclipse.org/legal">Legal</a>
<span>|</span>
<a href="#" class="manage-cookies-link">Manage Consent</a>
</p>
<br />
<a href="https://www.eclipse.org">
Expand All @@ -57,9 +59,25 @@
</div>
</footer>

<div class="analytics-banner hidden">
<div class="analytics-banner__disclaimer">
<h4>Site Analytics Consent</h4>
<p>We are an open-source project under the Eclipse Foundation. This means that without your consent
we don't track anything at all and even with consent we don't track any personal information, we
only look at the website usage statistics. For more details, check out the <a
href="https://www.eclipse.org/legal/privacy.php">Eclipse Foundation Privacy Policy.</a></p>
<p>You can change your preference later at the <b>Manage Consent</b> link in the footer.</p>
</div>
<form action="#" class="analytics-banner__interactions">
<button type="button" class="decline-btn" id="decline-analytics-btn">Decline</button>
<button type="button" class="accept-btn" id="accept-analytics-btn">Allow</button>
</form>
</div>

<script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/custom.js"></script>
<script type="text/javascript" src="/js/consent-banner.js"></script>
<script type="text/javascript" src="/js/owl.carousel.js"></script>
</div>
</div>
54 changes: 31 additions & 23 deletions themes/thingweb/layouts/partials/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,38 @@
<head>
<meta charset="utf-8" />
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
<meta charset="utf-8" />

<title> Eclipse Thingweb </title>
<meta name="description"
content="Eclipse Thingweb node-wot provides Node.js packages for Web of Things (WoT) implementations which are standardized building blocks for IoT applications" />
<meta name="author" content="Eclipse Thingweb node-wot team" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title> Eclipse Thingweb </title>
<meta name="description"
content="Eclipse Thingweb node-wot provides Node.js packages for Web of Things (WoT) implementations which are standardized building blocks for IoT applications" />
<meta name="author" content="Eclipse Thingweb node-wot team" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<!-- CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/hover.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/hover-min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/owl.carousel.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/owl.theme.default.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/hover.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/hover-min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/owl.carousel.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/owl.theme.default.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet" />

<!-- FAVICONS -->
<link rel="shortcut icon" href="/img/favicon/favicon.png" type="image/png" />
<link rel="icon" href="/img/favicon/favicon.png" type="image/png" />
<!-- FAVICONS -->
<link rel="shortcut icon" href="/img/favicon/favicon.png" type="image/png" />
<link rel="icon" href="/img/favicon/favicon.png" type="image/png" />

<!-- Google Site Verification -->
<meta name="google-site-verification" content="086kyR2UJR794fn8Z97o9QMEJLOqCoVhPIqxYtZBSA4" />
<!-- Google Consent Default State -->
<script type="text/javascript" src="/js/default-consent.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FTBPVB8Z65"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-FTBPVB8Z65');
</script>
<!-- Google tag end -->

</head>
34 changes: 20 additions & 14 deletions themes/thingweb/static/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand All @@ -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; 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; }
.analytics-banner__disclaimer p{ margin-bottom: 1rem; }
.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;}
Expand All @@ -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%;}
Expand All @@ -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;}
Expand All @@ -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;}
Expand All @@ -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;}
Expand All @@ -213,7 +220,6 @@ header .mainmenu { position:relative; top:0px; }
border-radius: 0.25rem;
color: #fff;
margin-left: auto;
}

}

}
57 changes: 57 additions & 0 deletions themes/thingweb/static/js/consent-banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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))
}
19 changes: 19 additions & 0 deletions themes/thingweb/static/js/default-consent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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')))
}