GTM 点击追踪教学：从电话、Email 到 LINE，掌握使用者点击行为！

你在网站上放了电话号码、Email 信箱，甚至还有 LINE@ 的 QR code，满心期待客户联系你……结果却石沉大海。问题可能不是没人点，而是你根本不知道“谁”点了、“何时”点了、以及“点了哪个”。这些点击是访客展现高度兴趣的信号，但如果没有追踪，它们就只是网站上不会说话的文字，你无法得知哪个联络方式最受欢迎，也无法评估行销活动是否成功引导了用户互动。

这就是 Google Tag Manager 派上用场的时候，GTM 是一个免费且强大的工具，它让我们能够像侦探一样，在不需频繁修改网站程序代码的情况下，精准追踪这些重要的使用者互动。要驾驭 GTM，我们只需要理解它的三个核心元件：变量 (Variables)、触发条件 (Triggers) 和代码 (Tags)，这篇教学将带你从零开始，一步步设定好所有点击追踪，让你网站上的重要点击都能追踪。

Part 1: 追踪前的热身：启用 GTM 内建“点击变量”

在开始追踪之前，我们得先让 GTM 具备看见和理解点击细节的能力，这就要靠“变量”了，你可以把变量想像成 GTM 用来抓取资讯的抓取器。当使用者在网站上点击某个东西时，变量就是 GTM 用来捕捉该次点击详细资讯的工具，例如被点击的连结网址或按钮上的文字。
 

然而，一个全新的 GTM 容器，预设状态下并没有开启这些专门用来抓取点击资讯的变量。这就像你有一支功能强大的麦克风，却忘了打开开关，它什么声音也收不到，因此，我们的第一步，就是手动启用所有与点击相关的内建变量。

设定步骤

1. 在 GTM 左侧导航列中，点击“变量”。

2. 在“内建变量”区块中，点击“设定”。

3. 一个设定面板会从右侧滑出。向下滚动找到“点击”的区块。

4. 将“点击”下方的所有选项都打勾，包括 Click Element、Click Classes、Click ID、Click Target、Click URL 和 Click Text。

虽然在这次的教学中，我们主要会用到 Click URL 这个变量，但预先启用所有点击变量并不会造成任何负面影响。相反地，这能让你的 GTM 容器功能更完备、更具未来扩充性。未来当你需要追踪某个特定 ID 的按钮 (Click ID) 或某一群拥有相同 CSS class 的元素 (Click Classes) 时，就不用再回到这里重新设定，省下了许多麻烦。
 

内建变量选项

Part 2: 设定触发条件：精准告诉 GTM“何时”该启动

启用变量后，GTM 已经有了抓取资讯的能力，但它还不知道“何时”该去抓，这时就需要触发条件 (Triggers) 登场了。触发条件就像是 GTM 的规则或监听器，它会不断地在网页上监听特定的使用者行为，当使用者行为刚好执行到了我们设定的触发条件，这时候就会告诉 GTM 纪录此事件。
 

一个新手常有的疑问是：“为什么我在 GTM 预览模式中，一开始都看不到任何‘Click’事件？”原因就在于，GTM 预设并不会主动监听点击。只有当我们建立并启用第一个以“点击”为基础的触发条件时，GTM 才会在网页上悄悄地安装一个“点击监听器”。正是这个监听器，在每次点击发生时，向 GTM 的预览模式回报，让我们能够看到详细的点击事件资讯。
 

在设定点击触发条件时，GTM 提供了两种主要类型：“所有元素”和“仅链接”。前者会追踪页面上任何元素的点击，后者则专注于 HTML 中的 <a> 链接标签。由于我们要追踪的电话 (tel:)、信箱 (mailto:) 和 LINE 链接 (line.me)，本质上都是 <a> 链接，因此选择“仅链接 (Just Links)”是更正确的作法。

建立一个统一的触发条件

为了让 GTM 容器保持干净整洁，我们将不为电话、信箱、LINE 各建立一个触发条件，而是使用一个更强大的规则运 算式 (Regex) 触发条件来一次搞定。

1. 前往 GTM 左侧的“触发条件 (Triggers)”，点击右上角“新增”。

2. 为这个触发条件命名，例如：“点击追踪”。

