-
Notifications
You must be signed in to change notification settings - Fork 387
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2899 from balena-io/vipulgupta2048/cookies
minor: Add Cookie Consent Dialog box
- Loading branch information
Showing
5 changed files
with
155 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -337,6 +337,7 @@ rockpi | |
| rockpro | ||
| Rocktech | ||
| rollouts | ||
| RSSPM | ||
| rulefilename | ||
| ruuvitag | ||
| rwxr | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| .cc-container.cc-noselect.displayed .cc-box { | ||
| color: var(--color-text); | ||
| font-family: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | ||
| border-radius: 16px; | ||
| } | ||
|
|
||
| .cc-container.cc-noselect.displayed .cc-box .cc-buttons { | ||
| display: flex; | ||
| width: 100%; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .cc-container.cc-noselect.displayed .cc-box .cc-btn { | ||
| border-radius: 24px; | ||
| border: 1px solid var(--color-border-accent); | ||
| color: var(--color-text); | ||
| width: 100%; | ||
| background: white; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .cc-container.cc-noselect.displayed .cc-box .cc-btn.cc-btn-accept { | ||
| background: var(--color-bg-accent-strong); | ||
| color: var(--color-text-inverse); | ||
| border-color: transparent; | ||
| } | ||
|
|
||
| .cc-container.cc-noselect.displayed .cc-box a { | ||
| color: var(--color-text-accent); | ||
| } | ||
|
|
||
| .cc-container.cc-noselect.displayed .cc-box [role="link"] { | ||
| border-bottom: 0; | ||
| } | ||
|
|
||
| .cc-container.cc-noselect.displayed .cc-box [role="link"]:hover { | ||
| color: var(--color-text-accent); | ||
| } | ||
|
|
||
| .cc-container.cc-noselect.displayed .cc-box [role="checkbox"]::before { | ||
| border: 1px solid var(--color-border-strong); | ||
| padding: 1.5px; | ||
| background: white; | ||
| border-radius: 5px; | ||
| margin-top: 1px; | ||
| } | ||
|
|
||
| .cc-container.cc-noselect.displayed .cc-box [role="checkbox"]::after { | ||
| background: white; | ||
| border-color: var(--color-border-accent); | ||
| margin-top: 1px; | ||
| } | ||
|
|
||
| .cc-container.cc-noselect.displayed .cc-box h3 { | ||
| display: none; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,105 @@ | ||
| <!-- GA --> | ||
| <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@klaxit/[email protected]/dist/cookie-consent.js"></script> | ||
|
|
||
| <script> | ||
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | ||
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | ||
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | ||
| })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); | ||
| const GTM_TAG = 'GTM-598RSSPM'; | ||
|
|
||
| ga('create', 'UA-45671959-1', 'auto'); | ||
| ga('send', 'pageview'); | ||
| </script> | ||
| window.dataLayer = window.dataLayer || []; | ||
| function gtag() { dataLayer.push(arguments); } | ||
|
|
||
| <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/bundle.js"></script> | ||
|
|
||
| <!-- start balena analytics --> | ||
| <script type="text/javascript"> | ||
| var urlParamsHandler = new analyticsClient.AnalyticsUrlParams(); | ||
| var newQuery = urlParamsHandler.consumeUrlParameters(window.location.search); | ||
| if (newQuery != null && `?${newQuery}` !== window.location.search) { | ||
| window.location.search = newQuery; | ||
| } | ||
|
|
||
| var client = analyticsClient.createClient({ | ||
| projectName: 'balena-main', | ||
| componentName: 'docs', | ||
| endpoint: 'data.{{ $names.cloud_domain }}', | ||
| deviceId: urlParamsHandler.getPassedDeviceId(), | ||
| }); | ||
| urlParamsHandler.setClient(client); | ||
| gtag('consent', 'default', { | ||
| 'analytics_storage': 'denied' | ||
| }); | ||
|
|
||
| function addAnalyticsClient() { | ||
| const el = document.createElement('script'); | ||
| el.type = 'text/javascript'; | ||
| el.crossOrigin = 'anonymous'; | ||
| el.async = true; | ||
| el.src = | ||
| 'https://cdn.jsdelivr.net/npm/analytics-client@latest/dist/bundle.js'; | ||
|
|
||
| el.onload = function (_) { | ||
| var urlParamsHandler = new analyticsClient.AnalyticsUrlParams(); | ||
| var newQuery = urlParamsHandler.consumeUrlParameters(window.location.search); | ||
| if (newQuery != null && `?${newQuery}` !== window.location.search) { | ||
| window.location.search = newQuery; | ||
| } | ||
|
|
||
| var client = analyticsClient.createClient({ | ||
| projectName: 'balena-main', | ||
| componentName: 'docs', | ||
| endpoint: 'data.{{ $names.cloud_domain }}', | ||
| deviceId: urlParamsHandler.getPassedDeviceId(), | ||
| }); | ||
| urlParamsHandler.setClient(client); | ||
|
|
||
| var webTracker = analyticsClient.createWebTracker(client, 'Docs'); | ||
| webTracker.trackPageView(); | ||
| var webTracker = analyticsClient.createWebTracker(client, 'Docs'); | ||
| webTracker.trackPageView(); | ||
|
|
||
| var dashboardBaseUrl = '{{ $links.dashboardUrl }}'; | ||
| var githubBaseUrl = '{{ $links.githubMain }}'; | ||
| var dashboardBaseUrl = '{{ $links.dashboardUrl }}'; | ||
| var githubBaseUrl = '{{ $links.githubMain }}'; | ||
|
|
||
| // Since the dashboard is on a different domain, we need to explicitly | ||
| // set the anonymous id, so that we don't have disconnected timelines. | ||
| window.jQuery('a[href^="' + dashboardBaseUrl + '"]').attr('href', function(i, h) { | ||
| return (h + (h.indexOf('?') != -1 ? '&' : '?') + urlParamsHandler.getQueryString()); | ||
| // Since the dashboard is on a different domain, we need to explicitly | ||
| // set the anonymous id, so that we don't have disconnected timelines. | ||
| window.jQuery('a[href^="' + dashboardBaseUrl + '"]').attr('href', function(i, h) { | ||
| return (h + (h.indexOf('?') != -1 ? '&' : '?') + urlParamsHandler.getQueryString()); | ||
| }); | ||
| window.jQuery('a[href^="' + githubBaseUrl + '"]').click(function() { | ||
| var this_href = window.jQuery(this).attr('href'); | ||
| webTracker.trackNavigationClick(href= this_href); | ||
| }); | ||
| }; | ||
|
|
||
| const firstElement = document.getElementsByTagName('script')[0]; | ||
| firstElement.parentNode.insertBefore(el, firstElement); | ||
| } | ||
|
|
||
| function addGTM() { | ||
| (function (w, d, s, l, i) { | ||
| w[l] = w[l] || []; | ||
| w[l].push({ | ||
| 'gtm.start': | ||
| new Date().getTime(), event: 'gtm.js', | ||
| }); | ||
| var f = d.getElementsByTagName(s)[0], | ||
| j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; | ||
| j.async = true; | ||
| j.src = | ||
| 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; | ||
| f.parentNode.insertBefore(j, f); | ||
| })(window, document, 'script', 'dataLayer', GTM_TAG); | ||
| } | ||
|
|
||
| if (window.CookieConsent) { | ||
| const cc = new window.CookieConsent({ | ||
| title: 'We use cookies 🍪', | ||
| description: 'We use cookies to enhance your browsing experience and analyze our traffic. By clicking "Accept All" you consent to our use of cookies. Read more about our <a href="https://www.balena.io/privacy-policy" target="_blank">privacy policy</a>.', | ||
| buttons: { | ||
| acceptAll: 'Accept all', | ||
| acceptSelected: 'Save selection', | ||
| reject: 'Reject all', | ||
| showSettings: 'Customize', | ||
| hideSettings: 'Back', | ||
| }, | ||
| cookie: { | ||
| secure: false, | ||
| }, | ||
| }) | ||
|
|
||
| cc.on('accept', () => { | ||
| addAnalyticsClient(); | ||
| gtag('consent', 'update', { | ||
| 'analytics_storage': 'granted' | ||
| }); | ||
| }); | ||
| window.jQuery('a[href^="' + githubBaseUrl + '"]').click(function() { | ||
| var this_href = window.jQuery(this).attr('href'); | ||
| webTracker.trackNavigationClick(href= this_href); | ||
| } | ||
|
|
||
| if (window.CookieConsent?.acceptedCategories?.includes('analytics')) { | ||
| gtag('consent', 'update', { | ||
| 'analytics_storage': 'granted' | ||
| }); | ||
| addAnalyticsClient(); | ||
| } | ||
|
|
||
| addGTM() | ||
| </script> | ||
| <!-- end balena analytics --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters