如何将 Google Tag Manager 添加到 Shopify

学习如何在 Shopify 商店中逐步安装 Google Tag Manager (GTM)。轻松跟踪 GemPages 页面的转化率、页面浏览量和自定义事件。

什么是 Google 标签管理器？

Google Tag Manager (GTM) 是一个 免费标签管理系统 它允许您在 Shopify 商店中添加和管理多个跟踪脚本，而无需每次都编辑主题代码。使用 GTM，您可以管理：

Google Analytics 4 跟踪
Facebook像素
转化事件（购买、表单提交、加入购物车）
用于营销和分析工具的自定义标签

本指南涵盖 两种方法 安装方式：可通过 Shopify 的 Google 和 YouTube 应用（更便捷）或手动代码注入（控制更多），以及如何测试 GTM。 GemPages 构建的页面.

在开始之前，请确保您已：

1. GTM 帐户和容器 ID

注册在 Google Tag Manager.

为您的 Shopify 商店创建一个容器，并复制容器 ID（GTM-XXXXXXX).

2. Shopify 管理员访问权限

必须拥有编辑主题或插入脚本的权限。

3. 跟踪计划

确定您要跟踪的事件：页面浏览量、添加到购物车、结账、购买、表单提交。

如何在 Shopify 上安装 Google Tag Manager

以下是向 Shopify 添加 GTM 的详细步骤：

方法一：使用 Google 和 YouTube 应用安装 Google 代码管理器（更简便）

如果您想要……，建议采用这种方法。 快速设置 以最少的配置。

第三步： 在MyCAD中点击软件更新 Shopify 应用商店 → Google 和 YouTube。点击安装.

第三步： 安装完成后，点击 连接Google帐户 连接您的 Google Ads 帐户并启用转化跟踪。

第三步： 输入您的 GTM 容器 ID 提示时。

第三步： 选择哪个 启用标签例如 Analytics 4、广告或转化事件。

第三步： 完成设置并 验证标签触发 使用 GTM Preview 或 Google Tag Assistant。

该方法的局限性

对高级或自定义事件的控制较少
如果您计划大量使用 GTM 和自定义触发器，则这不是理想选择。

方法二：手动安装 Google 代码管理器（推荐用于高级跟踪）

该方法提供 完全控制 如果您符合以下情况，建议这样做：

使用自定义事件
跟踪 GemPages 页面上的互动
希望在 GTM 内部拥有完全的灵活性

第三步： 打开你的主题代码

在 Shopify 管理员中，转到 网上商店→主题
点击 ⋯ → 编辑代码
打开文件 layout/theme.liquid

第三步： 将 GTM 脚本添加到

粘贴以下代码 开幕式结束后立即 行李牌:

gtm-shopify-head-tag


<!-- Google Tag Manager -->
<script>
(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');
</script>
<!-- End Google Tag Manager -->

注意： 更换 GTM-XXXXXXX 使用您实际的容器 ID。

第三步： 在之后添加 GTM noscript

在同一个文件中，粘贴以下代码 开幕式结束后立即 行李牌:


<!-- Google Tag Manager (noscript) -->

<noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>

<!-- End Google Tag Manager (noscript) -->

第三步： 保存您的更改

点击 已保存 将更改发布到您的线上店铺。

将 Google 代码管理器与 GemPages 页面结合使用

如果 GTM 安装正确，它会在所有使用 GTM 构建的页面上自动运行。 宝石页多种大口径枪械：

着陆页
产品页面
收藏页

您可以使用 GTM 来：

使用 CSS 选择器跟踪按钮点击
跟踪 GemPages 表单元素的表单提交情况
无需编辑页面代码，即可根据用户交互触发事件

GemPages 内部无需额外设置。

Shopify结账限制

Shopify会根据您的套餐限制结账过程中的跟踪行为：

Shopify基础版、Shopify高级版： GTM确实 未完全加载 在结账页面上。购买跟踪功能有限。
Shopify 加： 可以使用以下方式将 GTM 添加到结账流程中结帐.liquid 或结账扩展功能，允许进行完整的购买跟踪。

此限制由 Shopify 控制，而非由 GemPages 或 GTM 控制。

如何测试您的 GTM 安装

您可以使用以下两种方法之一来验证 GTM 是否正常工作：

选项 1：GTM 预览模式

打开谷歌标签管理器
点击预览
请输入您的店铺网址
确认标签助手已成功连接。

选项 2：页面源代码检查

开设您的店面
右键单击 → 查看页面源代码
寻找 GTM-

常见问题和故障排除

请勿重复安装 GTM： 避免同时使用 Google 和 YouTube 应用以及手动代码注入。
避免将直接使用的 GA4 脚本与 GTM 脚本混用： 使用 GTM 作为唯一的跟踪来源，以防止重复事件。
发布标签前务必进行测试： 使用预览模式确认事件是否正确触发。

如何将 Google Tag Manager 添加到 Shopify

什么是 Google 标签管理器？

如何在 Shopify 上安装 Google Tag Manager