3. 点击“触发条件设定”，选择右侧视窗“仅链接”。

4. 在启动时机部分，选择“部分的链接点击”。

5. 设定触发的条件如下填入：{{Click URL}} | 与规则预算式相符 (忽略大小写) | ^tel:|^mailto:|line.me|lin.ee

这段看似复杂的 Regex 其实很简单，它的意思是：当使用者点击的链接网址，当当点击的网址是以 tel: 开头，或者以 mailto: 开头，或者包含 line.me，或者包含 lin.ee 时，就触发此条件。
 

小帮手：如果还有想追踪什么，只需要复制此串 ^tel:|^mailto:|line.me|lin.ee，随便找一个 AI 工具下指令：我 还想追踪 XXX，帮我加入此规则运算式。
 

触发条件设定

Part 3: 建立 GA4 事件代码：赋予 GTM“做什么”的指令

现在，GTM 已经知道何时该启动（触发条件），也知道启动后要抓取哪些资讯（变量），最后一步，就是告诉它具体要做什么，这就是“代码”的任务。当触发条件被满足时，它会启动对应的代码去执行一个动作——在这次的案例中，这个代码的动作就是“发送一个事件到 Google Analytics 4”。

请先建立 Google 代码步骤

1. 前往 GTM 左侧的“代码”，点击右上角“新增”。

2. 为代码命名，例如：“Google 代码”。

3. 点击“代码设定”，选择右侧“Google Analytics”点击“Google 代码”。

4. 在“代码id”栏位，填入你的 GA4 评估 ID (G-XXXXXXXX) 即可点击右上角储存。

小帮手：如果不知道自己的 GA4 评估 ID 是多少，可以至 GA4 点击左下角齿轮，选择“资料串流”，点击画面中的长框，评估 ID 会在右上角的位置。

建立 GA4 事件代码步骤

1. 前往 GTM 左侧的“代码”，点击右上角“新增”。

2. 为代码命名，例如：“GA4 Event - Contact Click”。

3. 点击“代码设定”，选择右侧“Google Analytics”点击“Google Analytics：GA4 事件”。

4. 在“设定代码”栏位，选择你已经设定好的“GA4 设定代码”，只需填入你的 GA4 评估 ID (G-XXXXXXXX) 即可。

5. 事件名称 : 输入 contact_click，在 GTM 中，使用统一、小写、底线分隔的命名方式是一个好习惯，这将有助于未来在 GA4 报表中管理与辨识事件。

6. 事件参数: 这是为事件添加背景资讯的关键步骤。点击“新增参数”两次，并参考下表进行设定。

事件参数设定表

建立 contact_type 的自订变量

这是一个进阶但非常实用的技巧，能让你的数据自动分类，大大提升分析效率。

1. 在 contact_type 参数的“值”栏位中，点击右侧的积木图示，然后选择右上角“加号”。

2. 为新变量命名：“Lookup - Contact Type”。

3. 在“变量设定”中，选择变量类型为“对照表”。

4. 将“输入变量”设定为 {{Click URL}}。

5. 在下方的表格中，点击“新增列”，并建立以下对应关系 (请替换自己的电话、信箱、line 网址)：

• 输入 tel:04-37019988 -> 输出 phone

• 输入 mailto:sales@da-vinci.com.tw -> 输出 email

• 输入 https://line.me/R/ti/p/%40gwn0923b -> 输出 line

6. 储存这个变量，这个变量会自动检查 {{Click URL}} 的内容，如果包含 tel:，就输出 phone，依此类推，实现了点击类型的自动化分类。

自订变量设定

附加触发条件

最后，在代码设定页面的下方找到“触发条件 (Triggering)”区块，点击它，并选择我们在 Part 2 建立的“点击追踪”触发条件，完成后，储存这个代码。

GA4 事件代码设定

Part 4: 实战演练：用 GTM“预览模式”滴水不漏地测试

在 GTM 中，直接点击“提交”发布而未经测试，是导致追踪失败最常见的错误之一，GTM 的“预览模式 (Preview Mode)”就是我们的安全测试沙箱，让我们可以在不影响真实网站访客的情况下，验证所有设定是否正确运作。

如何启动预览模式

1. 在 GTM 工作区的右上角，点击大大的“预览”按钮。

