Google Tag Manager : Tracking of Ajax actions

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.

Type de déclencheur

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 (`preventDefault()`).

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 (preventDefault()) 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

By clicking on the send button, an AJAX call is sent and the button default action is stopped with the help of the function preventDefault().

Tag creation in GTM

In GTM, you can create a tag for the event, as you usually do. GTM - Event

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.

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.

Custim Event

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 août 2017). GTM Custom Event Trigger Explained.
Retrieved from analyticsmania.com

Richard Egloff (02 octobre 2014). Google Tag Manager: Tracking of AJAX Forms.
Retrieved from amazeemetrics.com