MTP20_WEB_GLOBAL/src/hooks/meta-pixel/index.ts

import { onMounted } from 'vue'
import { useGlobalStore } from '@/stores'
import plus from '@/utils/h5plus'

// https://developers.facebook.com/docs/meta-pixel/reference
declare global {
    interface Window {
        fbq: any;
        _fbq: any;
    }
}

export function useMetaPixel() {
    const { getSystemInfo } = useGlobalStore()
    const pixelId = getSystemInfo('metaPixelId')

    // 初始化 MetaPixel
    const initPixel = () => {
        if (pixelId) {
            if (window.fbq) return

            const fbq: any = <T>(...args: T[]) => {
                fbq.callMethod
                    ? fbq.callMethod(...args)
                    : fbq.queue.push(args)
            }

            if (!window._fbq) {
                window._fbq = fbq
            }

            fbq.push = fbq
            fbq.loaded = true
            fbq.version = '2.0'
            fbq.queue = []

            const el = document.createElement('script')
            el.async = true
            el.src = 'https://connect.facebook.net/en_US/fbevents.js'

            const tag = document.getElementsByTagName('script')[0]
            tag.parentNode?.insertBefore(el, tag)

            window.fbq = fbq
            window.fbq('init', pixelId)
        }
    }

    // 跟踪页面视图
    const trackPageView = () => {
        if (pixelId) {
            window.fbq('track', 'PageView')
        }
    }

    // 跟踪自定义事件
    const trackEvent = (eventName: 'Lead' | 'Purchase', parameters?: Record<string, any>) => {
        // if (pixelId) {
        //     window.fbq('track', eventName, parameters)
        // }

        plus.onPlusReady((plus) => {
            plus.bridge.exec('FacebookExpand', 'expandFunction', [])
        })
    }

    // 在组件挂载时初始化
    onMounted(() => {
        initPixel()
        trackPageView()
    })

    return {
        trackEvent
    }
}