fix track events so they use consent context correctly. Only load segment if the user consents to analytics

Author: colegoldsmith

src/js/04-segment-analytics.js

@@ -1,31 +1,55 @@
 ;(function () {
   'use strict'
 
-  if (window.analytics) {
-    const trackedLinkElements = document.querySelectorAll('a[data-track]')
-    const trackedElements = document.querySelectorAll('[data-track]:not(a)')
-
-    const context = {
+  const ketchConsentContext = {
+    context: {
       consent: {
         categoryPreferences: {
-          advertising: 'behavioral_advertising',
-          ketch_purpose_code: 'ketch_purpose_code',
-          analytics: 'analytics',
-          data_broking: 'data_broking',
-          personalization: 'personalization',
-          essential_services: 'essential_services',
+          ...(window.ketchConsent?.purposes || {
+            analytics: false,
+            essential_services: false,
+            targeted_advertising: false,
+          }),
         },
       },
+    },
+  }
+
+  const trackEvent = (name, payload) => {
+    if (window.analytics) {
+      window.analytics.track(name, {
+        ...(payload || {}),
+        ...ketchConsentContext,
+      })
     }
+  }
+
+  const trackLinkEvent = (element, name, payload) => {
+    if (window.analytics) {
+      window.analytics.trackLink(element, name, {
+        ...(payload || {}),
+        ...ketchConsentContext,
+      })
+    }
+  }
+
+  if (window.analytics) {
+    const trackedLinkElements = document.querySelectorAll('a[data-track]')
+    const trackedElements = document.querySelectorAll('[data-track]:not(a)')
 
     trackedLinkElements.forEach((element) => {
-      window.analytics.trackLink(element, element.dataset.track, context)
+      trackLinkEvent(element, element.dataset.track)
     })
 
     trackedElements.forEach((element) => {
       element.addEventListener('click', (e) => {
-        window.analytics.track(element.dataset.track, context)
+        trackEvent(element.dataset.track)
       })
     })
   }
+
+  // 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
 })()

src/js/05-feedback-dialog.js

@@ -40,19 +40,9 @@
   form.onsubmit = (e) => {
     e.preventDefault()
     const message = form.elements.message.value
-    if (message && window.analytics) {
-      window.analytics.track('Feedback Form', {
+    if (message && window.trackEvent) {
+      window.trackEvent('Feedback Form', {
         message,
-        consent: {
-          categoryPreferences: {
-            advertising: 'behavioral_advertising',
-            ketch_purpose_code: 'ketch_purpose_code',
-            analytics: 'analytics',
-            data_broking: 'data_broking',
-            personalization: 'personalization',
-            essential_services: 'essential_services',
-          },
-        },
       })
     }
     form.elements.message.value = ''

src/js/07-copy-to-clipboard.js

@@ -92,22 +92,12 @@
   }
 
   function trackCopy (language, title, text) {
-    if (window.analytics) {
+    if (window.trackEvent) {
       var sample = text.slice(0, 50).replace(/\s+/g, ' ').trim()
-      window.analytics.track('Code Snippet Copied', {
+      window.trackEvent('Code Snippet Copied', {
         snippetLanguage: language,
         snippetTitle: title,
         snippetSample: sample,
-        consent: {
-          categoryPreferences: {
-            advertising: 'behavioral_advertising',
-            ketch_purpose_code: 'ketch_purpose_code',
-            analytics: 'analytics',
-            data_broking: 'data_broking',
-            personalization: 'personalization',
-            essential_services: 'essential_services',
-          },
-        },
       })
     }
   }

src/partials/head-prelude.hbs

@@ -1,14 +1,2 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    {{#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('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}}

src/partials/head-scripts.hbs

@@ -1,10 +1,35 @@
 {{#with site.keys.segment}}
-  <script>
-  !function(){var i="analytics",analytics=window[i]=window[i]||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","screen","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware","register"];analytics.factory=function(e){return function(){if(window[i].initialized)return window[i][e].apply(window[i],arguments);var n=Array.prototype.slice.call(arguments);if(["track","screen","alias","group","page","identify"].indexOf(e)>-1){var c=document.querySelector("link[rel='canonical']");n.push({__t:"bpc",c:c&&c.getAttribute("href")||void 0,p:location.pathname,u:location.href,s:location.search,t:document.title,r:document.referrer})}n.unshift(e);analytics.push(n);return analytics}};for(var n=0;n<analytics.methods.length;n++){var key=analytics.methods[n];analytics[key]=analytics.factory(key)}analytics.load=function(key,n){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.setAttribute("data-global-segment-analytics-key",i);t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r);analytics._loadOptions=n};analytics._writeKey="{{this}}";;analytics.SNIPPET_VERSION="5.2.1";
-  analytics.load("{{this}}");
-  analytics.page();
-  }}();
-  </script>
+<script>
+!function(){var i="analytics",analytics=window[i]=window[i]||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","screen","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware","register"];analytics.factory=function(e){return function(){if(window[i].initialized)return window[i][e].apply(window[i],arguments);var n=Array.prototype.slice.call(arguments);if(["track","screen","alias","group","page","identify"].indexOf(e)>-1){var c=document.querySelector("link[rel='canonical']");n.push({__t:"bpc",c:c&&c.getAttribute("href")||void 0,p:location.pathname,u:location.href,s:location.search,t:document.title,r:document.referrer})}n.unshift(e);analytics.push(n);return analytics}};for(var n=0;n<analytics.methods.length;n++){var key=analytics.methods[n];analytics[key]=analytics.factory(key)}analytics.load=function(key,n){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.setAttribute("data-global-segment-analytics-key",i);t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r);analytics._loadOptions=n};analytics._writeKey="{{this}}";;analytics.SNIPPET_VERSION="5.2.1";
+analytics.page();
+}}();
+</script>
+{{/with}}
+
+{{#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>
+if (window.ketch) {
+  function saveConsent(consent) {
+    window.ketchConsent = consent;
+  };
+  window.ketch("on", "consent", (consent) => { 
+    saveConsent(consent);
+    // Only load Segment analytics if the user has consented to analytics
+    if (consent?.purposes?.analytics && window.analytics) {
+      window.analytics.load("{{../site.keys.segment}}");
+    }
+  });
+  window.ketch("on", "userConsentUpdated", saveConsent);
+  window.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>