Skip to content

Commit e94d750

Browse files
egekorkanegekorkan
authored
Merge pull request #74 from SergioCasCeb/patch-1
Implementing Google Analytics
2 parents c0ca0f3 + a90a594 commit e94d750

File tree

5 files changed

+146
-47
lines changed

5 files changed

+146
-47
lines changed

‎themes/thingweb/layouts/partials/footer.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@
4141
<a href="http://www.eclipse.org/legal/copyright.php">Copyright Agent</a>
4242
<span>|</span>
4343
<a href="http://www.eclipse.org/legal">Legal</a>
44+
<span>|</span>
45+
<a href="#" class="manage-cookies-link">Manage Consent</a>
4446
</p>
4547
<br />
4648
<a href="https://www.eclipse.org">
@@ -57,9 +59,25 @@
5759
</div>
5860
</footer>
5961

62+
<div class="analytics-banner hidden">
63+
<div class="analytics-banner__disclaimer">
64+
<h4>Site Analytics Consent</h4>
65+
<p>We are an open-source project under the Eclipse Foundation. This means that without your consent
66+
we don't track anything at all and even with consent we don't track any personal information, we
67+
only look at the website usage statistics. For more details, check out the <a
68+
href="https://www.eclipse.org/legal/privacy.php">Eclipse Foundation Privacy Policy.</a></p>
69+
<p>You can change your preference later at the <b>Manage Consent</b> link in the footer.</p>
70+
</div>
71+
<form action="#" class="analytics-banner__interactions">
72+
<button type="button" class="decline-btn" id="decline-analytics-btn">Decline</button>
73+
<button type="button" class="accept-btn" id="accept-analytics-btn">Allow</button>
74+
</form>
75+
</div>
76+
6077
<script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
6178
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
6279
<script type="text/javascript" src="/js/custom.js"></script>
80+
<script type="text/javascript" src="/js/consent-banner.js"></script>
6381
<script type="text/javascript" src="/js/owl.carousel.js"></script>
6482
</div>
6583
</div>

‎themes/thingweb/layouts/partials/head.html‎

Lines changed: 32 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,38 @@
11
<head>
2-
<!-- Google tag (gtag.js) -->
3-
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FTBPVB8Z65"></script>
4-
<script>
5-
window.dataLayer = window.dataLayer || [];
6-
function gtag(){dataLayer.push(arguments);}
7-
gtag('js', new Date());
2+
<meta charset="utf-8" />
83

9-
gtag('config', 'G-FTBPVB8Z65');
10-
</script>
11-
<meta charset="utf-8" />
12-
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
4+
<title> Eclipse Thingweb </title>
5+
<meta name="description"
6+
content="Eclipse Thingweb node-wot provides Node.js packages for Web of Things (WoT) implementations which are standardized building blocks for IoT applications" />
7+
<meta name="author" content="Eclipse Thingweb node-wot team" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
139

14-
<title> Eclipse Thingweb </title>
15-
<meta name="description"
16-
content="Eclipse Thingweb node-wot provides Node.js packages for Web of Things (WoT) implementations which are standardized building blocks for IoT applications" />
17-
<meta name="author" content="Eclipse Thingweb node-wot team" />
18-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
10+
<!-- CSS -->
11+
<link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.css" />
12+
<link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap-theme.css" />
13+
<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
14+
<link rel="stylesheet" type="text/css" media="screen" href="/css/hover.css" />
15+
<link rel="stylesheet" type="text/css" media="screen" href="/css/hover-min.css" />
16+
<link rel="stylesheet" type="text/css" media="screen" href="/css/owl.carousel.css" />
17+
<link rel="stylesheet" type="text/css" media="screen" href="/css/owl.theme.default.min.css" />
18+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
19+
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700" rel="stylesheet" />
20+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet" />
1921

