2020年6月30日

Google Tag Manager 表格追踪: 7 Ways To Reach 您r Goal

已更新:2020年6月1日。 与营销人员交谈时,我注意到其中最流行的主题之一是表单跟踪。不幸的是,在某些情况下,表单跟踪可能会成为真正的难题(特别是如果营销人员不知道CSS或HTML是什么的话)。但是不要害怕,因为在这篇博文中我’将向您展示7种Google跟踪代码管理器表单跟踪技术。 暗示: 其中一些将需要开发人员’s input, but I’我会尽一切努力用简单的英语表达一切。

注意: 这篇博客文章介绍了如何使用Universal Analytics跟踪事件。如果您想熟悉Google Analytics(分析)中的事件跟踪4, 您 can also refer 至 this blog post.

 

此博客文章的章节:

 

Google跟踪代码管理器表单跟踪:基本上下文

在这个叫做THE INTERNET的奇妙事物中,存在多种形式的表单。其中一些在成功提交后刷新,其中一些没有’t,其中一些人可能会将您重定向到“thank 您”表单跟踪等主要问题是,没有关于表单开发方式的全球标准。一些开发人员可能更喜欢一种技术(例如AJAX)–他们拥有这样做的完整权利。

由于您对表单跟踪感兴趣,因此您可能已经注意到Google跟踪代码管理器中的表单触发器和内置表单变量。启用至少一个表单变量并创建一个表单提交触发器(侦听所有表单提交),从而您’将打开Goog​​le跟踪代码管理器表单自动事件监听器。

谷歌标签管理器表单跟踪

表单自动事件监听器 聆听标准 提交 浏览器事件。但是,绝大多数表单使用其他方式发送数据(例如jQuery的$ .ajax),因此 提交 事件被阻止。在这种情况下, Google Tag Manager never records a 表格提交。然后’这是一个非常普遍的问题。

如果是GTM’s表单侦听器在您的情况下不起作用,还有其他一些方法可以实现目标。在此博客文章中,我将解释Google跟踪代码管理器表单跟踪的标准选项和解决方法。

Google跟踪代码管理器电子书包

标签+触发

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

  1. 前往标签
  2. 按 新 纽扣
  3. 在 标签配置 选择Universal Analytics:
    1. 选择轨道类型– 事件
    2. 活动类别– 表格提交 (随时选择其他合适的标题)
    3. 事件动作– 联系表 (随时选择其他合适的标题)
    4. 活动标签– {{页面网址}}。 附言随时为事件类别,操作和标签选择其他值。
    5. 选择 Google Analytics(分析)设置变量.
  4. 将触发部分留空(暂时),然后单击 保存。我们’待会儿再讲。这篇博客文章的80%致力于您可以使用的各种类型的触发器。触发器类型的选择取决于表单的开发方式。

更新了Google Analytics(分析)标记-提交表单

Those 7 form tracking techniques I mentioned in the title of this blog post are triggers. Each one of them depends on different elements/events 那 occur on a website after the 表格提交:

  • 表单自动事件侦听器。
  • 谢谢 页。
  • AJAX表单跟踪。
  • 使用“元素可见性”触发器进行跟踪
  • Writing 您r own form auto-event 听众。
  • 数据层事件(dataLayer.push)。
  • DOMscraping.

错误配置的触发器将导致错误的数据和报告(这将导致错误的结论和操作)。因此,请仔细阅读所有内容。如果您有任何疑问,或者本博客文章的某些部分具有误导性,请在下面的评论部分,Twitter或LinkedIn中告诉我。我很乐意提供帮助。

 

在我们继续之前:现成的指南

现在,在我们深入了解本指南之前,’您应该知道的一些事情。整个指南是通用的,几乎涵盖了地球上的每种形式(嗯,可能不是每种形式,但大约有95%(虚构统计))。

但是,为了节省您的时间,我’d like 至 ask this: 您是否在使用Contact 形成 7,Caldera 形成s或Gravity 形成s插件?

如果是,那么我对你有个好消息。以下是针对那些流行的表单插件量身定制的三个指南:

如果您的表单是自定义的或使用其他技术构建的,请不要’不用担心我将在下一章介绍所有技巧。

 

Which 表格追踪 Method Should 您 选择?

在跳入泳池触发器之前,我们’我需要检查表格并决定哪种技术最适合我们的需求。我准备了一个流程图,可以帮助您选择正确的Google跟踪代码管理器表单跟踪方法。 Google跟踪代码管理器表单跟踪Flow

在新窗口上打开完整方案

 

我敢肯定,该计划的某些部分可能看起来模棱两可。继续阅读,一切将变得更加清晰。

 

#1 Google跟踪代码管理器表单提交触发器

第一, 让’s try GTM’内置的表单侦听器。在您的Google跟踪代码管理器帐户中打开变量列表。默认情况下,表单变量是禁用和隐藏的,因此,您需要启用它们。下 built-in 变量s,点击 配置 并在右侧栏中启用所有Form变量(所有更改都将自动保存)。

谷歌标签管理器表单变量

