GTM中的自动事件变量：使用2个简单但功能强大的示例升级您的Web分析

更新：2020年7月8日。 当涉及网站跟踪时，Google跟踪代码管理器提供了许多很棒的功能。如果您已经尝试将GTM用于基本的Google Analytics（分析）综合浏览量跟踪，则可能已经看到了15种以上的变量类型列表。那’一个不错的清单，是吗？我敢打赌，它提出的问题多于答案– e.g. what is DOM元素？什么是自动事件变量？等等。在这篇博客中，我’我将展示如何将自动事件变量添加到您的网络分析工具库中，以及我的两个使用示例。

 

在继续之前：我的中级GTM课程还介绍了此主题

自动事件变量经常在各种Google跟踪代码管理器功能中被忽略。实际上，还有更多此类未充分利用的功能可以使您的GTM实施技能更上一层楼。那’这就是为什么我创建了一个 中级Google跟踪代码管理器课程 可以帮助您做到这一点。

 

如果您喜欢影片

顺便说一句，我还录制了有关此变量的视频。它将向您显示此变量在何处有用的快速示例。如果您真的想了解有关此变量的更多信息，建议您观看视频并阅读此博客文章。

 

什么是自动事件变量？

自动事件变量用于访问自动事件操作的目标元素（例如，点击，错误，表单提交）。例如：

• 单击图像时，可以访问该图像’URL或目标链接。
• 提交表单时，您可以访问该表单’s ID, etc.

听起来有点熟悉？ Google跟踪代码管理器已经提供了许多预定义的（内置）变量，例如Click ID，表单文本等。它们实际上都是自动事件变量（注意：大多数内置变量都存储为数据层变量 Simo已对其进行了详细描述）

自动事件变量检查网站 ’用户与之交互的元素，并向其中添加一些特定数据 变量s GTM预览和调试模式下的标签。

 

它解决什么问题？

I’ll用一个例子来说明–想象您的网站’的主页包含三个可点击的图像。他们每个人都会打开一个不同的Youtube视频（在弹出窗口中）。 您想跟踪访问者点击最多的图像.

你会怎么做？您的答案可能是 使用Google跟踪代码管理器点击触发器。一种 不错的选择。’s one “but”。所有图像都包含相同的CSS类，没有ID，因此默认的GTM 请点击变量在这种情况下不起作用–您不能简单地确定单击了哪个图像。

你是做什么？研究。使用“Inspect element” feature of your browser to find other possible solutions. Usually, it works by 点击ing the mouse right 但ton on the 网站 element (e.g. an image) and then 检查元素 （请参阅有关的更详尽的说明 铬, 火狐浏览器, IE浏览器, 边缘）。

打开开发人员工具（通过检查元素）后，您便可以’会看到一个HTML代码。示例如下：

如前所述，该元素没有可用的点击类别或点击ID。但是我还可以利用其他属性– alt 和 数据视频ID。那’在自动事件变量派上用场的地方– I can turn alt 或 数据视频ID 放入Google跟踪代码管理器中的变量，并在触发器或代码中使用它们的值。

所有这些设置是什么意思？

免责声明： 本章比较技术性，因此如果您’ll有点困惑 随时跳到下一章 –一个实际的例子。如果您仍然愿意找到更多的技术细节，请’s dive in.

为了创建自动事件变量，请完成以下操作：

• Go to 变量s
• 下 用户定义的变量 点击 新
• 单击变量配置，然后单击自动事件变量

展开 变量 Type 下拉菜单，您’ll see 12 options.

＃1元件 –访问作为自动事件操作目标的网站元素（也称为DOM元素）本身。即如果您单击图像，则自动事件变量将返回value [对象HTMLImageElement] （我必须承认，我从未在实践中使用过此类自动事件变量）。这存储在数据层下 gtm.element 名字。 注意：为此有内置变量–单击元素和表单元素。

＃2。元素属性 –返回自动事件元素的特定属性的值。您需要定义您感兴趣的属性的名称。此博客文章中的所有示例都专用于这种类型的自动事件变量。

