对于外贸B2B的广告投放来说，一般而言我们衡量转化的形式就是收集客资了，毕竟B2B作为一个成交链条复杂的模式并不能直接在数据端即时衡量成交金额。但收集客资却也分了很多形式，譬如提交表单，直接点击Whatsapp，直接发邮件等。这里后两者（WhatsApp和发邮件）都是可以通过比较轻松的形式来用GTM（Google Tag Manager）来衡量转化，但提交表单由于涉及到第三方的表单插件，有些时候如果不想做thank-you页面跳转的话，确实设置的复杂性会增加，今天我就分享一下如何跟踪最常用的表格插件WP-FORM的表单提交。
准备操作
在设置这些之前请确保你有一个GTM（Google Tag Manager），并且已经完成好代码植入网站的操作。如果不会的话可以查看这篇文章《Google Tag Manager的原理和设置教程》梅洛船长是谷歌SEO/SEM和海外营销博客，专注外贸跨境独立站梅洛船长丨谷歌SEO/SEM博客-https://www.melosea.com/google-tag-manager-follow-wpform-conversion
梅洛船长是谷歌SEO/SEM和海外营销博客，专注外贸跨境独立站梅洛船长丨谷歌SEO/SEM博客-https://www.melosea.com/google-tag-manager-follow-wpform-conversion
步骤一：安装Ajax监听代码
对于计算机原理不是太了解的人可能会疑惑这个AJax监听代码是什么来头，这里我不想做过多的解释，用一个通俗易懂的形式来比喻吧，Ajax监听代码就是将用户在页面上提交表单的操作能够以前端代码的形式展现出来，然后你就能在网页前端代码中数据层变量中找到相关的关于用户提交表格后才会出现的字段，然后以此作为后续跟踪转化的依据。梅洛船长是谷歌SEO/SEM和海外营销博客，专注外贸跨境独立站梅洛船长丨谷歌SEO/SEM博客-https://www.melosea.com/google-tag-manager-follow-wpform-conversion
接下来请先把下述代码创建一个代码Tag，点击代码框右上角即可全部复制梅洛船长是谷歌SEO/SEM和海外营销博客，专注外贸跨境独立站梅洛船长丨谷歌SEO/SEM博客-https://www.melosea.com/google-tag-manager-follow-wpform-conversion
<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 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 parsing
var 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 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 and headers into objects for easier reference
var queryParameters = objMap(queryString, '&', '=', true);
var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':');
// Blindly push to the dataLayer because this fires within GTM
dataLayer.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 object
if (!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 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>然后你需要到GTM界面创建一个Tag梅洛船长是谷歌SEO/SEM和海外营销博客，专注外贸跨境独立站梅洛船长丨谷歌SEO/SEM博客-https://www.melosea.com/google-tag-manager-follow-wpform-conversion
之后选择Custom HTML（自定义HTML）梅洛船长是谷歌SEO/SEM和海外营销博客，专注外贸跨境独立站梅洛船长丨谷歌SEO/SEM博客-https://www.melosea.com/google-tag-manager-follow-wpform-conversion
完成代码创建，触发条件选择所有页面浏览梅洛船长是谷歌SEO/SEM和海外营销博客，专注外贸跨境独立站梅洛船长丨谷歌SEO/SEM博客-https://www.melosea.com/google-tag-manager-follow-wpform-conversion
自此你就有了一个Ajax监听代码的Tag，而后你需要提交这个代码变动。梅洛船长是谷歌SEO/SEM和海外营销博客，专注外贸跨境独立站梅洛船长丨谷歌SEO/SEM博客-https://www.melosea.com/google-tag-manager-follow-wpform-conversion
步骤二：新建一个变量
装完Ajax监听代码后，我们具备监听WP-Form表单提交的初步条件了，但是这个代码是监听所有Ajax操作的，对于这里而言，我们希望只跟踪wp-form的表单提交操作，因此我们需要根据Wp-form表单提交后所展现出的特定代码结构来新增一个变量，至于原理嘛，我这边就放个ChatGPT的回答截图。梅洛船长是谷歌SEO/SEM和海外营销博客，专注外贸跨境独立站梅洛船长丨谷歌SEO/SEM博客-https://www.melosea.com/google-tag-manager-follow-wpform-conversion
我这里就不再阐述细节了，下面这个步骤你照做就行。梅洛船长是谷歌SEO/SEM和海外营销博客，专注外贸跨境独立站梅洛船长丨谷歌SEO/SEM博客-https://www.melosea.com/google-tag-manager-follow-wpform-conversion
然后来到这里，数据层变量名中复制进去这个名字：attributes.response.data.confirmation 。然后单击保存即可
步骤三：设置触发器
如果你全局采用同一个Wpform表格，那么你直接无脑复制我下述的配置就行，事件名称复制：ajaxComplete 。 然后选择
在包含中输入：wpforms-confirmation 。 注意前面要选择 attributes.response.data.confirmation 这个变量。
设置完成后单击保存，并在谷歌广告的代码里加上这个新设立好的触发器，并提交，注意一定要提交，而后这里代码部分就全部OK了
步骤四：测试代码是否安装成功
单击右上角的预览，在弹出的网页窗口内进行表单提交操作，如果你看到触发成功的代码，就表示代码生效了
当然为了确定是否是表单提交的操作触发，我们点进去看一下。
OK，至此就可以愉快地跟踪表单提交操作了！任何疑问欢迎扫码咨询！
如果想看更详细的操作步骤，这里有个老外设置的教程你可以看一看
