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

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

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

本页相关主题

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

准备创建自定义像素代码

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

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

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

步骤：

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

订阅客户活动并推送至 GTM 的 dataLayer

您可以在自定义像素代码中使用 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 客户活动及其在 GTM 中的等效活动的列表
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	完成结账	购买
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`	`货币`
`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`	`tax`
`event.data?.checkout?.lineItems`	`items`

下方是使用以下 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。触发器中的活动名称字段必须与自定义像素代码中的活动键相匹配。

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() 调用。在模板编辑器的布局部分，您可以在 theme.liquid 文件中找到 dataLayer.push 调用。

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

下方是在 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_viewed 标记。大多数情况下，您可以使用 Google Analytics: GA4 活动标记类型，并将“活动名称”设置为 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 的任何增强度量指标实现相同的跟踪。

测试和调试

在 Chrome 浏览器中打开您的 Shopify 商店。
将 Google Tag Assistant 旧版 Chrome 扩展添加到您的浏览器中。
点击扩展图标，然后点击启用。
导航到您的站点，然后触发要测试的活动。
在扩展中，点击 Google Tag Manager 标记。数据层部分应显示已触发的活动的有效负载。
Google Tag Manager 加载的其他任何标记也将被列在扩展中。您可以点击这些标记来查看已发送给它们的数据。

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

本页相关主题

准备创建自定义像素代码

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

步骤：

订阅客户活动并推送至 GTM 的 dataLayer

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

配置 Google Tag Manager 以接受来自自定义像素代码的活动

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

替换旧 dataLayer.push(data)

设置 Google Analytics 4 的技巧

更整洁的页面 URL

增强度量

测试和调试

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