＃3。元素类 –返回自动事件元素的class属性的值。存储在数据层下的密钥 gtm.elementClasses. 注意：为此有内置变量–单击类和表单类。

＃4。元素编号 –返回自动事件元素的id属性的值。存储在数据层下的密钥 gtm.elementId. 注意：为此有内置变量–单击ID和表单ID。

＃5。元素目标 –返回自动事件元素的target属性的值。存储在数据层下的密钥 gtm.elementTarget. 注意：为此有内置变量(Click Target and Form Target).

＃6。元素文字 –返回任一文本的值（textContent 要么 innerText 属性）。 注意：为此有内置变量–单击文本和表单文本。

＃7。元素网址 –返回任一值 href 或自动事件元素的action属性。存储在数据层下的密钥 gtm.elementUrl. 注意：为此有内置变量–单击URL和表单URL。

＃8。历史记录新URL片段 –返回带有浏览器历史记录事件的新URL片段集。存储在密钥下的数据层中 gtm.newUrlFragment。 URL片段是网址中＃号后面的一部分（例如www.example.com/#contact-us）。这在一页页面中特别流行，滚动时URL片段会发生变化。 注意：为此有一个内置变量–新历史片段。如果你’对网址片段和GTM中的跟踪感兴趣，请检查 西莫·阿哈瓦（Simo Ahava）’s blog post.

＃9。历史记录旧网址片段 –返回在浏览器历史记录事件中替换的旧URL片段。存储在密钥下的数据层中 gtm.oldUrlFragment. 注意：为此有一个内置变量–旧历史片段。

＃10。历史新状态 –返回带有浏览器历史记录事件的新状态对象集。存储在密钥下的数据层中 gtm.newHistoryState. 注意：为此有一个内置变量– 新 History State.

＃11。历史旧州 –返回在浏览器历史记录事件中替换的旧状态对象。存储在密钥下的数据层中 gtm.oldHistoryState. 注意：为此有一个内置变量– Old History State.

＃12。历史更改源 –返回一个字符串，该字符串表示触发历史记录更改事件的事件（流行状态, pushState, replaceState， 要么 轮询）。存储在密钥下的数据层中 gtm.historyChangeSource. 注意：为此有一个内置变量–历史记录源。附言

 

示例1–GA标签中的自动事件变量

我曾经在一家名为Omnisend（以前称为Soundest）的创业公司工作。我们提供了一种电子邮件营销解决方案，可以轻松地与流行的电子商务平台（Shopify，Bigcommerce等）集成。在我们的 网站（旧版本），我们在各个地方都显示了电子商务供应商的徽标（我们称它们为 平台 内部）。一些徽标重定向到应用商店（访客可以在其中安装Omnisend），其他徽标将用户重定向到注册表单等。

因此，我对在我们的网站访问者中最受欢迎的供应商感兴趣。幸运的是，每个徽标都包含供应商的属性’s title – 数据平台 （我能够通过使用 检查元素 特征）。

我的想法是捕获所有供应商徽标的链接单击，并将该数据作为事件（事件标签为平台（供应商）名称）推送到Google Analytics（分析）。为了实现这一点，我完成了以下步骤：

1. 在GTM中创建自动事件变量
2. 设置一个Click触发器（仅链接），仅在单击任何徽标时才会触发
3. 创建了一个Google Analytics（分析）事件代码，用于推送数据GA。

步骤1：建立自动事件变数

变量’s settings:

• 类型自动事件变量
• 标题– AEV– 数据平台
• 变量类型– 元素属性
• 属性名称– 数据平台 

 

步骤2：建立点击触发

使用以下设置设置点击触发器（仅链接）：

• 标题：点击–点击的平台徽标
• 这将触发 一些链接点击
• 请点击classes 包含 截面平台 （因为该特定网站部分中的所有供应商徽标都具有CSS类 重用-utms部分平台).

 

步骤3：建立Google Analytics（分析）标签

现在，让’s创建一个Google Analytics（分析）标记，当某人单击供应商徽标时会触发事件：

