Google Tag Manager : Tracking of Ajax actions

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:

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.

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.

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

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

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.

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!

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