Shopify中用Custom Pixel安装Google Analytics 4

文章目录[隐藏]

常见问题

这一篇介绍用Custom Pixel安装Google Analytics 4。

如果你想用Google & YouTube APP，延伸阅读：Shopify中用Google & YouTube APP安装Google Analytics 4

什么是Custom Pixel

Custom Pixel（自定义像素）是Shopify里的一种工具，允许商家通过添加自定义JavaScript代码来跟踪用户的行为，它是在Shopify的沙盒环境（Sandbox）中运行，通过iframe的形式引入到正式环境。

每一个Custom Pixel都会有单独的一个Sandbox环境，Sandbox的名字结构是web-pixcel-sandbox-Custom*****。

Custom Pixel的优缺点

优点

灵活性：自定义像素允许商家编写自己的代码，以跟踪标准事件之外的特定客户行为，或者将数据发送到不支持现成应用的第三方平台。
数据收集：通过订阅Shopify提供的事件（例如page_viewed、product_viewed、checkout_started等），你可以捕获客户互动数据，并将其传递给外部工具（如Google Analytics 4、Facebook Pixel等）。
安全性：自定义像素运行在Shopify的沙盒环境（sandbox）中，这种隔离设计增强了安全性，限制了代码对商店其他部分的干扰，同时控制了与第三方共享的数据。
无需修改主题代码：相比过去需要手动将像素代码嵌入到theme.liquid或结账脚本中，自定义像素让管理更集中和简便。

缺点

Custom Pixel是运行在沙盒中，相对线上正式环境，它是通过iframe的形式引入到正式环境，所以它会有一些限制，对于GA4来说，主要是：

指标异常，如时间相关的指标跟踪不到，user_engagement事件跟踪不到，scroll事件总是触发，跳出率很低
自定义事件跟踪受限，因为它是iframe引入，所以GTM不能直接配置事件跟踪，需要通过Shopify提供的方法analytics.subscribe去实现

配置过程

现在Custom Pixcel里安装代码，然后在GTM里配置，最后是测试。

Custom Pixcel里安装代码

需要安装的代码：

代码

  // Initialize GTM tag
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
  


//  analytics.subscribe("all_standard_events", event => {
//    console.log("Event data ", event?.data);
// });

analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "page_viewed",
    url: event.context.document.location.href,
    page_title: event.context.document.title,
  });
});

analytics.subscribe("checkout_completed", (event) => {
  dataLayer.push({ ecommerce: null });
  const items = event.data?.checkout?.lineItems?.map((item) => {
    return {
      item_id: item.variant.product.id,
      item_name: item.variant.product.title,
      price: item.variant.price.amount,
      quantity: item.quantity
    }
  });
  dataLayer.push({
    event: "purchase",
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.checkout?.currencyCode,
      value: event.data?.checkout?.subtotalPrice?.amount,
      transaction_id: event.data?.checkout?.order?.id,
      coupon: event.data?.checkout?.discountAllocations,
      shipping: event.data?.checkout?.shippingLine?.price?.amount,
      tax: event.data?.checkout?.totalTax?.amount,
      items: items
    }
  });
});
analytics.subscribe("payment_info_submitted", (event) => {
  dataLayer.push({ ecommerce: null });
  const items = event.data?.checkout?.lineItems?.map((item) => {
    return {
      item_id: item.variant.product.id,
      item_name: item.variant.product.title,
      price: item.variant.price.amount,
      quantity: item.quantity
    }
  });
  dataLayer.push({
    event: "add_payment_info",
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.checkout?.currencyCode,
      value: event.data?.checkout?.subtotalPrice?.amount,
      items: items
    }
  });
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  dataLayer.push({ ecommerce: null });
  const items = event.data?.checkout?.lineItems?.map((item) => {
    return {
      item_id: item.variant.product.id,
      item_name: item.variant.product.title,
      price: item.variant.price.amount,
      quantity: item.quantity
    }
  });
  dataLayer.push({
    event: "add_shipping_info",
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.checkout?.currencyCode,
      value: event.data?.checkout?.subtotalPrice?.amount,
      items: items
    }
  });
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_address_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_contact_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});
analytics.subscribe("form_submitted", (event) => {
    const emailRegex = /email/i;
    const [email] = event.data.element.elements
    .filter((item) => emailRegex.test(item.id) || emailRegex.test(item.name))
    .map((item) => item.value);
  
    const formDetails = event.data.element.elements.map((item) => {
      return {
        id: item.id,
        name: item.name,
        value: item.value,
      };
    });
  window.dataLayer.push({
    event: "form_submitted",
    timestamp: event.timestamp,
    id: event.data.element.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: email,
    formDetails: formDetails
  });
});

analytics.subscribe("checkout_started", (event) => {
  dataLayer.push({ ecommerce: null });
  const items = event.data?.checkout?.lineItems?.map((item) => {
    return {
      item_id: item.variant.product.id,
      item_name: item.variant.product.title,
      price: item.variant.price.amount,
      quantity: item.quantity
    }
  });
  dataLayer.push({
    event: "begin_checkout",
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.checkout?.currencyCode,
      value: event.data?.checkout?.subtotalPrice?.amount,
      items: items
    }
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  dataLayer.push({ ecommerce: null });
  dataLayer.push({
    event: "add_to_cart",
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,
      value: event.data?.cartLine?.cost?.totalAmount?.amount,
      items: [
      {
        item_id: event.data?.cartLine?.merchandise?.product?.id,
        item_name: event.data?.cartLine?.merchandise?.product?.title,
        price: event.data?.cartLine?.merchandise?.price?.amount,
        quantity: event.data?.cartLine?.quantity
      }
      ]
    }
  });
});

