如何在 Shopify 上设置 Google Tag Manager（+数据层）

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

本文将指导您如何在 Shopify 上理解和设置 Google Tag Manager。我们将以 Shopify 为例进行说明，但您也可以将这些知识应用到其他平台，例如 WordPress、Webflow 等。您只需自行调整一些设置即可。

我和我的团队已经为超过 2000 家 Shopify 店铺完成了 Google Tag Manager 的设置。我们还开发了几个开源解决方案，已被 5000 多家商家使用。这一切都证明——我们深谙此道。您来对地方了。

Google Tag Manager 是一款功能强大的工具，尤其对电商网站来说价值非凡。我撰写了大量相关内容。您可能是第一次尝试（嘿，新朋友！），或者您之前已经看过我的其他教程，现在想升级您的设置（再次欢迎！）。

这份关于 Shopify Google Tag Manager 集成的完整指南包含 3 个主要部分、9 个步骤和 24 个子步骤。我知道这听起来很多！但我保证它不会让你感到疲惫。每个部分都旨在教会你一些重要的知识；它们之间相互关联。你会觉得很容易上手。

有些小事你几乎会自然而然地去做，或者已经做过了。所以，再说一遍，17岁不应该吓到你。它会非常有效；你会乐在其中。

以下是如何在 Shopify 上设置 Google Tag Manager 的方法：

第一部分：在 Shopify 上设置 GTM

步骤 1：将 GTM 脚本添加到 Shopify 主题文件中。
步骤 1.1：复制 GTM 脚本
步骤 1.2：Shopify 主题 > 编辑代码
步骤 1.3：将脚本粘贴到 theme.liquid 文件中。
步骤 2：将 GTM 脚本添加到感谢页面 > “附加脚本”
步骤 3：在 GTM 上创建 GA4 代码并验证 GTM 设置
步骤 3.1 在 GTM 上创建 GA4 全局代码
步骤 3.2 使用 GTM 的预览模式进行验证

第二部分：在 Shopify 上设置数据层

步骤 4：将产品视图数据层添加到 Shopify 主题中
步骤 4.1：创建新代码片段
步骤 4.2：将产品视图数据层粘贴到代码片段中
步骤 4.3：包含代码片段
步骤 5：在 Shopify 上添加购买数据层

第三部分：设置 Google 代码管理器代码、触发器和变量

步骤 6：设置电子商务变量
步骤 6.1：添加新变量
步骤 6.2：命名并选择数据层变量
步骤 6.3：添加 DLV 名称和参数
步骤 6.4：创建所有变量
步骤 7：为 Shopify 创建 GTM 触发器
步骤 8：创建 GA4 - 查看商品电子商务事件
步骤 8.1：创建 GA4 事件
步骤 8.2：添加事件参数。
步骤 9：使用 Google Tag Manager 调试模式验证 Shopify GTM 设置。
步骤 9.1：测试 GA4 查看项目 - 调试模式
步骤 9.2：测试 GA4 查看项目 - 标签详情

咱们开始吧！

第一部分：在 Shopify 上设置 GTM

在本节中，我们将把 GTM 容器脚本添加到 Shopify 主题文件中，并添加一些要在感谢页面触发的脚本。再次强调，这适用于 Shopify Plus 和非 Plus 版本。（是的，您也可以在 Shopify 非 Plus 版本中设置 Google Tag Manager。）

如果您确定已在 Shopify 商店中设置好 GTM 并且运行良好，则可以跳过步骤 1 和步骤 2。我强烈建议您执行步骤 3，并验证 GTM 在商店中是否正常工作。

步骤 1：将 GTM 脚本添加到 Shopify 主题文件中。

这很经典。我们会从您的 Google Tag Manager 帐户复制 GTM 容器的脚本，然后将其粘贴到 theme.liquid 文件和 checkout.liquid 文件中。checkout.liquid 文件仅适用于 Shopify Plus 商家。

步骤 1.1：复制 GTM 脚本

