【長(zhǎng)文警告】6種GA4?GTM?表單追蹤方法

在與營(yíng)銷(xiāo)人員交談時(shí)，我注意到他們中最受歡迎的話題之一是表單跟蹤。不幸的是，在某些情況下，表單跟蹤可能會(huì)成為一個(gè)真正的痛點(diǎn)（尤其是當(dāng)營(yíng)銷(xiāo)人員不知道什么是 CSS 或 HTML 時(shí)）。但不要害怕，因?yàn)樵谶@篇博文中，我將向你展示 6?種 Google 跟蹤代碼管理器表單跟蹤技術(shù)。

注意：?其中一些需要技術(shù)人員的操作，但我會(huì)盡力將所有內(nèi)容都用通俗易懂的語(yǔ)言表達(dá)出來(lái)。

目錄

- 以下是你將在本文中學(xué)到的內(nèi)容 –

如果你覺(jué)得這篇博文很復(fù)雜

介紹

標(biāo)簽+觸發(fā)器

你應(yīng)該選擇哪種表單跟蹤方法？

方法#1。Google 跟蹤代碼管理器表單提交觸發(fā)器

方法#2?！皌hanks”頁(yè)面跟蹤與谷歌標(biāo)簽管理器

方法#3。使用 Google 標(biāo)簽管理器跟蹤 AJAX 表單提交

方法#4。使用元素可見(jiàn)性觸發(fā)器跟蹤表單提交

方法#5。使用 dataLayer 事件進(jìn)行表單跟蹤

方法#6。使用 DOM 抓取跟蹤表單提交

最后

如果你覺(jué)得這篇博文很復(fù)雜

這篇文章很長(zhǎng)，有些部分可能令人困惑，尤其是當(dāng)你剛開(kāi)始使用 GTM，建議你可以先收藏或者轉(zhuǎn)發(fā)到自己自己經(jīng)常訪問(wèn)的位置。

介紹

在互聯(lián)網(wǎng)有各種類(lèi)型的表格。其中一些在成功提交后會(huì)刷新，有些則不會(huì)，有些可能會(huì)將你重定向到“Thanks”頁(yè)面等。表單跟蹤的主要問(wèn)題是沒(méi)有關(guān)于表單必須如何處理的全球標(biāo)準(zhǔn)。有些技術(shù)人員可能更喜歡一種技術(shù)（例如，AJAX）而不是另一種技術(shù)。

由于你對(duì)表單跟蹤感興趣，因此你可能已經(jīng)注意到 Google Tag Manager中的表單提交觸發(fā)器和內(nèi)置表單變量。在一個(gè)頁(yè)面上至少有一個(gè)表單提交觸發(fā)器處于活動(dòng)狀態(tài)（它會(huì)監(jiān)聽(tīng)所有表單提交），你將打開(kāi) Google Tag Manager表單自動(dòng)事件監(jiān)聽(tīng)器。

表單自動(dòng)事件追蹤器只追蹤標(biāo)準(zhǔn)提交的事件。然而，絕大多數(shù)表單使用其他方式發(fā)送它們的數(shù)據(jù)（例如 jQuery’s?$.ajax），因此提交事件無(wú)法追蹤。在這種情況下，Google Tag Manager將不記錄表單提交。這是一個(gè)非常普遍的問(wèn)題（事實(shí)上，我會(huì)說(shuō)在我工作的 很多的情況下使用了不同的跟蹤方法）。

如果 你的GTM 的表單追蹤器不起作用，還有其他方法可以實(shí)現(xiàn)目標(biāo)追蹤。在這篇博文中，我將解釋 Google Tag Manager 表單跟蹤的標(biāo)準(zhǔn)選擇和解決方法。

標(biāo)簽+觸發(fā)器

你可能已經(jīng)熟悉 Google Tag Manager的主要概念：你要跟蹤的每個(gè)交互都需要一個(gè)代碼和一個(gè)觸發(fā)器。如果你想使用 Google Analytics 4 跟蹤所有表單提交，則需要?jiǎng)?chuàng)建一個(gè) Google Analytics 代碼和一個(gè)必須觸發(fā)代碼時(shí)的觸發(fā)器（規(guī)則）。

創(chuàng)建標(biāo)簽是此過(guò)程中最簡(jiǎn)單的部分。讓我們制作一個(gè)——你將在本博文的后續(xù)章節(jié)中需要它。

在本文中，我假定你已經(jīng)安裝了 Google Analytics 4并且已經(jīng)擁有 GA4 配置標(biāo)簽。

在 GTM 容器中擁有 GA4 配置代碼后，就可以創(chuàng)建將在本文所有示例中使用的 GA4 事件代碼。

1.轉(zhuǎn)到標(biāo)簽

2.按?新建?按鈕

3.在?標(biāo)簽配置?中選擇 Google Analytics：GA4 事件

4.在?標(biāo)簽配置字段中，選擇你當(dāng)前的 GA4 配置標(biāo)簽。我們正在創(chuàng)建的事件標(biāo)簽將重用配置標(biāo)簽中的一些設(shè)置（例如測(cè)量 ID）

5.在事件名稱(chēng)字段中，我輸入?generate_lead

