javascript - 通过 Google 标签管理器 Ajax POST XMLHttpRequest 到 DataLayer

Question

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

首先，我是 Ajax 和 javascript 的新手。

所以我有:

1. 我的网站上有 AJAX 计算器表格。
2. 我想在 Google Analytics(分析)中跟踪输入、下拉菜单和选择字段及其值。
3. 我已经安装并实现了 Google 跟踪代码管理器。

4. 我创建了自定义 html 标记，当 DOM 准备好将输出推送到 dataLayer 时触发:

   <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.我很高兴，因为我终于得到了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 的一部分，包括由查询参数标识的值。首先，您创建一个读取 eventAction(url 格式)的 dataLayer 变量。然后创建一个新的“URL”类型变量，将“组件类型”设置为查询键以提取查询变量，设置查询参数名称，并在“更多设置”中选择 dataLayer 变量，其中 eventAction 作为“源”参数。返回“propertyValue”的值应如下所示(对 url 中的其他查询参数重复):