docs: Configure Segment (#8996)

docs/src/plugins/segment/data-attribute-tracking.js

@@ -0,0 +1,81 @@
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+let isDataAttributeTrackingInitialized = false;
+
+/**
+ * Automatic click tracking using data attributes for Docusaurus
+ *
+ * Usage: Add data-event and other data-* attributes to any clickable element.
+ * The tracker will automatically send events to Segment when clicked.
+ *
+ * Example in navbar config:
+ * {
+ *   href: "https://github.com/langflow-ai/langflow",
+ *   'data-event': 'GitHub Link Clicked',
+ *   'data-source': 'navbar',
+ *   'data-category': 'social'
+ * }
+ *
+ * This will automatically call:
+ * window.analytics.track("GitHub Link Clicked", {
+ *   source: "navbar",
+ *   category: "social",
+ *   url: "https://github.com/langflow-ai/langflow",
+ *   page: "/current-page"
+ * })
+ */
+function initializeDataAttributeTracking() {
+  // Only run on client side and prevent duplicate initialization
+  if (!ExecutionEnvironment.canUseDOM || isDataAttributeTrackingInitialized) return;
+
+  const handleClick = (event) => {
+    const target = event.target;
+    const trackingElement = target.closest('[data-event]');
+
+    if (!trackingElement) return;
+
+    const eventName = trackingElement.dataset.event;
+    if (!eventName) return;
+
+    // Extract all data-* attributes (except data-event itself)
+    const properties = {};
+
+    Object.keys(trackingElement.dataset).forEach(key => {
+      if (key !== 'event') {
+        // Convert camelCase to snake_case for consistency
+        const snakeKey = key.replace(/([A-Z])/g, '_$1').toLowerCase();
+        properties[snakeKey] = trackingElement.dataset[key];
+      }
+    });
+
+    // Track the event
+    if (window.analytics && typeof window.analytics.track === 'function') {
+      window.analytics.track(eventName, properties);
+    } else {
+      console.warn('Analytics not available for tracking:', eventName, properties);
+    }
+  };
+
+  // Remove existing listener if it exists
+  document.removeEventListener('click', handleClick);
+
+  // Add the new listener
+  document.addEventListener('click', handleClick);
+
+  // Mark as initialized
+  isDataAttributeTrackingInitialized = true;
+}
+
+// Initialize on DOM ready
+if (ExecutionEnvironment.canUseDOM) {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeDataAttributeTracking);
+  } else {
+    initializeDataAttributeTracking();
+  }
+
+  // Re-initialize on route changes for SPA navigation
+  window.addEventListener('popstate', () => {
+    setTimeout(initializeDataAttributeTracking, 100);
+  });
+}