前往您的 Google 代码管理器帐户。如果您还没有帐户，可以轻松创建一个新帐户或在现有帐户中创建一个新容器。点击菜单栏右上角的 GTM ID（例如 GTM-KL4TS23），即可查看完整的代码块。

直接复制即可。我们可以忽略第二个代码块，它在我们的场景中用处不大。如果您好奇为什么忽略它，请在评论区提问，我会解答。

步骤 1.2：Shopify 主题 > 编辑代码

我们需要编辑主题文件。您可以使用重复的主题或生产环境主题。这完全取决于您。

Shopify 后台 > 销售渠道 > 在线商店 > 主题 > 选择主题 > 编辑代码

步骤 1.3：将脚本粘贴到 theme.liquid 文件中。

现在需要将此 GTM 脚本添加到 Shopify 主题的 Liquid 文件中。此脚本将应用于除结账步骤之外的所有页面。Shopify Plus 商家还应将代码添加到 checkout.liquid 文件中。

请务必将上面的代码块粘贴到文件中。这是放置 Google 代码管理器脚本的最佳位置。

保存代码更改。如果您使用的是重复主题，则需要在测试时发布或预览该主题。我们收到很多商家的投诉，称解决方案无效——但他们只是测试了错误的主题。

再次强调，Shopify 上的 Google Tag Manager 设置也适用于非 Shopify Plus 商家。您只是错过了结账事件。购买流程将在下一步中继续讲解。好消息是，我很快会发布另一篇教程，其中也介绍了如何使用 Shopify 的新功能 Shopify Customer Events 和 Shopify Pixel 来跟踪结账事件。

步骤 2：将 GTM 脚本添加到感谢页面 > “附加脚本”

您应该也熟悉这部分内容。Shopify 允许您管理“订单状态页面（又名感谢页面）”上的脚本。

访问 Shopify 后台 > 设置 > 结账 > 订单状态页面 > 附加脚本

也请将 GTM 代码粘贴到这里。理想情况下，它应该位于顶部。既然您已经在这里了，也可以清理一下这部分是否有冗余脚本。请勿删除任何您不了解的内容。

现在是时候测试我们的 GTM 安装了。

步骤 3：在 GTM 上创建 GA4 代码并验证 GTM 设置

此步骤有两个目的：

创建 Google Analytics 4 配置代码。这将跟踪所有页面浏览量，并有助于我们开展后续活动。
测试 GTM 集成。是的，即使您确信 GTM 已在您的商店中正常运行，我们也绝不会不经过测试就继续下一步，以便找出问题所在。

步骤 3.1 在 GTM 上创建 GA4 全局代码

现在我们将创建一个 Google Analytics 4 配置代码（又称全局代码）。

Google 代码管理器 > 代码（左侧菜单） > 添加新代码 > 命名为：“GA4 - Global”。

添加您的 GA4 衡量指标 ID。它应该类似于：G-Y5VMTEWR8V。如果您还没有 Google Analytics（分析）媒体资源，可以创建一个新的。

然后从触发部分选择“所有页面”，然后保存标签。

步骤 3.2 使用 GTM 的预览模式进行验证

返回 GTM，点击右上角的“预览”。输入您的店铺网址，然后点击“连接”。调试屏幕上应该会显示 GA4 全局代码。

如果您已将 GTM 容器脚本安装到重复的 Shopify 主题中，则需要在此处使用主题预览链接。

如果我们已经看到 Google Tag Manager 和 Google Analytics 4 的全局代码在您的 Shopify 商店中正常运行，我们就可以安全地进入下一阶段。

第二部分：在 Shopify 上设置数据层

我们需要数据层才能通过 Google 代码管理器正确处理和发送数据。我们将为您的商店中的产品页面和购买页面设置数据层。

哦，天哪——我喜欢数据层。

数据层以标准化的结构化格式承载数据，以便 GTM 可以正确读取和处理数据。

例如，在单个产品页面中，我们需要发送：