20-
<!-- CSS -->
21-
<link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.css" />
22-
<link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap-theme.css" />
23-
<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
24-
<link rel="stylesheet" type="text/css" media="screen" href="/css/hover.css" />
25-
<link rel="stylesheet" type="text/css" media="screen" href="/css/hover-min.css" />
26-
<link rel="stylesheet" type="text/css" media="screen" href="/css/owl.carousel.css" />
27-
<link rel="stylesheet" type="text/css" media="screen" href="/css/owl.theme.default.min.css" />
28-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
29-
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,600,700" rel="stylesheet" />
30-
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet" />
22+
<!-- FAVICONS -->
23+
<link rel="shortcut icon" href="/img/favicon/favicon.png" type="image/png" />
24+
<link rel="icon" href="/img/favicon/favicon.png" type="image/png" />
3125

32-
<!-- FAVICONS -->
33-
<link rel="shortcut icon" href="/img/favicon/favicon.png" type="image/png" />
34-
<link rel="icon" href="/img/favicon/favicon.png" type="image/png" />
26+
<!-- Google Consent Default State -->
27+
<script type="text/javascript" src="/js/default-consent.js"></script>
28+
<!-- Google tag (gtag.js) -->
29+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FTBPVB8Z65"></script>
30+
<script>
31+
window.dataLayer = window.dataLayer || [];
32+
function gtag() { dataLayer.push(arguments); }
33+
gtag('js', new Date());
34+
gtag('config', 'G-FTBPVB8Z65');
35+
</script>
36+
<!-- Google tag end -->
3537

36-
<!-- Google Site Verification -->
37-
<meta name="google-site-verification" content="086kyR2UJR794fn8Z97o9QMEJLOqCoVhPIqxYtZBSA4" />
38-
39-
</head>
38+
</head>

‎themes/thingweb/static/css/style.css‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,6 @@ h6 {font-size:12px;}
9999
.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%;}
100100

101101

102-
103-
104-
105-
106102
/*footer*/
107103
footer { background: #141414 ; padding:5px 0 45px; }
108104
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; }
117113
.footer-shape { margin-top:20px; }
118114

119115

116+
/*Analytics Banner*/
117+
.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'; }
118+
.analytics-banner.hidden { display: none; }
119+
.analytics-banner__disclaimer { color: #eeeeee; margin-bottom: 1rem; }
120+
.analytics-banner__disclaimer h4{ color: #33b8a4; font-weight: 700; margin-bottom: 1rem; text-transform: uppercase; }
121+
.analytics-banner__disclaimer p{ margin-bottom: 1rem; }
122+
.analytics-banner__disclaimer p a{ color: #838383; text-decoration: underline; }
123+
.analytics-banner__interactions { display: flex; align-items: center; justify-content: left; gap: 1rem; }
124+
.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; }
125+
.analytics-banner__interactions button:hover{ background-color: #2d9687; color: #ffffff; border-color: #2d9687; }
126+
.analytics-banner__interactions .accept-btn{ background-color: #33b8a4; }
127+
.analytics-banner__interactions .decline-btn{ background-color: transparent; color: #33b8a4; }
128+
129+
120130
/*Responsive*/
121131

122132
@media (max-width: 1320px)
123-
124133
{
125134
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;}
126135
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; }
139148
.wel-holder h1 { color: #1a1818; font-size: 28px; text-transform: uppercase; font-weight: 700; font-family: "Open Sans"; padding-top: 20px;}
140149

141150
.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%;}
142-
.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%;}
151+
.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%;}
143152

144-
header .mainmenu { position:relative; top:0px; }
153+
header .mainmenu { position:relative; top:0px; }
145154

146155
.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%;}
147156
.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; }
150159
}
151160

152161
@media (max-width: 1023px)
153-
154162
{
155163
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;}
156164
header .mainmenu .navbar { margin: 0px; padding: 0; text-align: right; margin-top: 10px;}
@@ -168,10 +176,9 @@ header .mainmenu { position:relative; top:0px; }
168176
.test-bottom h5 { color: #414141; font-size: 10px; font-family: 'Open Sans';}
169177
.test-bottom h6 { color: #414141; font-size: 8px; font-family: 'Open Sans';}
170178
*/
171-
}
179+
}
172180

