使用Google跟踪代码管理器在一个“感谢页面”中跟踪许多表格

这里’一种情况：您想跟踪网站上的表单提交。有多种形式，它们都将访客重定向到相同的表单“Thank you” page. The built-in GTM中的表单提交触发器不起作用，因此您可以尝试实施 谢谢 page tracking method。但是，您如何区分提交的表格呢？

在本指南中，我’ll显示几个如何使用“谢谢页面”来跟踪许多表单的选项（换句话说，将相同的页面重定向‘Thank you” page).

目录

+显示目录+

• 选项1。使用引荐来源网址变量
• 选项2。使用单页应用程序？使用触发组
• 选项＃3。单页应用程序的另一种选择
• 选项＃4。将最后提交的表单信息存储在cookie中
• 选项＃5。您可以自己更改“谢谢”页面的URL吗？
• 选项＃6。与开发者合作
• 如何在一个“谢谢”页面上跟踪多种形式：最后的话

 

选项1。使用引荐来源网址变量

如果每页只有一个表单，则此方法很有用。

如果带有表单的页面和“谢谢”页面是同一子域之一，则很有可能使用内置 引荐来源网址变量Â在Google跟踪代码管理器中。此变量返回上一页的值。

但是，请记住，此变量变得更多，并且 更有限 （由于涉及隐私）。如果你的“Thank you”页面位于另一个域上，引荐来源网址可能不会返回完整的URL，这意味着您将无法区分访问者从哪个确切页面登陆。

要检查此方法是否有效（最好在多个浏览器中执行此操作）：

• 启用GTM预览和调试模式模式
• 使用您要跟踪的表单刷新网站
• 提交表单（并重定向到“谢谢”页面）
• 检查 集装箱装载 预览模式下的事件>转到调试控制台的“变量”选项卡，并检查Referrer的值

您能否（通过查看）分辨出访问者从哪个确切页面着陆？“Thank you”页？如果是，那么此方法正是您所需要的。如果不是，请跳至选项＃2。

It’是时候跟踪表单提交了。让’s说网址是“Thank you” page is this //www.example.com/thank-you/. 让 ’s create a trigger.

 

＃1.1。创建触发器

在GTM中，转到 标签> New > Pageview 并输入以下条件：

• 页面路径以/ thank-you开头
• 引荐来源网址包含www.example.com（将其替换为您的网站’的域）。这是可选步骤，但如果有人不小心落在“Thank you”来自Google搜索或其他位置的页面（不是来自我的网站）’的另一页），这种情况将阻止代码触发。

 

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

在GTM中，转到 标签> New > Universal Analytics 并输入以下设置：

您可以使用其他 命名约定Â如果您愿意。这里最主要的是 事件动作，我们将发送上一页（提交表单的网址）的URL。

如果您只想跟踪引荐来源网址的路径名（而不是完整的网址），则可以创建一个 URL变量Â使用以下设置，并在您的GA标签中使用它。

 

＃1.3。测试设置

保存所有更改，刷新 GTM预览和调试模式，然后再次提交表单。然后转到Google Analytics（分析）实时报告，并检查您是否在 即时的> Events.

注意： 如果您设置“non-interaction hit”确实，您将只能在“Last 30 minutes” section.

检查并确保一切正常后，请不要’别忘了发布容器。

 

选项2。使用单页应用程序？使用触发组

笔记： the solution that I’m将显示您的伸缩性不是很好（除非您可以要求开发人员将一些其他信息传递给数据层。有关更多信息–之后）。如果您只有几种形式，并且预计它们的数量不会快速增长，请继续使用它。否则，请转到另一种方法。

如果您正在处理 单页申请，那么您可以考虑使用 触发组。此功能使您可以组合多个触发器。如果它们都在同一页面上触发，则触发组将被激活，所有相关的标签也将被激活。

这里’s the main idea:

• 访客登陆表格“page”您的SPA。触发器A被激活。
• 访客降落在“Thank you”页。触发器B被激活。

如果我们将两个触发器都包含在一个触发器组中，那么您的GA事件代码可能会触发。

我说这个话的原因“page”用引号引起来的是，单页应用程序跟踪通常涉及虚拟综合浏览量。每次访客从SPA的一部分导航到另一部分时，虚拟综合浏览量就会发送到Google Analytics（分析）。

有多种实现方式。

让 ’想象一下，就我而言，我问了一个 开发人员推送信息在每一页上 资料层。该信息如下所示：

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event' : 'virtualPageview',
  'pageTitle' : 'Some page title',
  'pagePath' : '/pages/some-page-with-form'
});

然后我创建了两个 数据层变量Â（用于pagePath和pageTitle）和一个 自定义事件触发器的“virtualPageview”.

该自定义事件触发器会在每个“virtualPageview”。但是在我们的情况下（跟踪多个表格和一个谢谢页面），这太广泛了。我们需要更深入。

让 ’可以想象在这个例子中还有另外一件事。有两个具有形式的虚拟页面：

• / pages / download-an-ebook /
• / pages / download-a-checklist /

…and one “Thank you”页/ pages /谢谢您/。

 

＃2.1。扳机

现在，让’s创建触发器（警告：您’因为每个SPA的设置都有很大的灵活性/独特性，所以需要根据您的项目调整触发器的设置）。“Thank you” page:

然后为每个表格创建一个。这里’是一个触发器的示例。基本上，我只是输入代表虚拟网页浏览量的自定义事件名称，然后通过输入表单使其更精确’URL（pagePath或设置中使用的任何内容）

 

＃2.2。触发组

然后呢’触发组的时间。由于我们有两种形式，我们’需要两个触发器组。去 扳机> New > Trigger Group。这里’是一个触发器组的示例。其中包含两个触发器：一个用于“Thank you”页面和一个与特定表单相关的综合浏览量。

您需要为希望在“单页应用程序”中跟踪的每个表单创建一个单独的触发器组。

 

＃2.3。标签

然后，最后，创建两个标签（每个表单一个）。表单越多，标签越多’需要创建。将一个标签分配给一个触发器组。这里’是一个标签的示例。

 

＃2.4。测试设置

保存所有更改，刷新 GTM预览和调试模式，然后再次提交表单。然后转到Google Analytics（分析）实时报告，并检查您是否在 即时的> Events.

注意： 如果您设置“non-interaction hit”确实，您将只能在“Last 30 minutes” section.

检查并确保一切正常后，请不要’别忘了发布容器。

如您所见，此设置的伸缩性不是很好，如果您有很多表格，则可能会使您的容器快速混乱。例如，如果您有10个表单，则您’d需要创建11个触发器，10个触发器组和10个标签。不是理想的解决方案

但是对于小型网站，这仍然是一种选择。

 

选项＃3。单页应用程序的另一种解决方案

这取决于您如何使用GTM跟踪虚拟网页浏览量。如果您使用的是“历史记录更改”触发器，则很可能已经有了有关数据层中上一页的信息。也许您的开发人员已经在推送上一页’的信息到数据层？

但是，这在很大程度上取决于SPA的编码方式。

无论如何，请打开“单页应用程序”，提交表单，然后将其移至“Thank you”页上，检查“预览和调试”模式的“数据层”标签。

看到与上一页相关的表格吗？

如果是，请使用 数据层变量以获取该值。或者内置变量 旧历史片段 或者 旧历史州 为你工作？如果是，则：

• 创建一个自定义事件触发器（或历史记录更改触发器）—这取决于您现有的设置），当访问者看到“Thank you”页。检查此博客文章的前一章以了解更多信息。
• 然后创建一个GA事件代码，将其设置为在您触发“自定义事件”时触发’刚刚创建。另外，在事件操作或事件标签字段中，插入变量以返回有关访客看到的上一页的信息（I’m谈论数据层变量或历史变量之一）。

 

＃3.1。测试设置

保存所有更改，刷新 GTM预览和调试模式，然后再次提交表单。然后转到Google Analytics（分析）实时报告，并检查您是否在 即时的> Events.

注意： 如果您设置“non-interaction hit”确实，您将只能在“Last 30 minutes” section.

检查并确保一切正常后，请不要’别忘了发布容器。

选项＃4。将最后提交的表单信息存储在cookie中

如果“感谢页面”与提交表单的页面位于同一域中，则此方法有效。子域名don’没关系。如果该表单在www.example.com上可用，而“感谢”页面在app.example.com上，则表明’s fine.

另外，如果由于某些原因引荐来源不可用或没有提供足够的信息，则此方法很有用。

这里’s what we will do:

• 提交表单后，我们’将有关提交表单的一些信息存储在cookie中。示例：提供表单的URL，表单ID等。
• 当访客登陆“谢谢”页面时，我们’请阅读Cookie并在我们的GA标签中使用该信息。

我不使用的原因 本地存储 它仅限于单个子域。有时，谢谢页面托管在同一域的另一个子域中。

 

＃4.1。设置cookie

有几种方法可以在Google跟踪代码管理器中设置Cookie（自定义HTML代码，自定义模板）。在这种情况下，我’将使用“自定义HTML”标记。

