add ketch logic to js file and let middleware handle context

Author: colegoldsmith

src/js/04-segment-analytics.js

@@ -1,32 +1,19 @@
 ;(function () {
   'use strict'
 
-  const ketchConsentContext = {
-    context: {
-      consent: {
-        categoryPreferences: {
-          ...(window.ketchConsent?.purposes || {
-            analytics: false,
-            essential_services: false,
-            targeted_advertising: false,
-          }),
-        },
-      },
-    },
-  }
-
   const trackEvent = (name, payload) => {
     if (window.analytics) {
-      window.analytics.track(name, payload || {}, ketchConsentContext)
+      window.analytics.track(name, payload || {})
     }
   }
 
   const trackLinkEvent = (element, name, payload) => {
     if (window.analytics) {
-      window.analytics.trackLink(element, name, payload || {}, ketchConsentContext)
+      window.analytics.trackLink(element, name, payload || {})
     }
   }
 
+  // Add click event listeners to all elements with a data-track attribute.
   if (window.analytics) {
     const trackedLinkElements = document.querySelectorAll('a[data-track]')
     const trackedElements = document.querySelectorAll('[data-track]:not(a)')
@@ -43,7 +30,51 @@
   }
 
   // Expose trackEvent and trackLinkEvent to the global scope.
-  // All tracking events should be done through these functions because they handle the Ketch consent context.
   window.trackEvent = trackEvent
   window.trackLinkEvent = trackLinkEvent
+
+  // Save the Ketch consent state to the global scope and add consent middleware to analytics calls.
+  if (window && window.ketch && window.analytics) {
+    const saveConsent = (consent) => {
+      window.ketchConsent = consent
+    }
+    window.ketch('on', 'consent', saveConsent)
+    window.ketch('on', 'userConsentUpdated', saveConsent)
+    window.ketch('on', 'regionInfo', (regionInfo) => {
+      const customTextRegions = ['US-CA']
+      if (customTextRegions.includes(regionInfo)) {
+        const preferenceCenterLinkElement = document.getElementById('preferenceCenterLink')
+        preferenceCenterLinkElement.textContent = 'Do Not Sell My Personal Information'
+      }
+    })
+    window.analytics.addSourceMiddleware(({ payload, next }) => {
+      if (window.ketchConsent) {
+        payload.obj.properties = {
+          ...(payload.obj.properties || {}),
+          'Analytics Storage Consent State':
+            (window.ketchConsent?.purposes || {})?.analytics === true
+              ? 'granted'
+              : 'denied',
+          'Ads Storage Consent State':
+            (window.ketchConsent?.purposes || {})?.targeted_advertising === true
+              ? 'granted'
+              : 'denied',
+          'Ad User Data Consent State':
+            (window.ketchConsent?.purposes || {})?.targeted_advertising === true
+              ? 'granted'
+              : 'denied',
+          context: {
+            consent: {
+              categoryPreferences: window.ketchConsent?.purposes || {},
+            },
+          },
+          traits: window.ketchConsent?.purposes || {},
+        }
+        payload.obj.context.consent = {
+          categoryPreferences: window.ketchConsent?.purposes,
+        }
+      }
+      next(payload)
+    })
+  }
 })()

src/partials/head-scripts.hbs

@@ -7,37 +7,8 @@ analytics.page();
 </script>
 {{/with}}
 
-{{#with site.keys.ketchSma rtTagUrl}}
+{{#with site.keys.ketchSmartTagUrl}}
 <script>!function(){window.semaphore=window.semaphore||[],window.ketch=function(){window.semaphore.push(arguments)};var e=document.createElement("script");e.type="text/javascript",e.src="{{this}}",e.defer=e.async=!0,document.getElementsByTagName("head")[0].appendChild(e)}();</script>
-<script>
-ketch('showPreferences');
-</script>
-<script>
-function saveConsent(consent) {
-  window.ketchConsent = consent;
-};
-ketch("on", "consent", (consent) => {
-  saveConsent(consent);
-  if (window.analytics) {
-    window.analytics.addSourceMiddleware(({ payload, next }) => {
-      if (window.ketchConsent) {
-        payload.obj.context.consent = {
-          categoryPreferences: window.ketchConsent?.purposes,
-        };
-      }
-      next(payload);
-    });
-  }
-});
-ketch("on", "userConsentUpdated", saveConsent);
-ketch("on", "regionInfo", regionInfo => {
-    var customTextRegions = ["US-CA"];
-    if (customTextRegions.includes(regionInfo)) {
-        var preferenceCenterLinkElement = document.getElementById("preferenceCenterLink");
-        preferenceCenterLinkElement.textContent = "Do Not Sell My Personal Information";
-    }
-})
-</script>
 {{/with}}
 
 <script>var uiRootPath = '{{{uiRootPath}}}'</script>