react-tracking

import React, { useEffect } from 'react'; import { useTracking, Track } from 'react-tracking'; interface MyComponentProps { userId: string; pageName: string; } const ProductPage: React.FC<MyComponentProps> = ({ userId, pageName }) => { // Initialize tracking for this component, passing contextual data const { Track, trackEvent, getTrackingData } = useTracking( { page: pageName, user: userId, environment: process.env.NODE_ENV ?? 'development', }, { // Optional: Dispatch tracking data when component mounts dispatchOnMount: true, // Optional: Custom merge options for tracking objects (since v9.3.0) mergeOptions: { isMergeableObject: obj => !(obj instanceof Date || obj instanceof RegExp), }, } ); useEffect(() => { // Example: Log current tracking data when component mounts console.log('Current tracking context:', getTrackingData()); }, []); const handleProductClick = (productId: string) => { // Imperatively dispatch an event trackEvent({ action: 'product_click', productId: productId, timestamp: new Date().toISOString(), }); }; return ( <Track> {/* Use <Track> to pass context to children */} <div> <h1>{pageName} for User: {userId}</h1> <p>This is a product page example.</p> <button onClick={() => handleProductClick('product-123')}> Click to Track Product 123 </button> <button onClick={() => trackEvent({ action: 'promo_view', promoId: 'summer_sale' })}> Track Promo View </button> </div> </Track> ); }; // Example of usage: // <ProductPage userId="user-abc" pageName="Electronics-Category" /> export default ProductPage;