Skip to content

Commit

Permalink
Implemented the analytics consent banner for Playground
Browse files Browse the repository at this point in the history
  • Loading branch information
@SergioCasCeb
SergioCasCeb committed Apr 30, 2024
1 parent 9e165ac commit cdacaba
Show file tree
Hide file tree
Showing 5 changed files with 204 additions and 15 deletions.
57 changes: 57 additions & 0 deletions packages/web/src/scripts/consent-banner.js
View file
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 analyticsBanner = document.getElementById("analytics-banner")
const manageAnalyticsLink = document.getElementById("consent-link")

// Show banner if the user has not set any preference
if(localStorage.getItem('consentMode') === null){
analyticsBanner.classList.remove("hidden")
}

// Open analytics banner when clicking on the cookie manager link
manageAnalyticsLink.addEventListener("click", () => {
analyticsBanner.classList.remove("hidden")
})

//If analytics are rejected, close the banner and update the new user preference
analyticsDeclineBtn.addEventListener("click", () => {
analyticsBanner.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", () => {
analyticsBanner.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)
})

/**
* Update the user preferences to grant or decline google analytics tracking
* @param { Object } preferences
*/
function updateConsentMode(preferences) {
gtag('consent', 'update', preferences)

Check failure

Code scanning / ESLint

disallow the use of undeclared variables unless mentioned in `/*global */` comments Error

'gtag' is not defined.
localStorage.setItem('consentMode', JSON.stringify(preferences))
}
2 changes: 2 additions & 0 deletions packages/web/src/scripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
* to integrate the monaco editor
*/

import './consent-banner'
import './visualize'
import './editor'
import './json-yaml'
Expand All @@ -34,6 +35,7 @@ import './defaults'
import './visualize'
import './validation'


/***********************************************************/
/* Loader */
/***********************************************************/
Expand Down
19 changes: 11 additions & 8 deletions packages/web/src/styles/_settings-menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
flex-direction: column;
align-items: center;
justify-content: space-between;
z-index: 100;
z-index: 80;

.settings {
width: 100%;
Expand Down Expand Up @@ -72,7 +72,6 @@

label {
font-size: var(--fs-p);
max-width: 10ch;
}

input[type="checkbox"] {
Expand Down Expand Up @@ -261,17 +260,21 @@
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
justify-content: space-between;


a {
font-size: 1.2rem;
padding: 0 1rem;
font-size: 1.1rem;
height: 100%;
text-wrap: nowrap;
font-weight: bold;
}

&:not(:last-child) {
border-right: 1px solid var(--clr-neutral-50);
}
&__separator {
height: 1rem;
width: 1px;
background-color: var(--clr-neutral-50);
margin: 0 .5rem;
}
}
}
Expand Down
85 changes: 81 additions & 4 deletions packages/web/src/styles/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,18 +40,23 @@
--fs-h2: 2.5rem;
--fs-sub-header: 1.75rem;
--fs-p: 1.2rem;
--fs-p-lg: 1.4rem;
--fs-footer: 0.8rem;
--fs-i: 1.4rem;

//responsive font size values
--fs-h1: clamp(2rem, 1.8rem + 0.625vw, 3rem);
--fs-h2: clamp(2rem, 1.8rem + 0.625vw, 3rem);
--fs-h3: clamp(1.5rem, 1.3rem + 0.625vw, 2.5rem);
//Fluid typography values
//Min viewport value: 20rem = 320px
//Max viewport value: 120rem = 1920px
--fs-h1: clamp(2rem, 1.8rem + 1vw, 3rem);
--fs-h2: clamp(2rem, 1.8rem + 1vw, 3rem);
--fs-h3: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
--fs-sub-header: clamp(1.25rem, 1.05rem + 1vw, 2.25rem);
--fs-p: clamp(1rem, 0.92rem + 0.3999999999999999vw, 1.4rem);
--fs-p-lg: clamp(1.2rem, 1.1199999999999999rem + 0.4000000000000002vw, 1.6rem);
--fs-footer: clamp(0.8rem, 0.76rem + 0.19999999999999996vw, 1rem);
--fs-i: clamp(1.2rem, 1.04rem + 0.8vw, 2rem);