Then open a list of all 您r triggers (by clicking 扳机 在左侧边栏中)。创建一个新触发器:

  • 标题“All 表格提交s”.
  • 触发类型– 表单提交。
  • 离开 等待标签 未经检查。
  • 请点击 检查验证 复选框。选中此复选框后,如果阻止了表单的默认操作(提交和重定向),则Google跟踪代码管理器将不会触发触发器。如果未选中该复选框,则无论何时注册了一个提交事件(即使表单提交有错误(例如,几个必填字段都留为空白)),触发器都将关闭。在下面的屏幕截图中,我’仅在我的联系表单所在的页面上启用了此触发器(页面路径包含 联系我们)
  • 开火. 在这个例子中,我 set 至 track All forms (which are located in the 联系我们 页(由于本指南的上一段中,’请将触发器设置为仅在特定页面上启用)。

更新了Google跟踪代码管理器中的表单跟踪触发器

现在,让’s use GTM’s 预览和调试模式 以确定默认形式的自动事件侦听器是否对我们有用。在您的Google跟踪代码管理器帐户的右上角,点击 预习.

启用Google跟踪代码管理器调试模式

启用预览模式后,您可以’会看到一个橙色的横幅,看起来像这样:

预览和调试模式

它必须出现。如果缺少横幅,请阅读以下内容的指南 如何修复Google跟踪代码管理器的预览和调试模式.

启用“预览和调试”模式后,导航至表单所在的站点,您将在浏览器底部看到一个调试控制台,其中显示有关标签的详细信息,包括其触发状态和正在处理的数据。该控制台窗口仅在您预览站点时出现在您的计算机上,其他网站访问者看不到。它看起来应该像这样:

预览和调试控制台

如果您已经使用表单打开了该页面,但不要’t see GTM’的调试控制台,刷新页面。如果您仍然遇到问题,建议您阅读更多有关 最常见的Google跟踪代码管理器错误 寻找解决方案。

让’返回表单跟踪。填写表格(尽量不要将任何字段留空):

  1. 点击提交按钮。做了一个 gtm.formSubmit 事件出现在预览和调试控制台中? (编辑:现在称为 表格提交, 代替 gtm.formSubmit)。如果没有,那么GTM’s 表单自动事件侦听器不适用于此表单 并且您应该选择此博客文章中介绍的下一个表单跟踪选项。
    formSubmit事件
  2. 如果 表格提交 事件确实出现在“预览和调试”控制台中,那么您应该执行另一项测试–请尝试至少将一个必填的表单字段留空,然后再次提交表单。这样你’将模仿您的表单中的错误:
    1. 如果 表格提交 事件再次触发,那么您应该检查此博客文章中提到的其他表单跟踪选项。
    2. 如果 表格提交 事件未触发– 那’s great! It means 那 GTM will track only those 表格提交s which were 成功fully completed (and this is exactly what 您 need).

大!我们’我们确定可以使用GTM跟踪我们的表格’内置的表单侦听器. 让’专门创建一个触发器 该表格。 记住 表格提交 前面提到的事件?单击它(在“预览和调试”模式下),然后单击“变量”。

Google跟踪代码管理器表单跟踪

然后向下滚动并开始寻找  形成 唯一的变量  形成。通常情况下 表格编号 可变的,在其他情况下–表单类(但最好使用表单ID(如果可能))。如下图所示,我已经提交了一个表单(表单ID变量为 form_contact2)。

表格提交 变量s

这是一个很好的标识符,未在网站的任何其他元素上使用,所以我’将其用作我的触发器:

  1. 转到触发器,然后单击
  2. 请点击 触发配置 部分并选择触发类型– 表格提交
  3. 请点击 检查验证 and set the rule 页面URL匹配正则表达式(。*)This rule means 那 this 表格提交 trigger will be available on all pages. 如果 您 want 至 make it accessible only on particular pages, 您 can add more specific rules, such as 网页网址包含/ 联系我们 / (it depends on the URL of 您r contact form).
  4. 然后将此触发器配置为仅在 一些形式 并输入以下规则: 表单ID等于form_contact2.
    1. 如果你不这样做’看表格ID变量–在Google跟踪代码管理器的内置变量列表中启用它。
    2. 表单ID在您的情况下可能(并且可能会有所不同)(与我的示例相比)。

更新-表单提交触发器

 

让’s Test

  1. 将此新触发器分配给您在本博文开头创建的Google Analytics(分析)标签。
  2. 打开(或刷新)预览和调试模式,使用要跟踪的表单刷新网页。
  3. 然后填写表格并提交–如果Google Analytics(分析)代码被触发,’s good news! Also (if possible), try 提交ting a different form on 您r website: in case of a 成功ful submission, a GA tag should 没有 t fire.

 

 

#2。“Thank 您”使用Google跟踪代码管理器进行页面跟踪

如果 Google跟踪代码管理器中的标准表单侦听器 does 没有 t work in 您r case, 您 should check whether 那 form redirects a user after a 成功ful submission 至 another 页。

  • 如果是,它将重定向到哪个URL(网址)?
    form 成功 URL

    • 该地址是否唯一?
    • 如果是,用户可以直接导航到该页面而不实际提交表单吗?如果最后一个问题的答案是 没有 那么您可以创建仅在该页面上触发的综合浏览量触发器 成功页. 小费: 您 can always check 您r Google Analytics(分析)行为流程 报告以查看用户是否访问 成功页from different locations of 您r website. 您r goal here is 至 avoid accidental visits 至 成功 (a.k.a. “Thank 您”页)。

现在让’创建一个仅在 成功 页。

  1. 转到Google跟踪代码管理器中的触发器
  2. 按  纽扣
  3. 选择触发类型– 页面预览and 一些页面浏览量
  4. 如果 the visitor is redirected 至 //www.example.com/form/thankyou.html, then 您 can set one of the following rules for this trigger:
    1. 页面路径等于 /form/thankyou.html.
    2. 或页面URL包含 /form/thankyou.html。尝试尽可能具体。设置只是“谢谢”因为此触发器的规则可能不是最好的主意,因为可能还有其他页面可以包含该单词(而我们不会’不需要)!
  5. 并且不要忘记给触发器命名– “Pageview –成功提交表格”。标题必须清楚,否则,您’从长远来看,您的Google跟踪代码管理器帐户会乱七八糟。您可以阅读有关命名技巧的更多信息 (又名命名约定)

Google tag manager form tracking - pageview 成功 page

 

让’s Test

  1. 将此新触发器分配给您在本博文开头创建的Google Analytics(分析)标签。
  2. 打开(或刷新)预览和调试模式,使用要跟踪的表单刷新网页。
  3. Then fill in the form 和 提交. After 成功ful submission, 您’将会重定向到“Thank 您” page –如果Google Analytics(分析)代码被解雇,那就好!另外(如果可能),请尝试在您的网站上提交其他表单(以查看代码是否意外触发)。

订阅并获取电子书-真正的图书-GTM(初学者)

#3。使用Google跟踪代码管理器跟踪AJAX表单提交情况

如果您正在阅读此部分,则您的表单可能没有发送有效的表单提交事件,并且没有 将用户重定向到“thank 您” page。它可能只是刷新自身然后显示“您已成功填写表格”消息,而不刷新实际页面。那里’这种形式使用AJAX的可能性很大。我建议在此跳过所有技术性的巨型(因为我不是开发人员+我不’认为我有能力清楚地解释其工作原理)。您唯一应该知道的是 AJAX 听众。

恩惠分享了 很棒的GTM AJAX监听器 每个人都可以免费使用。在这里,我们’ll borrow their code 至 track 表格提交s. Copy the code below 和 paste it in the Custom HTML tag on Google Tag Manager:

<script id="gtm-jq-ajax-listen" type="text/javascript">
 (function() {

 'use strict';
 var $;
 var n = 0;
 init();

 function init(n) {

 // Ensure jQuery is available before anything
 if (typeof jQuery !== 'undefined') {
 
 // Define our $ shortcut locally
 $ = jQuery;
 bindToAjax();

 // Check for up 至 10 seconds
 } else if (n < 20) {
 
 n++;
 setTimeout(init, 500);

 }

 }

 function bindToAjax() {

 $(document).bind('ajaxComplete', function(evt, jqXhr, opts) {

 // Create a fake a element for magically simple URL parsing
 var fullUrl = document.createElement('a');
 fullUrl.href = opts.url;

 // IE9+ strips the leading slash from a.pathname because who wants 至 get home on time Friday anyways
 var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname;
 // Manually remove the leading question mark, if there is one
 var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search;
 // Turn our params 和 headers into objects for easier reference
 var queryParameters = objMap(queryString, '&', '=', true);
 var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':');

 // Blindly push 至 the dataLayer because this fires within GTM
 dataLayer.push({
 'event': 'ajaxComplete',
 'attributes': {
 // Return empty strings 至 prevent accidental inheritance of old data
 'type': opts.type || '',
 'url': fullUrl.href || '',
 'queryParameters': queryParameters,
 'pathname': pathname || '',
 'hostname': fullUrl.hostname || '',
 'protocol': fullUrl.protocol || '',
 'fragment': fullUrl.hash || '',
 'statusCode': jqXhr.status || '',
 'statusText': jqXhr.statusText || '',
 'headers': headers,
 'timestamp': evt.timeStamp || '',
 'contentType': opts.contentType || '',
 // Defer 至 jQuery's handling of the 响应
 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '')
 }
 });

 });

 }

 function objMap(data, delim, spl, decode) {

 var obj = {};

 // 如果 one of our parameters is missing, return an empty object
 if (!data || !delim || !spl) {

 return {};

 }

 var arr = data.split(delim);
 var i;

 if (arr) {

 for (i = 0; i < arr.length; i++) {

 // 如果 the decode flag is present, URL decode the set
 var item = decode ? decodeURIComponent(arr[i]) : arr[i];
 var pair = item.split(spl);

 var key = trim_(pair[0]);
 var value = trim_(pair[1]);

 if (key && value) {

 obj[key] = value;

 }

 }

 }

 return obj;

 }

 // Basic .trim() polyfill
 function trim_(str) {

 if (str) {

 return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');

 }

 }


 })();
 /*
 * v0.1.0
 * Created by the Google Analytics consultants at http://www.lunametrics.com
 * Written by @notdanwilkerson
 * Documentation: http://www.lunametrics.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/
 * Licensed under the Creative Commons 4.0 Attribution Public License
 */