产品 ID
产品名称
产品价格
货币
产品类别等

因此，所有这些数据都将在产品视图数据层中进行格式化。同样的方法也适用于 Shopify 的订单状态页面。我们将添加购买数据层。

我当然会分享代码块，而且你们大多数人来这里也是为了这个目的，对吧？

步骤 4：将产品视图数据层添加到 Shopify 主题中

现在我们将在您的主题文件中添加一个新的代码片段，并将数据层放在那里。

虽然可以直接在 theme.liquid 文件中添加数据层，但我选择了一种更规范的方法。我们将为此创建一个新的代码片段。

如您在代码块中看到的，我们将在 Shopify 产品数据层上添加以下事件：

产品 ID
产品名称
产品价格
产品品牌
产品系列
产品类型
产品 SKU
变体 ID
变体标题
货币

正确设置后，所有这些 Shopify 产品数据层都将在 Google 代码管理器中可用。

步骤 4.1：创建新代码片段

就像步骤 1.2 中那样，转到 Shopify 主题的“编辑代码”页面。这次，我们将进行一些不同的操作。向下滚动并找到名为“代码片段”的部分。

点击“添加新代码片段”，然后将其命名为：“analyzify-product-datalayer”。您可以随意命名，但最好这样命名，以便日后跟踪更改。

步骤 4.2：将产品视图数据层粘贴到代码片段中

明白了！我们将使用 Analyzify 的开源产品数据层脚本。只需复制下面的代码，粘贴到新的代码片段中，然后保存即可。



{% comment %} Product view data layer v2.1 - part of "Shopify GA4 Kit" by Analyzify
Visit https://analyzify.com/shopify-google-analytics/ga4 for complete tutorial 
{% endcomment %}

{% assign template_name = template.name %}

<script type="text/javascript">
window.dataLayer = window.dataLayer || [];

window.appStart = function(){
  window.productPageHandle = function(){

    var productName = "{{ product.title | remove: "'" | remove: '"' }}";
    var productId = "{{ product.id }}";
    var productPrice = "{{ product.price | money_without_currency }}";
    var productBrand = "{{ product.vendor | remove: "'" | remove: '"' }}";
    var productCollection = "{{ product.collections.first.title | remove: "'" | remove: '"' }}";
    var productType = "{{ product.type | remove: "'" | remove: '"' }}";
    var productSku = "{{ product.selected_or_first_available_variant.sku | remove: "'" | remove: '"' }}";
    var productVariantId = "{{ product.selected_variant.id | default: product.variants[0].id }}";
    var productVariantTitle = "{{ product.selected_variant.title | default: product.variants[0].title }}";

    window.dataLayer.push({
      event: "analyzify_productDetail",
      productId: productId,
      productName: productName,
      productPrice: productPrice,
      productBrand: productBrand,
      productCategory: productCollection,
      productType: productType,
      productSku: productSku,
      productVariantId: productVariantId,
      productVariantTitle: productVariantTitle,
      currency: "{{ shop.currency }}",
    });
  };


  {% case template_name %}
  {% when "product" %}
    productPageHandle();
  {% endcase %}

}
appStart();
</script>

请务必保存这段代码片段。

步骤 4.3：包含代码片段

现在我们将使用 theme.liquid 文件来引入（渲染）这段代码片段。再次打开主题编辑部分。

在左侧边栏的“布局”部分找到 theme.liquid 文件。打开 theme.liquid 文件，并在文件中搜索“/head”。将以下代码粘贴到其上方：



{% render 'analyzify-product-datalayer.liquid' %}

最终效果应该和截图中一样。现在我们可以开始设置购买数据层了。

步骤 5：在 Shopify 上添加购买数据层

现在，我们将把采购数据层添加到订单处理 > 附加脚本中——就像我们在步骤 2 中所做的那样。

前往 Shopify 管理后台 > 设置（左下角） > 结账，然后导航至订单处理 > 附加脚本。

复制以下代码，然后将其粘贴到我们最近添加的 Google 代码管理器脚本下方。