<script>
 
 var cookieName = "gtm_formInfo"; // Name of your cookie
 var cookieValue = "REPLACE THIS"; // Value of your cookie, we'll need to replace this
 var expirationTime = 86400; // 24 hours in seconds
 expirationTime = expirationTime * 1000; // Converts expirationtime to milliseconds
 var date = new Date(); 
 var dateTimeNow = date.getTime(); 

 date.setTime(dateTimeNow + expirationTime); // Sets expiration time (Time now + one month)
 var date = date.toUTCString(); // Converts milliseconds to UTC time string
 document.cookie = cookieName+"="+cookieValue+"; SameSite=None; Secure; expires="+date+"; path=/; domain=." + location.hostname.replace(/^www\./i, ""); // Sets cookie for all subdomains

</script>

我们需要在此代码中插入一些有关表单的值。您拥有什么样的信息？如果每页只有一种形式，则可以使用“页面路径”变量。如果您还有另一个有用的变量，请随时使用。

带有{{Page Path}}信息的最终代码如下所示

<script>
 
 var cookieName = "gtm_formInfo"; // Name of your cookie
 var cookieValue = {{Page Path}}; // Value of your cookie
 var expirationTime = 86400; // 24 hours in seconds
 expirationTime = expirationTime * 1000; // Converts expirationtime to milliseconds
 var date = new Date(); 
 var dateTimeNow = date.getTime(); 

 date.setTime(dateTimeNow + expirationTime); // Sets expiration time (Time now + one month)
 var date = date.toUTCString(); // Converts milliseconds to UTC time string
 document.cookie = cookieName+"="+cookieValue+"; SameSite=None; Secure; expires="+date+"; path=/; domain=." + location.hostname.replace(/^www\./i, ""); // Sets cookie for all subdomains

</script>

此代码将设置Cookie，该Cookie将在24小时内过期（除非访问者提交其他表格—那么先前的值将被覆盖）。

例如，当单击“提交”按钮时，您可以触发此代码。

我知道，我通常主张使用Click Trigger跟踪表单是一个糟糕的主意，但在这种情况下，我们尚未向GA发送任何数据。我们只是存储有关最近提交表单的信息。