6.將 觸發(fā)器?部分留空（暫時(shí)）并單擊Save。我們稍后再談。這篇博文 80% 的篇幅專(zhuān)門(mén)介紹你可以使用的各種類(lèi)型的觸發(fā)器。觸發(fā)器類(lèi)型的選擇取決于表單的開(kāi)發(fā)方式。

此外，在這篇博文的后續(xù)章節(jié)中，我可能會(huì)建議向該標(biāo)簽添加一些額外的參數(shù)，因此請(qǐng)留意。

我接下來(lái)要介紹的每種表單跟蹤方法都取決于表單提交后網(wǎng)站上發(fā)生的不同元素/事件：

l表單自動(dòng)事件監(jiān)聽(tīng)器

l感謝頁(yè)面

lAJAX 表單跟蹤

l使用元素可見(jiàn)性觸發(fā)器進(jìn)行跟蹤

l技術(shù)人員幫助（請(qǐng)求dataLayer.push）

lDOM 抓取

錯(cuò)誤配置的觸發(fā)器將導(dǎo)致錯(cuò)誤的數(shù)據(jù)和報(bào)告（導(dǎo)致錯(cuò)誤的見(jiàn)解和行動(dòng)）。所以請(qǐng)仔細(xì)閱讀所有內(nèi)容。

如果你有任何疑問(wèn)或這篇博文的某些部分具有誤導(dǎo)性，請(qǐng)?jiān)谙旅娴脑u(píng)論中告訴我。我很樂(lè)意提供幫助。

你應(yīng)該選擇哪種表單跟蹤方法？

在深入研究觸發(fā)器和跟蹤技術(shù)之前，我們需要檢查一個(gè)表單并決定哪種技術(shù)最適合我們的需要。我準(zhǔn)備了一個(gè)流程方案來(lái)幫助你選擇正確的 Google Tag Manager 表單跟蹤方法。

現(xiàn)在看起來(lái)可能一頭霧水，請(qǐng)不要放棄，繼續(xù)閱讀，一切都會(huì)變得更加清晰。

方法#1。GTM表單提交觸發(fā)器

首先，我們來(lái)試試 GTM 內(nèi)置的表單追蹤器。在你的 Google 跟蹤代碼管理器帳戶(hù)中打開(kāi)變量列表。默認(rèn)情況下，表單變量是禁用的，因此，你需要啟用它們。

然后打開(kāi)所有觸發(fā)器的列表（通過(guò)單擊GTM 界面左側(cè)欄中的觸發(fā)器）。使用以下設(shè)置創(chuàng)建一個(gè)新觸發(fā)器：

關(guān)于Check Validation?復(fù)選框的一些信息?。選中此項(xiàng)后，如果表單的默認(rèn)操作（提交和重定向）被阻止，Google 跟蹤代碼管理器將不會(huì)激活觸發(fā)器。

如果未選中，觸發(fā)器將在注冊(cè)提交事件時(shí)關(guān)閉（即使提交的表單有錯(cuò)誤（例如，多個(gè)必填字段留空））。

啟用該復(fù)選框后，會(huì)出現(xiàn)一個(gè)附加字段“Enable this trigger when...”。就我而言，我希望此觸發(fā)器在所有頁(yè)面上都處于活動(dòng)狀態(tài)，這就是我輸入Page Path contains /的原因。

現(xiàn)在，讓我們使用 GTM 的預(yù)覽和調(diào)試模式來(lái)確定默認(rèn)表單自動(dòng)事件追蹤器是否適合我們。在你的 Google 跟蹤代碼管理器帳戶(hù)的右上角，點(diǎn)擊預(yù)覽。

然后將打開(kāi)一個(gè)新的瀏覽器選項(xiàng)卡，要求你輸入表單所在頁(yè)面的 URL。輸入它并單擊開(kāi)始

然后一個(gè)新的選項(xiàng)卡（或窗口）將打開(kāi)你的網(wǎng)站。在屏幕底部，你應(yīng)該會(huì)看到一個(gè)類(lèi)似于此的窗口（表示已連接）：

啟用預(yù)覽和調(diào)試模式后，轉(zhuǎn)到表單所在的站點(diǎn)。填寫(xiě)表格（盡量不要留空）：

1.點(diǎn)擊提交按鈕。表單提交事件是否出現(xiàn)在預(yù)覽和調(diào)試控制臺(tái)中？如果不是，那么 GTM 的表單自動(dòng)事件追蹤器將無(wú)法使用此表單， 你應(yīng)該跳到本博文中描述的下一個(gè)表單跟蹤選項(xiàng)。

2.如果?表單提交?事件確實(shí)出現(xiàn)在預(yù)覽和調(diào)試控制臺(tái)中，那么你應(yīng)該進(jìn)行另一項(xiàng)測(cè)試——嘗試將至少一個(gè)必需的表單字段留空，然后再次提交表單。這樣，你將在表單中模仿錯(cuò)誤：

(1)如果?表單提交?事件再次被觸發(fā)，那么你應(yīng)該檢查這篇博文中提到的其他表單跟蹤選項(xiàng)。

(2)如果?表單提交?事件沒(méi)有觸發(fā)——那就太好了！這意味著 GTM 將僅跟蹤那些已成功完成的表單提交（這正是你所需要的）。

如果你正在閱讀本段，我會(huì)假設(shè)表單提交觸發(fā)器按預(yù)期工作，并且僅當(dāng)表單提交成功時(shí)才會(huì)在預(yù)覽模式下觸發(fā)事件。

讓我們專(zhuān)門(mén)為該表單創(chuàng)建一個(gè)觸發(fā)器。?還記得?前面提到的Form Submit?事件嗎？單擊它（在預(yù)覽和調(diào)試模式下），然后單擊變量。

然后向下滾動(dòng)并開(kāi)始查找該表單唯一的表單?變量?。通常，它將是?Form?ID（Form?ID 是更好的選擇）。如下圖所示，我提交了一個(gè)表單（Form?ID 變量是wpdevart-forms-7）。

這是一個(gè)很好的標(biāo)識(shí)符，未在網(wǎng)站的任何其他元素上使用，因此我將其用于我的觸發(fā)器：

1.轉(zhuǎn)到觸發(fā)器并打開(kāi)你之前創(chuàng)建的表單提交觸發(fā)器

2.選擇“某些表單”而不是“所有表單”，然后輸入條件以?xún)H針對(duì)該特定表單。在我的例子中，?Form?ID =?wpdevarp-forms-7。

(1)如果你沒(méi)有看到Form?ID 變量 – 在 GTM的內(nèi)置變量列表中啟用它。

(2)Form?ID 可能（并且可能會(huì)）與你的有所不同（與我的示例相比）。

保存觸發(fā)器。

如果你有多個(gè)表單可供訪問(wèn)者/用戶(hù)提交，那么在你的 GA4 事件代碼中包含一個(gè)附加參數(shù)可能是有意義的（這將幫助你區(qū)分提交的是哪個(gè)表單）。

在 GTM 中，轉(zhuǎn)到標(biāo)簽?并編輯你創(chuàng)建的 GA4 事件標(biāo)簽。

對(duì)于該參數(shù)應(yīng)該如何命名沒(méi)有嚴(yán)格的要求，所以我將其命名為form_id。?它的值將是 {{Form ID}} 變量的值。

保存標(biāo)簽。

讓我們?cè)?/span> GA4 中測(cè)試 + 注冊(cè)自定義維度

1.將此新觸發(fā)器分配給你在本文開(kāi)頭創(chuàng)建的 Google Analytics 4 事件標(biāo)簽。

2.刷新預(yù)覽和調(diào)試模式（通過(guò)再次單擊 GTM 界面中的預(yù)覽按鈕）

3.然后填寫(xiě)表格并提交。如果觸發(fā)了 Google Analytics（分析）代碼，那就是個(gè)好消息！此外（如果可能），嘗試在你的網(wǎng)站上提交不同的表單。

4.你還應(yīng)該檢查Google Analytics 4 Debug View中的傳入事件 。

5.如果你計(jì)劃使用form_id （或 GA4 報(bào)告中的其他自定義參數(shù)），則必須將它們注冊(cè)為自定義維度。

方法#2?！?/span>Thanks”頁(yè)面跟蹤與GTM

如果Google 跟蹤代碼管理器中的標(biāo)準(zhǔn)表單追蹤器不起作用，你應(yīng)該檢查該表單是否在成功提交到另一個(gè)頁(yè)面后將用戶(hù)重定向。

·如果是，它重定向到什么 URL（網(wǎng)址）？

o該地址是唯一的嗎？

o如果是，用戶(hù)是否可以直接導(dǎo)航到該頁(yè)面而無(wú)需實(shí)際提交表單？如果最后一個(gè)問(wèn)題的答案是?否定的，?那么你可以創(chuàng)建一個(gè)僅在該成功頁(yè)面上觸發(fā)的網(wǎng)頁(yè)瀏覽觸發(fā)器?。你的目標(biāo)是盡可能避免意外訪問(wèn)成功頁(yè)面（又名“Thanks”頁(yè)面）。

現(xiàn)在讓我們創(chuàng)建一個(gè)觸發(fā)器，它只在“Thanks”?頁(yè)面上觸發(fā)。

1.轉(zhuǎn)到 Google 跟蹤代碼管理器中的觸發(fā)器

2.按?新建按鈕

3.選擇觸發(fā)類(lèi)型——頁(yè)面瀏覽量和?一些頁(yè)面瀏覽量

4.如果訪問(wèn)者被重定向到 https://www.example.com/form/thankyou.html，那么你可以為此觸發(fā)器設(shè)置以下規(guī)則之一：

1.頁(yè)面路徑等于/form/thankyou.html。

2.或頁(yè)面 URL 包含/form/thankyou.html。嘗試盡可能具體。僅將“?thankyou?”設(shè)置為此觸發(fā)器的規(guī)則可能不是最好的主意，因?yàn)榭赡苓€有其他頁(yè)面，其 URL 可以包含該詞（我們不希望這樣！）。

5.并且不要忘記正確命名觸發(fā)器，例如“Pageview – Successful Form Submission”。標(biāo)題必須清楚。否則，你的 Google 跟蹤代碼管理器帳戶(hù)就會(huì)一團(tuán)糟（從長(zhǎng)遠(yuǎn)來(lái)看）。

讓我們?cè)?/span> GA4 中測(cè)試 + 維度

1.將此新觸發(fā)器分配給你在本文開(kāi)頭創(chuàng)建的 Google Analytics 4 標(biāo)簽。

2.打開(kāi)（或刷新）預(yù)覽和調(diào)試模式，并刷新包含你要跟蹤的表單的網(wǎng)頁(yè)。

3.然后填寫(xiě)表格并提交。成功提交后，你將被重定向到“Thanks”頁(yè)面——如果 Google Analytics（分析）標(biāo)簽被觸發(fā)，干得好！此外（如果可能），嘗試在你的網(wǎng)站上提交不同的表單（以查看代碼是否未意外觸發(fā)）。

4.你還應(yīng)該檢查Google Analytics 4 Debug View。

5.如果你有多個(gè)表單，并且所有表單都有不同的致謝頁(yè)面，則無(wú)需為 GA4 事件代碼設(shè)置任何自定義參數(shù)。GA4 已經(jīng)自動(dòng)跟蹤?page_location，你可以使用Page Path等維度來(lái)區(qū)分表單提交?。

6.另一方面，如果你有多個(gè)表單和一個(gè)“Thanks”頁(yè)面，則需要執(zhí)行以下操作：

1.檢查所有這些提示，看看你是否可以獲得包含某些表單標(biāo)識(shí)符（例如，F(xiàn)orm?ID、Form Name等）的變量，并在下一個(gè)列表項(xiàng)中使用它。

2.然后在 GA4?generate_lead事件標(biāo)簽中包含一個(gè)附加參數(shù)。它可以是?form_id、??form_name或任何適合你的東西，例如：

?

方法#3。使用 Google 標(biāo)簽管理器跟蹤 AJAX 表單提交

如果你正在閱讀這部分，你的表單可能沒(méi)有發(fā)送有效的表單提交事件，也沒(méi)有將用戶(hù)重定向到“Thanks”頁(yè)面。它可能只是自行刷新，然后顯示“你已成功填寫(xiě)表單”消息，而沒(méi)有實(shí)際刷新頁(yè)面。

這個(gè)表單很可能正在使用 AJAX。我建議在這里跳過(guò)所有技術(shù)細(xì)節(jié)。你唯一應(yīng)該知道的是?AJAX追蹤器。

Bounteous為 GTM分享了一個(gè)很棒的 AJAX 監(jiān)聽(tīng)器，每個(gè)人都可以免費(fèi)使用。這里我們將借用他們的代碼來(lái)跟蹤表單提交。復(fù)制以下代碼并將其粘貼到 Google 跟蹤代碼管理器上的自定義 HTML 代碼中：

<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 anythingif (typeof jQuery !== 'undefined') {// Define our $ shortcut locally$ = jQuery;bindToAjax();// Check for up to 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 parsingvar fullUrl = document.createElement('a');fullUrl.href = opts.url;// IE9+ strips the leading slash from a.pathname because who wants to get home on time Friday anywaysvar pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname;// Manually remove the leading question mark, if there is onevar queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search;// Turn our params and headers into objects for easier referencevar queryParameters = objMap(queryString, '&', '=', true);var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':');// Blindly push to the dataLayer because this fires within GTMdataLayer.push({'event': 'ajaxComplete','attributes': {// Return empty strings to 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 to jQuery's handling of the response'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '')}});});}function objMap(data, delim, spl, decode) {var obj = {};// If one of our parameters is missing, return an empty objectif (!data || !delim || !spl) {return {};}var arr = data.split(delim);var i;if (arr) {for (i = 0; i < arr.length; i++) {// If the decode flag is present, URL decode the setvar 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() polyfillfunction 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 標(biāo)記設(shè)置為在所有頁(yè)面上觸發(fā)。

現(xiàn)在，讓我們檢查一個(gè)表單是否基于 AJAX 構(gòu)建：

1.啟用（或刷新）預(yù)覽和調(diào)試模式。

2.嘗試在你的網(wǎng)站上提交表單（沒(méi)有錯(cuò)誤）。

3.ajaxComplete事件是否出現(xiàn)在預(yù)覽和調(diào)試控制臺(tái)中？

1.如果是，則表單使用 AJAX。

2.如果沒(méi)有，請(qǐng)?zhí)帘疚牡南乱徽隆?p>

如果你對(duì)前面的問(wèn)題的回答是肯定的，那么讓我們來(lái)看看我們可以使用該 AJAX 表單做什么。在 預(yù)覽和調(diào)試?模式下點(diǎn)擊ajaxComplete事件，然后展開(kāi) API 調(diào)用：

對(duì)于非技術(shù)人員來(lái)說(shuō)看起來(lái)很難，對(duì)吧？但它比你想象的要容易。

該數(shù)據(jù)在表單提交成功后被傳遞到數(shù)據(jù)層。每一行都是一個(gè)單獨(dú)的dataLayer數(shù)據(jù)點(diǎn)，可以作為GTM中的dataLayer變量。

現(xiàn)在你應(yīng)該尋找有助于識(shí)別成功提交表單的內(nèi)容。向下滾動(dòng)并尋找“response”。

讓我們仔細(xì)看看它。你能看到消息“感謝你聯(lián)系我們！我們會(huì)盡快與你聯(lián)系”？答對(duì)了！我們可以將其用作觸發(fā)器。

首先，讓我們?cè)?Google 跟蹤代碼管理器中創(chuàng)建一個(gè)數(shù)據(jù)層變量。

1.轉(zhuǎn)到變量

