Google Tag Manager Custom Event Trigger Explained

Updated: July 18th, 2020. 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 form abandonment, AJAX form submissions, etc. In fact, more than 90% 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?

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 a few examples:

• Your website contains a form that a standard Form Submission trigger cannot track. What do you do? You ask a developer to activate a Data Layer event whenever that form is successfully submitted. That event is a Custom Form Submission Event (simply put, Custom Event).
• A user logs in to his/her account. Unfortunately, the page URL does not change, therefore, you cannot just simply track pageviews. You can ask a developer to push the “login” event to the data layer. After you, you will need to catch the event in the data layer by using the “Custom Event” trigger.
• 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 that 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 writing 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 the 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:

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

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

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

If you want to add additional data, do this:

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

 '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.

'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, the 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 the 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.

Example: Sending an event to GA when a user registers

Let’s continue with our example of registration tracking. What we’ve got so far is:

• We asked a developer to implement the dataLayer.push code when a user successfully signs up. The value of the event  key is registrationComplete
• A developer has implemented our request and we checked that in the Preview and Debug mode (Data Layer tab)
• We created a Custom Event trigger registrationComplete

So what’s next? Let’s send an event to Google Analytics every time a registrationComplete event is pushed to the Data Layer. Additionally, we’ll pass the value of the plan (pricing plan to which a user signed up).

#6.1. Data Layer Variable

In Google Tag Manager, go to Variables > User Defined Variables > New > Data Layer Variable. Enter the following settings:

We entered “plan” because that’s the name of the key in the Data Layer (when the registrationComplete event is pushed to the DL). You can learn more about the Data Layer Variable here.

#6.2. Universal Analytics Event Tag

Now, let’s create a GA event tag that will send the event data to Google Analytics every time a registrationComplete is pushed to the Data Layer). In GTM, go to Tags > New > Universal Analytics. Enter the following settings:

If you’re not familiar with what is Google Analytics Settings Variable, read this guide. The key things here:

• Track type: Event. This means that we will send events about successful registrations to GA
• Event Action: {{dlv – plan}}. Whenever a registration is completed, Google Tag Manager will take the value of the plan key in the Data Layer and will send it to GA (together with a GA event). That way, you will be able to slice the registrationComplete numbers by the pricing plan.
• Assign the trigger, the previously created Custom Event Trigger registrationComplete.

#6.3. Let’s test

Save the GA tag, refresh the preview and debug mode, go to your website (+ refresh it), and complete the registration once again. Once you do that, the registrationComplete Data Layer event will appear in the preview mode. Click it and check whether your GA Event tag is fired.

If the tag has not fired, check whether you have entered the proper event name in the trigger settings. It is super important that you enter the event name precisely as it is displayed in the Data Layer (case sensitive).

If the tag has indeed fired, head over to your GA Real-time reports > Events. Check whether you also see the event there.

If you are still struggling with testing your tags in GTM, read this blog post with 30+ debugging tips.

#6.4. Configure a goal in Google Analytics

The final step. Let’s turn the “registration complete” GA event into a GA goal. In your Google Analytics property, go to Admin and in the “View” column of your GA property go to Goals.

Create a new goal and enter the following settings:

• Goal setup: Custom
• Goal name: Registration complete (but basically, anything you want)
• Goal type: Event
• Goal details: Category equals to registration complete. Leave all other fields empty.

With this kind of setup, whenever an event (with event category “registration complete”) is tracked by Google Analytics, it a goal completion will also be counted. Just remember that a goal completion applies to the entire session. This means that 5 registrations of the same user during the same session will be counted just as a single goal.

You can also test goals in GA real-time reports. So whenever you save this goal, complete another registration on your website, go to real-time reports > Conversions, and check whether it was displayed there.

Google Tag Manager Custom Event Trigger: 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 Scroll Tracking, Form Abandonment tracking, AJAX form 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 to 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.