DOC-4329: Ketch footer and Segment updates

src/js/04-segment-analytics.js

@@ -1,18 +1,55 @@
 ;(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,
+      })
+    }
+  }
+
+  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)
+      trackLinkEvent(element, element.dataset.track)
     })
 
     trackedElements.forEach((element) => {
       element.addEventListener('click', (e) => {
-        window.analytics.track(element.dataset.track)
+        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,8 +40,8 @@
   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,
       })
     }

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

@@ -92,9 +92,9 @@
   }
 
   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,

src/partials/footer.hbs

@@ -24,6 +24,14 @@
           target="_blank"
           data-track="Footer Terms of Use Link Clicked"
         >Terms of use</a>
+        {{#with site.keys.ketchSmartTagUrl}}
+        |
+        <a
+          id="preferenceCenterLink"
+          href="https://www.datastax.com/preferences"
+          data-track="Footer Consent Preference Link Clicked"
+        >Manage Privacy Choices</a>
+        {{/with}}
       </span>
     </p>
     <p class="text-tertiary !m-0 max-w-[640px] text-xs">Apache, Apache

src/partials/head-prelude.hbs

@@ -1,5 +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>
-    {{/with}}

src/partials/head-scripts.hbs

@@ -1,12 +1,37 @@
 {{#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="https://global.ketchcdn.com/web/v3/config/datastax/website_smart_tag/boot.js",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>
 
 <script>