August 23, 2017
Google Tag Manager Custom Event Trigger Explained
I have to be honest with you. I’ve tried hard to come up with some interesting and intriguing introduction for this blog post and I guess I failed. But this does not mean that Custom Event Trigger is a boring and rarely used concept. Actually, this can’t be farther from the truth. Without it, you wouldn’t be able to track Youtube player interactions, Scrolling events, etc. In fact, more than 80% of Google Tag Manager Recipes are based on custom events.
So what is it exactly and why should you bother at all? In this blog post, I’ll explain everything you need to know about Google Tag Manager Custom Event.
What is a Google Tag Manager custom event?
According to Google, Google Tag Manager Custom Event is used for tracking interactions that might take place on your website or mobile app that isn’t handled by standard methods. Standard tracking methods include:
Standard tracking methods include:
- Form trigger
- JavaScript Error trigger
- Page View trigger
- Click triggers
- History Change trigger
- Timer trigger.
Every other event that occurs in the Data Layer is called a Custom Event. Here are few examples:
- Your website contains a form that a standard Form Submission trigger cannot track. What do you do? You ask a developer to fire a Data Layer event whenever that form is successfully submitted. That event is a Custom Form Submission Event (simply put, Custom Event).
- You have implemented Youtube player tracking via GTM by importing the Youtube recipe. Every time a visitor interacts with a player, a Data Layer event called youtube is fired. This, my dearest reader, is also a Custom Event.
- And the list could go on and on. Remember, every Data Layer event that does not support a default GTM trigger is called Custom Event.
Where do custom events come from?
Usually (but not necessarily), custom events are dispatched by custom auto-event listeners, JavaScript functions which listen to particular interactions on a web page. In case something important happens, those listeners initiate a dataLayer.push event.
That’s how Custom Events see the daylight. I have already collected a whole bunch of ready-made custom auto-event listeners which are at your disposal. If you want to track something more specific (but unfortunately don’t know how to code), go ask a developer to write a custom auto-event listener for you. Believe me, they are really good at this (if they know JavaScript, of course!).
I’m no developer and I once spent more than a day trying to figure out how to track a particular interaction on a webpage. Believe it or not, but an experienced colleague of mine (JavaScript developer) spent 15 minutes to write a custom listener for that very same interaction (it was like 10-15 lines of code!).
Working side-by-side with a developer
I guess, most of my readers started using Google Tag Manager after they heard promises that developers are no more needed in web tracking. From now on, web analysts will be able to track all interactions and deploy marketing tags by themselves. Does that sound familiar?
Well, I cannot say that the aforementioned statement is a lie. But I can’t also say that it’s entirely true. There is no black and white.
I bet you can track a lot of web interactions without anyone’s input, and that’s awesome! But the web is full of unique, non-standard, and really strange solutions. If you don’t know how to write your own JavaScript, you have to prepare to work with a developer as a team.
Cooperation
Let’s imagine there is a certain interaction you wish to track. You’ve already tried various methods described on other blogs. No luck. What are your next steps? You decide to ask developer’s help.
That’s no shame! In fact, working side-by-side with a developer is one of the Google Tag Manager Best Practices.
What’s next?
Step 1. Prepare a Data Layer Event Code.
Now, you need to prepare a Data Layer event code snippet and give it to a developer. I’ve put an example below:
|
1 2 3 4 5 6 |
<script> window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'registrationComplete' }); </script> |
You might notice that this code is a bit different from the one which is recommended by Google:
|
1 2 3 4 5 |
<script> dataLayer.push({ 'event': 'registrationComplete' }); </script> |
I’ve had a quick discussion with Simo Ahava in one of my blog post’s comments and according to him, it’s better to use window.dataLayer.push rather than dataLayer.push. Since Simo is a well-known GTM specialist with a solid background of JavaScript development, I fully trust him and follow his recommendations.
Ok, let’s get back to my dataLayer.push code example. You don’t have to be a developer in order to understand how to prepare a dataLayer event code snippet. Just copy my example and edit it. Take this code:
|
1 2 3 4 5 6 |
<script> window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'registrationComplete' }); </script> |
If you want to add additional data, do this:
|
1 2 3 4 5 6 7 8 |
<script> window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'registrationComplete', 'registrationCountry': 'United States', 'plan': 'Premium' }); </script> |
I’ve just added two additional lines with registrationCountry and plan. Just keep in mind that the last line must not end with a comma. In my case this was:
|
1 |
'plan': 'Premium' |
If you wish, you can add 10 more lines.
Also, tell the developer that those two attributes need to be dynamically replaced. If a visitor chooses Norway as a registration country, then this value should be changed in the Data Layer event snippet as well.
|
1 |
'registrationCountry': 'Norway', |
STEP 2. Tell the developer when to fire this code
Another important step is to explain to the developer WHEN you want the dataLayer.push event to fire. If you’re interested in the tracking of a specific form, Data Layer event must be fired after the successful submission occurs.
STEP 3. Test the event
After a developer says that his/her task is complete, enable GTM Preview and Debug mode to test it. Complete that specific interaction (e.g. submit the form) and keep looking for the Data Layer event in Preview and Debug mode’s event stream. It should look like this:
So far so good. Now, let’s check whether the developer passed two additional attributes you asked for, registrationCountry and plan. In Preview and Debug mode, click the registrationCompleted event and go to Data Layer tab. As you can see from the screenshot below, developer did a good job as I can see both registrationCountry and plan in the Data Layer.
STEP 4. Configure GTM
By default, Data Layer events do not appear in the Google Tag Manager as triggers. You need to do that manually. Since we are interested in tracking successful form submissions, we need to tell GTM that registrationComplete events are important to us and we wish to use them as triggers.
In Google Tag Manager, go to Triggers and hit New button. Choose Custom Event as trigger type and enter the following settings:
Done. You have just created a Google Tag Manager Custom Event Trigger. If you also wish to use registrationCountry and plan as variables in your Google Tag Manager tags, read the guide on how to access data in the Data Layer and turn them into GTM variables.
Conclusion
Google Tag Manager Custom Event is used for tracking interactions that might take place on your website or mobile app that isn’t handled by standard methods (i.e. form submissions, page views, clicks, etc.). In other words, every other event that occurs in the Data Layer can be called Custom Event.
Without custom events, there would be no Youtube Tracking, Scroll Tracking, Form Abandonment tracking, etc.
If you spot a non-standard interaction which cannot be tracked with ready-made tracking solutions (like GTM Recipes), work side-by-side with a developer:
- Explain him/her which interaction do you wish to track and what additional data are you expecting.
- Give him/her a little piece of Data Layer event code.
- Test everything after the developer finishes his/her task.
- Configure Google Tag Manager to recognize that Custom Event.
Is there anything I missed about Google Tag Manager Custom Event? If yes, let me know in the comments.
18 COMMENTS