Marc Mintel
0e089f9471
- 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'
135 lines
3.5 KiB
TypeScript
135 lines
3.5 KiB
TypeScript
/**
|
|
* Analytics Events Utility
|
|
*
|
|
* Centralized definitions for common analytics events and their properties.
|
|
* This helps maintain consistency across the application and makes it easier
|
|
* to track meaningful events.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* import { useAnalytics } from '@/components/analytics/useAnalytics';
|
|
* import { AnalyticsEvents } from '@/components/analytics/analytics-events';
|
|
*
|
|
* function ProductPage() {
|
|
* const { trackEvent } = useAnalytics();
|
|
*
|
|
* const handleAddToCart = (productId: string, productName: string) => {
|
|
* trackEvent(AnalyticsEvents.PRODUCT_ADD_TO_CART, {
|
|
* product_id: productId,
|
|
* product_name: productName,
|
|
* page: 'product-detail'
|
|
* });
|
|
* };
|
|
*
|
|
* return <button onClick={() => handleAddToCart('123', 'Cable')}>Add to Cart</button>;
|
|
* }
|
|
* ```
|
|
*/
|
|
|
|
export const AnalyticsEvents = {
|
|
// Page & Navigation Events
|
|
PAGE_VIEW: 'pageview',
|
|
PAGE_SCROLL: 'page_scroll',
|
|
PAGE_EXIT: 'page_exit',
|
|
SCROLL_DEPTH: 'scroll_depth',
|
|
|
|
// User Interaction Events
|
|
BUTTON_CLICK: 'button_click',
|
|
LINK_CLICK: 'link_click',
|
|
FORM_SUBMIT: 'form_submit',
|
|
FORM_START: 'form_start',
|
|
FORM_ERROR: 'form_error',
|
|
FORM_FIELD_FOCUS: 'form_field_focus',
|
|
|
|
// E-commerce Events
|
|
PRODUCT_VIEW: 'product_view',
|
|
PRODUCT_ADD_TO_CART: 'product_add_to_cart',
|
|
PRODUCT_REMOVE_FROM_CART: 'product_remove_from_cart',
|
|
PRODUCT_PURCHASE: 'product_purchase',
|
|
PRODUCT_WISHLIST_ADD: 'product_wishlist_add',
|
|
PRODUCT_WISHLIST_REMOVE: 'product_wishlist_remove',
|
|
PRODUCT_TAB_SWITCH: 'product_tab_switch',
|
|
|
|
// Search & Filter Events
|
|
SEARCH: 'search',
|
|
FILTER_APPLY: 'filter_apply',
|
|
FILTER_CLEAR: 'filter_clear',
|
|
|
|
// User Account Events
|
|
USER_SIGNUP: 'user_signup',
|
|
USER_LOGIN: 'user_login',
|
|
USER_LOGOUT: 'user_logout',
|
|
USER_PROFILE_UPDATE: 'user_profile_update',
|
|
|
|
// Content Events
|
|
BLOG_POST_VIEW: 'blog_post_view',
|
|
VIDEO_PLAY: 'video_play',
|
|
VIDEO_PAUSE: 'video_pause',
|
|
VIDEO_COMPLETE: 'video_complete',
|
|
DOWNLOAD: 'download',
|
|
|
|
// UI Interaction Events
|
|
MODAL_OPEN: 'modal_open',
|
|
MODAL_CLOSE: 'modal_close',
|
|
TOGGLE_SWITCH: 'toggle_switch',
|
|
ACCORDION_TOGGLE: 'accordion_toggle',
|
|
TAB_SWITCH: 'tab_switch',
|
|
TOC_CLICK: 'toc_click',
|
|
|
|
// Error & Performance Events
|
|
ERROR: 'error',
|
|
PERFORMANCE: 'performance',
|
|
API_ERROR: 'api_error',
|
|
API_SUCCESS: 'api_success',
|
|
|
|
// Custom Business Events
|
|
QUOTE_REQUEST: 'quote_request',
|
|
CONTACT_FORM_SUBMIT: 'contact_form_submit',
|
|
NEWSLETTER_SUBSCRIBE: 'newsletter_subscribe',
|
|
BROCHURE_DOWNLOAD: 'brochure_download',
|
|
} as const;
|
|
|
|
/**
|
|
* Type-safe event properties for common events
|
|
*/
|
|
export type AnalyticsEventName = (typeof AnalyticsEvents)[keyof typeof AnalyticsEvents];
|
|
|
|
/**
|
|
* Common event property helpers
|
|
*/
|
|
export const AnalyticsEventProperties = {
|
|
/**
|
|
* Create properties for a product event
|
|
*/
|
|
product: (productId: string, productName: string, category?: string) => ({
|
|
product_id: productId,
|
|
product_name: productName,
|
|
product_category: category,
|
|
}),
|
|
|
|
/**
|
|
* Create properties for a form event
|
|
*/
|
|
form: (formId: string, formName: string, fields?: Record<string, unknown>) => ({
|
|
form_id: formId,
|
|
form_name: formName,
|
|
form_fields: fields,
|
|
}),
|
|
|
|
/**
|
|
* Create properties for a search event
|
|
*/
|
|
search: (query: string, filters?: Record<string, unknown>) => ({
|
|
search_query: query,
|
|
search_filters: filters,
|
|
}),
|
|
|
|
/**
|
|
* Create properties for a navigation event
|
|
*/
|
|
navigation: (from: string, to: string) => ({
|
|
from_page: from,
|
|
to_page: to,
|
|
}),
|
|
} as const;
|