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

1269 閱讀 0 評論 2 點贊

六月我們曾整理了一篇關于GTM表單追蹤的辦法，我們提供了六種辦法，原文在這里【長文警告】6種GA4 GTM 表單追蹤方法.

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

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

圖片標注說明：

編輯代碼名稱
選擇代碼類型，我們這里選擇Google代碼
輸入你的Google代碼ID,這個ID 需要你在GA里新建媒體資源，按要求填寫，最后就會獲得。
新增配置參數send_page_view，值為ture.
選擇觸發條件，這里我們選擇All Pages。

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

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

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

說明：本文所使用方法和前文一樣，使用來自網友提供的相關的自定義代碼，寫這篇文章的目的是讓沒有代碼基礎的運營能夠不求人，自己配置。

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

配置自定義代碼
配置數據層變量
配置觸發器
配置表單事件

讓我們開始吧！

配置自定義代碼

找到你的GTM工作區，左側點擊“代碼”標簽，-點擊右上角“新建”按鈕，

配置結果如下，配置完以后保存。

這里是你要復制的代碼：

<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.配置數據層變量

在你的GTM工作區，左側點擊“變量”標簽，拉到最下方有個“用戶定義的變量”，點擊“新建”，如下圖，

配置如下：

圖片標注說明：

編輯名稱
選擇變量類型
設置數據層變量名，這里待定，可以先填寫attributes.response.data.message。這里確定數據層變量名是個重點，我們后邊會重點說到。
這項先不選，我們后邊會通過觸發器引用。

c.配置觸發器

在你的GTM工作區，左側點擊“觸發器”標簽，點擊右側“新建”，就會出現觸發器配置頁面，如下圖

圖片標注說明：

編輯觸發器名稱
觸發器類型選擇自定義事件
輸入事件名稱，我們這里統一輸入ajaxComplete
觸發條件選擇“某些觸發器”，變量選擇我們上一步設置好的變量“數據層變量”，中間關系選擇“包含”，后邊空格的值需要我們獲取這里很重要。
引用先不選，我們后邊會在代碼里引用。

d.配置表單事件

在你的GTM工作區，左側點擊“代碼”標簽，點擊右側“新建”，就會出現代碼配置頁面，如下圖，

圖片標注說明：

編輯代碼名稱
選擇GA4事件
輸入之前獲取的Google代碼ID
輸入事件名稱，這里你可以按照自己的需求編輯
選擇觸發條件這里選擇我們前一步創建的觸發器

到這里我們GTM配置大致完成，但沒有完全完成，我們在第二步的數據層變量名稱是待定的，另外第三步觸發條件里的判斷值還是空的，位置的內容需要我們取調試頁面找。

怎么找呢？

你先將你配置好的代碼發布，打開預覽窗口，如下圖，

點擊藍色按鈕繼續，看一下你左側列表是否出現“ajaxComplete”這樣的字樣，如下圖，選擇一個點擊右側紅框的小箭頭

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

接下來，我們在彈出的調試網站頁面找到你的表單，并提交一個測試表單。（這里需要注意，盡量每個空格都按要求填好內容）。

當你的表單提交以后，回到GTM調試頁面，如下圖，

先找一個Outbound Clicks,
找到以后找它最近的ajaxComplete，
然后打開右側的ajaxComplete代碼（點擊右側的小箭頭），
這一步很重要：第一我們要找到數據層變量名，第二我們要找到表單提交后返回的值。

如何找到數據層變量呢？

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

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