</script>

将该自定义HTML标记设置为在所有页面上触发。现在,让’检查表单是否基于AJAX构建:

  1. 启用(或刷新) 预览和调试模式.
  2. 用表单刷新网页。
  3. 尝试提交表单(没有错误)。
  4. ajaxComplete事件是否出现在“预览和调试”控制台中?
    1. 如果是,则表单正在使用AJAX。
    2. 如果不是,请跳至此博客文章的下一章。

如果 您r answer 至 the previous questions was ,让’看一下我们可以使用该AJAX表单做什么。在预览和调试模式下单击ajaxComplete事件,然后单击数据层:

阿贾克斯完成

对于非开发人员来说看起来很难,对吗?但它’比您想象的要容易。这是成功提交表单后传递到数据层的数据,每行是一个单独的dataLayer数据点,可用作GTM中的dataLayer变量。您应该寻找有助于确定成功提交表单的内容。向下滚动并寻找“response”.

 

ajax form 响应

让’我们仔细看一下。你能看到一条消息吗“This message has been 成功fully sent”?答对了!我们可以将其用作触发器。

首先,让’在Google跟踪代码管理器中创建数据层变量.

  1. Go 至 变量s
  2. 向下滚动到 用户自定义  变量 和 hit 
  3. 请点击 变量 configuration 然后选择变量类型– Data Layer 变量
  4. 输入数据层变量名称–属性响应。保留所有其他设置。
  5. 对于此GTM变量的标题,我的建议是 dlv– 属性响应 (“dlv” stands for Data Layer 变量)。

数据层变量-attribute.response

您’重新猜测我为什么要进入 属性响应 作为数据层变量名称,而不仅仅是 响应. 让’仔细查看“预览”和“调试”模式下的“数据层”。在第2行中,您会看到事件名称 ajaxComplete – 那’与预览和调试控制台中显示的名称相同’s的左侧。然后我们看到 属性 这是一个包含各种数据点(键值对)的对象。还有 响应 是这些键之一。

ajaxComplete - full 响应

因此,当我们想告诉Google跟踪代码管理器我们有兴趣 响应’s 值,我们需要告诉该数据的确切路径。就我们而言’s 属性 → 响应。路径的每个级别必须用点分隔→ 属性响应 。另一个例子:’s say 您’re interested in Server data (from 那 very exact AJAX 响应). 在 那 case, the Data Layer 变量’s 名称 should be attribute.headers.Server  .

创建之后 属性响应 Google跟踪代码管理器中的数据层变量’的调试。刷新预览和调试模式,并刷新AJAX表单所在的页面。为了教育/考试目的,我’m using forms 从这个网站 (use Example 1). Feel free 至 try them by 您rself.

填写表格并提交。在``预览和调试''控制台中单击最新的ajaxComplete事件,然后导航到``变量''选项卡并找到新变量 dlv– 属性响应。如果您正确执行了所有操作,则应如下所示:

attribute.response dlv

那’s a message of the 成功fully 提交ted form. 如果 the value of 那 变量 is 未定义 那么您应该开始寻找错误。最常见的是变量名称中的错别字或定义不正确的变量’的路径。有些人只是尝试使用 响应 代替 属性。响应 

现在让’创建一个触发器,当事件发生时触发 ajaxComplete 并且我们新的数据层变量包含文本 The message has been 成功fully sent.

  1. 转到触发器,然后单击 
  2. 选择触发类型–自定义事件。如果你’对此重新定义,自定义事件=数据层事件。富裕的’AJAX侦听器会创建一个数据层事件(通过dataLayer.push方法),每次发出AJAX请求时。
  3. 输入活动名称– ajaxComplete
  4. 此触发器应触发 一些自定义事件。
  5. 定义触发器触发的条件– dlv– 属性响应 包含 The message has been 成功fully sent.

自定义触发器-Ajax完整表格提交

 

让’s Test

  1. 将此新触发器分配给您在本博文开头创建的Google Analytics(分析)标签。
  2. 打开(或刷新)预览和调试模式,使用要跟踪的表单刷新网页。
  3. Then fill in the AJAX form 和 提交. After 成功ful submission, Google Analytics Tag should fire (it will be displayed in 预览和调试模式. 您 can also check Google Analytics(分析)实时事件报告)。

什么时候要记住的事情 追踪AJAX表格:

  1. The 响应 of 您r form might look different so try adjusting my tutorial 至 您r situation.
  2. 如果 developers change the 响应’的数据,您的触发器将失败。通知开发人员有关您的GTM实施的信息。
  3. 如果页面包含多个AJAX表单,请尝试在数据层中查找更多信息,以帮助Google跟踪代码管理器分辨出这些表单之间的区别。
Google跟踪代码管理器电子书包

 

#4。使用元素可见性触发器跟踪表单提交

GTM中最令人敬畏的触发器之一(在我看来)是Element Visibility触发器。它使您能够跟踪特定元素何时出现在屏幕上(由于滚动或其他一些情况)。

当特定邮件(例如“Thank 您”)  appears after a form is 成功fully 提交ted.

如果您喜欢视频格式,请点击此处’为您提供了一个教程。

The first thing we need 至 do here is 至 inspect the 成功 message of a form. We’我们需要找到一种方法来指导Google跟踪代码管理器,使我们对特定的网站元素感兴趣。

After 您 提交 the form 成功fully, right-click on the 成功 message 和 choose 检查元素。

在spect Element - 形成 成功 Message

然后您将看到浏览器’的开发人员工具,其中包含有关消息的各种信息:消息的内容,CSS类等。在下面的示例中,我看到消息具有一个类“thanks”可以用作“元素可见性”触发器中的条件。如果成功消息中有一个名为“id” but since it’s 没有 t available, we’ll use CSS 类.

谢谢 message of a form

让’转到您的Google跟踪代码管理器容器,然后转到触发器。创建一个新触发器并选择 元素可见性 作为其类型。这里的关键要素是选择方法,它将帮助GTM了解我们正在寻找的东西。

选择方法

