video-flow-b/hooks/useAnalytics.ts

/**
 * 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<string, any>
) => {
    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<string, any>
    ) => {
        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<string, any>
    ) => {
        setUserProperties(userId, userProperties);
    };

    return {
        setUserAnalyticsProperties,
    };
};