Marc Mintel
58d83a7fa1
- Added global ScrollDepthTracker (25%, 50%, 75%, 100%) - Implemented ProductEngagementTracker for deep product analytics - Added field-level tracking to ContactForm and RequestQuoteForm - Standardized SEO metadata (canonical, alternates, x-default) across all routes - Created reusable TrackedLink and TrackedButton components for server components - Fixed 'useAnalytics' hook error in Footer.tsx by adding 'use client'
35 lines
943 B
TypeScript
35 lines
943 B
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Button, ButtonProps } from '../ui/Button';
|
|
import { useAnalytics } from './useAnalytics';
|
|
import { AnalyticsEvents } from './analytics-events';
|
|
|
|
interface TrackedButtonProps extends ButtonProps {
|
|
eventName?: string;
|
|
eventProperties?: Record<string, any>;
|
|
}
|
|
|
|
/**
|
|
* A wrapper around the project's Button component that tracks click events.
|
|
* Safe to use in server components.
|
|
*/
|
|
export default function TrackedButton({
|
|
eventName = AnalyticsEvents.BUTTON_CLICK,
|
|
eventProperties = {},
|
|
onClick,
|
|
...props
|
|
}: TrackedButtonProps) {
|
|
const { trackEvent } = useAnalytics();
|
|
|
|
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
trackEvent(eventName, {
|
|
...eventProperties,
|
|
label: typeof props.children === 'string' ? props.children : eventProperties.label,
|
|
});
|
|
if (onClick) onClick(e);
|
|
};
|
|
|
|
return <Button {...props} onClick={handleClick} />;
|
|
}
|