The 选择方法 has two options: Element ID 和 CSS 选择or. Since the 成功 message in my example has 没有 id (but “class”, we’将与CSS选择器一起使用。

在 the Element 选择or field, we need 至 paste 那 类 “thanks”. 在 CSS, every 类 is defined with a dot in front of it, so 让’s do the same.

最后,确保您勾选“Observe DOMchanges”。此设置意味着如果元素出现在屏幕上 不是由于滚动 但在其他一些情况下(例如“just simply pops in”),GTM会抓住它(最有可能)。

看看下面的截图。如果愿意,您可以进行其他一些调整,但我所做的只是最低限度的要求。

表单跟踪中的元素可见性触发器

保存触发器。

 

让’s Test

  1. 将此新触发器分配给您在本博文开头创建的Google Analytics(分析)标签。
  2. 打开(或刷新)预览和调试模式,使用要跟踪的表单刷新网页。
  3. Then fill in the form 和 提交. After 成功ful submission, in P&您将看到的D控制台 gtm.elementVisibility 甚至t. 请点击 it 和 您 will see 那 GA tag has fired. 如果你不这样做’t see the gtm.elementVisibility 事件,您可能在Selection方法或CSS选择器字段中犯了一些错误。或忘记启用 观察DOM的变化 复选框。

如果 您r 成功 message has 没有 ID or proper CSS 类, 您’我需要更深入地研究 CSS选择器 因为它们的可能性是巨大的。

 

 

#5. Write 您r Own 形成 Auto-Event Listener

是的,我知道这听起来很复杂。其实,这可以’远离事实。在我的一篇博客文章中,我’ve解释了如何编写 没有编码技能的自动事件侦听器. 您 should definitely check it out.

自动事件侦听器是这些超级有用的JavaScript函数,可跟踪网页上的特定交互。万一发生值得注意的事件,它们会触发数据层事件,这些事件可用作GTM中的触发器。此外,这些事件包含有价值的数据,可以将其转移到其他工具(如您命名的Google Analytics(分析),Adwords,Mixpanel)。

默认情况下,Google跟踪代码管理器提供了内置的表单自动事件监听器,但正如您已经知道的那样,它的支持能力很差(否则,该博客文章不会’t exist).

无论如何,在上述博客文章中,我’ve解释了有关如何验证想法并创建自动事件侦听器的7个步骤。为了清楚起见,我’用实际例子来说明。

在继续之前,请检查您使用的是哪种表格。它是专为您定制和创建的吗?如果是,请跳至此博客文章的第6章。否则,请继续阅读。

如果您的网站在WordPress上运行,那么您肯定在使用某种形式的插件。找出其名称/品牌/标题/等。找到了?大。让我带您完成编写自己的表单自动事件侦听器而无需编写代码的7个步骤。

例如,我’ve chosen 重力形式,一个WordPress插件。

 

步骤1.检查是否有现成的解决方案

首先,您需要检查网络上是否有现成的Gravity 形成s GTM侦听器。我上次检查时没有。虽然你可能会说 嘿,我’ve googled “重力表单Google跟踪代码管理器”还有一些教程,我只能说他们不是’不如您想像的那样好。

I tried 至 track Gravity 形成 once. The problem was 那 the form dispatched a 表格提交 甚至t 甚至 如果表单提交为空(未填写任何字段!)。这些博客文章并没有帮助我解决此问题,因此我不得不找到解决方法。

那’在此GTM表单跟踪方法#4变得非常有用。继续阅读。

 

STEP 2. 让’■检查是否有JavaScript API

打开Goog​​le并输入 重力形式 Javascript API。 It’s crucial 那 您 look for JavaScript API,而不是常规API。您的搜索结果应如下所示:

重力形式JavaScript API

The 2nd search result looks promising. 让’单击它。我们应该比编写自动事件侦听器更近一步。

 

 

STEP 3. 让’查看可用的JS API方法

现在,即使对于那些不知道如何编写代码的人,也请检查API是否有充分的文档记录和易于理解的内容。由于我们只想跟踪成功提交的表单,因此我们应继续寻找一些包含“success”, “form submission”, “confirmation”等等。您的想法正确吗?

What we are looking for is some kind of API 方法 which is related 至 成功ful submissions. Honestly, it 至ok me a while 至 find a proper page in Gravity 形成’的文档(因为他们提供了很多东西)。

在左侧 重力形式 API参考, 您’会找到一个导航栏。去 钩子> Filters > Confirmations >gform_confirmation_loaded。该JavaScript钩子(gform_confirmation_loaded)在表单启动时触发’s “Success”页面已加载(这正是我们’re looking for!).

重力表格确认加载的API参考

答对了!我们’re one step closer 至 成功 but there’仍然是我们需要验证的东西。

 

步骤4.代码示例是否易于使用且非常简单?

即使API提供了有用的方法并且文档写得很好,’还有一个要求。 API参考是否真的可以防伪?非开发人员可以轻松使用它吗?

老实说,在API参考中编写超简单的代码示例并不是一种非常普遍的做法,这可能对非开发人员或初学者很有用。有时候’甚至几乎是不可能的。

例如,Wistia提供了一个写得很好的Javascript API参考,但示例并非为入门级开发人员设计的,因此您和我赢了’不能编写我们自己的自定义自动事件侦听器。

在威斯蒂亚’s case, we’很幸运有Bounteous,因为他们的开发人员发布了这个很棒的东西 Wistia GTM监听器。但是,在很多情况下,根本就没有现成的跟踪解决方案。

好,让’s回到重力形式。我已经导航到 gform_confirmation_loaded JavaScript钩子,发现以下代码示例:

gform_confirmation_loaded JavaScript代码段

This is perfect! 让 me explain what’s happening.

此代码可以使用了。它指出: 如果发生gform_confirmation_loaded,请启动一个函数。目前,该函数为空,但是我们只需替换文本即可轻松嵌入dataLayer.push事件。 //code 至 be trigger when the 确认 page is loaded 与实际的数据层代码。

 

步骤5.添加dataLayer.push事件

从Gravity 形成s API文档中复制该代码并粘贴到一些纯文本或代码编辑器中(例如Notepad,Notepad ++,Sublime等)

<script type="text/javascript">
jQuery(document).bind('gform_confirmation_loaded', 函数(事件,formId){
 // code 至 be trigger when 确认 page is loaded
});
</script>

去掉 //code 至 be trigger when the 确认 page is loaded

<script type="text/javascript">
jQuery(document).bind('gform_confirmation_loaded', 函数(事件,formId){

});
</script>

准备dataLayer.push事件代码:

 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'formSubmission', //you can actually name this 甚至 whatever 您 want
 'formID': formId
 });

我为什么要添加“formId”? Well, 那’因为重力形式’s JavaScript webhook返回表单的ID(请参见 函数(事件,formId) ?)。它’s是可选的,因此随时将其删除。

现在,合并重力表’s code snippet with window.dataLayer.push。最终结果应如下所示:

<script type="text/javascript">
 jQuery(document).ready(function() {
   jQuery(document).bind("gform_confirmation_loaded", function(event, formID) {
     window.dataLayer = window.dataLayer || [];
     window.dataLayer.push({
       甚至t: "表格提交",
       formID: formID
     });
   });
 });
</script>

大!我们’非常接近完成重力表自动事件监听器!

 

步骤6.创建自定义HTML标记并测试

在Google跟踪代码管理器帐户中,创建一个新的“自定义HTML”代码。粘贴上一步中创建的代码。

重力形式监听器

做完了!保存标签并分配所需的触发器,例如所有页面(或仅在表单所在的页面上)。

唐’别忘了用 GTM预览和调试模式。用任何重力表加载页面并完成测试提交。名为的数据层事件 表格提交 应该出现在事件流中。单击它并检查哪些数据已传递到数据层。它应该看起来像这样。

表单提交数据层事件

 

STEP 7. 成功

如果一切都如我所描述的那样工作,请创建一个数据层变量 formId (了解如何在数据层中访问数据)并创建一个 自定义事件触发器 表格提交。使用此变量并在您的Universal Analytics或任何其他标签中触发。

恭喜你!您已经编写了第一个GTM自动事件监听器。如果此Google跟踪代码管理器表单跟踪方法没有’工作,继续阅读,也许你’ll what 您’re looking for.

#6。使用dataLayer事件进行表单跟踪

免责声明: 尽管与标准GTM相比,此表单跟踪方法是同样可靠的解决方案’■表单侦听器(请参阅技术1),出于某种原因,我将其作为此列表中的6号选项。

当其他营销人员向我寻求形式跟踪建议时,他们’当开发人员重新期待解决方案’可以避免输入。“在没有开发人员帮助的情况下管理您的营销标签”是他们开始考虑使用Google跟踪代码管理器的主要原因之一。该声明属于GTM’s key “selling”指向它何时启动,所以它’毫不奇怪,营销人员期望这是100%正确的。尽管我们知道很多情况下开发人员’强烈建议您提供帮助。我在这里的位置:

  1. 如果您有权访问开发人员和Google跟踪代码管理器’s 形成 listener isn’为了对您有用,我建议使用dataLayer.push方法,我将对此进行进一步描述。
  2. 如果你不这样做’无法访问开发人员或者他们非常忙(也许他们很忙),那么它’可以跟踪此博客文章中提到的其他技术。请注意,当开发人员不断更新您的网站时,其他解决方案更有可能被打破’重新追踪。这尤其适用于技术7– DOMscraping.

