如何在 Google 跟踪代码管理器中跟踪按钮点击

利用 Google 跟踪代码管理器，可以轻松创建对网站按钮点击事件的跟踪。下面就跟随牛奇网的教程来操作吧。

谷歌标签管理器

Google Tag Manager 是一个跟踪代码标签化管理解决方案，它可以控制网站上的所有分析和营销代码，而无需手动更改网站代码。

我们只要首先在网站上安装谷歌标签管理器代码，就可以通过它来控制所有代码，不需要每次都要重新将跟踪代码添加到网站代码中。这样不但使跟踪代码易于管理，提升我们工作的效率，还能帮助提高网站的加载速度。

如果相对谷歌跟踪代码管理器有更深入的了解，可以阅读下面这篇文章。

开始使用跟踪代码管理器

在网站上安装标签管理器非常简单，大家可以参考下面的步骤：

• 第 1 步：在浏览器中输入 https://tagmanager.google.com 创建 Google 跟踪代码管理器帐户。
• 第 2 步：填写网站详细信息。
• 第 3 步：复制 GTM 容器代码。
• 第 4 步：将容器代码放在网站的头部。
• 第 5 步：验证设置。

通过简单的几步操作，就可以简化我们的跟踪代码管理。

启用内置点击变量

第 1 步：要在网站上跟踪按钮点击，请先登录谷歌标签管理器帐户并选择目标容器。

第 2 步：登录帐户后，您需要做的第一件事是启用所有内置点击变量。

为此，请单击左侧菜单中的变量，将会在新的窗口打开变量配置窗口。

第 3 步：然后在内置变量区域右上角单击配置按钮。

第 4 步：在配置内置变量的窗口中，向下滚动找到点击变量，并选中点击下的所有变量。

这样，我们就启用了所有内置的点击变量。

创建触发器的 3 种方法

在谷歌跟踪代码管理器中，我们可以通过被点击按钮的 CSS 的 ID 、CSS 的 Class 或者按钮中的文本来创建触发器。这里推荐使用按钮 ID。如果按钮没有分配任何 ID，则选择 Class 类，如果连 Class 类也没有，那就只能选择按钮的文本了。

接下来，牛奇网向您介绍创建触发器的三种方法。

在 Google Tag Manager 管理面板的右侧菜单中，选择触发器，然后单击新建按钮。

输入触发器名称“通用触发器”，单击触发器配置并选择点击下的“所有元素”。

现在，我们返回网站，并找到目标按钮。右键点击该按钮，在弹出菜单中选择“检查”，然后依次检查该按钮的 CSS ID 、CSS Class 或者按钮文本。接下来，我们逐一介绍基于按钮的 ID、Class 和按钮文本来创建触发器。

返回刚刚创建的触发器中。

1. 使用按钮 ID

如果按钮存在选择器 ID，那么可以按照下图所示的方法进行配置。我们这里以京东商品页，添加购物车按钮为例。该按钮的选择器 ID 为“InitCartUri”。

在触发器配置中，在此触发器的触发条件下，选择“某些点击”。从下拉列表中选择 Click id 作为变量，中间选择“包含”，然后在最后一个文本框中输入按钮的 id 值。

这样，我们就创建了一个基于 ID 的触发器。

2.使用按钮 Class

如果该按钮未设置选择器 ID，那么我们只能选择选择器 Class，操作步骤与上面的完全相同。

在触发器配置中，将“所有点击”更改为“某些点击”。然后从下拉列表中选择“Click Classes”作为变量，中间选择包含，然后在最后一个文本框中输入按钮的 Class 值。

保存触发器即可。

3.按钮文字

如果没有与按钮关联的 id 和类，请按照以下步骤操作。

在触发器配置中，将“所有点击”更改为“某些点击”。从下拉列表中选择“Click Text”，中间选择包含，然后在最后一个文本框中输入按钮文本。

保存触发器即可。

创建代码片段

经过上面的步骤，我们已经创建了按钮点击的触发器，接下来我们要新建一个代码片段。

第 1 步：单击左侧菜单中的代码选项卡，然后单击新建按钮以创建代码。输入代码名称为“GA – Event – 加入购物车”。

第 2 步：点击代码配置，从选择代码类型中选择“Google Analytics（分析）：Universal Analytics”。

第 3 步：选择跟踪类型为“事件”。设置事件相关参数。您可以设置独特的参数，以便在 Google Analytics（分析）报告中轻松识别。此外，在 Google Analytics（分析）设置中选择新建变量，然后将 GA 的跟踪 ID 添加到里面。

第 4 步：在代码配置下方，点击触发条件，选择我们之前创建的触发器。

保存代码即可。

下面可以通过预览模式验证代码是否正确触发，如果代码正确触发，点击“发布”按钮发布该代码。