shopify简单接入analytics

Shopify在2022年10月份新增了pixel功能，在settings -> Customer events -> Add custom pixel中添加

// pixel初始化代码
// 这儿以facebook pixel为例
!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', YOUR_PIXEL_ID);

analytics.subscribe("page_viewed", async (event) => {
    fbq('track', 'PageView');
    console.log('page_viewed');
});

analytics.subscribe("product_viewed", async (event) => {
// event.data
    {
        "productVariant": {
            "price": {
              "amount": 0, // 价格
              "currencyCode": "CNY" // 币种
            },
            "product": {
              "title": "apple", // 商品详情
              "vendor": "My Store",
              "id": "8950526378201", // productID
              "untranslatedTitle": "apple",
              "url": "/products/apple",
              "type": "apple" // 类型
            },
            "id": "45737128657113",
            "title": "单一产地",
            "untranslatedTitle": "单一产地"
         }
    }
    
    fbq('track', 'ViewContent', {
        content_ids: [event.data?.productVariant?.id],
        content_name: event.data?.productVariant?.title,
        currency: event.data?.productVariant?.price?.currencyCode,
        value: event.data?.productVariant?.price.amount,
    });
    console.log('product_viewed');
});

analytics.subscribe("search_submitted", async (event) => {
    fbq('track', 'Search', {
        search_string: event.searchResult.query
    });
    console.log('search_submitted');
});

analytics.subscribe("product_added_to_cart", async (event) => {
// event.data
    {
        "cartLine": {
        "cost": {
          "totalAmount": {
            "amount": 0,
            "currencyCode": "CNY"
          }
        },
        "merchandise": {
          "id": "45737128689881",
          "image": {
            "src": "https://cdn.shopify.com/s/files/1/0707/7897/8521/files/face.png?v=1721968757"
          },
          "price": {
            "amount": 0,
            "currencyCode": "CNY"
          },
          "product": {
            "id": "8950526378201", // 商品id
            "title": "apple",
            "vendor": "My Store",
            "type": "apple",
            "untranslatedTitle": "apple",
            "url": "/products/apple?variant=45737128689881"
          },
          "sku": "10001",
          "title": "原始饮食",
          "untranslatedTitle": "原始饮食"
        },
        "quantity": 1 // 商品数量
      }
    }
    fbq('track', 'AddToCart', {
        content_ids: [event.data?.cartLine?.merchandise?.product?.id],
        content_name: event.data?.cartLine?.merchandise?.product?.title,
        currency: event.data?.cartLine?.merchandise?.price?.currencyCode,
        value: event.data?.cartLine?.merchandise?.price.amount,
    });
});

analytics.subscribe("checkout_started", async (event) => {
    fbq('track', 'InitiateCheckout');
    console.log('checkout_started');
});

analytics.subscribe("checkout_completed", async (event) => {
    // orderID: event.data?.checkout?.order?.id
    // currency: event.data?.checkout?.currencyCode
    // value: event.data?.checkout?.totalPrice?.amount
    
    // order line-items: event.data?.checkout?.lineItems <[]>
    // order line-items keys: id, title, quantity
    fbq('track', 'Purchase', {
        currency: event.data?.checkout?.currencyCode,
        value: event.data?.checkout?.totalPrice?.amount,
    });
    console.log('checkout_completed');
});

参考文档：

[事件名称](https://shopify.dev/docs/api/web-pixels-api/standard-events)
https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels
https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/code
https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed