Google SEM: 如何使用 Google GTM跟蹤 AJAX 表單提交

六月我們?cè)砹艘黄P(guān)于GTM表單追蹤的辦法，我們提供了六種辦法，原文在這里【長(zhǎng)文警告】6種GA4 GTM 表單追蹤方法.

大家都知道，最近Google更新了GA，新上線了“Google代碼”這一屬性詞，今天我們就講講如何在Google GTM中配置我們的Google代碼，以及如何使用 Google ?GTM跟蹤 AJAX 表單提交。

A.?如何在Google GTM中配置我們的Google代碼

圖片標(biāo)注說明：

1. 編輯代碼名稱

2. 選擇代碼類型，我們這里選擇Google代碼

3. 輸入你的Google代碼ID,這個(gè)ID 需要你在GA里新建媒體資源，按要求填寫，最后就會(huì)獲得。

4. 新增配置參數(shù)send_page_view，值為ture.

5. 選擇觸發(fā)條件，這里我們選擇All Pages。

B.?如何使用 Google GTM跟蹤 AJAX 表單提交

上篇文章詳細(xì)講解了6種GTM表單追蹤的辦法，里邊有各種方法詳細(xì)的使用條件,如下圖，如果你有一定代碼基礎(chǔ)，建議看這篇文章。

如果你沒有代碼基礎(chǔ)，嘗試了上一篇文章的幾種簡(jiǎn)單方法后，還是無法追蹤到你網(wǎng)站上的表單，建議可以試試本文我們探討的Google GTM跟蹤 AJAX 表單提交方法。

說明：本文所使用方法和前文一樣，使用來自網(wǎng)友提供的相關(guān)的自定義代碼，寫這篇文章的目的是讓沒有代碼基礎(chǔ)的運(yùn)營(yíng)能夠不求人，自己配置。

我們的配置方法分為四步：

1. 配置自定義代碼

2. 配置數(shù)據(jù)層變量

3. 配置觸發(fā)器

4. 配置表單事件

讓我們開始吧！

1. 配置自定義代碼

   找到你的GTM工作區(qū)，左側(cè)點(diǎn)擊“代碼”標(biāo)簽，-點(diǎn)擊右上角“新建”按鈕，

配置結(jié)果如下，配置完以后保存。

這里是你要復(fù)制的代碼：

<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>

b.配置數(shù)據(jù)層變量

在你的GTM工作區(qū)，左側(cè)點(diǎn)擊“變量”標(biāo)簽，拉到最下方有個(gè)“用戶定義的變量”，點(diǎn)擊“新建”，如下圖，

配置如下：

圖片標(biāo)注說明：

1. 編輯名稱

2. 選擇變量類型

3. 設(shè)置數(shù)據(jù)層變量名，這里待定，可以先填寫attributes.response.data.message。這里確定數(shù)據(jù)層變量名是個(gè)重點(diǎn)，我們后邊會(huì)重點(diǎn)說到。

4. 這項(xiàng)先不選，我們后邊會(huì)通過觸發(fā)器引用。

c.配置觸發(fā)器

在你的GTM工作區(qū)，左側(cè)點(diǎn)擊“觸發(fā)器”標(biāo)簽，點(diǎn)擊右側(cè)“新建”，就會(huì)出現(xiàn)觸發(fā)器配置頁面，如下圖

圖片標(biāo)注說明：

1. 編輯觸發(fā)器名稱

2. 觸發(fā)器類型選擇自定義事件

3. 輸入事件名稱，我們這里統(tǒng)一輸入ajaxComplete

4. 觸發(fā)條件選擇“某些觸發(fā)器”，變量選擇我們上一步設(shè)置好的變量“數(shù)據(jù)層變量”，中間關(guān)系選擇“包含”，后邊空格的值需要我們獲取這里很重要。

5. 引用先不選，我們后邊會(huì)在代碼里引用。

d.配置表單事件

在你的GTM工作區(qū)，左側(cè)點(diǎn)擊“代碼”標(biāo)簽，點(diǎn)擊右側(cè)“新建”，就會(huì)出現(xiàn)代碼配置頁面，如下圖，