{% comment %} Purchase data layer v2.1 - part of "Shopify GA4 Kit" by Analyzify
Visit https://analyzify.com/shopify-google-analytics/ga4 for complete tutorial 
{% endcomment %}

{% assign template_name = template.name %}

<script type="text/javascript">
window.dataLayer = window.dataLayer || [];

{% if first_time_accessed and post_purchase_page_accessed != true %}

  var shippingPrice = "{{shipping_price | money_without_currency }}".replace(",", ".");
  var totalPrice = "{{checkout.total_price | money_without_currency }}".replace(",", ".");
  var taxPrice = "{{tax_price | money_without_currency }}".replace(",", ".");
  var orderItemsName = [];
  var orderItemsId = [];
  var orderItemsCategory = [];
  var orderItemsBrand = [];
  var orderItemsType = [];
  var orderItemsPrice = [];
  var orderItemsSku = [];
  var orderItemsvariantId = [];
  var orderItemsQuantity = [];
  var orderItemsvariantTitle = [];
  var totalQuantity = 0;

  {% for line_item in checkout.line_items %}  
      orderItemsName.push("{{ line_item.product.title | remove: "'" | remove: '"'}}");
      orderItemsId.push("{{ line_item.product_id }}");
      orderItemsPrice.push("{{ line_item.price | times: 0.01 }}");
      orderItemsSku.push("{{ line_item.sku | remove: "'" | remove: '"' }}");
      orderItemsQuantity.push("{{ line_item.quantity }}");
      orderItemsvariantId.push("{{ line_item.variant_id }}");
      orderItemsvariantTitle.push("{{ line_item.variant.title }}");
      orderItemsCategory.push("{{ line_item.product.collections.last.title | remove: "'" | remove: '"' }}");
      orderItemsBrand.push("{{ line_item.vendor | remove: "'" | remove: '"' }}");
      orderItemsType.push("{{ line_item.product.type | remove: "'" | remove: '"' }}");
      totalQuantity += {{ line_item.quantity }};
  {% endfor %}

  window.dataLayer.push({  
      page_type: "purchase",
      event: "analyzify_purchase",
      currency: "{{ shop.currency }}",
      totalValue: totalPrice,
      totalValueStatic: totalPrice,
      currencyRate: window.Shopify.currency.rate,
      shipping: shippingPrice,
      tax: taxPrice,
      payment_type: "{{order.transactions[0].gateway}}",
      {% if order.name %}
      transaction_id: "{{order.name | remove: "'" | remove: '"'}}",
      {% else %}
      transaction_id: "{{checkout.id | remove: "'" | remove: '"'}}",
      {% endif %}
      productName: orderItemsName,
      productId: orderItemsId,
      productBrand: orderItemsBrand,
      productCategory: orderItemsCategory,
      productVariantId: orderItemsvariantId,
      productVariantTitle: orderItemsvariantTitle,
      productSku: orderItemsSku,
      productType: orderItemsSku,
      productPrice: orderItemsPrice,
      productQuantity: orderItemsQuantity,
  });

{% endif %}

}
appStart();
</script>

现在我们的数据层已经准备就绪，应该已经开始发送数据片段和事件了。精彩的部分即将开始！

第三部分：设置 Google 代码管理器代码、触发器和变量

Google Tag Manager 是我最喜欢的工具，我很乐意向您介绍它。我们将创建代码、触发器和变量。在本节中，我们将在您的 GTM 帐户中准备好变量和事件。

我们将通过 GTM 为您的 Shopify 商店设置 GA4 电子商务事件。您可以利用这些信息设置其他标签。

步骤 6：设置电子商务变量

你还记得我们上面添加的数据层吗？现在我们将逐一提取它们的变量，并将它们定义到 GTM 中。这样，你的 Shopify 商店数据就能导入到 GTM 中了。

需要设置的变量太多了。我会先设置其中一个，然后你对其他变量重复这个过程。

