51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect } from 'react';
|
|
import { useAnalytics } from './useAnalytics';
|
|
import { AnalyticsEvents } from './analytics-events';
|
|
|
|
interface ProductEngagementTrackerProps {
|
|
productName: string;
|
|
productSlug: string;
|
|
categories: string[];
|
|
sku?: string;
|
|
}
|
|
|
|
/**
|
|
* ProductEngagementTracker
|
|
* Deep analytics for product pages.
|
|
* Tracks specific view events with full metadata for sales analysis.
|
|
*/
|
|
export default function ProductEngagementTracker({
|
|
productName,
|
|
productSlug,
|
|
categories,
|
|
sku,
|
|
}: ProductEngagementTrackerProps) {
|
|
const { trackEvent } = useAnalytics();
|
|
|
|
useEffect(() => {
|
|
// Standardized product view event for "High-Fidelity" sales insights
|
|
trackEvent(AnalyticsEvents.PRODUCT_VIEW, {
|
|
product_id: productSlug,
|
|
product_name: productName,
|
|
product_sku: sku,
|
|
product_categories: categories.join(', '),
|
|
location: 'pdp_standard',
|
|
});
|
|
|
|
// We can also track "Engagement Start" to measure dwell time later
|
|
const startTime = Date.now();
|
|
|
|
return () => {
|
|
const dwellTime = Math.round((Date.now() - startTime) / 1000);
|
|
trackEvent('pdp_dwell_time', {
|
|
product_id: productSlug,
|
|
seconds: dwellTime,
|
|
});
|
|
};
|
|
}, [productName, productSlug, categories, sku, trackEvent]);
|
|
|
|
return null;
|
|
}
|