analytics.subscribe("cart_viewed", (event) => {
  dataLayer.push({ ecommerce: null });
  const items = event.data?.cart?.lines?.map((item) => {
    return {
      item_id: item.merchandise.product.id,
      item_name: item.merchandise.product.title,
      price: item.merchandise.price.amount,
      quantity: item.quantity
    }
  });
  dataLayer.push({
    event: "view_cart",
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.cart?.cost?.totalAmount?.currencyCode,
      value: event.data?.cart?.cost?.totalAmount?.amount,
      items: items
    }
  });
});



analytics.subscribe("product_viewed", (event) => {
  dataLayer.push({ ecommerce: null });
  dataLayer.push({
    event: "view_item",
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.productVariant?.price?.currencyCode,
      value: event.data?.productVariant?.price?.amount,
      items: [
      {
        item_id: event.data?.productVariant?.product?.id,
        item_name: event.data?.productVariant?.product?.title,
        price: event.data?.productVariant?.price?.amount,
        quantity: 1
      }
      ]
    }
  });
});

analytics.subscribe("search_submitted", (event) => {
  window.dataLayer.push({
    event: "search_submitted",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    query: event.data?.searchResult?.query,
  });
});

//analytics.subscribe("collection_viewed", (event) => {
 // window.dataLayer.push({
 //   event: "collection_viewed",
  //  timestamp: event.timestamp,
   // id: event.id,
  //  client_id: event.clientId,
  //  url: event.context.document.location.href,
  //  collection_id: event.data?.collection?.id,
  //  collection_title: event.data?.collection?.title,
 // });
//});

里面的GTM容器ID要换成你自己，然后在Shopify里点击「Settings」——「Customer Events」——「Add Custom Pixel」，给Custom Pixel命名，权限那里都选择不需要，然后就可以添加代码。

GA4里关闭增强衡量事件

增强型衡量的设置在网站数据流详情：

点击齿轮图标就可以看到增强型衡量功能设置界面：

全部都不勾选，勾选这些会影响指标，如滚动次数，一打开就会触发，因为它是iframe引入，根本没有真正的滚动可言。

GTM里配置

在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google 代码」，命名为“Disable Default PageView”，然后做如下设定：

因为Custom Pixel是安装在Sandbox里，而Sandbox里的URL是不规则，如是这样的结构/wpm@10e09e41w77fb031apd6c28ceam532d5d9a/custom/web-pixel-118849878@4/sandbox/modern/page-name，所以不能用默认的页面跟踪，但又需要加载Google代码，需要需要将send_page_view设置为false，这样就不会发送默认的页面跟踪。

而实际的页面跟踪会用自定义事件，代码里的这一段就是：

analytics.subscribe('page_viewed', (event) => {
  window.dataLayer.push({
   'event': 'page_viewed',
   'page_location': event.context.window.location.href,
   'page_title': event.context.document.title,
  });
});

在GTM中点击「代码」——「新建」——「选择一个变量类型以开始设置…」——「数据层变量」，命名为dlv_page_location，做如下设置：

同理去创建数据层变量dlv_page_title。

在GTM中点击「代码」——「新建」——「选择一个触发器类型以开始设置…」——「自定义事件」，命名为page_viewed，做如下设置：

在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google Analytics：GA4 事件」，命名为“GA4-Event-PageView”，然后做如下设定：

接下来就是配置自定义事件，电商事件，可以直接用一条Tags去配置，在GTM中点击「代码」——「新建」——「选择一个触发器类型以开始设置…」——「自定义事件」，命名为All Event，做如下设置：

在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google Analytics：GA4 事件」，命名为“GA4-Event-All Event ”，然后做如下设定：

设置事件参数page_location是为了获得准确的URL。

测试

由于Custom Pixel是在沙盒里，所以GTM里的直接预览测试这种方式是使用不了的，有两种测试方式：

一种是Custom Pixel里Pixel Helper，在Custom Pixel里点击Test就可以测试：

可以看触发的事件，以及里面的发送的数据:

但这种方式只能看到成功发送的事件，如果有错的时候，你不知道dataLayer是否发送数据，这时候就要用另一种方式调试。

另一种是用浏览器的控制台，在Top这里找到Sandbox环境，Sandbox的名字结构是web-pixcel-sandbox-Custom*****，可能会有多个：

逐个试，在控制台输入dataLayer，看Custom Pixel是在哪个Sandbox运行：

就可以看dataLayer里的信息。

常见问题

问题	原因	方案
时间指标都是0	安装在Sandbox，记录不到user_engagement事件，其他事件里缺少时间参数	在theme里安装GTM，能记录到user_engagement事件，但时间指标还是不准，这个无解
事件跟踪不触发	安装在Sandbox，通过iframe里引入	通过analytics.subscribe跟踪
GTM预览不了	安装在Sandbox，通过iframe里引入，预览不了	1、浏览器的控制台的Top切换对应的沙盒 2、服务端可以预览测试
scroll总触发	安装在Sandbox，通过iframe里引入，一打开就触发	建议关闭该事件
事件重复触发	未知待定	Custom Pixel里加限制

如有疑问，可以在文章底部留言或邮件(haran.huang@ichdata.com) 我~