Ajax POST 通过 Google 标签管理器向 DataLayer 发送 XMLHttpRequest

Question

请帮助我，因为我被卡住了。

首先我是Ajax和javascript的新手。

所以我有：

我的网站上有 AJAX 计算器表格。
我想在 Google Analytics 中跟踪输入、下拉和选择字段及其值。
我已经安装并实施了 Google 跟踪代码管理器。

我创建了自定义 html 标记，当 DOM 准备好将输出推送到数据层时触发：

<script>
(function() {
var xhrOpen = window.XMLHttpRequest.prototype.open;
var xhrSend = window.XMLHttpRequest.prototype.send;
window.XMLHttpRequest.prototype.open = function() {
    this.method = arguments[0];
    this.url = arguments[1];
    return xhrOpen.apply(this, [].slice.call(arguments));
};
window.XMLHttpRequest.prototype.send = function() {
    var xhr = this;
    var xhrData = arguments[0];
    var intervalId = window.setInterval(function() {
        if(xhr.readyState != 4) {
            return;
        }
        dataLayer.push({
            'event': 'ajaxSuccess',
            'eventCategory': 'AJAX ' + xhr.method,
            'eventAction': xhr.url + (xhr.method == 'POST' && xhrData ? ';' + xhrData : ''),
            'eventLabel': xhr.responseText
        });
        clearInterval(intervalId);
    }, 1);
    return xhrSend.apply(this, [].slice.call(arguments));
};
})();
</script>

5.And很开心因为终于在data.layer

拿到了数据

{

event: 'ajaxSuccess',

eventCategory: 'AJAX POST',

eventAction:'http://mylocalhosting.local/calculator/ajax_statistic_track;property_value=20000&state=1&property_type=1&first_home_buyer=2&are_you_purchasing=2&url=http%3A%2F%2Fnew.sharewood.ru%2Fembed.html',

eventLabel:'property_value=20000&state=1&property_type=1&first_home_buyer=2&are_you_purchasing=2&url=http%3A%2F%2Fnew.sharewood.ru%2Fembed.html'

}

最后是问题：如何用字符串拆分 URL 中收到的数据？我知道我应该在 GTM 中创建新触发器并编辑代码。但是怎么办？ JSON.parse?JSON.stringify?:

我想要输出的内容：

 {

    event: 'ajaxSuccess',

    eventCategory: 'AJAX POST',

    eventAction:'http://mylocalhosting.local/calculator/ajax_statistic_track;property_value=20000&state=1&property_type=1&first_home_buyer=2&are_you_purchasing=2&url=http%3A%2F%2Fnew.sharewood.ru%2Fembed.html',

    eventLabel:'property_value=20000&state=1&property_type=1&first_home_buyer=2&are_you_purchasing=2&url=http%3A%2F%2Fnew.sharewood.ru%2Fembed.html'

propertyValue: '20000'

state: '1'

propertyType: '1'

firstHomeBuyer:  '2'     
        }

Answer 1

由于您将数据作为 url 传递，您可以让 GTM 处理解析。 GTM 有一个 "url" 类型的变量，它也可以是 url 的 return 部分，包括由查询参数标识的值。首先，您创建一个读取 eventAction 的 dataLayer 变量（采用 url 格式）。然后创建一个新的 "URL" 类型变量，将 "Component Type" 设置为查询键以提取查询变量，设置查询参数名称并在 "More settings" 中 select dataLayer 变量eventAction 作为 "source" 参数。对于 return "propertyValue" 的值，这应该看起来像这样（对 url 中的其他查询参数重复）：

Ajax POST 通过 Google 标签管理器向 DataLayer 发送 XMLHttpRequest

Ajax POST XMLHttpRequest to DataLayer via Google Tag Manager

javascript

ajax

jquery

xmlhttprequest

google-tag-manager