在Google跟踪代码管理器中探索Click元素变量

Google跟踪代码管理器提供了大量内置变量和用户定义变量，供您使用。当我发布 许多博客文章 关于用户定义的变量（我的意思是 许多 , 许多 , 许多 , 许多 …), this time, I’d希望聚焦于无声的内置变量英雄，单击“元素”。

为了吸引您，我可以说这个变量在GTM中具有一个具有相同功能的双变量，此外，Click 元件 还使我们能够使用GTM中功能最强大（但也很冒险）的功能之一。因此，请继续关注并继续阅读。

目录

• 什么是Google跟踪代码管理器中的Click元素变量？
• 点击元素数据从何而来？
• 点击元素变量不是唯一的这种变量
  • 您还可以创建访问相同值的自定义变量
• 为什么根本需要使用Click 元件 变量？
• Example: 点击元素 + Matches 的CSSSelector
• 点击元素变量有用的另一种情况
• 探索gtm.element对象
  • 展开gtm.element对象
• 最后的话

 

什么是Google跟踪代码管理器中的Click元素变量？

这是一个返回被单击元素的变量。默认情况下，在所有新的GTM容器中均禁用该功能，需要通过转至变量来启用它> Configure (in the 内置变量 部分）。然后，点击旁边的复选框 点击元素.

但是只是启用变量赢了’在预览和调试模式下执行任何操作。您还需要启用至少一个“Just links” 要么 “All element clicks” 触发。 If you’对这个过程不熟悉，请您阅读有关 使用Google跟踪代码管理器点击跟踪.

在 GTM预览和调试模式，此变量看起来确实具有误导性，有时甚至与Click URL相似，但这与事实相去甚远。

点击元素返回单击的对象。如果单击链接，则此变量将返回被单击的实际元素。它不仅包含其地址（如果有），还包含其属性和其他数据（对于非技术人员而言不一定可见）。

但是Google跟踪代码管理器预览和调试控制台不会显示这些其他属性。因此，有时，这两个变量不同的唯一证明是它们的类型：

 

点击元素数据从何而来？

它来自某些Google跟踪代码管理器’的默认自动事件侦听器。如果您至少有一个 只是链接, 所有元素点击, 表格提交 要么 元素可见性 触发时，它还启用（在后台的某个地方）其各自的自动事件侦听器，该侦听器开始侦听页面上发生的某些交互。

只是链接 侦听器侦听链接点击。 所有元素点击 侦听器正在侦听页面上任何元素的点击（不在iFrame中）。 表格提交 听取表单提交的内容。而且，正如您可能猜到的那样， 元素可见性 正在侦听屏幕上是否出现特定元素。

当这些侦听器发现交互时，它们会将某些数据推送到数据层。该数据与用户刚刚与之交互的元素有关。该dataLayer.push包括以下键：

• gtm.element
• gtm.element Classes
• gtm.element Target
• gtm.element Url
• gtm.element Id

如果您转到GTM预览和调试模式>在数据层中，您可能会看到类似这样的内容（当然，值会有所不同）。

GTM中的内置变量（单击元素，单击类，单击目标，单击URL，单击ID）可以访问数据层变量中的每个键。  gtm.element Classes, gtm.element Target, gtm.element Url 和 gtm.element Id 是字符串（读“text content”) but the gtm.element 是包含更多信息的对象。不幸的是，那隐藏得很深，我们’我需要更深入地了解。但这将在稍后发生。

现在，您应该了解/记住以下几点：

• 当自动事件侦听器（适用于单击，表单提交或元素可见性）将数据推送到数据层时，按下的键之一是  gtm.element
• 数据层中的此值可以通过GTM中的Click 元件 变量访问（但不仅限于此）。— a bit later)
• 在预览和调试模式下，Click 元件 看起来类似于Click URL变量，但它们完全不同。点击URL只是简单地返回一个字符串，它是一个网址（URL）。 点击元素实际上是一个被单击的元素，是一个对象，并且包含有关用户与之交互的元素的更多信息。

在接下来的章节中，我们’让我们看一下Click 元件 的替代方案，为什么Click 元件 是一个非常有用的变量，以及隐藏在其中的其他数据 gtm.element 目的。

点击元素变量不是唯一的变量

因此，如您所知，Click元素返回存储在数据层中的值作为  gtm.element  键。如果不存在这样的键，则变量将返回 未定义 .

我的一些读者肯定不会知道的是，GTM中还有另一个内置变量，该变量访问数据层中的相同密钥。那就是 … 请打鼓 … 表单元素。

是的，这两个变量访问相同  gtm.element 键入数据层（或更准确地说， 资料模型 ）。实际上，所有Form和Click变量对都是相同的。他们访问相同的密钥：

• gtm.element Target 被访问 点击目标 和 表单目标 变数
• gtm.element Url 被访问  点击网址   和 表格网址   变数
• gtm.element Classes 被访问 点击类  和   表格类 变数
• gtm.element Id 被访问  点击编号   和   表格编号 变数
• 最后，   gtm.element 被访问 点击元素  和   表单元素 变量。