2.向下滾動(dòng)到?用戶(hù)定義的?變量并點(diǎn)擊?新建

3.點(diǎn)擊?變量配置?，選擇變量類(lèi)型——?數(shù)據(jù)層變量

4.輸入數(shù)據(jù)層變量名稱(chēng) –?attributes.response.data.message

?

你可能猜到為什么我輸入?attributes.response.data.message作為數(shù)據(jù)層變量名稱(chēng)，而不僅僅是response。讓我們仔細(xì)看看預(yù)覽和調(diào)試模式下的數(shù)據(jù)層。

在第 2 行中，你會(huì)看到名為ajaxComplete的事件??——這與出現(xiàn)在預(yù)覽和調(diào)試控制臺(tái)左側(cè)的名稱(chēng)相同。然后我們看到?屬性，它是一個(gè)包含各種數(shù)據(jù)點(diǎn)（鍵值對(duì)）的對(duì)象。響應(yīng)是這些鍵之一。

在該響應(yīng) (2)中，我們看到?數(shù)據(jù) (3)，在其中，我們看到?消息 (4)。

將此視為訪問(wèn)文件夾。首先，你必須訪問(wèn)屬性，然后你去響應(yīng)，然后你去做數(shù)據(jù)文件夾，然后你訪問(wèn)?消息。

重要提示：在你的情況下，數(shù)據(jù)的結(jié)構(gòu)可以不同，參數(shù)的命名也可以不同。它將始終以?attributes.response 開(kāi)頭，但在那之后，每種形式的情況可能會(huì)有所不同。它可能是?attributes.response.message或類(lèi)似的東西。你需要適應(yīng)。

另一個(gè)例子：假設(shè)你對(duì)服務(wù)器數(shù)據(jù)感興趣（來(lái)自非常準(zhǔn)確的 AJAX 響應(yīng)）。在這種情況下，數(shù)據(jù)層變量的名稱(chēng)應(yīng)該是attributes.headers.Server ?。

在 Google 跟蹤代碼管理器中創(chuàng)建數(shù)據(jù)層變量后，讓我們進(jìn)行調(diào)試。刷新預(yù)覽和調(diào)試模式（通過(guò)單擊 GTM 界面中的預(yù)覽按鈕）。

填寫(xiě)表格并提交。單擊預(yù)覽和調(diào)試控制臺(tái)中最近的 ajaxComplete 事件，然后導(dǎo)航到變量選項(xiàng)卡并找到新變量?dlv – attributes.response.data.message。如果你做的一切都正確，它應(yīng)該是這樣的:

這是成功提交表單的消息。如果該變量的值未定義，?那么你應(yīng)該開(kāi)始尋找錯(cuò)誤。最常見(jiàn)的是變量名中的拼寫(xiě)錯(cuò)誤或變量路徑定義不準(zhǔn)確。有些人只是嘗試使用?response而不是attributes.response.data.message。?

現(xiàn)在讓我們創(chuàng)建一個(gè)觸發(fā)器，當(dāng)事件為ajaxComplete 時(shí)觸發(fā)，?并且我們的新數(shù)據(jù)層變量包含“感謝你聯(lián)系我們”。

1.轉(zhuǎn)到觸發(fā)器并單擊?新建

2.選擇觸發(fā)類(lèi)型——自定義事件

3.輸入事件名稱(chēng) –?ajaxComplete

4.此觸發(fā)器應(yīng)在某些自定義事件上觸發(fā)?。

5.定義觸發(fā)器觸發(fā)的條件 –??dlv – attributes.response.data.message?包含”Thanks for contacting us!”。

讓我們測(cè)試一下

1.將此新觸發(fā)器分配給你在本文開(kāi)頭創(chuàng)建的 Google Analytics 4 事件標(biāo)簽。

2.打開(kāi)（或刷新）預(yù)覽和調(diào)試模式

3.然后填寫(xiě)AJAX表單并提交。成功提交后，Google Analytics 4 事件代碼應(yīng)該觸發(fā)（它將在預(yù)覽和調(diào)試模式下顯示。你還應(yīng)該檢查Google Analytics 4 Debug View。

跟蹤 AJAX 表單時(shí)要記住的事情：

1.你的表單響應(yīng)可能看起來(lái)不同，因此你應(yīng)該調(diào)整數(shù)據(jù)層變量和自定義事件觸發(fā)器。

2.如果技術(shù)人員更改響應(yīng)的數(shù)據(jù)，你的觸發(fā)器將失敗。通知技術(shù)人員你的 GTM 實(shí)施。

3.如果頁(yè)面包含多個(gè) AJAX 表單，請(qǐng)嘗試在數(shù)據(jù)層中查找更多信息，這可以幫助 Google 跟蹤代碼管理器區(qū)分這些表單。

方法#4。使用元素可見(jiàn)性觸發(fā)器跟蹤表單提交

我們?cè)谶@里需要做的第一件事是檢查表單的成功消息。我們需要找到一種方法來(lái)指示 Google 跟蹤代碼管理器我們感興趣的特定網(wǎng)站元素。

然后你將看到瀏覽器的開(kāi)發(fā)人員工具，其中包含有關(guān)消息的各種信息：消息的內(nèi)容、CSS 類(lèi)等。

