Ajax POST XMLHttpRequest to DataLayer via Google Tag Manager

Question

Please help me because i'm stuck.

First of all i am a newbie in Ajax and javascript.

So what i have:

1. I have AJAX calculator form on my website.
2. I want to track input, dropdown and selection fields and its values in Google Analytics.
3. I've installed and implemented Google Tag Manager.

4. I've created custom html tag firing when DOM is ready to pushing output to 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.And I am very happy because I finally got the data in 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'

}

6. And finally the Question: How can I split the data received in URL with strings? I understand that i should create new triggers in GTM and edit the code. But how? JSON.parse?JSON.stringify?:

What i want to have in output:

 {

    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

Since you passed your data as a url you can let GTM handle the parsing. GTM has a "url" type of variable which can also return parts of a url, including a value identified by a query parameter. First you create a dataLayer variable that reads the eventAction (which is in url format). Then you create a new "URL" type variable, set "Component Type" to query key to extract a query variable, set the query parameter name and in "More settings" you select the dataLayer var with the eventAction as "source" parameter. This should look like this to return the value for "propertyValue" (repeat for the other query parameters in the url):