2. 一个名为 Tag Assistant 的新浏览器分页会开启，输入你的网站网址，然后点击“链接”。

3. 你的网站会在另一个新分页中开启，右下角会显示一个“Tag Assistant Connected”的浮动视窗。

测试流程与观察重点

1. 切换到你的网站分页，找到并点击其中一个你想追踪的链接（例如：电话号码链接）。

2. 点击后，切换回 Tag Assistant 的分页。

3. 观察左侧事件时间轴： 在你点击后，左侧的事件列表中应该会出现一个名为“链接点击”的事件，点选这个事件。

4. 观察中间“Tags”页签： 点选“链接点击”事件后，中间的“Tags Fired”区块下，应该要能看到我们刚刚建立的“GA4 Event - Contact Click”代码。这代表我们的触发条件成功启动了代码，这是成功的第一步。如果代码出现在“Tags Not Fired”区块，可以点击它来查看是哪个条件不满足。

5. 观察中间“Variables”页签： 接着，点击“Variables”页签，向下滚动，找到 Click URL 变量，确认它的值是否就是你刚刚点击的电话链接（例如：tel:0800123456）。这 一步确认了我们的触发条件所依赖的变量有被正确抓取。

GTM 预览模式测试

Part 5: 最终验收：在 GA4“DebugView”亲眼见证数据

GTM 预览模式的成功，只代表 GTM“尝试”发送了数据。我们还需要最后一步的验证，来确认 GA4 是否“成功收到”了这些数据。这就要靠 GA4 的“DebugView”功能了。

如何使用 DebugView

1. 在你的 GA4 资源中，前往左下角的“管理 (Admin)”，然后在“资料显示 (Data display)”栏位下点击“DebugView”。

2. 你不需要做任何额外设定，当你的浏览器处于 GTM 预览模式时，GTM 会自动在你发送给 GA4 的所有事件中，加上一个 debug_mode=true 的参数。这个参数就像一个秘密信号，告诉 GA4：“嘿，这是测试流量，请把它显示在 DebugView 里！”这让 GTM 和 GA4 的协同测试变得无比流畅。

3. 保持 DebugView 分页开启，回到你的网站分页，再次点击任何一个联络链接（例如 Email 或 LINE 链接）。

4. 回到 DebugView 分页，你会 在中间的事件时间轴中，看到我们命名的 contact_click 事件即时出现。

5. 点击这个 contact_click 事件。

6. 右侧会展开该事件所带有的所有参数。点开 click_destination 和 contact_type，确认它们的值是否和你预期的一样（例如 click_destination 是 mailto:hello@example.com，而 contact_type 是 email）。当你亲眼看到这些正确的数据出现在 DebugView 时，就代表从 GTM 设定到 GA4 接收的整个流程已经完美打通，大功告成。

GA4 Debug View 模式

Part 6: 进阶追踪：如何锁定单一特定链接点击？

前面的教学涵盖了如何追踪“一种类 型”的链接（如所有电话），但有时候，你需要追踪的是页面上“某一个特定”的链接或按钮，例如首页最重要的“立即购买”按钮，或是某个特定活动的报名链接。这时候，我们就需要更精准的触发条件。

步骤 1：使用“开发人员工具”找出链接的独 特识别

要追踪特定元素，我们得先找到它的“身分证”。每个网页元素 都可以有独特的属性，如 id 或 class。

1. 在你的网站上，将滑鼠移到你想追踪的链接或按钮上。

2. 点击滑鼠右键，选择“检查”。

3. 浏览器的“开发人员工具”面板会开启，并自动反白显示该元素的 HTML 程序代码。

4. 仔细观察这段程序代码，寻找 id="..." 或 class="..." 或 <a> 链接网址这类属性。id 是最理想的，因为它在整个页面上通常是独一无二的，如果没有 id，一组独特的 class 名称也可以。

步骤 2：建立一个高度精准的触发条件

找到独特识别后，我们就可以建立一个只为它触发的条件。

1. 在 GTM 中，新增一个触发条件，并选择“仅链接”或“所有元素”作为类型。如果目标是 <a> 链接，优先选择“仅链接”。

2. 触发时机选择“部分的链接点击”。

