Implement Google consent with cookie banner (#460)

rotationalio · Feb 28, 2025 · 4c8245b · 4c8245b
1 parent 398c3c5
commit 4c8245b
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 4 deletions.
diff --git a/data/en/alerts.yml b/data/en/alerts.yml
@@ -1,6 +1,6 @@
 ############################# Ensign Data ###################################
 notice:
-  enable: true
+  enable: false
   notice: "Join us for our Pre-training LLMs Tutorial on Feb 28"
   action:
     text: Learn More

diff --git a/i18n/en.yaml b/i18n/en.yaml
@@ -28,6 +28,10 @@
   translation: Privacy Policy
 - id: termsOfUse
   translation: Terms of Use
+- id: cookiePolicy
+  translation: Cookie Policy
+- id: manageCookies
+  translation: Manage Cookies
 - id: backToHome
   translation: Back to Home
 - id: pageNotFound

diff --git a/layouts/partials/site-footer.html b/layouts/partials/site-footer.html
@@ -96,6 +96,11 @@ <h5 class="mb-3 font-extrabold">{{ .title }}</h5>
                     <ul class="sm:mt-0 mt-4 flex gap-x-8">
                         <li><a href="/privacy/">{{ i18n "privacyPolicy" }}</a></li>
                         <li><a href="/terms/">{{ i18n "termsOfUse" }}</a></li>
+                        <li>
+                            <button id="hs_show_banner_button" class="cookie-bttn" type="button">
+                                {{ i18n "manageCookies" }}
+                            </button>
+                        </li>
                     </ul>
                 </div>
             </div>

diff --git a/layouts/partials/site-head.html b/layouts/partials/site-head.html
@@ -48,10 +48,44 @@
 {{"<!-- Main Stylesheet -->"|safeHTML}}
 <link rel="stylesheet" href="{{ `output.css` | absURL }}" media="screen">
 
+{{ "<!-- Google Consent -->" | safeHTML }}
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+
+  gtag('consent', 'default', {
+    'ad_storage': 'denied',
+    'ad_user_data': 'denied',
+    'ad_personalization': 'denied',
+    'analytics_storage': 'denied',
+    'functionality_storage': 'denied',
+    'personalization_storage': 'denied',
+  })
+
+  const _hsp = window._hsp = window._hsp || [];
+  _hsp.push(['addPrivacyConsentListener', function(consent) {
+    const hasAnalyticsConsent = consent && (consent.allowed  || (consent.categories && consent.categories.analytics));
+    const hasAdsConsent = consent && (consent.allowed || (consent.categories && consent.categories.advertisement));
+    const hasFunctionalityConsent = consent && (consent.allowed || (consent.categories && consent.categories.functionality));
+
+    gtag('consent', 'update', {
+      'ad_storage': hasAdsConsent ? 'granted': 'denied',
+      'ad_user_data': hasAdsConsent ? 'granted': 'denied',
+      'ad_personalization': hasAdsConsent ? 'granted': 'denied',
+      'analytics_storage': hasAnalyticsConsent ? 'granted': 'denied',
+      'functionality_storage': hasFunctionalityConsent ? 'granted': 'denied',
+      'personalization_storage': hasFunctionalityConsent ? 'granted': 'denied',
+    });
+  }]);
+</script>
+
 {{- if .Site.Params.googleAnalytics -}}
+
 {{ "<!-- Google Analytics -->" | safeHTML }}
 <script src="https://www.googletagmanager.com/gtag/js?id={{ .Site.Params.googleAnalytics }}" async defer></script>
-<script type="module">
+<script>
   window.dataLayer = window.dataLayer || [];
   function gtag() { dataLayer.push(arguments); }
   gtag('js', new Date());

diff --git a/static/js/index.js b/static/js/index.js
@@ -4,7 +4,7 @@ const emblaRoot = document.querySelectorAll('.embla');
 if (emblaRoot) {
   emblaRoot?.forEach((root) => {
     // Set carousel options from the data attributes.
-   const options = { loop: Boolean(root?.dataset?.loop), slidesToScroll: Number(root?.dataset?.scroll), align: "start" };
+    const options = { loop: Boolean(root?.dataset?.loop), slidesToScroll: Number(root?.dataset?.scroll), align: "start" };
     const carousel = EmblaCarousel(root?.querySelector('.embla__viewport'), options);
 
     const prevBtn = root?.querySelector('.embla__prev');
@@ -13,4 +13,11 @@ if (emblaRoot) {
     prevBtn?.addEventListener('click', carousel?.scrollPrev, false);
     nextBtn?.addEventListener('click', carousel?.scrollNext, false);
   });
-};
+};
+
+// Display cookie banner on user click.
+const cookieBttn = document.querySelector('.cookie-bttn');
+cookieBttn?.addEventListener('click', () => {
+  const _hsp = window._hsp = window._hsp || [];
+  _hsp.push(['showBanner']);
+})();