This commit is contained in:
130
components/analytics/analytics-events.ts
Normal file
130
components/analytics/analytics-events.ts
Normal file
@@ -0,0 +1,130 @@
|
||||
/**
|
||||
* 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',
|
||||
|
||||
// User Interaction Events
|
||||
BUTTON_CLICK: 'button_click',
|
||||
LINK_CLICK: 'link_click',
|
||||
FORM_SUBMIT: 'form_submit',
|
||||
FORM_START: 'form_start',
|
||||
FORM_ERROR: 'form_error',
|
||||
|
||||
// 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',
|
||||
|
||||
// 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',
|
||||
|
||||
// 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;
|
||||
Reference in New Issue
Block a user