2020年9月18日

Google跟踪代码管理器中的DOM元素变量

更新时间:2020年9月18日。

在这个博客中,我’ve已经发表了有关各种Google跟踪代码管理器变量的文章,例如 自动事件变量, URL变量, 未定义的变量等等,但是那里’还有一个在这里没有引起广泛关注的DOM Element变量。那’因为需要一些技术知识,所以我’我不是它的最大粉丝(由于它的脆弱性)。

那些长时间阅读我的文章的人都知道,我一直主张将数据存储在 资料层而不是试图从网站上抓取一些东西。但是,并非所有项目都是完美的,也不是所有项目都有专门的开发资源。因此,我们可能最终会在触发器中抓取DOM或使用CSS选择器。

那’这就是为什么我认为您仍然应该知道DOM Element变量是什么以及如何使用它。

目录

 

在我们继续之前:中级Google跟踪代码管理器课程也对该主题进行了全面介绍

DOM元素变量是中级Google跟踪代码管理器用户经常忽略(或不小心跳过)的那些功能之一。那’这就是为什么我创建了一个 中级Google跟踪代码管理器课程 这将使您的标签管理达到全新的水平(发掘GTM的潜力)。

参加中级Google跟踪代码管理器课程

 

影片教学

如果您喜欢从视频中学习,请点击此处’的教程,将教您如何使用DOM元素变量。

 

DOM快速入门

为了了解GTM中的DOM元素变量是什么,首先您需要至少对DOM一般有一个非常基本的了解。 文档对象模型 (也称为DOM)是网站的动态树状分层表示’的文件。它允许操纵网站’的文档,获取当前网站元素的值,添加,编辑或删除现有元素。

如果您访问任何网站并打开其源代码(例如Chrome(WIN)上的CTRL + U),’将看到页面的HTML代码。这是开发人员编写的代码,用于使网站现在看起来看上去像原来的样子。

但是它看起来不是很动态,是吗?但是,如果您返回相同的网站并打开开发人员工具(Windows上的Chrome:按F12,Mac上的Chrome:Command + Option + I),则您’会看到更动态的网站表示’的代码。如果不是,请切换至 元素 标签。

有一些节点可以扩展或折叠(单击黑色三角形),许多节点的子节点可以有自己的子节点,节点可以有多个子节点,等等。’s网站的动态树状表示’s documents. You’在这里重新检查HTML DOM。

正如我之前提到的,DOM不仅允许查看/检查网站元素,还可以对其进行操作。在DOM中编辑节点的最简单,最扎实的方法是双击某个节点,然后更改其值或对元素删除/编辑/添加属性。

但这不是非常可扩展且有用的。相反,应该有一些更好的方法,对吗?是。 DOM支持许多方法,这些方法使开发人员(如果您足够熟练,还可以使用您)来添加,编辑和删除元素。

至于读取值, getElementById(“some_id”) 方法将返回与第一个网站元素匹配的第一个网站元素 some_id ID。在下面的屏幕截图中,您可以看到命令(第一行)和返回的元素(第二行)。

另一个例子可能是 querySelector(),它返回与您定义的某个CSS选择器匹配的第一个网站元素。

然后’是介绍Google跟踪代码管理器的好时机’s DOM Element variable. This 类型 of variable can access the value of a website element that matches a condition defined by you. 让’仔细看看。

在Google跟踪代码管理器中配置DOM元素变量

要创建一个新的DOM Element变量,请转到 变数> Scroll down > New > DOM Element。单击它,让’看一下这里可能的设置。

您需要设置的第一件事是选择方法。您需要以某种方式告诉GTM您对哪个特定的网站元素感兴趣。可以通过ID或CSS选择器选择元素。首先,让’s try ID.

让’假设我们有一个包含特定产品的页面,而您想获得该产品的名称。一种方法是读取网站元素的文本,即“产品标题”。右键单击产品标题,然后让’s hope that we’很幸运在该元素中找到一个ID。答对了!

