Google Tag Manager : Tracking of Ajax actions

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

Happy reading.

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.

Adding an Event on Click

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 () by JavaScript code. Once you will have understood this concept, you’ll see that the method we present you can apply to many other specific cases, like the tracking of elements loaded asynchronously after the initial page load.

Use Case

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">
</form>
<script type="text/javascript">
// When the DOM is fully loaded (jQuery).
$(document).ready(function() {
// Submit the form via ajax.
$("#subscription").ajaxForm();
});
</script>

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 Tag in GTM

Creation of your Data Layout Event Code

Once your tag ready to use, we will have to add a thin layer of javascript code to your form, so that it triggers the Google Tag Manager Custom Event. This custom event will allow us to communicate for GTM to inform it of our form submission.

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'popinSubmit'
});
</script>

Keep in mind the value of the key , 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 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.

Trigger creation into GTM UI

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!

Sources

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

All images copyright of their respective owners.
Big thanks to @Antistatique for the review & Noémie Sandoz for the collaboration on this story.

Swiss Web Developer & Open Source Advocate @antistatique | @Webmardi organizer | Speaker | Author | Drupal 8 Core contributor