在下面的示例中，我看到消息有一個(gè)類(lèi)“thanks”，它可以用作元素可見(jiàn)性觸發(fā)器中的條件。如果成功消息有一個(gè)名為“id”的參數(shù)就更好了，但由于它不可用，我們將使用 CSS 類(lèi)。

讓我們轉(zhuǎn)到你的 Google 跟蹤代碼管理器容器并轉(zhuǎn)到觸發(fā)器。創(chuàng)建一個(gè)新觸發(fā)器并選擇?元素可見(jiàn)性作為其類(lèi)型。這里的關(guān)鍵要素是幫助 GTM 了解我們正在尋找什么的選擇方法。

選擇方法有兩個(gè)選項(xiàng)：Element ID 和 CSS Selector。由于我示例中的成功消息沒(méi)有 id（但有“class”），我們將使用 CSS Selector。

在元素選擇器字段中，我們需要粘貼該類(lèi)“thanks”。在 CSS 中，每個(gè)類(lèi)都在其前面加上一個(gè)點(diǎn)來(lái)定義，所以我們也這樣做。

最后，確保勾選“Observe DOM changes”。這個(gè)設(shè)置意味著如果一個(gè)元素出現(xiàn)在屏幕上不是由于滾動(dòng)而是在某些其他情況下（例如，“只是簡(jiǎn)單地彈出”），GTM 將捕獲它（最有可能）。

看看下面的截圖。如果你愿意，你可以做一些其他的調(diào)整，但我所做的只是最低限度。

保存觸發(fā)器。

讓我們測(cè)試一下

1.將此新觸發(fā)器分配給你在本文開(kāi)頭創(chuàng)建的 Google Analytics（分析）代碼。

2.打開(kāi)（或刷新）預(yù)覽和調(diào)試模式

3.然后填寫(xiě)表格并提交。提交成功后，在P&D控制臺(tái)，會(huì)看到?Element Visibility事件。點(diǎn)擊它，你會(huì)看到 GA4 代碼已觸發(fā)。如果你沒(méi)有看到元素可見(jiàn)性事件，你可能在選擇方法或 CSS 選擇器字段中犯了一些錯(cuò)誤。或者忘記啟用?Observe DOM changes?復(fù)選框。或者那個(gè)表格在 iFrame 中。

方法#5。使用 dataLayer 事件進(jìn)行表單跟蹤

免責(zé)聲明：盡管這種表單跟蹤方法是一種非常強(qiáng)大的解決方案，但出于某種原因，我將其列為此列表中的第 6 個(gè)選項(xiàng)。

當(dāng)其他營(yíng)銷(xiāo)人員向我尋求表單跟蹤建議時(shí)，他們正在尋找一種可以避免開(kāi)發(fā)人員輸入的解決方案。“在沒(méi)有開(kāi)發(fā)人員幫助的情況下管理你的營(yíng)銷(xiāo)標(biāo)簽”是他們首先開(kāi)始考慮使用 Google Tag Manager 的主要原因之一。

該聲明是 GTM 推出時(shí)的關(guān)鍵“賣(mài)點(diǎn)”之一，因此營(yíng)銷(xiāo)人員期望這 100% 正確也就不足為奇了。盡管我們知道在許多情況下，強(qiáng)烈建議開(kāi)發(fā)人員提供幫助。我在這里的立場(chǎng)：

1.如果你有權(quán)訪問(wèn)開(kāi)發(fā)人員并且 Google 跟蹤代碼管理器的表單偵聽(tīng)器不適合你，我建議使用 dataLayer.push 方法，我將進(jìn)一步描述該方法。

2.如果你無(wú)法接觸到開(kāi)發(fā)人員或者他們非常忙（他們通常很忙），那么可以使用這篇博文中提到的其他技術(shù)進(jìn)行跟蹤。請(qǐng)注意，當(dāng)開(kāi)發(fā)人員不斷更新網(wǎng)站時(shí)，其他解決方案更有可能失敗。這尤其適用于第 7 種技術(shù)——DOM 抓取。

我希望我表達(dá)清楚了，我們繼續(xù)。

正如上面提到的，如果內(nèi)置的 Google 跟蹤代碼管理器表單偵聽(tīng)器不能與你的表單一起使用，那么下一個(gè)最好的辦法是要求開(kāi)發(fā)人員在回調(diào)函數(shù)中實(shí)現(xiàn)自定義 dataLayer.push() ，該回調(diào)函數(shù)在表單提交成功。這段代碼可能是這樣的（顯然，像“Footer”這樣的虛擬數(shù)據(jù)應(yīng)該用你表單的實(shí)際數(shù)據(jù)替換）：

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

你需要為開(kāi)發(fā)人員準(zhǔn)備一個(gè)簡(jiǎn)短但寫(xiě)得很好且清晰的任務(wù)：

1.首先，為活動(dòng)選擇一個(gè)名稱(chēng)。在上面的示例中，我選擇了?formSubmission。

2.然后考慮你可能需要的任何其他數(shù)據(jù)。寫(xiě)下這些數(shù)據(jù)點(diǎn)并嘗試對(duì)它們進(jìn)行分類(lèi)。

1.假設(shè)我有幾種類(lèi)型的表單——“聯(lián)系我們”和“時(shí)事通訊訂閱”。所以我決定有一個(gè) dataLayer 變量?formType。