步骤 6.1：添加新变量

访问 Google 代码管理器，点击左侧菜单中的“变量”，然后点击“添加新变量”。

步骤 6.2：命名并选择数据层变量

命名规则在这里非常重要，因为我们会有很多数据层变量。第一个变量命名为：dlv - productId

你当然可以选择自己喜欢的名字——但我强烈建议遵循以下做法：



“dlv - variable-name”

步骤 6.3：添加 DLV 名称和参数

因此，在这种情况下，变量名将是：dlv - productId，我们将在数据层变量名称部分添加 productId。

本部分区分大小写，请确保添加的内容与代码块中的数据层变量完全一致。您可以参考下图进行确认。

保存这个，然后继续创建其余的。

步骤 6.4：创建所有变量

现在需要创建所有变量。您可以检查数据层代码，确保变量名称正确。

这些才是我们应该创造的东西：

总价值
总值静态
汇率
船运
税
支付类型
交易 ID
产品名称
产品ID
产品品牌
产品类别
产品变体 ID
产品变体标题
产品编号
产品类型
产品价格
产品数量
产品变体 ID
产品变体标题
货币

坏消息是，你必须一个一个地创建它们。我可以提供一个预先构建好的文件，但我只创建了接下来步骤中要用到的那些。

你也可以随意创建你想用的示例。但我真的希望你能多加练习和学习，不好意思啦 :)

以下是我的做法：

最终结果应该如下所示：

步骤 7：为 Shopify 创建 GTM 触发器

我们将创建以下自定义事件作为触发器：

产品视图
购买

触发器将从我们最近添加到 Shopify 主题和订单处理脚本中的自定义数据层事件中获取数据。

代码块中 dataLayer.push 下方的事件部分指的是我上面提到的自定义事件。



