Before getting into the main subject, be aware that this article has been first write with Noémie Sandoz for the Blog of Antistatique — Web Agency in Lausanne, Switzerland. A place where I work as Full Stack Web Developer.
Feel free to read it here or check it out there: https://antistatique.net/en/we/blog/2018/03/06/google-tag-manager-tracking-of-ajax-actions
Retrieve all the code on Gist: https://gist.github.com/WengerK/512ec73df389a9dea720bdc5849f8c05
Warning : this article is intended for people that have interest for the setup of statistics and tracking tools, and to all curious people.
The trackingwith a capital T, has become very easy with the emergence of Google Tag Manager (GTM).
In a simple use case, you can track multiple type of actions like an event, a page view, a transaction, etc.
In the case of an event, like submitting a form, it is sometimes required to monitor the click on a button. For this we usually choose the trigger type “Elements — Clicks” or “Link”. We can then specify which Button (or Link) the code must track by specifying a class, an ID or it’s target, for example.
Sadly, it sometimes happens that these standard methods are not enough for one of the following reasons:
- You element (form) is loaded through AJAX, after the initial page load.
- The default action (Click on the button or the link) is stopped (
The few following lines will explain you how touse Google Tag Manager to track conversions from an Ajax form, when the default action of the form is stopped (
Before we begin, here is the example form we will be using to demonstrate our experimentation.
Let’s use a rather simple form with two fields.
- Your name
- Your Email address
<form id="subscription" name="subscription" action="./" method="POST">
Name: <input type="text" name="Name"><br>
Email: <input type="email" name="Email" required><br>
<input id="buttonToTrack" type="submit" value="Submit">
// When the DOM is fully loaded (jQuery).
// Submit the form via ajax.
By clicking on the send button, an AJAX call is sent and the button default action is stopped with the help of the function
Tag creation in GTM
In GTM, you can create a tag for the event, as you usually do.
Creation of your Data Layout Event Code
window.dataLayer = window.dataLayer || ;
Keep in mind the value of the key
event, as we will soon need it.
Once the code is implemented in you page, you can proceed to the next step.
Creation of the trigger in GTM
In GTM the trigger type required is “Custom Event ». Remember the
event key we asked you to keep in mind? Now we need it! Input this key as the name of the trigger we just created. You can then link your tag to this trigger, save it, and pass in "Preview » mode to test our implementation.
Here you go, your event works as intended, event with your AJAX layer!
Unlike what we could think, collaboration between the developers and the marketing team has a bright future!
For the most curious of you, here are some complementary information sources that have inspired this article’s creation.
Julius Fed (13 august 2017). GTM Custom Event Trigger Explained.
Retrieved from analyticsmania.com
Richard Egloff (02 october 2014). Google Tag Manager: Tracking of AJAX Forms.
Retrieved from amazeemetrics.com