如何通过Shopify客户事件集成Facebook像素和转化API？

如何通过Shopify Customer Events集成Facebook Pixel及Conversion API？
通过BM的事件管理工具获取像素id和转化秘钥替换下面的即可。

const pixel_id = '像素ID';
const access_token = '转化API秘钥';
const test_event_code = '测试代码';
const use_test_event_code = false;
const console_mode = false;

!function (f, b, e, v, n, t, s) {
    if (f.fbq) return; n = f.fbq = function () {
        n.callMethod ?
            n.callMethod.apply(n, arguments) : n.queue.push(arguments)
    };
    if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0';
    n.queue = []; t = b.createElement(e); t.async = !0;
    t.src = v; s = b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t, s)
}(window, document, 'script',
    'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', pixel_id);

const CONSOLE_CONFIG = {
    enabled: console_mode
};

function customLog(level, ...args) {
    if (CONSOLE_CONFIG.enabled) {
        switch (level) {
            case 'log':
                console.log(...args);
                break;
            case 'error':
                console.error(...args);
                break;
            case 'warn':
                console.warn(...args);
                break;
            case 'info':
                console.info(...args);
                break;
            default:
                console.log(...args);
        }
    }
}

const FB_CONVERSIONS_API_CONFIG = {
    accessToken: access_token,
    testEventCode: test_event_code,
    pixelId: pixel_id,
    useTestEventCode: use_test_event_code
};

async function sendToConversionsAPI(eventName, eventData, eventId = null, clientId = null) {
    try {
        const eventPayload = {
            event_name: eventName,
            event_time: Math.floor(Date.now() / 1000),
            action_source: 'website',
            event_source_url: eventData?.event_source_url || window.location.href,
            user_data: {
                client_ip_address: '',
                client_user_agent: navigator.userAgent,
                external_id: clientId || '',
                fbc: getFbcCookie(),
                fbp: getFbpCookie()
            },
            custom_data: eventData
        };

        if (eventId) {
            eventPayload.event_id = eventId;
        }

        const payload = {
            data: [eventPayload],
            access_token: FB_CONVERSIONS_API_CONFIG.accessToken
        };

        const payloadForLog = {
            data: [eventPayload],
            test_event_code: payload.test_event_code || undefined
        };
        customLog('log', 'Full Payload to be sent (without access_token):', JSON.stringify(payloadForLog, null, 2));

        if (FB_CONVERSIONS_API_CONFIG.testEventCode && FB_CONVERSIONS_API_CONFIG.useTestEventCode) {
            payload.test_event_code = FB_CONVERSIONS_API_CONFIG.testEventCode;
        }

        customLog('log', 'Sending to Conversions API:', {
            event_name: eventName,
            pixel_id: FB_CONVERSIONS_API_CONFIG.pixelId,
            has_test_code: !!(FB_CONVERSIONS_API_CONFIG.testEventCode && FB_CONVERSIONS_API_CONFIG.useTestEventCode)
        });

        const response = await fetch(`https://graph.facebook.com/v23.0/${FB_CONVERSIONS_API_CONFIG.pixelId}/events`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(payload)
        });

        const result = await response.json();
        customLog('log', 'Conversions API response:', result);

        if (result.error) {
            customLog('error', 'Conversions API error:', result.error);

            // If there's a permission or configuration error, try without test_event_code
            if (result.error.code === 100 && (result.error.error_subcode === 33 || result.error.error_subcode === 34 || result.error.error_subcode === 2804019)) {
                customLog('log', 'Trying without test_event_code...');
                delete payload.test_event_code;

                const retryResponse = await fetch(`https://graph.facebook.com/v23.0/${FB_CONVERSIONS_API_CONFIG.pixelId}/events`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(payload)
                });

                const retryResult = await retryResponse.json();
                customLog('log', 'Retry response:', retryResult);

                if (retryResult.error) {
                    customLog('error', 'Retry also failed:', retryResult.error);
                } else {
                    customLog('log', 'Retry successful:', retryResult);
                }
            }
        } else if (result.success) {
            customLog('log', 'Conversions API success:', result);
        }
    } catch (error) {
        customLog('error', 'Error sending to Conversions API:', error);
    }
}