我希望我的观点明确,我们可以继续。

如上所述,如果标准的Google跟踪代码管理器表单侦听器无法与您的表单一起使用,那么下一件最好的事情就是要求开发人员实施自定义 dataLayer.push() into the callback function which is invoked upon 成功ful 表格提交. The piece of code could be something like:

window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
   'event': 'formSubmission',
   'formType': 'Contact us',
   'formPosition': 'Footer'
});

您’需要为开发人员准备简短但写得很好的清晰任务:

  1. 首先,为事件选择一个名称。在上面的示例中,我选择了 表格提交。
  2. 然后考虑您可能需要的任何其他数据。写下这些数据点,然后尝试对其进行分类。
    1. 在我虚构的网站上,我有几种类型的表格– “Contact us” 和 “通讯订阅”。所以我决定有一个dataLayer变量 formType.
    2. 另一个有用的参数(我认为)是表单位置,因为某些表单位于页脚中,而另一些则位于网站的侧边栏中。为什么不将其设置为另一个dataLayer变量?
  3. 如果开发人员通常不熟悉dataLayer事件和Google跟踪代码管理器,请向他们提供此链接 dataLayer.push指南 with clear examples. Explain 至 them 那 您 need an 甚至t with additional 变量s pushed into dataLayer after the 成功ful 表格提交. 如果 developers still have questions, 此博客文章应该启发他们.

唐e! After the developer implements dataLayer.push in all forms, 您 should test it:

  1. 打开预览和调试模式。
  2. 用表单刷新页面。
  3. 尝试提交表单:
    1. 将至少一个必填字段留空。在这种情况下,不得推送dataLayer事件。
    2. 填写所有字段,然后尝试再次提交。该事件是否出现在“预览和调试”控制台中?它看起来应该像这样:
      表单提交事件
    3. 检查是否所有数据都已正确推送到dataLayer。请点击 表格提交 事件,然后在“预览”控制台中打开“数据层”选项卡。数据应如下所示:
      表单提交数据层

在GTM中设置变量和触发器。在我的dataLayer.push示例中,有两个数据点’d想用作变量– formType 和 formPosition, 因此我需要通过创建数据层变量将它们包括到Google跟踪代码管理器中。

1st 变量:
标题:
dlv– formType
变量 type: Data Layer 变量
数据层变量名称: formType
保留所有其他设置

第二变量
标题:
dlv– formPosition
变量 type: Data Layer 变量
数据层变量名称: formPosition
保留所有其他设置

现在,让’创建触发器。转到触发器,然后单击新建。输入以下设置:

触发类型: 自订活动
活动名称: 表格提交 (根据您的情况,它可能会有所不同。只需确保您和开发人员使用相同的名称即可)。
此触发器将触发: 所有自定义事件。这意味着所有 表格提交 事件将被跟踪。

 

让’s test

  1. 将此新触发器分配给您在本博文开头创建的Google Analytics(分析)标记。
  2. 打开(或刷新)预览和调试模式,使用要跟踪的表单刷新网页。
  3. Then fill in the form 和 提交. After 成功ful submission, Google Analytics Tag should fire (it will be displayed in 预览和调试模式. 您 can also check Google Analytics(分析)实时事件报告)。

小费: 在这个例子中,我’d建议对Google Analytics(分析)事件代码进行一些更改。在这篇博文的开头,我建议创建一个具有以下值的GA事件代码:

  • 表格提交 作为事件类别
  • 联系表 作为事件动作
  • {{页面网址}} 作为事件标签。

更新了Google Analytics(分析)标记-提交表单

由于我们要求开发人员通过dataLayer.push添加一些其他变量,因此我们可以利用此数据并将其推送到GA。我们可以更改:

  • 活动类别– from 表格提交 to 表单提交:{{formType}}
  • 事件动作– from 联系表 至 {{formPosition}}
  • 将事件标签保留为 {{页面网址}}

该事件将如何显示在Google Analytics(分析)事件报告中?让’s表示访客订阅了我们的新闻通讯。通过Google Analytics(分析)事件推送的值将为:

  • 活动类别: 表格提交: 通讯订阅
  • 事件动作: 页脚
  • 活动标签: //www.toddblog.net/mega-blog-post/

 

 

#7。通过DOM跟踪跟踪表单提交

此方法永远不应是您的首选。在继续阅读本章之前,请尝试使用上述6种Google跟踪代码管理器表单跟踪方法。

如果开发人员经常更新网站’的代码,由于其风险,您应该将DOM抓取作为最后的手段。它’s better than “根本没有表单跟踪”, but it’较本博客文章中描述的其他选项不那么健壮。

尽管您获得了很大的灵活性和敏捷性,但这几乎不依赖于网站 前端’s 结构体。开发人员做出的微小更改都可能破坏您的实施。此外,它还需要一些Javascript和DOM概念的知识(这在营销人员中不是很常见的技能)。

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

现在让’开设Shopify演示店 布鲁克林主题和see everything in action. I’d谨此提前向Shopify员工道歉,因为他们使用假冒的电子邮件内容向其演示网站发送垃圾邮件(但我’m sure they’re fine 用它)。 There is a 注册我们的邮件列表 表格位于其首页的底部。

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

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

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

首先,让’s create a DOMelement 变量 looking for 那 particular 成功 message. Hover 您r mouse cursor over 成功 message’的文本,右键单击并选择  检查。

右键单击-检查元素

开发人员’s console will appear with a lot of HTML code. Note 那 成功 message’的代码已在该控制台中选择。该消息没有任何唯一ID,因此我们’我需要利用CSS选择器。

检查元素

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

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

  1. Go 至 变量s
  2. 向下滚动到用户定义的变量,然后单击 
  3. 选择 变量 type – DOMElement 变量
  4. 选择方式– CSS selector
  5. 在 元素选择器 现场输入 div.note.form-成功
    CSS选择器-简短
    看看我在那里做什么?我从上面的屏幕截图中输入了最后一个CSS选择器。
  6. 在 case there were more than one possible 成功 messages on a website with similar CSS selector, I would have used a longer CSS selector, for example, “#contact_form div div.note.form-成功”(不带引号)
    CSS选择器
  7. 将属性名称保留为空。
  8. 变量’s title could be DOM– 形成 成功 Message.
  9. 击中 保存。

 

让’s test

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

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

  1. 转到触发器,然后单击 
  2. 选择触发类型– 页面预览
  3. 此触发器将触发: 一些页面
  4. 输入以下条件: DOM– 形成 成功 Message 等于 感谢您的订阅. This means 那 the trigger will fire only on those pages where the 形成 成功 message is displayed 至 visitors.

 

不要忘记测试:

  1. 将此新触发器分配给您在本博文开头创建的Google Analytics(分析)标记。
  2. 打开“预览和调试”模式(或刷新),使用要跟踪的表单重新加载网页。
  3. Fill in the form 和 提交. After 成功ful submission, Google Analytics Tag should fire (it will be displayed in 预览和调试模式. 您 can also check Google Analytics(分析)实时事件报告)。
  4. 另外,请尝试提交带有故意错误的表单,并查看代码是否会触发(剧透警告:’t).

 

最后的话