圖片標(biāo)注說明：

1. 編輯代碼名稱

2. 選擇GA4事件

3. 輸入之前獲取的Google代碼ID

4. 輸入事件名稱，這里你可以按照自己的需求編輯

5. 選擇觸發(fā)條件這里選擇我們前一步創(chuàng)建的觸發(fā)器

到這里我們GTM配置大致完成，但沒有完全完成，我們?cè)诘诙降臄?shù)據(jù)層變量名稱是待定的，另外第三步觸發(fā)條件里的判斷值還是空的，位置的內(nèi)容需要我們?nèi)≌{(diào)試頁面找。

怎么找呢？

你先將你配置好的代碼發(fā)布，打開預(yù)覽窗口，如下圖，

點(diǎn)擊藍(lán)色按鈕繼續(xù)，看一下你左側(cè)列表是否出現(xiàn)“ajaxComplete”這樣的字樣，如下圖，選擇一個(gè)點(diǎn)擊右側(cè)紅框的小箭頭

此時(shí)你會(huì)看到如下圖的代碼，是不是看著不太好懂，沒事兒，你看到這段代碼證明你的自定義代碼安裝成功了！

接下來，我們?cè)趶棾龅恼{(diào)試網(wǎng)站頁面找到你的表單，并提交一個(gè)測(cè)試表單。（這里需要注意，盡量每個(gè)空格都按要求填好內(nèi)容）。

當(dāng)你的表單提交以后，回到GTM調(diào)試頁面，如下圖，

1. 先找一個(gè)Outbound Clicks,

2. 找到以后找它最近的ajaxComplete，

3. 然后打開右側(cè)的ajaxComplete代碼（點(diǎn)擊右側(cè)的小箭頭），

4. 這一步很重要：第一我們要找到數(shù)據(jù)層變量名，第二我們要找到表單提交后返回的值。

   

   如何找到數(shù)據(jù)層變量呢？

   如圖中，我們要找到綠色框線的部分，我這里依次是attributes，response，msg，有一些可能有data message等。一般情況下，前兩個(gè)是固定的，后邊的部分可能不一樣，

   那怎么找這幾個(gè)詞呢？這里其實(shí)是有個(gè)層級(jí)關(guān)系的，attributes是第一層，可以看到第二層response的位置往后移了幾格，第三層是response后邊括號(hào)包含的內(nèi)容，我們的數(shù)據(jù)層變量名一般找的是返回值變量，所以最后一個(gè)會(huì)是messge或者類似變體。找到之后安裝層級(jí)順序，依次用“.”連起來，就是我們要確定的數(shù)據(jù)層變量名稱，我們這里的是attributes.response.msg。將“attributes.response.msg”復(fù)制到你第二步創(chuàng)建的數(shù)據(jù)層變量里，然后保存，這里就設(shè)置好了，如下圖

如何找到表單提交后返回的值？

上一步我們?cè)谡易兞棵Q時(shí)有提到，我們剛找的是返回值變量，那么我們這里一步需要的值就是返回值變量的值，這個(gè)值就是msg后邊的如下圖的內(nèi)容（這里我們?cè)趶?fù)制的時(shí)候只入職引號(hào)里邊的內(nèi)容）。

將你復(fù)制的內(nèi)容粘貼到第三步觸發(fā)器配置的觸發(fā)條件值里，然后保存，如下圖

到這里，我們所有的配置就完成了。

回到GTM工作區(qū)，重新提交測(cè)試一下就好了。

最后

感謝網(wǎng)友的代碼無私分享。GTM表單追蹤的方法有很多種，有些是很簡(jiǎn)單的。但由于國內(nèi)一些網(wǎng)站是我們建站公司的技術(shù)自主搭建的系統(tǒng)，在追蹤表單時(shí)，一些簡(jiǎn)單的方法追蹤不到，所有有了這篇文章。如果大家對(duì)表單追蹤比較感興趣，可以看看前一篇文章【長(zhǎng)文警告】6種GA4 GTM 表單追蹤方法