Google Tag Manager Custom Event Trigger Explained

Updated: April 2nd, 2025

The Custom Event trigger in Google Tag Manager might sound boring, but it is a concept you cannot ignore because of its wide application.

Without it, you wouldn’t be able to track clicks, AJAX form submissions, etc. More than 80% of Google Tag Manager Recipes require 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.

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. Two situations are explained, and both rely on a Custom Event trigger.

Note: this video is an older one, it shows the older interface of Google Tag Manager and Google Analytics, but it’s still good enough to explain the concept of the custom event trigger.

#1. 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 (but not limited to):

• Form trigger
• JavaScript Error trigger
• Page View trigger
• Click triggers
• History Change trigger
• Timer trigger

Most of the other events that occur in the Data Layer are called Custom Events. 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 stays the same, meaning that tracking simple pageviews will not work. You can ask a developer to push the “login” event to the data layer. After that, you can catch the event in the data layer 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.

#2. 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. Those listeners then initiate a dataLayer.push event if and when those interactions occur.

That’s how Custom Events see the daylight. I have already collected a whole bunch of ready-made custom auto-event listeners that are at your disposal. If you want to track something more specific (but unfortunately don’t know how to code), ask a developer to write a custom auto-event listener. This is the simplest way to start sending custom events.

Take it from my experience. In the past, I once spent more than a day trying to figure out how to track a particular interaction on a webpage. But for an experienced colleague (JavaScript developer), it took him 15 minutes to write a custom listener for that very same interaction (it was 10-15 lines of code!).

#3. Working side-by-side with a developer

I guess that most of my readers started using Google Tag Manager after they heard promises that developers would no longer be needed for web tracking. From now on, web analysts can 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 say that it’s 100% true, either. There is no black and white.

You can track many web interactions without the developer’s input, and that’s awesome! But the web is full of unique, non-standard, and 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! Working side-by-side with a developer is one of the Google Tag Manager’s Best Practices.

What’s next?

Step 1. Prepare a Data Layer Event Code.

Now, you must 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 Google recommended, which is:

<script>
 dataLayer.push({
  'event': 'registrationComplete'
 });
</script>

To avoid particular issues with the scope of the dataLayer JavaScript variable, you should use a window prefix.

Ok, let’s get back to my dataLayer.push code example. You don’t have to be a developer 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 added two additional lines with registrationCountry and plan. Just remember that the last line must not end with a comma. In my case, this was:

'plan': 'Premium'

If you wish, you can even add ten more lines.

Also, tell the developer that the values of those two attributes need to be dynamically replaced. If a visitor chooses Norway as a registration country, this value should also be changed in the Data Layer event snippet.

'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 tracking a specific form, the Data Layer event must be fired after the successful submission.

STEP 3. Test the event

After a developer says that their 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 registrationComplete event and go to the Data Layer tab. As you can see from the screenshot below, the 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 by default. 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 and that we wish to use them as triggers.

In Google Tag Manager, go to Triggers and hit the New button. Choose Custom Event as the 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.

#4. Example: Sending an event to GA4 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 4 every time a registrationComplete event is pushed to the Data Layer. We’ll send the data back to GA4 as a sign_up event, a recommended event by Google. Additionally, we’ll pass the value of the plan (pricing plan to which a user signed up).

#5. 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. Creating your Google Analytics 4 event tag

Now, let’s create a GA4 event tag that will send the event data to Google Analytics 4 every time a registrationComplete is pushed to the Data Layer. Go to Tags > New > Google Analytics > Google Analytics: GA4 Event in Google Tag Manager. Enter the following settings:

• Enter the event name as sign_up (because it is a recommended event by Google)
• Let’s send the newly created variable back to GA4, along with the sign_up event. Expand Event parameters and Add Row. Add pricing_plan as the parameter name and {{dlv – pricingPlan}} as the Value. With this, you can further segment the sign_up numbers by the pricing plan.
• The trigger for this event tag will be the previously created Custom Event Trigger registrationComplete.

#7. Let’s test

Save the GA4 tag and hit the Preview button in GTM again. Your website will refresh again, which means you should 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 GA4 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 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 Google Analytics 4 Debug View. Reconfirm if the event and the custom parameter have been sent to GA4.

After you ensure everything is working properly, publish your GTM container (that way, this tracking setup will be activated for all your website visitors).

If you are still struggling with testing your tags in GTM, read this blog post with a bunch of debugging tips.

#8. Register sign_up as a key event in Google Analytics 4

Note: Google Analytics renamed conversions to Key Events.

The final step. Let’s turn the sign_up GA4 event into a key event.

• In your Google Analytics property, go to Admin and select Key events in the Property Column. Click Add key event.

• Enter the name of the event as sign_up

With this kind of setup, whenever a sign_up event is tracked by Google Analytics, a key event will also be counted. Check this in the GA4 Debug View; it will look like this within a few minutes:

You can also check these key events in GA4 real-time reports. So whenever you save this key event, complete another registration on your website, go to Reports > Realtime, and check the widget indicating them.

Google Tag Manager Custom Event Trigger: Conclusion

Google Tag Manager Custom Event is used to track interactions that might take place on your website that aren’t handled by standard methods (i.e., form submissions, page views, clicks, etc.). In other words, every other event in the Data Layer can be called a Custom Event.

Without custom events, there would be no Scroll Tracking, AJAX form tracking, etc.

If you spot a non-standard interaction that cannot be tracked with ready-made tracking solutions (like GTM Recipes), work side-by-side with a developer:

• Explain to them which interaction you wish to track and what additional data you are expecting.
• Give them a little piece of Data Layer event code.
• Test everything after the developer finishes their 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.