2.另一個(gè)有用的參數(shù)（在我看來(lái)）是表單位置，因?yàn)橐恍┍韱卧陧?yè)腳中，而另一些則在網(wǎng)站的側(cè)邊欄中。為什么不讓它成為另一個(gè) dataLayer 變量？

3.如果開(kāi)發(fā)人員對(duì) dataLayer 事件和一般的 Google 跟蹤代碼管理器不熟悉，請(qǐng)向他們提供指向此dataLayer.push 指南的鏈接，其中包含清晰的示例。向他們解釋?zhuān)诔晒μ峤槐韱魏螅?/span>你需要一個(gè)帶有附加參數(shù)的事件被推送到 dataLayer 中。

4.但請(qǐng)記住強(qiáng)調(diào)，??formType和?formPosition等參數(shù)的值應(yīng)由開(kāi)發(fā)人員動(dòng)態(tài)替換。如果提交了 X 表單，則必須將該 X 表單的數(shù)據(jù)推送到數(shù)據(jù)層。了解并編寫(xiě)插入實(shí)際值的解決方案是開(kāi)發(fā)人員的工作。

完畢！開(kāi)發(fā)者實(shí)現(xiàn)所有形式的dataLayer.push后，你應(yīng)該測(cè)試它：

1.打開(kāi)預(yù)覽和調(diào)試模式。

2.嘗試提交表單：

1.至少將一個(gè)必填字段留空。在這種情況下，不得推送 dataLayer 事件。

2.填寫(xiě)所有字段并再次嘗試提交。該事件是否出現(xiàn)在預(yù)覽和調(diào)試控制臺(tái)中？它應(yīng)該是這樣的：

3.檢查是否所有數(shù)據(jù)都正確推送到dataLayer。單擊?formSubmission事件，然后單擊預(yù)覽控制臺(tái)中的 API 調(diào)用。數(shù)據(jù)應(yīng)如下所示：

在 GTM 中設(shè)置變量和觸發(fā)器。在我的 dataLayer.push 示例中，有兩個(gè)數(shù)據(jù)點(diǎn)我想用作變量——formType?和?formPosition??（?我將它們包含在我的 GA4 事件代碼中），因此我需要通過(guò)創(chuàng)建數(shù)據(jù)層將它們包含在 Google 跟蹤代碼管理器中變量。

第一個(gè)變量：
標(biāo)題：?dlv – formType
變量類(lèi)型：?數(shù)據(jù)層變量
數(shù)據(jù)層變量名稱(chēng)：??formType
保持所有其他設(shè)置不變

第二個(gè)變量：
標(biāo)題：?dlv – formPosition
變量類(lèi)型：?數(shù)據(jù)層變量
數(shù)據(jù)層變量名稱(chēng)：??formPosition
保留所有其他設(shè)置不變

現(xiàn)在，讓我們創(chuàng)建一個(gè)觸發(fā)器。轉(zhuǎn)到觸發(fā)器并單擊新建。輸入以下設(shè)置：

觸發(fā)器類(lèi)型：自定義事件
事件名稱(chēng)：?formSubmission（根據(jù)你的情況可能會(huì)有所不同。只要確保你和你的開(kāi)發(fā)人員使用相同的名稱(chēng)即可）。
此觸發(fā)器觸發(fā)：所有自定義事件。這意味著將跟蹤所有formSubmission事件。

更新 GA4 事件代碼

由于我創(chuàng)建了兩個(gè)數(shù)據(jù)層變量（formType和?formPosition），我可以在我的 GA4 事件代碼中使用它們。正如我之前在這篇博文中所說(shuō)，對(duì)于這些參數(shù)的命名方式?jīng)]有嚴(yán)格的要求。

我決定使用form_type和?form_position。它們的值是我剛剛創(chuàng)建的那兩個(gè)數(shù)據(jù)層變量。

保存標(biāo)簽。

讓我們測(cè)試一下 + GA4 自定義維度

1.將此新觸發(fā)器分配給你在本文開(kāi)頭創(chuàng)建的 Google Analytics（分析）代碼。

2.打開(kāi)（或刷新）預(yù)覽和調(diào)試模式

3.然后填寫(xiě)表格并提交。成功提交后，Google Analytics Tag 應(yīng)該觸發(fā)（它將在預(yù)覽和調(diào)試模式下顯示）。

4.你還應(yīng)該檢查Google Analytics 4 Debug View中的傳入事件?。

5.在 GA4 中將form_position和?form_type注冊(cè)?為自定義維度（如果你打算在報(bào)告中使用它們）。?

方法#6。使用 DOM 抓取跟蹤表單提交

這種方法永遠(yuǎn)不應(yīng)該是你的第一選擇。在繼續(xù)閱讀本章之前，請(qǐng)嘗試使用所有其他 Google 跟蹤代碼管理器表單跟蹤方法（在本博文中進(jìn)行了描述）。

如果開(kāi)發(fā)人員經(jīng)常更新網(wǎng)站的代碼，你應(yīng)該將DOM 抓取?作為最后的手段。這是有風(fēng)險(xiǎn)的，而且損壞的速度可能比你想象的要快。

即使是開(kāi)發(fā)人員做出的微小更改也可能會(huì)破壞你的實(shí)施。此外，它需要一些 Javascript 和 DOM 概念的知識(shí)（這在營(yíng)銷(xiāo)人員中不是很常見(jiàn)的技能）。