/*line heights*/
--lh-h1: 4rem;
--lh-h2: 4rem;
Expand Down Expand Up @@ -405,6 +410,78 @@ main {
}
}

/** Analytics banner **/
.analytics-banner{
position: fixed;
bottom: 0;
left: 0;
z-index: 90;
width: 100%;
padding: 2rem;
background-color: var(--clr-neutral-900);
box-shadow: 0px -5px 10px var(--clr-neutral-300);

&.hidden {
display: none;
}

&__disclaimer {
color: var(--clr-neutral-100);

& > *{
margin-bottom: 1rem;
}

h4 {
font-size: var(--fs-h2);
color: var(--clr-controls-bg);
}

p {
font-size: var(--fs-p-lg);

a {
text-decoration: underline;
color: var(--clr-neutral-300);
}
}
}

&__interactions {
margin-top: 2rem;

button {
appearance:unset;
padding: 0.75rem 1.75rem;
min-width: 9rem;
cursor: pointer;
border: 2px solid var(--clr-controls-bg);
border-radius: 5px;
font-size: var(--fs-p-lg);
font-weight: var(--fw-bold);
transition: all 250ms ease-in-out;

&.decline-btn {
background-color: transparent;
color: var(--clr-controls-bg);
margin-right: 1rem;
}

&.accept-btn{
background-color: var(--clr-controls-bg);
color: var(--clr-controls);
}

&:hover {
background-color: var(--clr-primary-900);
color: var(--clr-controls);
border-color: var(--clr-primary-900);
}
}

}
}

@keyframes fade{
0%{opacity: 1;}
50%{opacity: .1;}
Expand Down
56 changes: 53 additions & 3 deletions packages/web/src/template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,36 @@
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#33b8a4">
<meta name="msapplication-TileColor" content="#33b8a4">
<meta name="theme-color" content="#33b8a4">

<!-- Google Consent Default State -->
<script>
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')))
}
</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>

<body>
Expand Down Expand Up @@ -974,21 +1004,27 @@ <h3 class="settings__preferences">Preferences</h3>

<footer>
<div class="project-links">
<p class="thingweb-link"><a href="https://www.thingweb.io/" target="_blank" id="thingweb-link">© 2024 The Eclipse Thingweb
Project</a></p>
<p class="thingweb-link"><a href="https://www.thingweb.io/" target="_blank" id="thingweb-link">©
2024 The Eclipse Thingweb Project</a></p>
<p class="netlify-link">This site is powered by <a href="https://www.netlify.com" target="_blank"
id="netlify-link">Netlify</a></p>
</div>

<div class="footer-links">
<a href="https://www.eclipse.org" target="_blank" id="eclipse-link">Eclipse</a>
<div class="footer-links__separator"></div>
<a href="https://www.eclipse.org/legal/privacy.php" target="_blank" id="privacy-link">Privacy
Policy</a>
<div class="footer-links__separator"></div>
<a href="https://www.eclipse.org/legal/termsofuse.php" target="_blank" id="terms-link">Terms of
Use</a>
<div class="footer-links__separator"></div>
<a href="https://www.eclipse.org/legal/copyright.php" target="_blank" id="copyright-link">Copyright
Agent</a>
<div class="footer-links__separator"></div>
<a href="https://www.eclipse.org/legal/" target="_blank" id="legal-link">Legal</a>
<div class="footer-links__separator"></div>
<a href="#" id="consent-link">Manage Consent</a>
</div>
</footer>
</div>
Expand Down Expand Up @@ -1149,8 +1185,22 @@ <h3>Warning!</h3>
</div>
</div>
</div>

</main>

<div class="analytics-banner hidden" id="analytics-banner">
<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 settings menu.</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>
</body>

</html>

0 comments on commit cdacaba

Please sign in to comment.