为什么会这样呢？我不能代表GTM开发人员讲话，但我可以猜测。我认为这使GTM初学者更容易理解。为了跟踪点击，GTM用户必须启用点击触发器，然后激活点击变量。表单跟踪与上述过程相同。如果要使用内置的GTM表单提交触发器，则需要启用它，然后启用表单变量。

对于刚开始使用Google跟踪代码管理器的用户来说，这样的工作流程听起来更容易理解。 （但也许我的猜测是错误的）。

 

您还可以创建访问相同值的自定义变量

另外，您也可以创建用户定义的变量，其作用与上述的click和form变量相同。例如，如果您想创建自己的Click 元件 变量替代方法，请转到Variables> New >数据层变量，然后输入   gtm.element 。它’s存储在数据层中的密钥的名称。

点击元素和Form 元件 变量也都访问相同的键。这样就可以了，三个不同的变量返回相同的结果。您为什么要创建自己的用户定义变量来访问  gtm.element ？没有特别的原因。我只是想向您展示事物之间的联系。

 

为什么根本需要使用Click 元件 变量？

由于您已经知道Click 元件 变量会返回一个与用户进行交互的对象（例如，clicked元素，显示的元素或提交的表单），因此’是时候采取下一步了。那么这个变量在哪里有用呢？当您需要使用实际元素时。

最受欢迎的用例是“与CSS选择器一起”。例如，如果您想跟踪特定网站元素的点击，但没有一个具有唯一ID，则CSS选择器可能是一种解决方案。

“CSS ….what?”, you might ask. 的CSSSelectors are patterns that allow you to select any elements on a page. For example, if you wanted to track clicks 只要 of those elements that have the class “white-button” 但也属于您网站的红色侧栏小部件，因此常规的Click Classes变量不起作用。

但是，如果您将Click 元件 变量与 Matches 的CSSSelector 运算符，那是可能的。

如果您只是从Google跟踪代码管理器开始，而您以前从未听说过CSS选择器，那么我认为对于您来说，这个主题可能有点太难了。您还需要学习其他许多东西，例如：

• GTM点击跟踪
• GTM表单追踪
• 一般Google跟踪代码管理器教程

 

Example: 点击元素 + Matches 的CSSSelector

无论如何，回到主要话题。我希望我赢了’下面的示例会对您造成太大的威胁。在我的另一本（更广泛的）指南中 GTM中的点击跟踪, I showed a case where 的CSSSelectors are really useful. Here it goes.

想像你’在电子商务网站上工作，并且您想跟踪 添加到购物车 按钮。该按钮没有任何链接（因此我们的   只是链接 触发器将不起作用）。我们所剩下的就是 所有元素点击  触发。

不幸的是，并非一切都那么容易。原来，一个按钮实际上由两个元素组成：按钮文本和按钮背景/矩形。

如果这两个元素具有相似的ID或类，请使用  点击编号   要么  点击类 变量可能仍然有效。看看下面的截图。

按钮的文字具有ID  添加到购物车 Text 而按钮的背景（框）具有ID  添加到购物车 .

这种情况仍然非常方便，您可以使用一个条件创建触发器（ 点击编号  以“ 添加到购物车 ”开头）。但是，有时候，当没有ID或有用的Click类（阅读：CSS类）可用时，事情可能会变得更加复杂。如果一个元素实际上由5个或更多元素组成怎么办？

您可以为每个元素创建多个触发器，将其分配给一个标签，但这不是您应该采取的方式。您的容器必须尽可能的最佳，这就是为什么我们应该通过创建单击触发器并使用CSS选择器（如果可能）来解决这一问题的原因。

让’s see how this 作品 in action. We’ll apply 的CSSselectors to track  添加到购物车  按钮点击。看一下该按钮的代码（在下面的屏幕截图中）。

