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