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

您可以使用 Google Tag Manager (GTM) 作为自定义像素代码来管理您的第三方像素代码。

准备好测试 GTM 自定义像素代码后，请使用 Shopify 像素代码帮助工具来确保要跟踪的所有事件都已无误地添加到沙盒中。

您还可以使用 Google 跟踪代码管理器助手页面扩展程序来测试页面上正在加载哪些 Google 标记。但是，Google 跟踪代码管理器助手的 Troubleshoot tag（标记问题排查）功能与自定义像素代码不兼容，并且无法检测自定义像素代码中的任何 Google 标记或 GTM 正在加载的其他像素代码。

在本页

创建自定义像素代码前的准备工作

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

创建或打开 Google Tag Manager 账户并获取 GTM 容器 ID。
出于安全考虑，在我们的沙盒中加载的跟踪代码管理器与其他任何像素代码具有相同的限制。详细了解像素代码沙盒限制。

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

您可以创建 Google Tag Manager 自定义像素代码来管理您的第三方像素代码。

步骤：

打开您的 Google Tag Manager 账户，然后选择您想用于设置自定义像素代码的账户。
点击 Admin，然后点击 Install Google Tag Manager 以打开安装代码。
复制页面 head 部分的代码块。
从代码块中删除 HTML 标记。例如 <script></script>。
将剩余代码插入新的Shopify 自定义像素中。
订阅客户事件并推送到 GTM 的 dataLayer。
若要查看代码应如何显示，请参阅Google Tag Manager 自定义像素示例。
配置 Google Tag Manager 以接受来自自定义像素的事件。
可选：如果您在 checkout.liquid 文件中已有 dataLayer.push(event) 调用，则将其替换为 analytics.publish()。

订阅客户事件并将其推送到 GTM 的数据层

您可以在自定义像素代码中使用 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 变量，在您选择的标记中从事件有效负载捕获产品标题。

Google Tag Manager 自定义像素示例

下方案例是 Google Tag Manager 自定义像素的简化版本，其中说明了如何向 Google Tag Manager 发送数据。若要将更多事件推送到您的 dataLayer，您可以订阅更多标准事件和自定义事件。

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

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

//Google Consent Mode v2
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    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("payment_info_submitted", (event) => {
  window.dataLayer.push({
    event: "payment_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_shipping_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_shipping_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_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("checkout_started", (event) => {
  window.dataLayer.push({
    event: "checkout_started",
    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("product_added_to_cart", (event) => {
  window.dataLayer.push({
    event: "product_added_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    price: event.data?.cartLine?.merchandise?.price?.amount,
    currency: event.data?.cartLine?.merchandise?.id,
    product_title: event.data?.cartLine?.merchandise?.product?.title,
    quantity: event.data?.cartLine?.quantity,
    total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
  });
});

analytics.subscribe("cart_viewed", (event) => {
  window.dataLayer.push({
    event: "cart_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    total_cost: event.data?.cart?.cost?.totalAmount?.amount,
    quantity: event.data?.cart?.totalQuantity,
    cart_id: event.data?.cart?.id,
  });
});

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

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    product_id: event.data?.productVariant?.product?.id,
    product_title: event.data?.productVariant?.title,
    product_sku: event.data?.productVariant?.sku,
  });
});

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,
  });
});

配置 Google Tag Manager 以接受来自您的自定义像素的事件

创建自定义像素后，您需要配置 Google Tag Manager 以接受来自您的自定义像素的事件。为此，您需要在 Google Tag Manager 中设置标记、触发器和 dataLayer 变量。

下表列出了一些标准客户事件及其在 Google Tag Manager 中的等效事件：

可与像素配合使用的标准 Shopify 客户事件列表，其中将这些事件与其在 Google Tag Manager 中的等效事件进行比较，并列出了事件触发所需的触发器。
Shopify 事件	触发器	GTM 事件
payment_info_submitted	提交付款信息	add_payment_info
checkout_address_info_submitted	提交发货信息	add_shipping_info
product_added_to_cart	将商品添加到购物车	add_to_cart
checkout_started	开始结账	begin_checkout
checkout_completed	完成结账	purchase
product_removed_from_cart	从购物车中删除商品	remove_from_cart
cart_viewed	查看购物车	view_cart
product_viewed	查看产品详细信息页面	view_item
collection_viewed	查看商品列表	view_item_list

GTM 标记事件参数需要与预期的命名约定匹配，您的自定义像素 dataLayer 事件才能得到处理。

部分自定义像素 dataLayer 事件属性及其等效 Google Analytics 4 (GA4) 事件参数的示例如下：

使用 GA4 命名约定的自定义像素 `dataLayer` 事件列表
自定义像素 `dataLayer` 事件	GA4 事件参数
`event.data?.checkout?.currencyCode`	`currency`
`event.data?.checkout?.totalPrice?.amount`	`value`
`event.data?.checkout?.order?.id`	`transaction_id`
`event.data?.checkout?.discountAllocations`	`coupon`
`event.data?.checkout?.shippingLine?.price?.amount`	`shipping`
`event.data?.checkout?.totalTax`	`税款`
`event.data?.checkout?.lineItems`	`项目`

下面是一个使用以下 checkout_completed 事件的示例：

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    price: event.data.checkout.totalPrice.amount,
    shippingLine: event.data.checkout.shippingLine.price.amount,
    totalTax: event.data.checkout.totalTax,
  });
});

Google Tag Manager 触发器是一种自定义事件类型，其事件名称为 checkout_completed。触发器中的事件名称字段必须与您的自定义像素代码中的 event 键匹配。

orderId 和 currency 是您在 Google Tag Manager 中用于从事件中捕获数据的变量。它们可以映射到 Google Tag Manager 中的 dataLayer 变量。每个事件变量都需要有自己的 dataLayer 变量。将触发器设置为在所有自定义事件上触发。

创建一个使用您刚刚创建的触发器的标记。在事件参数下，添加您要捕获的变量。在上面的示例中，orderId、currency、price、shippingLine 和 totalTax 将设置为 dataLayer 变量。每次触发标记时，它都将随事件一起捕获这些 dataLayer 变量。

请注意，必须在 Google Tag Manager 中至少设置一个标记和一个触发器，数据传输才会发生。

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

如果您之前已设置 Google Tag Manager，则需要将您的 dataLayer.push 调用替换为 Shopify.analytics.publish() 调用。您可以在模板编辑器的 Layout（布局）分区内的 theme.liquid 文件中找到您的 dataLayer.push 调用。

您还需要替换 checkout.liquid 中的 dataLayer.push 调用。但是，由于 checkout.liquid 与 Shopify Extensions 不兼容，因此您需要使用 UI 扩展将数据推送到网页像素代码。

下面是在 theme.liquid 文件中使用 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 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_view 标记。最常见的情况是，您可以使用 Google Analytics: GA4 Event 标记类型，并将事件名称设置为 page_view。设置标记类型和事件名称后，您应为 page_location 添加一个参数，并将其值设置为您通过自定义像素传递到 dataLayer 的相同值。

增强型衡量

在 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 的任何增强型衡量指标，您都可以通过相同的方式进行跟踪。

测试和调试您的自定义像素代码

准备好测试 GTM 自定义像素代码后，请使用 Shopify 像素代码帮助工具来确保要跟踪的所有事件都已无误地添加到沙盒中。