• 前往标签
• 单击新建，然后选择预定义的模板–通用分析。
  • 标题：GA活动–点击的平台徽标
  • 轨道类型– 事件
  • 类别– 请点击
  • 行动– 平台徽标
  • 标签– {{aev– 数据平台}}
  • 选择 GA Settings 变量
  • 添加您之前创建的点击触发器

附言您可以为事件类别，操作和标签选择其他任何值。我只想展示的是获得价值的可能性 数据平台并将该数据传递到Google Analytics（分析）。

 

示例2–触发器中的自动事件变量

在这个例子中，我’ll show you how to use an auto-event variable in triggers. One day (more than a year ago) I was talking with my colleague 卡罗琳娜 and she complained that the bounce rate of our blog was a bit too high. 卡罗琳娜 raised some doubts that due to lack of interactions being tracked with Google Analytics, the bounce rate is actually higher than it should be.

首先，让’记得跳出率是如何计算的。根据Google的说法， 跳出率 是单页会话的百分比（即用户从入口页面离开您网站的会话 无需与页面互动）。浏览量并不是互动的唯一方式。其他事件（例如表单提交或某些单击）也计为交互。

卡罗琳娜’假设是：尽管访问者每次会话阅读的博客文章不超过一个，但他们仍然与之互动。因此，我们需要跟踪更多相关的互动。她的博客文章包含许多图像，图表等，单击它们可以更详细地查看。因此，我决定开始跟踪博客文章中图像的点击。

我只对博客帖子中的那些图片感兴趣， 并非整个页面上显示的所有图像。检查后，我发现所有内容图像均包含具有属性的链接 rel =”lightbox-5″ 要么 rel =”lightbox-6″, 等等。每个数字代表图像的ID。

跟踪这些图像的最好方法是创建一个自动事件变量 rel 并在“链接点击”触发器中使用它。

 

步骤1：建立变数

自动事件变量’s settings:

• 职称： AEV– rel
• 变量 type: Auto-Event 变量
• 类型： 元素属性
• 属性名称： rel

 

步骤2：建立触发器

触发’s settings:

• 标题： 请点击–博客文章中的图片
• 触发 type: 只是链接
• 这将触发 某些链接点击
• 健康）状况：rel 包含 “lightbox” （不带引号）

 

第3步：创建GA标签

Google Analytics（分析）标签’s settings:

• 标签类型– 通用分析
• 轨道类型– 事件
• 类别– 请点击
• 行动– 博客文章中的图片
• 标签– {{页面路径}}
• 选择 GA Settings 变量
• 触发方式–选择以前创建的 请点击–博客文章中的图片

 

结果

卡罗琳娜’s guess was right –确实有一些访问者通过点击图片与她的内容进行了互动。他们中的一些人打开了一个博客文章，阅读了该文章，并至少点击了一张图表或图片（如果有的话）’s），并且只离开了页面。跳出率降低了近5％，每次会话的平均时间增加了15秒。当然，她的长期目标始终是增加每个会话的页面数，但是更准确的指标是一个好的开始。

 

奖励用例：带有自动事件变量的出站链接点击跟踪

在2019年10月30日，Google跟踪代码管理器开发人员添加了一种新的方法来跟踪与Google跟踪代码管理器的出站链接。这次’借助自动事件变量可以实现。 阅读本指南 了解更多。

 

结论

自动事件变量是一种从网站获取更多数据并将其用于您的代码或触发器中的简便方法。在此博客文章中，我描述了如何轻松地从网站获取自定义数据并将其推送到Google Analytics（分析）。在另一个示例中，我演示了如何借助AEV跟踪仅某些网站元素的点击。当Click Classes变量不是唯一的（并且没有可用的Click ID）时，此技术很有用。

这是另一个可以使用自动事件变量的想法：

• 您可以将出站链接点击跟踪为Google Analytics（分析）事件，并查看哪些链接是 Nofollow。您需要做的就是创建自动事件变量（类型：元素属性，属性名称：rel）并将其作为事件标签推送到GA。

如果您对自动事件变量或Google跟踪代码管理器普遍存在疑问，请随时发表评论，也许我们’我会提出一个解决方案。