klz-cables.com/components/analytics/ProductEngagementTracker.tsx

'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;
}