创建 Google Tag Manager 自定义像素代码

已于 Apr 01, 2023 打印了此页面。若要查看当前版本，请访问 https://help.shopify.com/zh-CN/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial。

此页面包含有关如何将 Google Tag Manager (GTM) 用作自定义像素代码来管理第三方像素代码的说明。

准备创建自定义像素代码

在使用 Google Tag Manager 创建自定义像素代码之前，请查看以下信息，确保您了解如何配置像素代码：

创建 Google Tag Manager 自定义像素代码

步骤

  1. 打开 Google Tag Manager账户，然后选择要设置自定义像素代码的账户。
  2. 点击后台，然后点击安装 Google Tag Manager 以打开安装代码。
  3. 复制属于页面的标题分区的代码块。
  4. 从此代码块中删除 HTML 标记。
  5. 将其余代码插入新的 Shopify 自定义像素代码。
  6. 使用 window.dataLayer = window.dataLayer || []; 初始化 dataLayer 对象。

您的自定义像素代码应如下所示，并且 GTM-XXXXXXX 应匹配您自己的 GTM 容器 ID。

(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');

window.dataLayer = window.dataLayer || [];

订阅客户事件并推送至 GTM 的 dataLayer

您不需要向 Liquid 模板文件中添加 dataLayer.push() 调用，而是将在自定义像素代码中完成所有 GTM dataLayer 工作。

默认情况下，您可以订阅一组开箱即用的标准自定义事件，但您还可以通过 Liquid 模板文件发布自己的自定义事件。

下方是订阅标准“product_viewed”事件的示例，该事件指示有人查看产品。当该事件触发时，事件会被推送到 dataLayer。

analytics.subscribe('product_viewed', (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_title': event.data.productVariant.title,
  });
});

此示例中使用 Google Tag Manager 变量传递了有关产品标题的数据，这些数据可被转发到其他标签。

将旧的 dataLayer.push(event) 调用替换为 analytics.publish()

如果您之前已设置 Google Tag Manager，则需要将 dataLayer.push 调用替换为 Shopify.analytics.publish() 调用。

以下是使用 dataLayer 跟踪自定义电子邮件注册事件的简化示例。

<script>
  dataLayer.push({ event: 'email_signup', email: customer.email });
</script>

Shopify 等效示例如下所示，其中数据会被推送到自定义像素代码中。

<script>
  Shopify.analytics.publish('email_signup', {email: customer.email });
</script>

然后，在自定义像素代码中，您可以添加如下内容。

analytics.subscribe("email_signup", (event) => {
  window.dataLayer.push({
   'event': 'email_signup',
   'email': event.customData.email,
  });
});

替换旧 dataLayer.push(data)

Google Tag Manager 具有一项功能，可用于针对每次事件推送有状态的 dataLayer 对象。虽然 Shopify 的像素代码沙盒不包含等效功能，但您可以通过创建自己的数据对象并将其传递到自定义事件来实现相同的结果。

例如，在发布任何自定义事件之前，定义一个“customData”对象。

<script>
  const customData = {email: customer.email}
</script>

然后，在每次需要包含您的自定义数据时，将该对象传递到您的发布方法。

<script>
  Shopify.analytics.publish('email_signup', customData);
</script>

示例 Google Tag Manager 自定义像素代码

以下示例是 Google Tag Manager 自定义像素代码的简化版本，用于显示如何将数据发送到 GTM。若要将更多事件推送到您的 dataLayer，您可以订阅更多标准事件和自定义事件。

(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');

window.dataLayer = window.dataLayer || [];

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_id': event.data.product.id,
   'product_title': event.data.product.title,
  });
});

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
   'event': 'checkout_completed',
   'order_id': event.data.order.id,
   'currency': event.data.checkout.currencyCode,
  });
});

设置 Google Analytics 4 的提示和技巧

使用 Google Tag Manager 作为自定义像素代码时，请考虑以下设置 Google Analytics 4 (GA4) 的提示。

更整洁的页面 URL

当 GA4 在沙盒中运行时，您可能会注意到页面 URL 包含有关正在使用它的沙盒的信息。如果要从这些 URL 中删除沙盒信息，您可以关闭 GA4 的自动页面跟踪，并改为使用标准 page_viewed 事件来实现您自己的页面跟踪。

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

将您自己的事件发布到 dataLayer 后，您可以创建一个在发生 page_viewed 事件时触发的 GA4 page_viewed 标签。大多数情况下，您可以使用 Google Analytics: GA4 事件标签类型，并将“事件名称”设置为 page_view。设置标签类型和事件名称后，您应为 page_location 添加参数，并将值设置为从客户像素代码传递到数据层的值。

增强度量

在 Shopify 的像素代码沙盒中加载 GA4 时，需要手动设置一些通常被自动推测的事件。 例如，出于安全原因，使用自定义像素代码时无法自动触发出站链接点击（这是 GA4 增强度量设置的一部分）。但是，您可以自己将 GA4 的增强度量事件实现为自定义事件。

下面提供的代码包括跟踪出站链接点击的简化示例。

<script>
  function detectOutboundLink() {
    // add your logic for determining if a link click is outbound

    // if the link click is outbound then publish it
    if (isOutboundLink) {
      Shopify.analytics.publish('outbound_link', { link_url: link_url });
    }
  }
</script>

最后，在 GTM 中，创建将链接点击发送到 GA4 的 GA4 标签，同时确保事件名称为 click，以便匹配 GA4 的增强事件命名。

您可以对 Google 的任何增强度量指标实现相同的跟踪。

测试和调试

  1. 在 Chrome 浏览器中打开您的 Shopify 商店。
  2. 打开浏览器上的网络标签，找到名为 collect?... 的请求，如果数据从 Google Tag Manager 发送到 GA4，则该请求将包含您的 GA4 度量 ID。
  3. 在 Google Analytics 账户中，点击后台，然后点击调试视图。
  4. 请确保您已将 GA Debug Google 扩展添加到 Chrome 浏览器中：
    • 启动 GA Debug。
    • 在单独的标签中打开您的 Shopify 商店。
    • 在调试视图中返回 GA4，然后查看 page_viewed 事件。

准备好开始使用 Shopify 进行销售了吗？

免费试用