window.dataLayer.push({
page_type: "purchase",
event: "analyzify_purchase"

因此，我们的触发器将是自定义事件，名称如下：

分析 Shopify 购买：analyzify_purchase
分析 Shopify 产品视图：analyzify_productDetail

以下是创建购买触发器的方法。

最终效果应该如下所示：

步骤 8：创建 GA4 - 查看商品电子商务事件

现在是时候实际运用变量和触发器了。我们将为 Shopify 创建一个 Google Analytics 4 的“查看商品”事件。

步骤 8.1：创建 GA4 事件

点击“标签”>“创建新标签”（与步骤 3 相同）。将标签命名为“GA4 - 查看项目”。这次，从标签类型中选择“GA4 事件”。

事件名称应符合 GA4 指南，因此应为 view_item。

步骤 8.2：添加事件参数

现在我们需要添加事件参数。参数名称应与 GA4 文档保持一致，因此应为 item_name 而不是 product_name。

第二个字段用于选择我们最近添加的变量。方括号表示变量。

以下是我在图片中使用的全部列表。



'item_name': {{dlv - productName}},
'item_id': {{dlv - productId}},
'item_brand': {{dlv - productBrand}},
'item_category': {{dlv - productCategory}},
'item_variant': {{dlv - productVariantTitle}},
'price': {{dlv - productPrice}},
'quantity': {{dlv - productQuantity}},

我们已经完成了产品浏览事件的设置。如果您正在寻求 GA4 电子商务设置，也可以对“购买”事件执行相同的操作。由于本文的主题是在 Shopify 上安装 GTM，因此我不会再浪费时间讨论 GA4。

步骤 9：使用 Google Tag Manager 调试模式验证 Shopify GTM 设置。

现在我们将使用 Google 代码管理器的调试模式——就像我们在步骤 3.2 中所做的那样。我们将尝试产品浏览事件。

步骤 9.1：测试 GA4 查看项目 - 调试模式

按照步骤 3.2 的操作，这次输入产品 URL 而不是首页 URL。再次提醒，如果您使用的不是正式版主题，请务必使用主题预览链接。

GTM调试模式应该在左侧显示事件，在右侧显示标签。如果您看到analyzify_product详情和GA4查看项目标签，则说明设置正确，值得庆祝。

步骤 9.1：测试 GA4 查看项目 - 标签详情

让我们深入探讨一下，以便那些想要更深入了解和调试的人。点击左侧的事件名称，然后点击右侧的标签名称。如果您不先点击事件名称，则看不到详细信息。

您应该可以看到随此事件一起发送的所有参数。

看起来一切就绪。如果出现问题，请务必仔细检查您的数据层和 GTM 容器。您在将 Shopify 商店与数据层或 GTM 连接时肯定操作有误。

这是一个万无一失的教程。欢迎在评论区提出质疑——我很乐意解答并根据需要进行修改。

Shopify 和 Google Tag Manager 集成常见问题解答

您可以想象，我们每天都会收到几十个关于这个主题的问题。我会在这里尽量解答一些常见问题。如果您还有其他关于 Shopify 和 GTM 的问题，欢迎随时提问。

我可以在没有 Shopify Plus 套餐的情况下在 Shopify 上使用 GTM 吗？

是的，您完全可以使用 Shopify Basic 或 Advanced 套餐在 Shopify 上设置 GTM。Shopify Plus 还提供额外的 checkout.liquid 文件，您可以在其中将 Google Tag Manager 代码片段添加到 Shopify 结账步骤中。但是，随着 Shopify 最近推出的 Shopify Checkout Extensions，checkout.liquid 文件也将被移除。

我可以在 Shopify Checkout 上安装 Google Tag Manager 吗？

是的，但这需要 Shopify Plus 套餐。虽然所有套餐都可以在 Shopify 上设置 GTM，但只有 Shopify Plus 套餐才能编辑结账流程——需要使用 checkout.liquid 文件。
不过，Shopify 已宣布，在最新的 Shopify Checkout Extensions 更新中，将无法添加包含 GTM 在内的脚本。

我需要为 Google Tag Manager 配备 Shopify 数据层吗？

即使不使用数据层，您也可以在 Shopify 上安装 Google Tag Manager，但其功能非常有限。如果您想传递产品 ID、名称、价格、订单 ID 等特定数据，则需要使用数据层。数据层允许您使用特定的标签传递参数。您可以查看上面的文章以获取包含示例的完整解答。

如何使用 Google Tag Manager 在 Shopify 上设置增强型电子商务？

增强型电子商务是通用分析的一项功能。您无需在 Shopify 上安装 Google 代码管理器即可使用增强型电子商务。Shopify 的原生通用分析集成已经涵盖了此功能。您可以参考上面的教程和 Shopify GA4 工具包在 Shopify 上设置 Google Analytics 4 电子商务事件。

Google Tag Manager 和 Google Analytics 有什么区别？

Google Analytics 是一款跟踪和报告工具。您可以在 Google Analytics 中查看访客和用户行为数据。Google Tag Manager (GTM) 是连接您的网站和跟踪工具的桥梁。GTM 使您能够轻松地在网站上设置跟踪脚本，并将相关数据一并传递。

我需要 Shopify 应用才能设置 Google Tag Manager 吗？

严格来说，不需要。您可以在 Shopify 上安装 GTM 脚本，而无需使用应用程序。这篇深入的教程将详细介绍如何在不使用应用程序的情况下设置 GTM。但是，像 Analyzify 这样的应用程序可以提供更深入的跟踪功能。Analyzify 的数据层涵盖了许多其他参数，并提供完整的电子商务跟踪。Shopify GTM 应用程序也提供了许多内置集成。因此，您无需修改代码或费力地设置 GTM 即可完成完整的跟踪。

希望这些信息对您有所帮助！还有其他问题吗？欢迎在评论区留言。

文章来源：https://dev.to/ekuplu/how-to-set-up-google-tag-manager-on-shopify-data-layers-16j5

分享

如何在 Shopify 上设置 Google Tag Manager（+数据层）DEV 的全球展示挑战赛，由 Mux 呈现：展示你的项目！