
July 18, 2020
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!).

Video: Tracking Custom Events with Google Tag Manager
I have also published a video tutorial that explains how to track custom events with Google Tag Manager and Google Analytics. There are two situations explained and both of them rely on a Custom Event trigger.
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.

40 COMMENTS
Hi Julius,
Your post is exactly what I'm looking for, but the last part about how to access data Layer is where I'm having trouble.
Even though it's "easy" to access variables, every event has a first number in the array of events. How can I know which event is the one that I should look for?
i. e. dataLayer.0.addToCart or dataLayer.1.addToCart etc etc.
Thanks!
Hey,
If I understood your question correctly, what you want to achieve isn't very easy. You'll need to learn JavaScript (or get someone who can code) and write a more complex function which will decide which one should you choose.
Nice, and works perfectly. How do i connect this trigger in order to see it in Google Analytics --> real Time events?
Hi
1. You create a Universal Analytics Event Tag
2. Assign that custom trigger to that tag
3. Refresh/enable preview and debug mode.
4. Complete a particular action on your website which activates that custom event trigger.
5. Check GA Real-time reports
6. Profit.
Here's an example of a custom event trigger in action - https://www.analyticsmania.com/post/track-facebook-comments-with-google-tag-manager-google-analytics/. In this example, custom event is called "socialInteraction"
Thank you, I like your site so i suscribed here XD
Thank you for your blog, it helps me a lot. I still have one question about this custom event, in your example, i have created Universal Analytics Event tag, custom trigger... as a result, i can see the result in GA Real-time report, but where can i check the data (registrationCountry and plan) ? from my understanding, real-time event or Behavior > events > top events, it is only for tracking the number of clicks, it does not really get the data, right ?
It depends where you added that data. If you sent it as event action and category, you'll find that data in behavior > Events reports.
in my example, if i want to send data to ecommerce-product performance, here is my data layer:
dataLayer.push({
+ 'event': 'addToWishlist',
+ 'ecommerce': {
+ 'product': productName}
})
and my tag is
Universal Analytics
Track type :event
Category: Ecommerce
Event Action: Add to Wishlist
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
Trigger: event equals addToWishlist
I can see it in Real-time report, but i cannot see it in product Performance
Data in product performance will appear within 20 minutes or a bit more (if you properly sent the data).
In event reports, you won't see product data, because you don't send it there.
productName will be available only in prodict performance reports. By the way, if I recall correctly, product performance reports require product price to be sent. Otherwise you still won't see any data there.
I have waited for 24h to check the report, and for ProductFeildObjects, i think either product name or ID is required.
i am not sure where i made mistake, so that i cannot get data in Product Performance report.
I know that only id or name is required, but product performance reports also require price (documentation does not mention that). And maybe quantity (not sure about that one).
Enhanced ecommerce documentation is tricky and and time consuming.
I do agree, there is less documentation or tutorial, but your blogs save my time too !
Do you have any post on implementing enhanced eCommerce using GTM?
Hey, sorry. Not yet :)
Can I use information from the data layer for real time content personalization on the website?
Example-
1. user enters website
2. call 3rd party api and api returns company name, industry, code, etc to data layer (original use case is to push company information to Google Analytics)
3. Use industry code to decide which content appears in real time to user so it is industry specific
I didn't quite understand what do you mean by saying "industry code", but yes, you can use info from the Data Layer to personalize content.
Industry comes back as a numeric sic or naic code or industry description like "Information Systems" or "Manufacturing" so based on that value, I would want to show certain content.
do you have a link or any explanation of how to use the data from the data layer in content personalization?
Thanks!
This can give you some clues https://www.growth-consultant.com/blog/ultimate-guide-personalising-website-free/
hi juliues, great stuff. I have been searching for one query, stumbled upon here but haven't found it .. if you could help me with it .. the thing is, i want fire page view gtm tag only for a new user not for some1 who have visited in past.
Please let me know if its possible, thanks
Hey, sure I can help. I think I could even write a guide about it. But first I'd like to better understand your context. What kind of tag do you want to fire for the 1st ever page view? What do you want to track?
installing a pixel of an ad-network for the purpose of remarketing. and running time-sensitive creatives . let say for 7 days from the first visit. but now if a user visits via remarketing campaign (on same page) the 7 day bucket get refreshed again . so i want to have a tag that fires only on the first visit.
its easy to do in adwords as we can create an audience for "new visitors" but not on others
Got it. I'll post a guide about this within several days and will let you know.
Got it. Here you go: the fresh guide/solution to your problem Let me know it that helped.
thanks, julius. very much appreciated
:)
Hi Julius,
I'm implemented the dataLayer push in my application and trying to push userId. But I couldn't find it recorder in google analytics.
I added the GTM snippet in index.html and placed the following script in the function where signup event happens
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'userId': user.UserId
});
do I need to do anything else. Please help me with this?
Hey, first of all, check whether your function is working properly. Open the preview and debug mode and check whether you see a "Message" in the event stream. If yes, then go to the Data Layer tab and check whether the data is displayed there correctly.
Also, make sure your dataLayer.push includes the 'event' parameter, which is required for the custom event trigger to work.
Cheers
Well explained. Thank you!
Hi!!
After I delete A tag in GTM, it can be run?
If you refresh the preview and debug mode (and/or publish the container), then no
Hey, thanks for the great stuff it's solved half of the problem. Normally, we can see the goal conversion happens from which traffic (direct, referral, display, etc). Like that, I want to see these (custom goals which are done by GTM) goal results based on campaigns like the above ones. If you help me with this that should be more appreciatable. Many thanks in advance.
I don't think I understand the question. Just create goals in GA based on your custom events and you'll see the same thing.
Hey,
I have below script.
how to implemented 'dataLayer.push' event. using event manager
Need to fire on click event.
<script>
fbq('track', 'click_me.com');
</script>
can please provide me with steps.
.........what i have tried..which is not working........
created -> custom event
event name: myclick
this trigger fire on:
- i have update click URL & hostname as per the requirement.
TAg:-
tag type: GA: Universal analytics
track type: Event
Category: myclick
google analystic settings: {{Ga setting for ...}}
Hello!
Thank you very much for your explanations!
I have one question: I have once read on your website (in a comment) that you said you didn't have GTM set on your checkout page.
Could you please shed some light on this?
I want to add a dataLayer code to my checkout and thank you pages but I am afraid it might cause some security risk or not be accepted by Google.
Thank you so much, your website has been a real goldmine!
Hi,
Thanks for the great article.
I want to use multiple fields in "Google Analytics".
Is there any way except for setting as Event Category, Event Action or Event Label?
For example:
window.dataLayer.push({
'event': 'registrationComplete',
'registrationCountry': 'United States',
'registrationCity':'Chicago',
'yearOfRegistration':2012,
'status':'Confirmed'
'plan': 'Premium'
});
Hi, yes. Google about custom dimensions.
Hey man,
nice post.
I have the issue that while in real time view the event works, if i check the behaviour tab there are my actions but no category is show.
Any suggestion?
Hi, you need to wait. Those reports are not real-time.
Thanks for the tutorial! If I plan to create multiple custom events, is it typical to see multiple Google Analytics tags show up in the Tags section of GTM? Or should there only be one Google Analytics tag that is somehow associated to all the custom events and triggers that I create?
That is up to you. Usually, one tag is per event type or group. But you can also create one tag to support all events.
But usually, it's one tag per event type/group (e.g. one tag for login, one for purchase, etc.)
Hey Julius,
Great blog, thank you.
Do you know why I might be seeing events duplicated in Real-time analytics?
We send a custom event when a user checks out on our website (SPA built on AngularJS), in real-time, it says "Checked out: 2", when it is just one.
Any ideas?
Thanks