Replace Ketch with IBM TrustArc consent management

src/js/04-segment-analytics.js

@@ -1,15 +1,96 @@
 ;(function () {
   'use strict'
 
-  const trackEvent = (name, payload) => {
-    if (window.analytics) {
-      window.analytics.track(name, payload || {})
+  /**
+   * IBM Segment Event Types:
+   * - 'CTA Clicked': Call-to-action clicks (links, buttons)
+   * - 'UI Interaction': General UI interactions (excludes userId)
+   * - 'User Form': Form interactions (handled separately in form-specific files)
+   */
+
+  // Determine if a data-track event should be CTA Clicked or UI Interaction
+  const getEventType = (eventName) => {
+    // Links are typically CTAs
+    if (eventName.includes('Link Clicked') || eventName.includes('Clicked')) {
+      return 'CTA Clicked'
+    }
+    // Buttons and other interactions
+    if (eventName.includes('Button') || eventName.includes('Form')) {
+      return 'UI Interaction'
+    }
+    // Default to UI Interaction
+    return 'UI Interaction'
+  }
+
+  // Extract CTA text from event name or element
+  const extractCTA = (eventName, element) => {
+    if (element) {
+      return element.textContent?.trim() || element.getAttribute('title') || eventName
+    }
+    return eventName
+  }
+
+  // Extract namespace from event name
+  const extractNamespace = (eventName) => {
+    if (eventName.includes('Footer')) return 'footer'
+    if (eventName.includes('Tutorial')) return 'tutorial'
+    if (eventName.includes('Feedback')) return 'feedback'
+    if (eventName.includes('Edit')) return 'content'
+    if (eventName.includes('Colab')) return 'tutorial'
+    return 'docs'
+  }
+
+  // Extract action from event name
+  const extractAction = (eventName) => {
+    if (eventName.includes('Clicked')) return 'clicked'
+    if (eventName.includes('Submitted')) return 'submitted'
+    if (eventName.includes('Copied')) return 'copied'
+    return 'interacted'
+  }
+
+  const trackEvent = (name, payload = {}, element = null) => {
+    if (window.analytics && window.getSegmentCommonProperties) {
+      const eventType = getEventType(name)
+      const commonProps = window.getSegmentCommonProperties(eventType)
+
+      let eventPayload = { ...commonProps, ...payload }
+
+      if (eventType === 'CTA Clicked') {
+        eventPayload = {
+          ...eventPayload,
+          CTA: extractCTA(name, element),
+          location: extractNamespace(name),
+        }
+      } else if (eventType === 'UI Interaction') {
+        eventPayload = {
+          ...eventPayload,
+          action: extractAction(name),
+          CTA: extractCTA(name, element),
+          namespace: extractNamespace(name),
+          elementId: element?.id || '',
+          payload: payload,
+        }
+      }
+
+      window.analytics.track(eventType, eventPayload)
     }
   }
 
-  const trackLinkEvent = (element, name, payload) => {
-    if (window.analytics) {
-      window.analytics.trackLink(element, name, payload || {})
+  const trackLinkEvent = (element, name, payload = {}) => {
+    if (window.analytics && window.getSegmentCommonProperties) {
+      const eventType = 'CTA Clicked' // Links are always CTAs
+      const commonProps = window.getSegmentCommonProperties(eventType)
+
+      const eventPayload = {
+        ...commonProps,
+        ...payload,
+        CTA: extractCTA(name, element),
+        location: extractNamespace(name),
+        type: 'Link',
+        text: element.textContent?.trim() || element.getAttribute('title') || '',
+      }
+
+      window.analytics.trackLink(element, eventType, eventPayload)
     }
   }
 
@@ -24,12 +105,57 @@
 
     trackedElements.forEach((element) => {
       element.addEventListener('click', (e) => {
-        trackEvent(element.dataset.track)
+        trackEvent(element.dataset.track, {}, element)
       })
     })
   }
 
-  // Expose trackEvent and trackLinkEvent to the global scope.
+  /**
+   * Track page view with friendly name
+   * IBM requires page events to have a friendly "page" property
+   */
+  const trackPage = (pageName) => {
+    if (window.analytics && window.SEGMENT_COMMON_PROPERTIES) {
+      // Get friendly page name from title or use provided name
+      const friendlyName = pageName || document.title.split('|')[0].trim()
+
+      // Get common properties for page event (excludes userId per IBM requirements)
+      const pageProperties = window.getSegmentCommonProperties('page')
+
+      window.analytics.page(friendlyName, {
+        ...pageProperties,
+        path: window.location.pathname,
+        url: window.location.href,
+        title: document.title,
+      })
+    }
+  }
+
+  // Wait for analytics to load, then track page view on initial load
+  const waitForAnalytics = (callback, maxAttempts = 50, interval = 100) => {
+    let attempts = 0
+    const checkAnalytics = () => {
+      attempts++
+      if (window.analytics && window.analytics.initialized) {
+        callback()
+      } else if (attempts < maxAttempts) {
+        setTimeout(checkAnalytics, interval)
+      }
+    }
+    checkAnalytics()
+  }
+
+  // Track page view on initial load once analytics is ready
+  waitForAnalytics(() => {
+    // Identify user with anonymous ID before tracking page
+    if (window.SEGMENT_COMMON_PROPERTIES && window.SEGMENT_COMMON_PROPERTIES.userId) {
+      window.analytics.identify(window.SEGMENT_COMMON_PROPERTIES.userId)
+    }
+    trackPage()
+  })
+
+  // Expose trackEvent, trackLinkEvent, and trackPage to the global scope.
   window.trackEvent = trackEvent
   window.trackLinkEvent = trackLinkEvent
+  window.trackPage = trackPage
 })()

src/js/05-feedback-dialog.js

@@ -40,9 +40,19 @@
   form.onsubmit = (e) => {
     e.preventDefault()
     const message = form.elements.message.value
-    if (message && window.trackEvent) {
-      window.trackEvent('Feedback Form', {
-        message,
+    if (message && window.analytics && window.getSegmentCommonProperties) {
+      const commonProps = window.getSegmentCommonProperties('User Form')
+
+      // Map to IBM User Form schema
+      window.analytics.track('User Form', {
+        ...commonProps,
+        action: 'submitted',
+        formId: 'feedback_form',
+        formType: 'feedback',
+        field: 'feedback_message',
+        fieldType: 'text_field',
+        title: 'Give Feedback',
+        data: message,
       })
     }
     form.elements.message.value = ''
@@ -52,6 +62,20 @@
 
   const feedbackButtonYes = document.getElementById('feedback_button_yes')
   feedbackButtonYes.addEventListener('click', (e) => {
+    if (window.analytics && window.getSegmentCommonProperties) {
+      const commonProps = window.getSegmentCommonProperties('User Form')
+
+      // Track positive feedback button click
+      window.analytics.track('User Form', {
+        ...commonProps,
+        action: 'clicked',
+        formId: 'feedback_buttons',
+        formType: 'feedback',
+        field: 'helpful_yes',
+        fieldType: 'button',
+        title: 'Was This Helpful?',
+      })
+    }
     showThankYou()
   })
 

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

@@ -92,12 +92,22 @@
   }
 
   function trackCopy (language, title, text) {
-    if (window.trackEvent) {
+    if (window.analytics && window.getSegmentCommonProperties) {
       var sample = text.slice(0, 50).replace(/\s+/g, ' ').trim()
-      window.trackEvent('Code Snippet Copied', {
-        snippetLanguage: language,
-        snippetTitle: title,
-        snippetSample: sample,
+      var commonProps = window.getSegmentCommonProperties('UI Interaction')
+
+      // Map to IBM UI Interaction schema
+      window.analytics.track('UI Interaction', {
+        ...commonProps,
+        action: 'copied',
+        CTA: 'Copy Code',
+        namespace: 'code-snippet',
+        elementId: 'copy-button',
+        payload: {
+          language: language,
+          title: title,
+          sample: sample,
+        },
       })
     }
   }

src/partials/footer.hbs

@@ -24,13 +24,15 @@
           target="_blank"
           data-track="Footer Terms of Use Link Clicked"
         >Terms of use</a>
-        {{#with site.keys.ketchSmartTagUrl}}
+        {{#with site.keys.ibmSegment}}
         <span id="preferenceCenterContainer">
-          |
+          ·&nbsp;
           <a
             id="preferenceCenterLink"
-            href="https://www.datastax.com/preferences?redirect_to={{{../site.url}}}{{{../page.url}}}"
+            href="#"
+            onclick="if(typeof window !== 'undefined' && window.truste && window.truste.eu && window.truste.eu.clickListener) { window.truste.eu.clickListener(); } return false;"
             data-track="Footer Consent Preference Link Clicked"
+            style="cursor: pointer;"
           >Manage Privacy Choices</a>
         </span>
         {{/with}}
@@ -93,4 +95,4 @@
       >[email protected]</a>
     </p>
   </div>
-</footer>
+</footer>