双击该ID,将其复制并粘贴到 元素编号 GTM变量中的字段。第二个字段(属性名称)呢?

如果您将其保留为空,则DOM Element变量将返回website元素’的文字(在此示例中, 深色模糊T恤)。但是,在某些情况下,获取元素的特定属性而不是元素的文本可能更有用。您可以通过检查来确定某个Web元素具有哪些属性(这次,我检查了另一个元素)。

查看所有这些突出显示的参数(类型,名称,ID,类)吗?它们称为属性。

因此,如果要获取特定属性的值,则可以’d需要在字段中指定其名称 属性名称 例如 类型.

为了查看您的变量是否已正确创建,请保存它,启用/刷新“预览和调试”模式,然后检查变量’s value in the 变量 标签。

 

如果ID不存在怎么办?输入CSS选择器区域

如果你’还不熟悉CSS选择器,强烈建议您阅读 西莫·阿哈瓦(Simo Ahava)’s guide 他在那里分享了许多Google跟踪代码管理器的有用选择器。

简而言之,CSS选择器允许定位特定的网站元素,以便对其应用样式(毕竟,CSS用于设计网站的样式)。这里’是CSS的基本示例:

.red-button {
color: #FF0000;
}

这段CSS指出所有包含class属性的元素 红色按钮 将被涂成红色(颜色代码#FF0000)。借助CSS选择器,可以在CSS中定位元素。在上面的示例中,CSS选择器是 .red-button 它针对的是哪个类的所有元素 红色按钮 (CSS中的点表示“class”).

但是CSS选择器用途广泛,它们也可以在DOM方法中使用。如果您想选择某个网站元素并读取其值,则可以编写一个更复杂的CSS选择器,例如, div.call_to_action> .someClass.

document.querySelector("div.call_to_action> .someClass")

所以如果你’很好奇,继续前进赫克·西莫 ’的CSS Selector示例指南以获得一些灵感。如果你’重新选择器,这看起来令人困惑,不要’t worry. 那’这是非常正常的反应。但是,一旦您开始玩耍并更频繁地使用它,您就会’ll get onto it.

 

如何测试CSS选择器

让’s说您终于设法编写了一个针对某些重要元素的CSS选择器。您如何测试呢?一种方法是将变量保存在GTM界面中,刷新预览模式,然后刷新页面并检查变量’s value. But that’s a long path.

如果你不这样做’从头开始成功创建合适的CSS选择器?如果最后对选择器进行20次调整怎么办?您’必须保存变量,刷新预览,测试20次。那’浪费时间的地方。

一种更快的替代方法是使用 document.querySelector() 浏览器的JavaScript控制台中的方法。只需打开它并输入以下命令:

document.querySelector("your_css_selector")

更换 your_css_selector 与您的实际选择器一起使用。按下Enter键(如果选择器正确),它将返回您要定位的元素。如果得到一些意外的结果,请调整CSS选择器,然后重试。

当最终获得所需的结果时,通过在DOM Element变量中输入CSS选择器进行最终测试’的设置(在GTM UI中)。

 

风险性

我可以’足够强调使用DOM来获取网站元素的值的风险。如果您打算在跟踪实现中大量抓取DOM,则需要注意开发人员可以在不知不觉中更改网站中的某些内容’的内容可能会破坏GTM中的DOM元素变量。 CSS选择器越复杂/越长,破坏更新的机会就越大。

如果出于某种原因,开发人员更改了元素的特定类(并且您’重新在选择器中使用它),您的DOM元素变量将开始返回 空值,因此您的跟踪将会中断。

因此,在使用CSS选择器(通常是DOM Element变量)之前,需要权衡您的选择和当前情况。如果网站没有经常更新,则更改的机会会降低。但是,如果开发人员定期进行改进,则每天都会进行A / B测试,也许您应该考虑通过其他方式(而不是通过抓取DOM)获取数据。

还有什么办法?最好的选择是 资料层。要求开发人员将一些重要信息推送到数据层,并在标签管理中使用它们。从我身上’我们已经看到,与DOM相关的重大更改相比,破坏数据层更改的机会要低得多。

我完全理解现在使用CSS选择器的诱惑。如此强大的功能和与开发者的独立性,对吗?一世’d甚至想借模因 吉姆·戈登:

但是从长远来看,数据层永远是赢家。其实你应该 阅读Jim的完整博客文章 关于这个话题。

 

DOM元素变量与自动事件变量有何不同?

如果你 are familiar with another GTM variable, 自动事件变量,您可能想知道DOM元素变量与AEV有何不同?

通过自动事件变量,您可以获取访问者/用户与之交互的元素的文本(或属性)。如果访问者单击链接,则可以访问该元素’s properties.

DOM元素变量使您可以访问页面上存在的任何元素。这样,您就可以获取其文本或某个属性的值。无需互动。实际上,这里’s an example of a 风险表格追踪技术 当页面上显示成功消息元素时,计算成功提交表单的位置。这是在DOM Element变量的帮助下完成的。

 

DOM元素变量:最终词

DOM Element是GTM工具包中的一个不错的工具,但是,您不应滥用它。这是一种获取页面上特定数据的灵活方式,但是,如果页面内容/设计持续不断,则您的DOM爬取工作很有可能失败。

实际上,最近在 Facebook上的Google跟踪代码管理器社区,我们遇到了这样的情况,其中一位成员不了解为什么突然间GTM中没有正确跟踪他的事件之一。原来,网站上发生了一些更改,这使他的CSS选择器失效。

所以如果你’对获取一些自定义数据并使其在GTM,开发人员和 dataLayer.pushbe应该是你最好的朋友。

朱利叶斯·费多罗维奇乌斯(Julius Fedorovicius)
6评论
安迪

你好

We've got a multi-div form that I'm trying to track through each section. The only easy 我可以 see to track each stage is using the DOM element method. The .form-section.current >单击下一部分时,h1会更改。

我试图将触发器设置为DOM元素可见性,并监视DOM的更改,但是它仅在它第一次变为可见时才使用。

有任何想法吗?可以提供GTM代码变量等
对此感到非常沮丧。

    朱利叶斯·费多罗维奇乌斯(Julius Fedorovicius)

    嘿,每次在数据层中发生新事件(包括“预览”和“调试”模式)时,都会重新评估DOM Element变量。因此,如果multi-div表单中的某些内容发生更改,则需要确保某些事件出现在数据层中。

    1. If the URL changes (without page reload), you could try using History Change trigger. I use that trigger here //www.toddblog.net/post/single-page-web-app-with-google-tag-manager/
    2. If the form is AJAX, you could use AJAX listener //www.toddblog.net/google-tag-manager-ajax-form-tracking/
    3. If divs appear one after another, maybe you could use Element Visibility trigger //www.simoahava.com/analytics/element-visibility-trigger-google-tag-manager/
    4. You could try to observe DOM mutations (I haven't tried it though //www.simoahava.com/analytics/google-tag-manager-dom-listener/)
    5. You could ask a developer to push the event to the 资料层 when user moves from one step to another (but if you manage to get developer's time, then ditch DOM Element Variable and ask for some additional data in the 资料层 as well //www.toddblog.net/post/datalayer-push/)

罗宾

嘿朱利叶斯。真的很有用...谢谢。创建了DOM Element变量(带有“选择方法” ID)后,我想在Google Analytics(分析)中触发一个事件,同时点击Click Text。我该怎么做?任何帮助,将不胜感激。

米利卡

嗨,朱利叶斯(Julius),我如何获取颜色的值作为变量:

.siteLink {
颜色:#006666!重要
}

    朱利叶斯·费多罗维奇乌斯(Julius Fedorovicius)

    嗨,您能描述一下您需要这种情况的情况吗?我想写一个有关它的教程,但是我必须先了解其需求和上下文。为什么知道元素的颜色对您来说很有价值?您期望从中获得什么样的见解?

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *