使用DOM抓取和Google跟踪代码管理器进行表单跟踪

免责声明： 永远不要将这种方法用作Google跟踪代码管理器的第一个表单跟踪选项。尝试使用提到的任何其他Google跟踪代码管理器表单跟踪方法 在这篇博客文章中.

如果开发人员经常更新网站’的代码，在进行表单跟踪时，您应该将DOM抓取作为最后的手段。它’s better than “根本没有表单跟踪”, but it’相比本博客文章中描述的其他选项不那么健壮。尽管您获得了很大的灵活性和敏捷性，但这几乎不依赖于网站 前端’s结构。开发人员做出的微小更改都可能破坏您的实施。此外，它还需要一些Javascript和DOM概念的知识（这在营销人员中是罕见的技能）。

对于这个例子，我们’ll be using DOMElement 变量。一种  它是Google跟踪代码管理器中的变量，可让您直接从中抓取内容 D招揽 O对象 Model（换句话说：借助它的帮助，您可以将网站上的任何文本都转换为变量，然后将其传递给您的营销工具（例如Google Analytics（分析）））。但首先，让’s create a GA tag.

 

创建一个Google Analytics（分析）标签

您可能已经熟悉了主要的GTM概念：您要跟踪的每个交互都需要一个标签和一个触发器。如果您想使用Google Analytics（分析）追踪所有表单提交’当必须触发代码时，需要创建Google Analytics（分析）代码和触发器（规则）。创建标签是此过程的简单部分。让’s make one – 您’在本博客文章的下一章中将需要它）：

1. 前往标签
2. 按 新的 纽扣
3. 在一个 标签配置 选择Universal Analytics：
   1. 粘贴您的Google Analytics（分析）ID（例如UA-XXXXXX）。如果您粘贴它会更好 作为常数.
   2. 轨道类型– 事件
   3. 活动类别– 表单提交 （随时选择其他合适的标题）
   4. 事件动作– 联系表格 （随时选择其他合适的标题）
   5. 活动标签– {{页面网址}}。 附言随时为事件类别，操作和标签选择其他值。
   6. 保留其他字段不变。
4. 将触发部分留空（暂时），然后单击 保存。我们’在本博客文章的下一章中将再次讨论。

 

让’s Create a Trigger

开设一个Shopify演示店 布鲁克林主题 并查看一切。 I’d谨此提前向Shopify员工道歉，因为他们使用假冒的电子邮件内容向其演示网站发送垃圾邮件（但我’m sure they’re fine 用它）。有一个 注册我们的邮件列表在其页面底部的表格。

快速脱题笔记： 如果 您 haven’t, consider 订阅我的电子邮件通讯 有关更有用的Google跟踪代码管理器指南

进入一个 [电子邮件 protected] 以Shopify形式点击 订阅。页面将刷新，网址将更改为 //brooklyn-theme.myshopify.com/?customer_posted=true#contact_form, 和 那个小表格显示一个“Thank 您” message.

在这种情况下，我们可以使用“感谢页面”的Pageview触发器轻松跟踪表单提交，但是让’s imagine that page’的地址（URL）不变。这不是常见的情况，但是’s possible. That’可以在其中使用DOM Element 变量的地方。我们可以创建一个触发器，该触发器可以扫描网站并查找成功消息“感谢您的订阅”.

首先，让’创建一个DOM元素变量以查找该特定成功消息。将鼠标光标悬停在成功消息上’的文本，单击鼠标右键并选择 检查。

开发人员’的控制台将显示很多HTML代码。注意成功消息’的代码已在该控制台中选择。该消息没有任何唯一ID，因此我们’我需要利用CSS选择器。

在屏幕截图的底部，您可以看到一行CSS选择器，例如 div.note.form-成功。这些选择器可以帮助我们确定网站的确切元素。

让’创建一个DOM Element变量并尝试抓取“感谢您的订阅” text.

1. Go to 变量s
2. 向下滚动到用户定义的变量，然后单击 新
3. Choose 变量 type – DOMElement 变量
4. 选择方式– CSS selector
5. 在一个 元素选择器 现场输入 div.note.form-成功
   
   看看我在那里做什么？我从上面的屏幕截图中输入了最后一个CSS选择器。
6. 如果网站上有更多使用类似CSS选择器的成功消息，我会使用更长的CSS选择器，例如，“#contact_form div div.note.form-成功”（不带引号）
   
7. 将属性名称保留为空。
8. 变量’s title could be DOM–表格成功讯息.
9. 击中一个 保存。

 

让’s Test

1. 启用预览和调试模式（如果刷新，则刷新’s already launched).
2. 用表单刷新页面（或删除 ？customer_posted = true＃contact_form 在网址中），然后尝试提交。
3. 选择一个 页面预览 预览和调试控制台中的事件，然后单击变量。
   
4. 如果 DOM–表格成功讯息 变量’s value is 感谢您的订阅, 您 did a good job.

好的！现在我们需要创建一个依赖于新DOM变量的触发器。

1. 转到触发器，然后单击 新
2. 选择触发类型– DOMReady
3. 此触发器将触发： 一些页面
4. 输入以下条件： DOM– 表格成功讯息 等于 感谢您的订阅. 这意味着触发器只会在向访问者显示“表单成功”消息的页面上触发。

不要忘记测试：

1. 将此新触发器分配给您在本博文开头创建的Google Analytics（分析）标签。
2. 打开“预览和调试”模式（或刷新），使用要跟踪的表单重新加载网页。
3. 填写表格并提交。成功提交后，应触发Google Analytics（分析）标记（它将以“预览”和“调试”模式显示。您还可以检查 Google Analytics（分析）实时事件报告）。
4. 另外，请尝试提交带有故意错误的表单，并查看代码是否会触发（剧透警告：’t).

 

万一DOM Scrap isn’正确的方法为您

我创建了一个非常详细的 Google跟踪代码管理器表单跟踪指南 其中包括5种与跟踪技术不同的方法。由于存在风险，因此我强烈建议在考虑DOM抓取之前尝试其他4种方法。

如有疑问，请随时通过社交媒体帐户与我联系或发表评论 在这篇博客文章中.