这里 is an example of the Click Trigger (if the button’s class is 表单提交按钮）。学习更多关于 点击跟踪.

是的，上面的例子可能太广泛了。在按钮上具有ID是一个更好的选择（或一些其他数据属性），但更多地将其视为概念证明。将此触发器分配给Custom HTML标签。

 

＃4.2。检查cookie

保存触发器和标记后，请在GTM中启用/刷新“预览”和“调试”模式，然后检查其是否有效。单击一个表单提交按钮。

自定义HTML标记应在Click事件上激活。如果是，请打开浏览器的开发人员工具，然后转到 应用> Storage > Cookies >选择您的域。然后输入 gtm_formInfo 在搜索栏中，检查cookie是否存在。

注意：以上屏幕截图来自我的Chrome。其他浏览器的界面/命名会稍有不同。

 

＃4.3。在Google跟踪代码管理器中创建第一方Cookie变量

去 变数> New > 1st Party Cookie 变量，然后输入以下设置（区分大小写）：

此变量将读取您的Cookie’刚刚在本文的上一节中进行了设置。

 

＃4.4。创建一个触发器

创建将在页面上激活的Pageview触发器“thank you”页。假设您的“谢谢”页面的URL是 example.com/pages/thank-you/。在这种情况下，触发器的设置可能如下所示：

 

＃4.5。创建标签

最后但并非最不重要的是标签。我们需要将表单提交数据发送到Google Analytics（分析）。当访客降落在“Thank you”页面上，触发器将激活标签。这是该标签的设置：

您可以使用其他 命名约定Â如果您愿意。将先前创建的Pageview触发器分配给该标签。

因此，总结一下：当访问​​者单击“表单提交”按钮时，我们会将页面路径存储在cookie中。当访客降落在“Thank you” page, we’会获取该Cookie的信息，并在GA事件代码中使用它。

 

＃4.6。测试设置

保存所有更改，刷新 GTM预览和调试模式，然后再次提交表单。然后转到Google Analytics（分析）实时报告，并检查您是否在 即时的> Events.

注意： 如果您设置“non-interaction hit”确实，您将只能在“Last 30 minutes” section.

检查并确保一切正常后，请不要’别忘了发布容器。

 

选项＃5。您可以自己更改“谢谢”页面的URL吗？

在以下情况下，以下跟踪方法是一个不错的选择：

• 您正在使用灵活的表单插件，该插件可让您更改“Thank you”逐一列出每个表单。
• 并且新表格的数量是’增长非常快
• 并且，如果现有表格的数量不是很高

所以这里是交易。你’仍然会使用相同的“Thank you”页。但是，除了常规的/ thank-you /地址之外，您还将向其添加URL参数，例如 formName。 While “Thank you”页面是相同的，每种形式的URL都会略有不同。

例如，如果您有一个网址为example.com/pages/thank-you/的“谢谢”页面，但是您有5个表单，则每种表单的“谢谢”页面URL可能看起来像这样：

• example.com/pages/thank-you/?formName=form1
• example.com/pages/thank-you/?formName=form2
• example.com/pages/thank-you/?formName=form3
• example.com/pages/thank-you/?formName=form4
• example.com/pages/thank-you/?formName=form5

您可以选择任何其他（更有意义的值）而不是“form1”。接下来我们要做的是创建一个 URL变量Â将返回的值 formName 我们将在GA事件代码中使用它。

现在浏览您网站上的所有表格并更改网址“Thank you”页。我不会在此处提供说明，因为每个表单插件或内容管理系统（CMS）都需要不同的步骤。

 

＃5.1。创建一个URL变量

在GTM中，转到 变数> New > URL 变量，然后输入以下设置：

如果您使用其他参数名称（而不是 formName），将其输入变量’s settings.

 

＃5.2。创建触发器

再一次，我们将使用在上一节中多次提到的相同Pageview触发器。如果我们遵循我之前提到的URL示例（//example.com/pages/thank-you/），您的触发设置可能如下所示：

 

＃5.3。创建标签

去 标签> New > Universal Analytics 并输入以下设置：

当访问者登陆到“Thank you” page. In the “Event Action”字段中，我插入了先前创建的URL变量。它将返回 formName 在每个“谢谢”页面的URL中可见的参数。

 

＃5.4。测试设置

保存所有更改，刷新 GTM预览和调试模式，然后再次提交表单。然后转到Google Analytics（分析）实时报告，并检查您是否在 即时的> Events.

注意： 如果您设置“non-interaction hit”确实，您将只能在“Last 30 minutes” section.

检查并确保一切正常后，请不要’别忘了发布容器。

 

选项＃6。与开发者合作

如果上述任何选项都不适合您，则应要求开发人员 ’的帮助。我现在想到了以下几种选择：

• 要求开发人员装饰每个网址“Thank you”页。要求他/她包括一个特定的参数，该参数指示提交的表单。这几乎是此博客文章中的方法5。主要区别在于，也许您在一个无法自行更改URL的网站上工作，因此请开发人员’s help.
• 要求开发人员将有关表单提交的信息推送到网站的数据层“Thank you”页。这是您的开发人员可以实现的示例代码：

  <script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
   'event': 'formSubmission',
   'formName': 'some form name' //this should be replace with an actual form name
   });
  </script>
  
  

完成后，您应该创建一个 习俗event trigger, 数据层变量Â和GA事件代码。

自定义事件触发器’s settings:

• 触发标题– 习俗– formSubmission
• 活动名称– 表格提交
• 在所有自定义事件上触发

数据层变量’s settings:

• 标题– dlv– formName
• 数据层变量 name –formName
• 版本2

最后，使用以下配置创建GA事件代码，分配之前创建的自定义事件触发器，插入数据层变量（由{{}}包围）

 

＃6.1。测试设置

保存所有更改，刷新 GTM预览和调试模式，然后再次提交表单。然后转到Google Analytics（分析）实时报告，并检查您是否在 即时的> Events.

注意： 如果您设置“non-interaction hit”确实，您将只能在“Last 30 minutes” section.

检查并确保一切正常后，请不要’别忘了发布容器。

 

我可以在常规Google Analytics（分析）报告中的哪里找到这些数据？

所有这些事件都将出现在“行为”中> Events >概述，然后单击查看完整报告链接。

 

如何在一个“谢谢”页面上跟踪多种形式：最后的话

那里有。如果您要处理将访客重定向到同一个表格的多种形式“Thank you”希望这些方法之一对您有所帮助。

就我个人而言’d首先尝试使用Referrer变量（因为与其他方法相比，它需要较少的工作）。

如果那不起作用，那我’d将信息存储在cookie中或编辑“谢谢”页面的URL（通过添加一些参数）。或继续在数据层中查找有关上一页的信息。

如果这些都不起作用，那么我可能会与开发人员更紧密地合作。

其他方法应视为计划B。