173181
@media (max-width: 767px)
174-
175182
{
176183
header .header-bottom .carousel-content-panel { display:none; }
177184
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; }
193200
.project-holder h1 {color: black; font-size: 28px; text-transform: uppercase; font-weight: 700; font-family: "Open Sans"; padding-bottom: 0;} /* color: #ffffff; */
194201

195202
.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;}
196-
.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;}
203+
.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;}
197204
.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;}
198205
.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;}
199-
.pro-all { background: #fff; margin: 45px 0 0; padding: 10px;}
206+
.pro-all { background: #fff; margin: 45px 0 0; padding: 10px;}
200207
.web-sh.sp1 { position: absolute; z-index: 9999; width: 100%; top: -2px;}
201208
.why-sh { position: relative; top: -2px;}
202209
.why-sh.sp { position: relative; top: 2px;}
@@ -213,7 +220,6 @@ header .mainmenu { position:relative; top:0px; }
213220
border-radius: 0.25rem;
214221
color: #fff;
215222
margin-left: auto;
216-
}
217-
223+
}
218224

219225
}

‎themes/thingweb/static/js/consent-banner.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
const analyticsAcceptBtn = document.getElementById("accept-analytics-btn")
2+
const analyticsDeclineBtn = document.getElementById("decline-analytics-btn")
3+
const cookieBanner = document.querySelector(".analytics-banner")
4+
const manageCookiesLink = document.querySelector(".manage-cookies-link")
5+
6+
// Show banner if the user has not set any preference
7+
if(localStorage.getItem('consentMode') === null){
8+
cookieBanner.classList.remove("hidden")
9+
}
10+
11+
//If analytics are rejected, close the banner and update the new user preference
12+
analyticsDeclineBtn.addEventListener("click", () => {
13+
cookieBanner.classList.add("hidden")
14+
15+
const consentPreferences = {
16+
'ad_storage': 'denied',
17+
'analytics_storage': 'denied',
18+
'ad_user_data': 'denied',
19+
'ad_personalization': 'denied',
20+
'personalization_storage': 'denied',
21+
'functionality_storage': 'denied',
22+
'security_storage': 'denied',
23+
}
24+
25+
updateConsentMode(consentPreferences)
26+
})
27+
28+
//If analytics are accepted, close the banner and update the new user preference
29+
analyticsAcceptBtn.addEventListener("click", () => {
30+
cookieBanner.classList.add("hidden")
31+
32+
const consentPreferences = {
33+
'ad_storage': 'denied',
34+
'analytics_storage': 'granted',
35+
'ad_user_data': 'denied',
36+
'ad_personalization': 'denied',
37+
'personalization_storage': 'denied',
38+
'functionality_storage': 'denied',
39+
'security_storage': 'denied',
40+
}
41+
42+
updateConsentMode(consentPreferences)
43+
})
44+
45+
// Open analytics banner when clicking on the cookie manager link
46+
manageCookiesLink.addEventListener("click", () => {
47+
cookieBanner.classList.remove("hidden")
48+
})
49+
50+
/**
51+
* Update the user preferences to grant or decline google analytics tracking
52+
* @param { Object } preferences
53+
*/
54+
function updateConsentMode(preferences) {
55+
gtag('consent', 'update', preferences)
56+
localStorage.setItem('consentMode', JSON.stringify(preferences))
57+
}

‎themes/thingweb/static/js/default-consent.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
window.dataLayer = window.dataLayer || [];
2+
function gtag() {
3+
dataLayer.push(arguments);
4+
}
5+
6+
if (localStorage.getItem('consentMode') === null) {
7+
gtag('consent', 'default', {
8+
'ad_storage': 'denied',
9+
'analytics_storage': 'denied',
10+
'ad_user_data': 'denied',
11+
'ad_personalization': 'denied',
12+
'personalization_storage': 'denied',
13+
'functionality_storage': 'denied',
14+
'security_storage': 'denied',
15+
});
16+
}
17+
else {
18+
gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')))
19+
}

0 commit comments

Comments
 (0)