Enhance Google Analytics and Consent Tracking (#241)

Add checks for Google Analytics ID and consent mode before tracking page
views. Also introduce verification for Google Tag Manager setting before
displaying the consent modal.

.env.example

@@ -55,4 +55,7 @@ VITE_AUTH_PROVIDER_MODULE_GOOGLE_ALT=false
 # Variant Explorer Settings
 # VITE_VARIANT_EXPLORER_TYPE=aggregate
 # VITE_VARIANT_EXPLORER_MAX_COUNT=10000
-# VITE_VARIANT_EXPLORER_EXCLUDE_COLUMNS=["AC","AN"]
+# VITE_VARIANT_EXPLORER_EXCLUDE_COLUMNS=["AC","AN"]
+
+VITE_GOOGLE_ANALYTICS_ID=someid
+VITE_GOOGLE_TAG_MANAGER_ID=someid

.env.test

@@ -55,4 +55,7 @@ VITE_AUTH_PROVIDER_MODULE_FENCE_ALT=true
 # Variant Explorer Settings
 VITE_VARIANT_EXPLORER_TYPE=aggregate
 VITE_VARIANT_EXPLORER_MAX_COUNT=20
-VITE_VARIANT_EXPLORER_EXCLUDE_COLUMNS='[]'
+VITE_VARIANT_EXPLORER_EXCLUDE_COLUMNS='[]'
+
+VITE_GOOGLE_ANALYTICS_ID=someid
+VITE_GOOGLE_TAG_MANAGER_ID=someid

src/lib/components/tracking/GoogleAnalytics.svelte

@@ -7,7 +7,12 @@
   let googleAnalyticsID = settings.google.analytics;
 
   $: {
-    if (browser && typeof gtag === 'function') {
+    if (
+      googleAnalyticsID &&
+      browser &&
+      typeof gtag === 'function' &&
+      localStorage.getItem('consentMode')?.includes('granted')
+    ) {
       console.debug('Tracking page view with Google Analytics');
       // Send page view to Google Analytics
       gtag('config', googleAnalyticsID, {
@@ -41,6 +46,8 @@
 </script>
 
 <svelte:head>
-  <script async src="https://www.googletagmanager.com/gtag/js?id={googleAnalyticsID}">
-  </script>
+  {#if googleAnalyticsID}
+    <script async src="https://www.googletagmanager.com/gtag/js?id={googleAnalyticsID}">
+    </script>
+  {/if}
 </svelte:head>

src/lib/components/tracking/GoogleConsents.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { gtag } from 'gtagjs';
-  import { branding } from '$lib/configuration';
+  import { branding, settings } from '$lib/configuration';
+  let googleTag = settings.google.tagManager;
   $: googleConsentVisible = false;
 
   function setUsersGoogleConsent(wasAccepted: boolean) {
@@ -28,7 +29,7 @@
   });
 </script>
 
-{#if googleConsentVisible && branding?.privacyPolicy?.url && branding?.privacyPolicy?.title}
+{#if googleTag && googleConsentVisible && branding?.privacyPolicy?.url && branding?.privacyPolicy?.title}
   <div
     data-testid="consentModal"
     class="fixed"