3. 设定触发条件，以下是几种常见情境：

   • 如果找到独特的 ID：

     • {{Click ID}} | 等于 | header-buy-now-button (请换成你找到的 ID)

   • 如果找到独特的 Class：

     • {{Click Classes}} | 包含 | promo-banner-cta (请换成你找到的 Class 名称)

   • 如果只能靠链接网址区分：

     • {{Click URL}} | 等于 | [https://www.example.com/products/special-offer](https://www.example.com/products/special-offer) (请换成完整的 目标网址)

步骤 3：建立专属的 GA4 事件代码

为了让数据分析更清晰，最好为这个特定的点击建立一个独立的事件代码。

1. 新增一个“GA4 事件”代码，填入评估 id。

2. 给予一个明确的事件名称，例如 buy_now_click 或 promo_banner_click。

3. (选用但建议) 新增事件参数，来传递更多有用的资讯，例如 {{Click URL}}。

4. 在“触发条件”区块，选择你在上一步建立的那个触发条件。

5. 储存代码，并使用“预览模式”和 GA4 的“DebugView”进行完整测试，确保只有当你点击那个特定链接时，这个新代码才会触发。

Part 7: 初学必读：注意事项与常见问题排除

1. 最常见的错误：忘了“发布”！

所有在 GTM 中完成的设定，都只存在于“草稿”状态。在你点击右上角的“提交 (Submit)”，为这次的变更版本命名，然后按下“发布 (Publish)”之前，这一切对你的真实网站访客都是无效的。这是最多新手会犯的错误，请务必记得。

2. 让数据真正可用：注册“自订维度”

这是让你的追踪从“完成”迈向“实用”的关键一步。虽然你已经成功将 contact_type 和 click_destination 这两个参数发送到 GA4，并且在 DebugView 看到了它们，但如果你直接去 GA4 的报表介面，你会发现根本找不到这两个维度来分析数据。这是因为 GA4 要求我们必须手动“注册”这些自订的事件参数，才能在报表和探索中使用。
 

请务必完成这个步骤：在 GA4 中，前往“管理” > “资料显示” > “自订定义”，点击“建立自订维度)”，分别为 contact_type 和 click_destination 建立两个新的维度。请确保“事件参数”栏位填写的名称与你在 GTM 中设定的参数名称完全一致。

3. 隐藏的冲突：GA4 加强型评估

GA4 的“加强型评估”功能会自动追踪“站外链接点击”。当使用者点击你网站上的 line.me 链接时，这同时也是一次站外链接点击。这可能导致 GA4 为同一次点击记录了两个事件：一个是它自动追踪的 click 事件，另一个是我们自订的 contact_click 事件，造成数据重复计算和报表混乱。
 

为了维持数据的干净，建议的做法是：前往 GA4 的“管理” > “资料串流”，点击你的网站串流，然后点击“加强型评估”右边的齿轮图示。如果你的主要目标是使用我们设定的、资讯更丰富的 contact_click 事件，可以考虑将“站外链接”这个选项关闭，以避免冲突。

4. 基础问题排除

• “我的代码在预览模式没有触发。”

• 请仔细检查触发条件。Regex 是否完全正确？触发条件类型是否选了“仅链接”？

• “GA4 的 DebugView 是空的。”

• 确认 GTM 预览模式是否仍处于“Connected”状态？你是否在看正确的 GA4 资源？检查是否有浏览器扩充功能（如广告拦截器）干扰了追踪码的运作。

• “我的点击在正式网站上没有被追踪。”

• 你是否记得点击“提交”并“发布”你的 GTM 容器了？

结论

恭喜你！从启用变量、建立智慧型触发条件、设定详细的 GA4 事件代码，到完成严谨的双重测试，你已经完整地掌握了 GTM 点击追踪的核心技术。

现在，你不再是凭感觉猜测，而是能用数据回答关键的商业问题：“访客比较喜欢用电话还是 Email 联络我们？”、“哪个页面最能成功引导使用者加入 LINE 好友？”、“手机用户是否更倾向于点击电话，而电脑用户更常用 Email？”。利用这些数据，去优化你网站的行动呼吁按钮 (Call-to-Action)，改善与顾客的沟通管道，让每一次点击都转化为实质的商业价值。

(本文為達文西數位科技所有，禁止文圖使用)