Conversion tracking after successfully sending an AJAX application form via Google Tag Manager (GTM)

Introducing or posing a problem

The described solution is perfect for marketing agencies that do not have the ability to manage customer development and need to set up conversion tracking.

It often happens that website developers and online stores use AJAX-validation of form fields before they are sent to the server, and the Thank You Page is missing as such and does not have a separate URL to identify the moment of successful submission of the form by web analytics tools. (Google Analytics or Yandex Metric).

Some web analysts do not want to strain themselves once again (or simply cannot) and set up sending conversion codes by clicking on the “Send” button, but you and I understand that this way leads to an overestimation of conversions and campaigns (RC) Yandex Direct, Google Adwords and other representatives of advertising sites. Distortion will occur every time the user forgets to enter or enters in the wrong format email or phone number and clicks on the "Send" button. In this case, the conversion will be counted, and the application will not actually go.

Successful submission of the form to the user is marked by the appearance of a pop-up modal window, which pops up due to the modification of the CSS class (class attribute) of the div of this modal window, hidden in the page code.

It is also worth noting that the path to the placement of the conversion code, which lies in editing the code of the CMS template (Content Management System: Bitrix, OpenCart, Wordpress and other representatives of the web fauna), may not be any easier than setting up the Google Tag Manager tag than and going to do in this article. This fact is further supported by the fact that today various designers of websites and landing pages (such as UKit, Wix, Flexbe) are very popular, which use their own set of JS libraries for controls that are inaccessible for editing mere mortal users.

Proposed Solution

What do analysts do? Attempting to catch a standard JavaScript form onSubmit event will not allow to correctly identify the time of successful form submission. We will go the other way and try to catch the necessary moment by tracking the code mutations and catching the moment of displaying the feedback form will send the corresponding event to Google Tag Manager.

With your permission, we will skip the moment of creating the GTM container and setting up the basic tags of web analytics and proceed immediately to the configuration of the required tag.

So, for a start, we will figure out what kind of mutation occurs when the application form is successfully sent. To do this, call the Chrome Developer Tool and consider the code for the modal window for successful form submission.

')

Drawing attention to the CSS class div "m_modal m_65730_done show" you can guess that the additive show appears after successful form submission.

You can check this by closing the modal window and finding the div in the code “m_65730_done”.

Next, we will prepare and set the mutation subject using the jQuery query: In our case, this will be $ ('div [data-id = "65730_done"]').

What next? Now we need a little help in the form of a special JavaScript function that will allow us to attach observers of DOM changes to the MutationObserver interface.

It should be noted that MutationObserver is not supported by all existing browsers. The MutationObserver interface is supported in Opera 15+, Firefox 14+ and Chrome 26+. It will also be supported by Internet Explorer 11 and Safari 6.1. Safari 6.0 and Chrome 18-25 support MutationObserver, but with a WebKit prefix (WebKitMutationObserver).

More information about MutationObserver can be found here .

Our function looks like this:

$(function() { (function($) { var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; $.fn.attrchange = function(callback) { if (MutationObserver) { var options = { subtree: false, attributes: true }; var observer = new MutationObserver(function(mutations) { mutations.forEach(function(e) { callback.call(e.target, e.attributeName); }); }); return this.each(function() { observer.observe(this, options); }); } } })(jQuery); 

Great, now it remains for us to attach attrchange to the target div, while checking that the mutation led to the opening of the window, and not its closure:

 $('div[data-id="65730_done"]').attrchange(function(attrName) { if(attrName=='class') if ($('.m_65730_done.show').length >0) {dataLayer.push({'event': 'POPROBOVAT_BESPLATNO_ZAYAVKA'}); if (testMode) console.log('65730 POPROBOVAT_BESPLATNO_ZAYAVKA');} 

Create an HTML tag in Google Tag Manager and publish it.

Full tag code:

 <script> var testMode=true; $(function() { (function($) { var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; $.fn.attrchange = function(callback) { if (MutationObserver) { var options = { subtree: false, attributes: true }; var observer = new MutationObserver(function(mutations) { mutations.forEach(function(e) { callback.call(e.target, e.attributeName); }); }); return this.each(function() { observer.observe(this, options); }); } } })(jQuery); //  " " $('div[data-id="65730_done"]').attrchange(function(attrName) { if(attrName=='class') if ($('.m_65730_done.show').length >0) {dataLayer.push({'event': 'POPROBOVAT_BESPLATNO_ZAYAVKA'}); if (testMode) console.log('65730 POPROBOVAT_BESPLATNO_ZAYAVKA');} }); </script> 

In this example, we send an event to the dataLayer, which is subsequently processed by a separate HTML tag in GTM, which in turn calls the Google Analytics and Yandex Metrika conversion sending codes.

 <script> var str = '{{Event}}'; if (str.indexOf('ZAYAVKA')>0) ga('send', 'event', 'form', 'send', str); else ga('send', 'event', 'button', 'click', str); yaCounter12345678.reachGoal(str); </script> 

Hurray, the problem is solved! Now we execute the conversion tracking code only after the conversion actually occurred and we get a more accurate number of conversions compared to the number of clicks on the “Send” button.