function getFbcCookie() {
    const cookies = document.cookie.split(';');
    for (let cookie of cookies) {
        const [name, value] = cookie.trim().split('=');
        if (name === '_fbc') {
            return value;
        }
    }
    return '';
}

function getFbpCookie() {
    const cookies = document.cookie.split(';');
    for (let cookie of cookies) {
        const [name, value] = cookie.trim().split('=');
        if (name === '_fbp') {
            return value;
        }
    }
    return '';
}

analytics.subscribe("page_viewed", (event) => {
    const pixelData = {
        event_source_url: event.context.window.location.href
    };
    fbq('track', 'PageView', pixelData, { event_id: event.id });
    // sendToConversionsAPI('PageView', pixelData, event.id, event.clientId);
});

analytics.subscribe("product_viewed", event => {
    const pixelData = {
        event_source_url: event.context.window.location.href,
        page_url: event.context.window.location.href,
        content_ids: [event.data.productVariant.product.id],
        content_name: event.data.productVariant.product.title,
        content_type: 'product_group',
        content_category: event.data.productVariant.product.type,
        value: event.data?.productVariant?.price?.amount,
        currency: event.data?.productVariant?.price?.currencyCode || 'USD'
    };
    fbq('track', 'ViewContent', pixelData, { event_id: event.id });
    sendToConversionsAPI('ViewContent', pixelData, event.id, event.clientId);
});

analytics.subscribe("product_added_to_cart", event => {
    const pixelData = {
        event_source_url: event.context.window.location.href,
        content_ids: [event.data.cartLine.merchandise.id],
        content_name: event.data.cartLine.merchandise.title,
        content_type: 'product',
        value: event.data?.cartLine?.cost?.totalAmount?.amount,
        currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode || 'USD',
        quantity: event.data.cartLine.quantity
    };
    fbq('track', 'AddToCart', pixelData, { event_id: event.id });
    sendToConversionsAPI('AddToCart', pixelData, event.id, event.clientId);
});

analytics.subscribe("checkout_started", event => {
    const pixelData = {
        event_source_url: event.context.window.location.href,
        value: event.data?.checkout?.totalPrice?.amount,
        currency: event.data?.checkout?.totalPrice?.currencyCode || 'USD'
    };
    fbq('track', 'InitiateCheckout', pixelData, { event_id: event.id });
    sendToConversionsAPI('InitiateCheckout', pixelData, event.id, event.clientId);
});

analytics.subscribe("payment_info_submitted", event => {
    const pixelData = {
        event_source_url: event.context.window.location.href,
        value: event.data?.checkout?.totalPrice?.amount,
        currency: event.data?.checkout?.totalPrice?.currencyCode || 'USD'
    };
    fbq('track', 'AddPaymentInfo', pixelData, { event_id: event.id });
    sendToConversionsAPI('AddPaymentInfo', pixelData, event.id, event.clientId);
});

analytics.subscribe("checkout_completed", event => {
    const lineItems = event.data.checkout.lineItems.map(item => ({
        id: item.variant.id,
        price: item.variant.price.amount,
        quantity: item.quantity
    }));
    const pixelData = {
        event_source_url: event.context.window.location.href,
        content_ids: lineItems.map(item => item.id),
        content_type: 'product',
        value: event.data?.checkout?.totalPrice?.amount,
        currency: event.data?.checkout?.totalPrice?.currencyCode || 'USD',
        num_items: lineItems.length,
        contents: lineItems
    };
    fbq('track', 'Purchase', pixelData, { event_id: event.id });
    sendToConversionsAPI('Purchase', pixelData, event.id, event.clientId);
});