81 lines
2.5 KiB
JavaScript
81 lines
2.5 KiB
JavaScript
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);
|
|
});
|
|
}
|