Enhance GA tracking consent check

src/lib/components/tracking/GoogleTracking.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { gtag } from 'gtagjs';
+  import { branding, settings } from '$lib/configuration';
+  import { browser } from '$app/environment';
+  import { page } from '$app/stores';
+
+  let googleTag = settings.google.tagManager;
+  let googleAnalyticsID = settings.google.analytics;
+  $: googleConsentVisible = false;
+
+  $: {
+    if (
+      googleAnalyticsID &&
+      browser &&
+      typeof gtag === 'function' &&
+      localStorage.getItem('consentMode')?.includes('granted')
+    ) {
+      // Send page view to Google Analytics
+      gtag('js', new Date());
+      gtag('config', googleAnalyticsID, {
+        page_title: document.title,
+        page_path: $page.url.pathname,
+      });
+    }
+  }
+
+  function setUsersGoogleConsent(wasAccepted: boolean) {
+    let consent = {
+      ad_storage: 'denied',
+      analytics_storage: wasAccepted ? 'granted' : 'denied',
+      personalization_storage: wasAccepted ? 'granted' : 'denied',
+      ad_personalization: 'denied',
+      ad_data: 'denied',
+      ad_user_data: 'denied',
+    };
+
+    gtag('consent', 'update', consent);
+    localStorage.setItem('consentMode', JSON.stringify(consent));
+    googleConsentVisible = false;
+  }
+
+  onMount(() => {
+    let consentMode = localStorage.getItem('consentMode');
+    if (!consentMode) {
+      googleConsentVisible = true;
+    }
+
+    if (consentMode?.includes('granted')) {
+      gtag('consent', 'update', JSON.parse(consentMode));
+    }
+  });
+</script>
+
+<svelte:head>
+  {#if googleAnalyticsID}
+    <script async src="https://www.googletagmanager.com/gtag/js?id={googleAnalyticsID}"></script>
+    <script data-analyticsID={googleAnalyticsID}>
+      let googleAnalyticsID = document.currentScript.getAttribute('data-analyticsID');
+      window.dataLayer = window.dataLayer || [];
+
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+
+      gtag('js', new Date());
+      gtag('config', googleAnalyticsID);
+
+      gtag('consent', 'default', {
+        ad_storage: 'denied',
+        analytics_storage: 'denied',
+        personalization_storage: 'denied',
+        ad_personalization: 'denied',
+        ad_data: 'denied',
+        ad_user_data: 'denied',
+      });
+
+      let consents = localStorage.getItem('consentMode');
+      if (consents) {
+        consents = JSON.parse(consents);
+        gtag('consent', 'update', consents);
+      }
+    </script>
+  {/if}
+  {#if googleTag}
+    <script data-googleTag={googleTag}>
+      let googleTag = document.currentScript.getAttribute('data-googleTag');
+
+      (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', googleTag);
+    </script>
+  {/if}
+</svelte:head>
+
+{#if googleTag && googleConsentVisible && branding?.privacyPolicy?.url && branding?.privacyPolicy?.title}
+  <div
+    data-testid="consentModal"
+    class="fixed"
+    style="left: 5%; bottom: 60px; z-index: 1000; width: 90%"
+  >
+    <div class="bg-surface-50-900-token p-4 rounded-container-token shadow-2xl">
+      <div class="flex flex-row justify-between items-center">
+        <div class="flex items center">
+          <p>
+            We use cookies to provide you with the best possible experience and to help us make the
+            site more useful to visitors. To learn more, please visit our <a
+              href={branding?.privacyPolicy?.url}
+              target="_blank"
+              class="anchor">{branding?.privacyPolicy?.title}</a
+            >.
+          </p>
+        </div>
+        <div class="flex flex-col justify-center">
+          <button
+            data-testid="acceptGoogleConsent"
+            class="btn variant-filled-primary mt-1 mb-1"
+            on:click={() => setUsersGoogleConsent(true)}>Accept</button
+          >
+          <button
+            data-testid="rejectGoogleConsent"
+            class="btn variant-ghost-primary mt-1 mb-1 self-center"
+            on:click={() => setUsersGoogleConsent(false)}>Reject</button
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

src/routes/+layout.svelte

@@ -3,30 +3,30 @@
   import '../app.postcss';
   import { initializeStores } from '@skeletonlabs/skeleton';
   import { initializeBranding } from '$lib/configuration';
+  import GoogleTracking from '$lib/components/tracking/GoogleTracking.svelte';
   import { settings } from '$lib/configuration';
-  import GoogleAnalytics from '$lib/components/tracking/GoogleAnalytics.svelte';
-  import GoogleConsents from '$lib/components/tracking/GoogleConsents.svelte';
-  import GoogleTagManger from '$lib/components/tracking/GoogleTagManger.svelte';
-  let googleTagManagerId = settings.google.tagManager;
+
+  let googleTag = settings.google.tagManager;
 
   initializeStores();
   initializeBranding();
 </script>
 
-<main class="w-full h-full">
-  <!-- Google Tag Manager (noscript) -->
+<!-- Google Tag Manager (noscript) -->
+{#if googleTag}
   <noscript>
     <iframe
-      title="googleTagManager"
-      src="https://www.googletagmanager.com/ns.html?id={googleTagManagerId}"
+      src="https://www.googletagmanager.com/ns.html?id={googleTag}"
+      title="googleTagManger"
       height="0"
       width="0"
       style="display:none;visibility:hidden"
     ></iframe>
   </noscript>
   <!-- End Google Tag Manager (noscript) -->
+{/if}
+
+<main class="w-full h-full">
   <slot />
-  <GoogleConsents />
+  <GoogleTracking />
 </main>
-<GoogleAnalytics />
-<GoogleTagManger />

tests/routes/login/test.ts

@@ -156,7 +156,7 @@ unauthedTest.describe('Login page', () => {
         expect(parsedGoogleConsent).toHaveProperty('ad_storage', 'denied');
         expect(parsedGoogleConsent).toHaveProperty('analytics_storage', 'granted');
         expect(parsedGoogleConsent).toHaveProperty('personalization_storage', 'granted');
-        expect(parsedGoogleConsent).toHaveProperty('security_storage', 'granted');
+        expect(parsedGoogleConsent).toHaveProperty('ad_user_data', 'denied');
         expect(parsedGoogleConsent).toHaveProperty('ad_personalization', 'denied');
         expect(parsedGoogleConsent).toHaveProperty('ad_data', 'denied');
       }
@@ -179,7 +179,7 @@ unauthedTest.describe('Login page', () => {
       expect(parsedGoogleConsent).toHaveProperty('ad_storage', 'denied');
       expect(parsedGoogleConsent).toHaveProperty('analytics_storage', 'denied');
       expect(parsedGoogleConsent).toHaveProperty('personalization_storage', 'denied');
-      expect(parsedGoogleConsent).toHaveProperty('security_storage', 'denied');
+      expect(parsedGoogleConsent).toHaveProperty('ad_user_data', 'denied');
       expect(parsedGoogleConsent).toHaveProperty('ad_personalization', 'denied');
       expect(parsedGoogleConsent).toHaveProperty('ad_data', 'denied');
     }