该按钮是使用名为HTML的HTML元素创建的  纽扣  (with the ID  添加到购物车 ），并且其直接子代是<span>包含按钮文本的元素。使用单个CSS选择器，我们可以指示Google跟踪代码管理器要跟踪其ID为的元素的点击  添加到购物车  以及我们要跟踪其所有子级（后代）的点击次数。

在GTM中，转到 扳机> New > 请点击 s > All 元件 s 并输入以下设置：

Take note that we’re using 点击元素 as a variable because we are checking the entire clicked HTML element against our 的CSSSelector. Matches 的CSSSelector 作品 只要 与  点击元素  变量。

＃添加到购物车  的CSSselector means that we are interested in clicks of ALL elements that have  添加到购物车  ID（完全匹配）。

逗号表示“或”。

＃添加到购物车 *  CSS选择器意味着我们对具有以下内容的元素的所有后代的点击感兴趣  添加到购物车  ID（完全匹配）。在我们的例子中，按钮文本是具有ID的按钮的直接后代  添加到购物车 。 Simo Ahava已发布指南，解释了 Wildcard 的CSSSelectors.

如果您以前不了解CSS选择器，甚至不知道它们是什么，那么掌握CSS选择器的概念就不太容易。但是，至少了解一些基础知识确实会对GTM有所帮助。以下是供您深入研究的其他指南：

• 的CSSSelectors
• “Matches 的CSSSelector” Operator 在 GTM Triggers
• 10 Useful 的CSSSelectors
• 的CSSSelector Guide for Google Tag Manager

但是，另一方面，请记住 的CSSSelectors should be used with caution 否则，您的跟踪实施将非常不稳定且容易中断。

 

点击元素变量有用的另一种情况

总而言之，当您要使用实际元素（而不是其属性）时，应使用Click 元件 作为变量。例如Simo Ahava’他在博客文章中分享了一项技术 如何在Google跟踪代码管理器中捕获正确的元素.

在该解决方案中，他在此自定义JavaScript中使用了{{Click 元件 }}变量。

通过使用实际单击的元素，Simo’■自定义JS代码查找与某个CSS选择器匹配的最接近的元素。这是一项高级技术，但是有一天您很可能需要使用它。

 

探索 gtm.element 目的

让’进入此博客文章的最后一章。那么，存储在  gtm.element  目的？如果GTM预览和调试模式不允许我们怎么看？

好吧，您已经在浏览器中使用了控制台’s developer tools.

这项工作的前提条件：

• 启用了至少一个 所有元素点击 在页面上触发 （任何设置都可以使用）。 只是链接 , 表格提交 ， 要么 元素可见性 也会工作。
• （可选）启用预览和调试模式。这不是必需的，但会使事情变得容易一些。

如果启用了点击触发器，请单击页面上的任何元素，以便  请点击 事件出现在GTM调试控制台中。出现了吗？没有？然后刷新预览模式，并确保您实际上已经启用了至少一个单击触发器。

如果   请点击  事件实际上出现了’太好了。现在转到浏览器’s开发人员工具，然后打开控制台。在Chrome（Windows）上，按F12，然后转到  安慰。  这里也有一些技巧 其它浏览器.

输入   dataLayer 。区分大小写。并击中  输入 .

单击黑色三角形以展开。这是页面上发生的所有dataLayer.push的列表。选择一个说  gtm.click  （如果您现在正在使用 所有元素点击 触发）。如果你’re working 与   只是链接 触发事件’s name is gtm.linkClick。表格提交 事件 name is gtm.formSubmit。 元素可见性 事件’s name is  gtm.element Visibility。

看到很多   gtm.click  事件？那’s，因为您单击了页面上的许多元素。如果要检查在GTM调试模式下也会看到的特定事件，请仔细查看该事件。在GTM预览和调试模式下，该数字将增加1。’如果开发人员不对产品进行一些讨厌的修改，那么事情通常会如何进行  dataLayer .

无论如何，当您发现正确的事件时，请通过单击它旁边的黑色三角形来展开它。

 

展开 gtm.element 目的

这是单击元素时侦听器将其推送到数据层的内容。

看到熟悉的东西了吗？  gtm.element Classes，gtm.elementId， 等。只有  gtm.element 旁边有一个黑色三角形，因为它包含一些其他数据。然后’s where we’re going.

点击黑色三角形（位于  gtm.element ） 你呢’将会看到很多可以访问的密钥。尽管其中的大多数对您来说似乎无法使用，但有几件事值得一提。

如果您深入了解  gtm.element 重点并扩大 parentElement 接着 班级名称 ，您将可以访问父元素’的类（例如，如果单击了该元素）。

同样适用于 parentElement 然后选择  ID .

那么，您如何在Google跟踪代码管理器中使用该信息？您只需要创建一个数据层变量并定义要访问的键的完整路径（以  gtm.element ）。

对于上述示例，您应该输入  gtm.element .parentElement.className.

这将返回clicked元素的类。’的父元素。这也适用于通过“元素可见性”触发器或GTM“表单提交”触发器跟踪的表单的外观。

其他荣誉提名：

• gtm.element .parentElement.innerText –返回父元素的纯文本
• gtm.element .firstChild.id –返回第一个子元素的ID

此外，Bounteous小组创建的指南中也使用了这种技术， 使用Google跟踪代码管理器捕获提交的表单值.

 

最后的话

我最初计划编写有关Click 元件 的简短指南。但是我写的越多，我就越意识到还有其他事情值得一提。乍一看，这个变量看起来很无聊，几乎从未使用过。但这只是错误的认识。

这是您应该记住的关键要点。

• 点击元素 访问   gtm.element  键入数据层
• 与其他内置GTM 请点击 变量不同， 点击元素 返回一个对象（意味着它包含的数据比普通文本多得多）
• 表单元素 和  点击元素 基本上是相同的变量实际上，所有Click变量及其对应的Form Variable都是相同的。
• 您也可以创建自己的  元件  通过使用数据层变量来访问变量  gtm.element   键
• 点击元素或Form 元件 是唯一支持以下内容的内置GTM变量： Matches 的CSSSelector 触发器中的运算符
• 您可以探索其他哪些数据存储在  gtm.element 使用浏览器键’的开发人员工具（控制台）并向下钻取。然后，您可以通过创建数据层变量来访问这些键。

那 ’这次吧！有任何相关问题吗？评论部分随时为您服务。