對(duì)于這個(gè)例子，我們將使用DOM 元素變量。它是 Google 標(biāo)簽管理器中的一個(gè)變量，可讓你直接從文檔對(duì)象模型中抓取內(nèi)容（換句話說(shuō)：在它的幫助下，你可以將網(wǎng)站上的任何文本轉(zhuǎn)換為變量并將其傳遞給你的營(yíng)銷(xiāo)工具（例如，谷歌分析））。

例如，我將使用 Shopify 演示商店。在他們的主頁(yè)底部有一個(gè)注冊(cè)到我們的郵件列表表格。

在該 Shopify 表單中輸入?example@example.com ，然后點(diǎn)擊訂閱。?頁(yè)面將刷新，網(wǎng)址將更改為?https://somewebsite.com/?customer_posted=true#contact_form，并且?該小表格會(huì)顯示一條“謝謝”消息。

在這種情況下，我們可以使用感謝頁(yè)面的 Pageview 觸發(fā)器輕松跟蹤表單提交，但讓我們假設(shè)頁(yè)面的地址 (URL) 沒(méi)有改變。這種情況并不常見(jiàn)，但有可能。這就是 DOM 元素變量可能派上用場(chǎng)的地方。我們可以創(chuàng)建一個(gè)可以掃描網(wǎng)站并查找成功消息“感謝訂閱”的觸發(fā)器。

首先，讓我們創(chuàng)建一個(gè) DOM 元素變量來(lái)查找特定的成功消息。將鼠標(biāo)光標(biāo)懸停在成功消息的文本上，右鍵單擊并選擇“檢查”。

開(kāi)發(fā)人員的控制臺(tái)將出現(xiàn)大量 HTML 代碼。請(qǐng)注意，已在該控制臺(tái)中選擇了成功消息的代碼。該消息沒(méi)有任何唯一 ID，因此我們需要使用 CSS 選擇器。

在屏幕截圖的底部，你可以看到一行 CSS 選擇器，例如?div.note.form-success。這些選擇器可以幫助我們識(shí)別網(wǎng)站的確切元素。

讓我們創(chuàng)建一個(gè) DOM 元素變量并嘗試抓取“感謝訂閱”文本。

1.轉(zhuǎn)到變量

2.向下滾動(dòng)到用戶(hù)定義的變量并單擊?新建

3.選擇變量類(lèi)型?——DOM 元素變量

4.選擇方法——CSS選擇器

5.在?元素選擇器字段中輸入div.note.form-success

看到我在那里做了什么嗎？我輸入了上面屏幕截圖中的最后一個(gè) CSS 選擇器。

6.如果在具有類(lèi)似 CSS 選擇器的網(wǎng)站上有多個(gè)可能的成功消息，我會(huì)使用更長(zhǎng)的 CSS 選擇器，例如“?#contact_form div div.note.form-success?”（不帶引號(hào)）。

7.將屬性名稱(chēng)留空。

8.變量的標(biāo)題可以是?DOM – Form Success Message。

9.點(diǎn)擊?保存。

讓我們測(cè)試一下

1.啟用預(yù)覽和調(diào)試模式

2.提交表格。

3.?在預(yù)覽和調(diào)試控制臺(tái)中選擇?DOM Ready (not Container Loaded) 事件并單擊 Variables。

4.如果DOM – Form Success Message?變量的值為?Thanks for subscribing，那么你做得很好。

好吧！我們需要?jiǎng)?chuàng)建一個(gè)依賴(lài)于我們新的 DOM 變量的觸發(fā)器。

1.轉(zhuǎn)到觸發(fā)器并單擊?新建

2.選擇觸發(fā)器類(lèi)型?——DOM 就緒

3.此觸發(fā)器在某些頁(yè)面上觸發(fā)?

4.輸入以下條件：DOM –?Form Success Message等于?Thanks for subscribing。?這意味著觸發(fā)器將僅在向訪問(wèn)者顯示表單成功消息的那些頁(yè)面上觸發(fā)。

5.保存觸發(fā)器

不要忘記測(cè)試：

1.將此新觸發(fā)器分配給你在本文開(kāi)頭創(chuàng)建的 Google Analytics 4 事件標(biāo)簽。

2.打開(kāi)預(yù)覽和調(diào)試模式（或刷新）

3.填寫(xiě)表格并提交。成功提交后，Google Analytics Tag 應(yīng)該觸發(fā)（它將在預(yù)覽和調(diào)試模式下顯示）。

4.你還應(yīng)該檢查Google Analytics 4 Debug View中的傳入事件?。

5.此外，嘗試提交帶有故意錯(cuò)誤的表單并查看代碼是否觸發(fā)（它不應(yīng)該觸發(fā)）。

最后

在這篇博文中，我描述了一系列使用 Google 跟蹤代碼管理器的表單跟蹤方法。這是一段緊張的旅程，但我希望你覺(jué)得它有用。你現(xiàn)在應(yīng)該能夠在沒(méi)有技術(shù)輸入的情況下跟蹤更多表單。

但請(qǐng)記住——尋求開(kāi)發(fā)人員的幫助是可以的。如果可能，選擇dataLayer.push方法而不是 DOM 抓取。強(qiáng)大的解決方案應(yīng)該是你的首要任務(wù)。