/** * Google Analytics 自定义Hook * 提供便捷的GA事件跟踪功能 */ import { useEffect } from 'react'; import { useRouter } from 'next/navigation'; import { trackPageView, trackEvent, isGAAvailable, setUserProperties } from '@/utils/analytics'; /** * 页面访问跟踪Hook * @param pageTitle - 页面标题 * @param customParams - 自定义参数 */ export const usePageTracking = ( pageTitle?: string, customParams?: Record ) => { const router = useRouter(); useEffect(() => { if (isGAAvailable()) { const currentPath = window.location.pathname; trackPageView(currentPath, pageTitle, { custom_parameters: customParams }); } }, [router, pageTitle, customParams]); }; /** * 用户行为跟踪Hook */ export const useEventTracking = () => { const trackUserAction = ( action: string, category: string = 'user', label?: string, value?: number, customParams?: Record ) => { trackEvent(action, { event_category: category, event_label: label, value: value, custom_parameters: customParams, }); }; const trackButtonClick = (buttonName: string, location?: string) => { trackUserAction('button_click', 'interaction', buttonName, undefined, { button_name: buttonName, location: location, }); }; const trackFormSubmit = (formName: string, success: boolean = true) => { trackUserAction('form_submit', 'form', formName, undefined, { form_name: formName, success: success, }); }; const trackNavigation = (from: string, to: string) => { trackUserAction('navigation', 'user', `${from} -> ${to}`, undefined, { from_page: from, to_page: to, }); }; return { trackUserAction, trackButtonClick, trackFormSubmit, trackNavigation, }; }; /** * 视频相关事件跟踪Hook */ export const useVideoTracking = () => { const trackVideoCreation = (templateType: string, aspectRatio?: string) => { trackEvent('video_creation_start', { event_category: 'video', event_label: templateType, custom_parameters: { template_type: templateType, aspect_ratio: aspectRatio, }, }); }; const trackVideoGeneration = (duration: number, templateType: string) => { trackEvent('video_generation_complete', { event_category: 'video', value: duration, custom_parameters: { template_type: templateType, video_duration: duration, }, }); }; const trackVideoDownload = (videoId: string, format: string) => { trackEvent('video_download', { event_category: 'video', event_label: format, custom_parameters: { video_id: videoId, format: format, }, }); }; const trackVideoShare = (videoId: string, platform: string) => { trackEvent('video_share', { event_category: 'video', event_label: platform, custom_parameters: { video_id: videoId, platform: platform, }, }); }; return { trackVideoCreation, trackVideoGeneration, trackVideoDownload, trackVideoShare, }; }; /** * 支付相关事件跟踪Hook */ export const usePaymentTracking = () => { const trackPaymentStart = (paymentType: string, amount: number, currency: string = 'USD') => { trackEvent('payment_start', { event_category: 'ecommerce', value: amount, custom_parameters: { payment_type: paymentType, currency: currency, }, }); }; const trackPaymentComplete = (paymentType: string, amount: number, currency: string = 'USD') => { trackEvent('purchase', { event_category: 'ecommerce', value: amount, custom_parameters: { payment_type: paymentType, currency: currency, }, }); }; const trackPaymentFailed = (paymentType: string, errorReason: string) => { trackEvent('payment_failed', { event_category: 'ecommerce', event_label: errorReason, custom_parameters: { payment_type: paymentType, error_reason: errorReason, }, }); }; return { trackPaymentStart, trackPaymentComplete, trackPaymentFailed, }; }; /** * 用户属性管理Hook */ export const useUserProperties = () => { const setUserAnalyticsProperties = ( userId: string, userProperties: Record ) => { setUserProperties(userId, userProperties); }; return { setUserAnalyticsProperties, }; };