Title: Ajax POST XMLHttpRequest to DataLayer via Google Tag Manager
Tags: javascript;jquery;ajax;xmlhttprequest;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:
I have AJAX calculator form on my website.
I want to track input, dropdown and selection fields and its values in Google Analytics.
I've installed and implemented Google Tag Manager.
I've created custom html tag firing when DOM is ready to pushing output to dataLayer:
<script&gt;
(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' &amp;&amp; xhrData ? ';' + xhrData : ''),
'eventLabel': xhr.responseText
});
clearInterval(intervalId);
}, 1);
return xhrSend.apply(this, [].slice.call(arguments));
</script&gt;
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&amp;state=1&amp;property_type=1&amp;first_home_buyer=2&amp;are_you_purchasing=2&amp;url=http%3A%2F%2Fnew.sharewood.ru%2Fembed.html',
eventLabel:'property_value=20000&amp;state=1&amp;property_type=1&amp;first_home_buyer=2&amp;are_you_purchasing=2&amp;url=http%3A%2F%2Fnew.sharewood.ru%2Fembed.html'
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&amp;state=1&amp;property_type=1&amp;first_home_buyer=2&amp;are_you_purchasing=2&amp;url=http%3A%2F%2Fnew.sharewood.ru%2Fembed.html',
eventLabel:'property_value=20000&amp;state=1&amp;property_type=1&amp;first_home_buyer=2&amp;are_you_purchasing=2&amp;url=http%3A%2F%2Fnew.sharewood.ru%2Fembed.html'
propertyValue: '20000'
state: '1'
propertyType: '1'
firstHomeBuyer:  '2'
}

Here is the accepted answer: 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):
Comment for this answer: You did not read the answer properly. This works because the URL variable type does not require its input value to be in the browsers address bar, it merely requires that it looks like a Url, which your eventCategory does. As you see in the included screenshot you can set the input value to any variable.
Comment for this answer: Thanks, but these isn't work, because parameter in eventAction not in URL. I can't include the screenshot but you can see how this works : 'eventAction': xhr.url + (xhr.method == 'POST' && xhrData ? ';' + xhrData : ''),    I probably made a mistake in your question. And just I noticed that, indeed, the parameters are passed separately from the URL.
Comment for this answer: I found a solution. GTM did not take it from URL because separator was ";" then i was replaced in the script on the "?" and it worked. Thank you!


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:07/17/16', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><ajax><xmlhttprequest><google-tag-manager>', 'Title': 'Ajax POST XMLHttpRequest to DataLayer via Google Tag Manager', 'ViewCount': 2434, 'id': 38419708, 'user_AboutMe': None, 'user_AccountId': 8258849.0, 'user_DisplayName': 'Daniil Maksimkin', 'user_Reputation': 27.0, 'user_Views': 15.0, 'user_id': 6211086.0}}