如何在无结账页面访问权限的Shopify主题扩展中追踪Purchase事件

方案1：通过Shopify Webhooks + Meta Graph API服务器端触发 #

这是最可靠的方案，不受前端页面限制，能直接获取完整订单数据：

• 创建Shopify Webhook：在Shopify后台「设置」->「通知」->「Webhooks」中，添加Order Paid类型的webhook（优先选这个，只有付款完成才代表真实购买），设置接收URL为你的后端服务地址，格式选JSON。
• 处理Webhook请求：在后端服务中先验证Shopify的webhook签名（防止伪造请求），再解析订单数据：

  // Node.js示例：验证签名并解析订单
  const crypto = require('crypto');
  const SHOPIFY_WEBHOOK_SECRET = '你的Shopify Webhook密钥';
  
  function verifyShopifyWebhook(req) {
    const hmac = req.headers['x-shopify-hmac-sha256'];
    const body = req.rawBody;
    const generatedHash = crypto.createHmac('sha256', SHOPIFY_WEBHOOK_SECRET)
      .update(body, 'utf8')
      .digest('base64');
    return generatedHash === hmac;
  }
  
  app.post('/shopify-webhook-order-paid', async (req, res) => {
    if (!verifyShopifyWebhook(req)) {
      return res.status(403).send('Invalid signature');
    }
    const order = req.body;
    // 提取订单核心数据
    const purchaseData = {
      value: order.total_price / 100, // Shopify价格以分为单位，转换为常规货币单位
      currency: order.currency,
      content_ids: order.line_items.map(item => item.sku),
      content_type: 'product',
      num_items: order.line_items.reduce((sum, item) => sum + item.quantity, 0),
      user_data: {
        email: order.email,
        phone: order.phone,
        external_id: order.customer?.id.toString()
      }
    };
    await sendMetaPurchaseEvent(purchaseData);
    res.status(200).send('OK');
  });
  

• 调用Meta Graph API发送事件：使用你的Meta Pixel ID和系统用户访问令牌，通过Meta事件端点发送，注意对用户数据做哈希处理（Meta要求邮箱、手机号等必须哈希）：

  async function sendMetaPurchaseEvent(purchaseData) {
    const pixelId = '你的Meta Pixel ID';
    const accessToken = '你的Meta系统用户访问令牌';
    // 哈希用户标识数据
    const hashedUserData = {
      em: purchaseData.user_data.email ? crypto.createHash('sha256').update(purchaseData.user_data.email.toLowerCase()).digest('hex') : undefined,
      ph: purchaseData.user_data.phone ? crypto.createHash('sha256').update(purchaseData.user_data.phone.replace(/\D/g, '')).digest('hex') : undefined,
      external_id: purchaseData.user_data.external_id ? crypto.createHash('sha256').update(purchaseData.user_data.external_id).digest('hex') : undefined
    };
    const payload = {
      data: [
        {
          event_name: 'Purchase',
          event_time: Math.floor(Date.now() / 1000),
          user_data: hashedUserData,
          custom_data: {
            currency: purchaseData.currency,
            value: purchaseData.value,
            content_ids: purchaseData.content_ids,
            content_type: purchaseData.content_type,
            num_items: purchaseData.num_items
          }
        }
      ]
    };
    const response = await fetch(`https://graph.facebook.com/v18.0/${pixelId}/events`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${accessToken}`
      },
      body: JSON.stringify(payload)
    });
    return response.json();
  }
  

方案2：使用Shopify Checkout UI Extensions嵌入感谢页触发事件 #

如果你的店铺支持Checkout UI Extensions（如Shopify Plus），可以创建嵌入感谢页的扩展直接在前端触发事件：

• 创建Checkout UI Extension：用Shopify CLI生成扩展项目，设置目标位置为post_purchase_page（感谢页）。
• 在扩展代码中获取订单数据并触发Pixel事件：

  // Checkout UI Extension示例代码
  import {useExtensionApi} from '@shopify/ui-extensions/checkout';
  
  export default function PostPurchaseExtension() {
    const api = useExtensionApi();
    const order = api.order;
    if (order) {
      const purchaseData = {
        value: order.totalPrice.amount,
        currency: order.totalPrice.currencyCode,
        content_ids: order.lineItems.map(item => item.variant.sku),
        content_type: 'product',
        num_items: order.lineItems.reduce((sum, item) => sum + item.quantity, 0)
      };
      // 触发Meta Pixel事件（确保Pixel已全局加载）
      if (window.fbq) {
        window.fbq('track', 'Purchase', purchaseData);
      }
    }
    return null; // 扩展可仅处理逻辑，不显示UI
  }
  

• 部署扩展到店铺，用户完成结账后，感谢页的扩展会自动触发Purchase事件。

方案3：配置Shopify官方Meta Pixel Extension的事件映射 #

如果你已经在用Shopify官方的Meta Pixel Extension，可直接通过后台配置关联订单事件：

• 在Shopify后台「设置」->「像素和事件」->「Meta Pixel」中，启用自定义事件，将Order Paid事件映射到Meta的Purchase事件。
• 确认Pixel Extension已开启订单数据同步（Shopify默认会自动同步订单金额、商品信息等核心数据到Pixel事件），这种方式无需额外代码，适合使用Shopify原生结账的店铺。

内容的提问来源于stack exchange，提问作者ma24557