DOC-4329: Ketch footer and Segment updates

src/js/04-segment-analytics.js

@@ -1,18 +1,35 @@
 ;(function () {
   'use strict'
 
+  const trackEvent = (name, payload) => {
+    if (window.analytics) {
+      window.analytics.track(name, payload || {})
+    }
+  }
+
+  const trackLinkEvent = (element, name, payload) => {
+    if (window.analytics) {
+      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)')
 
     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.
+  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/js/10-ketch-consent.js

@@ -0,0 +1,85 @@
+;(function () {
+  'use strict'
+
+  window.analytics.ready(() => {
+    window.ketch('once', 'consent', onKetchConsent)
+    window.ketch('on', 'consent', onKetchConsentGtagTrack)
+    window.ketch('on', 'userConsentUpdated', onKetchConsentUpdated)
+  })
+
+  // If the user is in the US-CA region, change the text of the preference center link
+  window.ketch('on', 'regionInfo', (regionInfo) => {
+    const customTextRegions = ['US-CA']
+    if (customTextRegions.includes(regionInfo)) {
+      const preferenceCenterLinkElement = document.getElementById('preferenceCenterLink')
+      if (preferenceCenterLinkElement) {
+        preferenceCenterLinkElement.textContent = 'Do Not Sell My Personal Information'
+      }
+    }
+  })
+
+  // If the user is in the default jurisdiction, remove the preference center link
+  window.ketch('on', 'jurisdiction', (jurisdiction) => {
+    if (jurisdiction.includes('default')) {
+      const preferenceCenterContainerElement = document.getElementById('preferenceCenterContainer')
+      if (preferenceCenterContainerElement) {
+        preferenceCenterContainerElement.remove()
+      }
+    }
+  })
+
+  // Once - This will be fired only one time, will initialize all the main features.
+  const onKetchConsent = (consent) => {
+    window.ketchConsent = consent
+    addKetchConsentToContextMiddleware()
+    window.analytics.page()
+    // loadScripts(); // Load any script if we have scripts to fire after ketch consent is fired.
+  }
+
+  // on - Each time the user changes the preferences, save them to the global variable
+  const onKetchConsentUpdated = (consent) => {
+    window.ketchConsent = consent
+  }
+
+  // On - each time the consent is loaded, track it to the gtag event
+  const onKetchConsentGtagTrack = (consent) => {
+    if (window.gtag &&
+        consent.purposes &&
+        'analytics' in consent.purposes &&
+        'targeted_advertising' in consent.purposes
+    ) {
+      const analyticsString = consent.purposes.analytics === true ? 'granted' : 'denied'
+      const targetedAdsString = consent.purposes.targeted_advertising === true ? 'granted' : 'denied'
+
+      const gtagObject = {
+        analytics_storage: analyticsString,
+        ad_personalization: targetedAdsString,
+        ad_storage: targetedAdsString,
+        ad_user_data: targetedAdsString,
+      }
+      window.gtag('consent', 'update', gtagObject)
+    }
+  }
+
+  // Use the analytics.addSourceMiddleware function to include the consent on all the events
+  const addKetchConsentToContextMiddleware = () => {
+    window.analytics.addSourceMiddleware(({ payload, next }) => {
+      if (window.ketchConsent) {
+        const analyticsString = window.ketchConsent.purposes.analytics === true ? 'granted' : 'denied'
+        const targetedAdsString = window.ketchConsent.purposes.targeted_advertising === true ? 'granted' : 'denied'
+
+        payload.obj.properties = {
+          ...(payload.obj.properties || {}),
+          analyticsStorageConsentState: analyticsString,
+          adsStorageConsentState: targetedAdsString,
+          adUserDataConsentState: targetedAdsString,
+          adPersonalizationConsentState: targetedAdsString,
+        }
+        payload.obj.context.consent = {
+          categoryPreferences: window.ketchConsent?.purposes,
+        }
+      }
+      next(payload)
+    })
+  }
+})()

src/partials/footer.hbs

@@ -24,6 +24,16 @@
           target="_blank"
           data-track="Footer Terms of Use Link Clicked"
         >Terms of use</a>
+        {{#with site.keys.ketchSmartTagUrl}}
+        <span id="preferenceCenterContainer">
+          |
+          <a
+            id="preferenceCenterLink"
+            href="https://www.datastax.com/preferences"
+            data-track="Footer Consent Preference Link Clicked"
+          >Manage Privacy Choices</a>
+        </span>
+        {{/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,10 +1,13 @@
 {{#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.load("{{this}}");
+}}();
+</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>
 {{/with}}
 
 <script>var uiRootPath = '{{{uiRootPath}}}'</script>