在这篇博客中,我介绍了Google跟踪代码管理器的七种表单跟踪方法。到目前为止,这是此博客上最大的指南,希望您发现它有用。现在,您无需开发人员就能跟踪更多表格’的输入。但要记住– it’可以问开发商’的帮助。如果可能,请选择 dataLayer.push 方法 通过DOM抓取。稳健的解决方案应该是您的优先事项。

我是否跳过了这篇文章中的内容?您是否需要表单跟踪的某些方面的更多信息?给我留言,让我们看看我们能想到什么!

朱利叶斯·费多罗维奇乌斯
79条评论
埃德姆

这真是很棒的帖子,除了表单跟踪外,还包含许多有关GTM的主题。

劳拉

已收藏!!!非常感谢这篇非常有用的文章!我对表单有无尽的乐趣/噩梦,因此,如果流程图很棒,它会经常使用-您的表单非常接近该标题。再次感谢 :)

耶稣

你好
Not sure if 您r post will work for Ajax 形成s.
I am using NinjaForms 和 the form shows a 确认 message in the same 页。
您 can check a test page here //www.thefrenchcandle.com/contact
I would like 至 be able scrap when this 确认 message is showed but I haven't been able. I tried but the 变量 doens't populate on the pageview tag as the pageview tag has 没有 t this information when it's fired.
谢谢 in advance,
耶稣

    朱利叶斯·费多罗维奇乌斯

    嗨,我的文章适用于AJAX表单(我已经使用过多次了)。但是,您的表单有些奇怪。每当我提交并转到“预览和调试”控制台的“数据层”选项卡时,我的浏览器就会崩溃,而我对此无能为力。

    我相信您应该就这种异常行为向开发人员咨询。

短剑

你好 谢谢 for 您r great advice. I've read this post: //www.toddblog.net/thank-you-page-tracking-google-tag-manager/
我已经在Google TM中实现了所有功能。但是我现在的问题是:如何在Google Analytics(分析)中查看此信息?我想看到以下内容:在特定目标网页上的X个提交。

    朱利叶斯·美联储

    嘿,德克,

    One of the possible answers is this: in Google Analytics, go 至 Behavior > 事件s > Pages. 请点击 the page 您're interested in 和 您'll which 甚至ts occurred on 那 页。

    干杯

彭尼

First time 至 GTM 和 您r post is without doubt the best I've found online, 谢谢 for the detail!!

我确定我正确地遵循了它,但是它对我不起作用,因此我显然错过了一些东西!

使用AJAX方法时,会出现亮度AJAX侦听器,并且工作正常。

Yet when I 提交 the form on this page: //www.kabocreative.com/contact/ it doesn't work. Under preview mode it's still showing as 'tags 没有 t fired on this page'.

Any hints massively appreciated, 和 谢谢 again!

    彭尼

    已修正,惊人的一夜无眠!

    在 Caldera forms the 响应 message is nested inside an html tag. Changed the dlvfrom 属性响应 至 属性响应.html 和 it works.

      朱利叶斯·美联储

      Good job, 彭尼! It's important 至 understand 那 there is 没有 standard when developers code AJAX forms. Therefore the 响应 data might use different structures in different forms. 在 您r case, 您 went one level deeper, from 属性响应 至 属性响应.html which is a correct approach.

      Sometimes data structures are 甚至 messier when there are several objects within an array. I had one situation, where the data layer 变量 was 属性响应.0.success. 那 number (0) looks strange, right? I've described this in the 3rd tip of this blog post -> //www.toddblog.net/post/pull-data-from-data-layer-google-tag-manager-tutorial/. So feel free 至 learn more :)

弗拉多

你好

我在GTM中实现了“谢谢您的页面跟踪”功能,但是找不到将数据推送到Google Analytics(分析)的方法。我可以在分析的哪里看到这些转换?

我的主要目标是稍后将其与Adwords关联

谢谢

    朱利叶斯·美联储

    嘿,您可以借助Universal Analytics Tag将数据推送到Google Analytics(分析)。我已经在本博文的“ TAG + TRIGGER”部分中对其进行了描述。

    干杯

Aldébaran

你好朱利叶斯,
First of all, 谢谢 for this amazing tutorial, I've been following it for my personal website.
非常完整,解释得很好。
但是,我目前正在使用自动刷新功能来处理AJAX格式的表格(我安装了LunaMetrics插件,以便可以获取ajaxComplete代码)。
问题是,我的attribute.response是很大的一段代码,它会更改,因此我无法使用它。
我决定使用attribute.response.ajax.submit来调用表单按钮(我想)。
但这不起作用
有可能得到一些建议吗?
Here's the link : http://fr.esterline-connection-technologies.com/en-en/search?category=4596&active_tab=part-number
(您必须单击“单击此处以优化结果”)。
对不起,我大约英语

    朱利叶斯·美联储

    嘿, there are hundreds 属性。响应ajax.submit parameters in the 响应. Honestly, 那 响应 is huge 和 it will take way 至o much time 至 dig in. I would suggest keeping digging deeper.

    Maybe this blog post will give 您 some ideas //www.toddblog.net/post/pull-data-from-data-layer-google-tag-manager-tutorial/

    Sorry, but debugging this 响应 will take 至o much time while this week is super busy :(

    我已经添加了有关此问题的书签,但是不确定何时可以腾出更多时间。

      Aldébaran

      你好朱利叶斯,
      感谢您的博客文章,我将对其进行检查。

      唐't worry about this it's 没有 t "super" important. The 响应 is probably going 至 change anyway, I asked the devs about it.
      在完成一些开发后,我将对其进行检查。

      周末愉快,继续前进;)。

拜伦

嗨,大家好,

Firstly, this tutorial is amazing - Wow, learnt so much in one tutorial. I'm trying this with the Divi 联系表s 和 the Lunar Metric Ajax script. The issue being is 那 I don't get a nice 响应 code like 您 showed in 您r example, my 响应 code appears 至 be the whole 页。

如果我在GTM中使用基本的提交表单触发器,那么它可以工作,但是无论是否成功提交,它都会触发。然后,如果我尝试进行验证,则似乎永远不会触发。因此,我感到前进的唯一方法是使用您在下面概述的Lunar Metrics方法,但是响应代码实际上是html的整个页面,而不是像你们一样的漂亮响应代码。你们有什么建议吗?

    朱利叶斯·美联储

    你好 您r case is 没有 t so rare, actually. Sometimes I see when the AJAX listener returns a huge chunk of code. Sometimes it returns another array of objects, etc. 您'll have 至 find a way how 至 distinguish a regular AJAX 响应 with the 响应 of a 成功ful 表格提交. Dig into 那 very long 响应 code 和 find something useful.

    Sometimes, this blog post helps (check 方法 2 or 3) //www.toddblog.net/post/pull-data-from-data-layer-google-tag-manager-tutorial/
    干杯

安德里亚

I rarely give praise comments, but this 文章 is simply awesome. Navigated through each step 和 managed 至 implement a custom solution for my client. 谢谢!!

    朱利叶斯·美联储

    很高兴听你这样说!

麦克风

Hello, what do i do when after form 提交s the 响应 is blank?

回应:“

    朱利叶斯·美联储

    嘿, in 那 case forget about the AJAX listener because an empty 响应 is unreliable. 在stead, try using 元素可见性 Trigger (when a 成功 message appears, fire a tag) or ask a developer 至 use dataLayer.push when the form is 成功fully 提交ted.

    阅读更多 on dataLayer.push here - //www.toddblog.net/post/datalayer-push/

朱利安·穆雷

嗨朱利叶斯

我仍然不知道哪种技术应该适合我的网站,因为表格处于叠加状态。
开发人员刚刚添加了:dataLayer.push({'event':'formSubmission','formType':'Registration'});

