Add segment.

Signed-off-by: bgravenorst <[email protected]>

docusaurus.config.js

@@ -271,7 +271,7 @@ const config = {
     [
       '@docusaurus/plugin-google-gtag',
       {
-        trackingID: 'G-E8PSQ0E1L7',
+        trackingID: process.env.GA4_MEASUREMENT_ID || 'G-E8PSQ0E1L7',
         anonymizeIP: true,
       },
     ],

src/components/PageFeedback/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { trackFeedbackForGA } from '../../lib/feedbackAnalytics'
+import { trackFeedback } from '../../lib/feedbackAnalytics'
 import styles from './styles.module.scss'
 
 export default function PageFeedback() {
@@ -18,7 +18,7 @@ export default function PageFeedback() {
     console.log(`🎯 User clicked: ${positive ? 'Yes' : 'No'} (positive: ${positive})`)
     setFeedbackGiven(true)
     if (positive) {
-      trackFeedbackForGA({
+      trackFeedback({
         positive: true,
         locale: navigator.language,
       })
@@ -35,7 +35,7 @@ export default function PageFeedback() {
       ...(r === 'other' && otherReason.trim() && { response: otherReason.trim() }),
       locale: navigator.language,
     }
-    trackFeedbackForGA(data)
+    trackFeedback(data)
     setSubmitted(true)
   }
 

src/lib/feedbackAnalytics.ts

@@ -79,7 +79,7 @@
   // Enable debug mode in development
   if (process.env.NODE_ENV === 'development' && typeof window.gtag === 'function') {
     try {
-      window.gtag('config', 'debug_mode', true)
+      window.gtag('config', 'G-E8PSQ0E1L7', { debug_mode: true })
       console.log('🔍 GA4 Debug mode enabled for development')
     } catch (error) {
       console.log('⚠️ Could not enable debug mode:', error)
@@ -119,6 +119,23 @@
   console.warn('No tracking method available. Event data:', eventData)
 }
 
+/**
+ * Unified feedback tracking function that sends to both GA4 and Segment
+ */
+export const trackFeedback = (data: FeedbackData): void => {
+  // Track to GA4
+  trackFeedbackForGA(data)
+
+  // Track to Segment
+  import('../lib/segmentAnalytics')
+    .then(({ trackFeedbackForSegment }) => {
+      trackFeedbackForSegment(data)
+    })
+    .catch(error => {
+      console.warn('Could not load Segment analytics:', error)
+    })
+}
+
 // Type augmentation for window object
 declare global {
   interface Window {

src/lib/segmentAnalytics.js

@@ -13,20 +13,50 @@ export const trackClickForSegment = ({
       ...(responseStatus && { response_status: responseStatus }),
       ...(responseMsg && { response_msg: responseMsg }),
       ...(timestamp && { timestamp: timestamp }),
-    });
+    })
   }
-};
+}
 
-export const trackInputChangeForSegment = ({
-  eventName,
-  userExperience,
-  timestamp,
-}) => {
+export const trackInputChangeForSegment = ({ eventName, userExperience, timestamp }) => {
   if (window.analytics) {
-    window.analytics.track("Input changed", {
+    window.analytics.track('Input changed', {
       ...(eventName && { event_name: eventName }),
       ...(userExperience && { user_experience: userExperience }),
       ...(timestamp && { timestamp: timestamp }),
-    });
+    })
+  }
+}
+
+export const trackFeedbackForSegment = ({
+  positive,
+  reason,
+  response,
+  locale,
+  timestamp,
+  device_type,
+}) => {
+  if (window.analytics) {
+    window.analytics.track('Page Feedback Submitted', {
+      feedback_type: positive ? 'positive' : 'negative',
+      ...(reason && { reason }),
+      ...(response && { response }),
+      locale: locale || navigator.language,
+      page_path: window.location.pathname,
+      timestamp: timestamp || Date.now(),
+      device_type: device_type,
+      category: 'Documentation',
+      label: 'Page Helpfulness',
+    })
+    console.log('✅ Feedback tracked via Segment:', {
+      feedback_type: positive ? 'positive' : 'negative',
+      ...(reason && { reason }),
+      ...(response && { response }),
+      locale: locale || navigator.language,
+      page_path: window.location.pathname,
+      timestamp: timestamp || Date.now(),
+      device_type: device_type,
+    })
+  } else {
+    console.warn('⚠️ Segment analytics not available - feedback tracking skipped')
   }
-};
+}