但是我的预览模式gtm.submissionform中没有任何事件
谢谢 for 您r help

    朱利叶斯·美联储

    嘿朱利安,
    如果 a developer has added 那 code snippet, 您 should see "表格提交" 甚至t in the preview mode after the form is 成功fully 提交ted. 如果 it does 没有 t appear, ask him 至 add this one:

    window.dataLayer = window.dataLayer || []
    window.dataLayer.push({'event':'formSubmission','formType':'Registration'});

    如果仍然没有出现,则表示开发人员未正确添加代码,因此您应要求他/她对其进行修复。

      朱利安·穆雷

      谢谢朱利叶斯(Julius),您难道不认为是因为我没有使用好事件和formType名称吗?我把formSubmission和Registration放在了一起,因为我在另一个解释中找到了它,但这不是我们的表单被调用的方式。
      我从“检查元素”中只能看到:
      表格编号
      注册模态获取报价
      按钮编号
      注册模态获取报价完成

      谢谢,

      朱利安

卡塔琳娜·斯汀加修(Catalina Stingaciu)

你好

I am curious about something. what would be the point in tracking a form based on 谢谢 page? Since 那 url is unique 和 we are able 至 create destination goals in Analytics, why would we also need an 甚至t? Is there something 那 I'm missing?

谢谢,
卡塔琳娜

    朱利叶斯·美联储(Fedorovicius)

    嘿,这不是必需的。您确实可以使用目标目标,并且可以正常运行。对于事件,您最多可以传递3个数据点(无自定义维度)-类别,操作,标签。所以我选择利用它们。

    But 那's up 至 您.

      卡塔琳娜·斯汀加修(Catalina Stingaciu)

      谢谢 so much for 您r answer!

爱犬

再次问好,
我已经和另一个客户回到了同样的问题。
我创建了变量“表单提交消息”,其中使用ID作为选择方法并指定了元素ID。顺便说一句,我应该将元素ID带#还是不带#?这有什么不同吗?
然后根据您先前的建议,我创建了一个新的触发器,即元素可见性类型,其中选择方法指定了ID; “最小可见百分比” = 100%;在“某些可见性事件”上触发触发器的条件是“表格提交消息”,该消息从“谢谢您与我们联系”开始。

但这不起作用,不会加载gtm.elementVisibility。

//versapak-anti-doping.com/contact-us/

我究竟做错了什么?
谢谢 in advance.

    朱利叶斯·美联储(Fedorovicius)

    嘿,如果您选择选择方法:ID,则不需要#。如果选择方法是CSS选择器,则需要#。

    Now, regarding 您r form. Since 您 form reloads the page 和 the 成功 message is displayed on the page right away, I suggest using DOMScraping 方法 代替 元素可见性. It's a bit risky, but if 没有 one changes the ID, 您 should be good. Here's a guide how 至 track with DOMscraping //www.toddblog.net/form-tracking-dom-scraping-google-tag-manager/

      爱犬

      你好朱利叶斯,

      谢谢 for the prompt 响应.

      由于变量“成功提交表单”属于DOM元素类型,而触发器使用的是“页面视图”类型,因此变量的值没有更早传输。我将“触发类型”从PV更改为“ DOM就绪”后,Tag开始在页面上触发并接收变量的值。现在,可以在相应的Google Analytics(分析)报告中跟踪此事件,但该事件不会显示在“转化/目标”报告中。但是,这是另一个故事。

马蒂亚斯·克莱(Matthias Kley)

你好朱利叶斯,
谢谢 for this great post. i've implemented the ajax listener 和 It seems 至 work fine, but I don't get a 表格提交 甚至t in GA Real Time. I tried with 属性.respones.message 和 属性响应.status. The website is //www.erhardt-leimer.de/produkt/drehrahmensystem-drs07/

Do 您 have any idea whats wrong?

谢谢
马蒂亚斯

    朱利叶斯·美联储(Fedorovicius)

    Could 您 elaborate what do 您 mean "don't get a 表格提交 甚至t". 您 don't see any 甚至t? Or see something but it is undefined? Does the GA 甚至t tag fire after the 表格提交?

    您需要检查ajaxComplete事件上该数据层变量的值是什么。

    您 can use 属性响应.status 变量 和 it must be equal 至 "成功". 那 should work fine.

      马蒂亚斯·克莱(Matthias Kley)

      谢谢 for 您r reply. Today I checked it again. All the 表格提交s I tested on Friday can 没有 w be seen in the behaviour-event report. But still I don't see any 甚至ts in the real-time report (checked it again 至day).

        朱利叶斯

        Check the tip #5 //www.toddblog.net/post/google-analytics-real-time-reports-not-working/

        另外,请检查其他建议。

皮匠

I'm having the weirdest problem 和 maybe 您 can help. I am in the middle of setting up the 表格提交 tracking, but before it's 甚至 live, I see gtm.formSubmit showing up in the Summary for the GTM 预习... any advice on why this is would be appreciated.

    朱利叶斯·费多罗维奇乌斯

    嘿,

    Facebook像素造成了这种情况。如果在该gtm.formSubmit事件上检查dataLayer,您将看到Facebook URL。确保您实际的“表单提交”触发器准确无误,因此不包括FB像素的虚假提交。

安德里亚

朱利叶斯, 您rs is the best tutorial I read online. However, I can't get my Thrive Leads forms 至 work with either 方法 #3 or #4. Would 您 be willing 至 check the form in question? It's on this page: //travelhonestly.com/free-stuff/
谢谢 so much
安德里亚

    朱利叶斯·费多罗维奇乌斯

    I see 那 those popups are using AJAX, however, all of them return the same 成功 message meaning 那 您 cannot distinguish which form was 提交ted. 在 this case, I'd go with developer's help 和 ask him/her 至 push the 表格提交 information 至 the dataLayer.

K

太棒了..我现在明白了。非常感谢 :)

安东·格斯蒙多(Anton Gesmundo)

嗨,朱利叶斯!

我遵循了#4。使用“元素可见性触发器”以及标签和触发器的“跟踪表单”设置良好。 gtm.elementVisibility在DOM准备就绪后立即触发,但是Google Analytics(分析)代码仅在延迟一段时间后才触发一次(上下滚动页面时不触发),并且提交其他表单后无法再次触发。

    朱利叶斯·费多罗维奇乌斯

    嘿, Enable the "观察DOM的变化" checkbox 和 try again.

朱利安VDC

嘿朱利叶斯,

Like everyone else I'd like 至 谢谢 for posting publicly this guide, it's been a great help 至 understand further how GTM works 和 what 您 can do with it.

我目前正在测试您建议的不同方法(我认为我可能不得不采用#6 ...)...但是我对DOM抓取存在疑问,这似乎是您说的一个很弱的解决方案:

- How would 您 proceed (if using DOMScraping), if 您r site was multi-lingual 和 would thus display 成功 messages in different languages depending on the user's preferred language?
-另外,刷新页面并因此再次显示消息是否会再次触发它,因此计数两次。您将如何解决?

干杯,
朱利安

    朱利叶斯·费多罗维奇乌斯

    嘿, 您r DOMscraping should depend on element 类es, IDs, etc., 没有 t text. Therefore page translation should 没有 t have negative effects.

    As for the prevention of duplicate tracking, read this for inspiration //www.simoahava.com/analytics/prevent-google-analytics-duplicate-transactions-with-customtask/

朱利叶斯·费多罗维奇乌斯

听起来像是复制不良。复制代码之前,请切换到纯文本模式(通过单击该代码块中的按钮之一)。

马可

我最近不得不修改Lunametrics脚本才能在单页面应用程序上工作。
如果 anybody is interested then feel free 至 use it: //gtm.marxdev.com/.

它的工作原理与Lunametrics脚本完全相同,但它不依赖jQuery,因此应在所有网站上都可以使用。

加布里埃尔

亲爱的朱利叶斯,

谢谢 for great content 那 您 are sharing on this site 和 through 您r courses!

我已经通过元素可见性触发器成功实现了很多表单跟踪。但是,我在一个网站上苦苦挣扎。提交联系表格后,他们没有可见的永久元素。页面顶部仅显示2秒钟弹出窗口,然后消失。有可能以某种方式跟踪它吗?

    朱利叶斯·费多罗维奇乌斯

    这是我刚刚发布的指南。受您的评论启发。
    //www.toddblog.net/post/how-to-pause-javascript-and-inspect-an-element-that-quickly-disappears/

    谢谢!

马可·比利亚森诺

嗨朱利叶斯

I am trying 至 track cross domain from a link embedded in a 纽扣, but it is 没有 t working url: //www.lillyplay.com.br

链接在按钮CADASTRE-SEJÁ中

您r inputs Will be most appreciated

问候,

马可

    朱利叶斯·费多罗维奇乌斯

    该按钮不是常规链接。我建议您与开发人员交谈,并请他们用链接器参数修饰链接。
    或者,您需要知道如何编写JavaScript才能找到解决方法。

古斯

Can 您 set a visibility trigger with an alert box? The form I'm trying 至 track only displays it after 成功ful 提交 ( but I can't find the way 至 inspect it) I tried right-clicking on it 至 没有 avail.

警报框类似于此页面上的警报框(第一个警报框):

w3schools.com/js/js_popup.asp

    朱利叶斯·费多罗维奇乌斯

    嘿,不。该默认浏览器数组不是DOM(文档对象模型)的一部分,因此,元素可见性触发器无法跟踪它。这种形式将需要开发人员的输入。

    据我在Stackoverflow上看到的那样,可以尝试使用一些自定义JS跟踪此类警报的出现,但是不能保证它可以正常工作,而且我看到的解决方案仅在Chrome上进行了测试。

    总而言之,在这一方面,我会得到开发人员的帮助。

德鲁·格里菲思(Drew Griffiths)

我还看到facebook.com/tr/作为表单的点击URL很奇怪

    朱利叶斯·费多罗维奇乌斯

    Read this //www.toddblog.net/post/why-is-there-a-gtm-formsubmit-event-on-every-page-view/

马修

嗨,朱利叶斯!

非常感谢您提供了很棒的帖子-我经常回来参考它。

我很好奇-您知道这些方法中的哪一种适用于嵌入式Pipedrive Web表单吗?我已经遍历列表,似乎没有办法解决问题。我是在做错什么,还是Pipedrive很难使用?

谢谢!

    朱利叶斯

    如果这些都不起作用,那么提示会有所帮助,那么您应该继续使用谷歌搜索或在角落找哭泣:)

    我没有使用pipedrive,但听说人们对此很艰难

倒钩戴维斯

I used the 2nd 方法 和 have the page path as the label so I can see which form was filled out. I have multiple 谢谢 pages for one client 和 this was super helpful seeing which ones came through 和 being able 至 tie them 至 source. Do 您 have a reference on how 至 determine which forms convert more?

    朱利叶斯·费多罗维奇乌斯

    您 could ask a developer 至 add ?form-id=xxxx parameter 至 the 谢谢 page's URL. 在stead of XXX, a form ID should be used. Then 您 could distinguish from which form did a visitor land on a "谢谢"页.

皮埃尔

你好,

I 至o am having a 至ugh time tracking Pipedrive 表格提交.

但是即使跟踪按钮...

请问什么触发器适合这里?


提交

达米安

嗨,朱利叶斯,您好,我最近发现了您的网站,并且发现它真的很有用。我正在尝试跟踪网站的表单提交,并且自动事件侦听器方法对我来说很好,除了以下几点:尽管仅在表单有效时才会触发,但是当我使用GTM预览变量时,所有表单变量均未定义,因此我无法使代码专用于该表单(如果我在同一URL中有其他表单,则也会触发该标签)。也许您知道此问题的解决方法?谢谢!

    朱利叶斯

    嗨,在您目前的GTM知识阶段,我会联系该表格的开发人员,并要求在其中添加ID。

斯蒂夫

Wow, very in depth 朱利叶斯. 谢谢. I had a question 那 I didn't see answered here. Is it possible 至 have multiple 谢谢 pages added as one trigger?

现在,我有一个具有12个表单的客户端,每个表单都有一个唯一的页面,因此我在一个触发器下添加了全部12个表单。我没有收到错误,但是也没有看到转换。

我应该设置12种不同的触发器吗?

提前致谢

    朱利叶斯

    其中有12个触发器。最佳方法是学习正则表达式基础知识,并在单个触发器中使用它们。

汤姆·梅西克

问候!很高兴回到教程中-总是要学习一些东西!遵循#2中的步骤。使用Google跟踪代码管理器“谢谢”页面跟踪。结果?无效-“未触发代码”。是否存在故障排除协议(过程?),用于找出哪个变量无法正常工作?提前谢谢,汤姆

    朱利叶斯

    嗨,在预览模式下,点击未在综合浏览量上触发的代码,然后检查变量。

This is a great reference tutorial. This is my go-to while I learn about forms. 谢谢!
我正在使用Drupal Webforms,我有一个搜索表单,并且我想知道是否可以与单击事件一起跟踪来自文本输入和选择字段的用户输入。目前,我只能跟踪用户是否参与(对还是错)。我说的对吗,我需要在数据层中使用javascript吗?

    朱利叶斯·费多罗维奇乌斯

    嗨,这需要JavaScript。

      在哪里可以了解更多信息?

        朱利叶斯

        有很多资源。在Google aearch中输入“ javascript课程”,然后就可以开始了。

威尔科

Would be nice 至 have guide specific 至 形成idable 形成s also. I 没有 tice there are a few crucial steps missing from this guide: //formidableforms.com/google-tag-manager-form-submit-tracking/

我收到的“已提交”表格的点击率很高,例如,收到一个错误。

您r guides seem 至 be more complete.

    朱利叶斯·费多罗维奇乌斯

    噢,那可怕的指南太可怕了。我的意思是,他们提供的方法非常不正确,并且会导致很多误报。我将您的想法添加到了待办事项列表中,但是我不知道它何时会发布。

艾伦·汤普森

您的网站是GTM的最佳资源,但是我很想知道何时可以上线而不是在等待名单上的更高级的课程。有第一次约会吗?

    朱利叶斯

    嗨,我打算在一周左右的时间内开始中级/高级课程的注册。等候名单上的人将通过电子邮件收到通知。

阿什什

你好。
谢谢 for the video. I have a question regarding the 类. What is the solution if there are more than 1 element (two element) with the same 类 on the page?

谢谢 in advance.

    朱利叶斯

    然后,您应该学习CSS选择器并创建高级解决方案。

约翰

嘿朱利叶斯,

第一, 谢谢 for this amazing content.

我使用了Ajax方法,除了分析之外,其他所有功能都可以在GTM上正常运行。显然,数据不会显示在分析“事件”实时报告中。

我更改了此消息,因为我的网站在“自定义事件”中引发了另一条感谢消息。

    约翰

    另外,我添加了2个条件

    1= 谢谢 for 您r message. It has been sent.
    2 =相同的消息,但全部为大写

玛玛利加多克

尊重地 !!!

东风

如果我将hubspot表格嵌入到我的网站上,该方法会起作用吗?

发表评论

您r email address will 没有 t be published. 必需的地方已做标记 *