The Definitive Guide to Triggering Custom Google Analytics Events Using Google Tag Manager

As part of an effort to be more ‘data conscious’ at Van Patten Media, I decided to start tracking contact form submissions. A new contact form submission is essentially a new lead, and having information in Google Analytics will help me figure out how to increase form submissions (thus increasing our leads).

Google Analytics makes it easy to track custom events, but I ran into trouble while trying to send events via Google Tag Manager. After reading a number of unhelpful blog posts, a lot of trial and error, and several cups of coffee, I was able to figure out the solution.

It turns out that once you know how, it’s incredibly easy, but the documentation isn’t great. That’s why I’ve written this post:the complete guide to firing custom Google Analytics events with Google Tag Manager. (I’ll even show you how to trigger those events with Gravity Forms.)

Let’s go…

Step 1: Set up Analytics tracking in Google Tag Manager

Already have basic Analytics tracking set up? Skip to Step 2.

If you haven’t already, you should configure standard Analytics tracking in Google Tag Manager. Once you’ve logged in, add a new tag:

Creating a new tag in Google Tag Manager

Give your tag a name (just ‘Google Analytics’ is fine) and choose the ‘Google Analytics → Universal Analytics’ tag type:

Choosing the Universal Analytics tag type in Google Tag Manager
Choose Universal Analytics. (Click to expand image)

Fill in your Tracking ID (if you’re not sure what it is, use the helpful blue link to figure it out):

Setting your Analytics tracking ID in Google Tag Manager

Once you’ve set your Tracking ID, you’ll need to create a Firing Rule. This determines when your tag actually fires. Toward the top right section of the page, click the ‘+ Add’ button in the Firing Rules section:

Adding a Firing Rule in Google Tag Manager

Set the firing rule to fire on all pages, like so:

Setting up a Firing Rule in Google Tag Manager
Setting up your first Firing Rule in Google Tag Manager (Click to expand image)

Save that firing rule, and then save your tag by scrolling to the bottom of the page, and—as you may have guessed—clicking ‘Save’.

Finally, click the blue Publish button on the top right of the container dashboard to make your tag live:

Publishing a tag in Google Tag Manager

Step 2: Setting up your event macros

Our next step is to create ‘macros’ for the various properties of a Google Analytics event.

Without the tag manager, you pass your event properties directly to the Google Analytics script. With tag manager, that’s not an option. Instead, we pass our properties to Tag Manager, which will in turn pass them to Analytics.

Meet the data layer

We want to be able to access the event we send to Tag Manager, and that’s where Macros come in. You see, Tag Manager has this thing called the ‘data layer’. You can pass key/value pairs directly to this ‘data layer’, so you can access them from inside your container. We want to be pass three key/value pairs in particular:

  • gaEventCategory
  • gaEventAction
  • gaEventLabel

These are called ‘data layer variables’. Technically, you can pass in any information you want, and call these variables anything you want (if you were feeling goofy, you could name your category variable ‘pizza’, for instance). We’re going to keep it simple though, and stick to these descriptive names.

Create your macro

We’ll need to create ‘macros’ for each of these data layer variables. The macro essentially says ‘hey Tag Manager, if someone pushes a variable named [xyz] to you, make it available to us to use within the container.’

From the Container Draft overview page, create a new macro:

Adding a new Google Tag Manager macro

On the new macro page, name your Macro something descriptive (I like to name it after the variable) and choose the “Data Layer Variable” as your Macro Type:

Setting a macro name and type in Google Tag Manager

Then set your Data Layer Variable name. This is the actual name of the variable you’ll be passing into Google Tag Manager, so watch out for typos!

Setting a Data Layer Variable

Click save, and repeat this process for your other variables: gaEventAction and gaEventLabel.

Step 3: Creating your Analytics event tag

Our next step is creating the tag that actually gets triggered when we create a new event. Back at the Container Draft overview page, add a new tag:

Creating a new tag in Google Tag Manager

Name this new tag something descriptive, like ‘Google Analytics – Event Trigger’. As with your basic Analytics tag, choose ‘Google Analytics → Universal Analytics’ as your tag type:

Choosing the Universal Analytics tag type in Google Tag Manager
Choose Universal Analytics. (Click to expand image)

Put in your Tracking ID again. This should be the same ID as your basic Analytics tag.

This time, we want to choose a different ‘Track Type’. By default, we track pageviews, but here we want to track an event:

Tracking a Google Analytics event in Google Tag Manager

After choosing Event, you’ll see form fields appear for the various event properties. Just click the little gray button on the right hand side of each property and fill in the appropriate variable:

Filling in the appropriate macro variables
Filling in the appropriate macro variables (Click to expand image)

Here’s how it’ll look when you’re done. (Note: we’re going to ignore values and non-interaction hit settings, but if you are experienced with Analytics you should be able to take it from here and decide whether or not you need those.)

Analytics events filled in
Analytics events filled in (Click to expand image)

Now we have to create our firing event. Unlike with our basic Analytics tag, we don’t want to fire this tag any time a page is loaded. Instead, we only want to fire it when a Tag Manager event is triggered.

As with basic Analytics, scroll up and click the ‘+ Add’ button to create a firing rule:

Adding a Firing Rule in Google Tag Manager

This time, we want to create an Event trigger. We’re going to tell Tag Manager to fire this tag any time there’s a Tag Manager event named ‘gaTriggerEvent’:

Setting up an event firing rule
Setting up your event firing rule (Click to expand image)

Save that rule, and then save your new tag. (You’ll probably want to publish this revised tag now too.)

4. Set up the event trigger on your website

Finally, we get to the good part: dropping in the trigger code!

As I mentioned before, Tag Manager has a thing called the ‘data layer’ that we want to talk to. There’s a built in function, dataLayer.push() that we use to do that.

As you can see in the gist, we’re just passing a couple of key/value pairs:

  • event: the Tag Manager event we defined in our firing rule
  • gaEventCategory, gaEventAction, and gaEventLabel: the data layer variables we’re capturing in our macros

In the gist above, I’ve also filled in the event category, action, and label. I’ll be triggering an event with the category ‘form’, the action ‘submit’, and the label ‘lead-gen’. You can change these values to fit your needs, of course.

Triggering after a Gravity Forms submission

We want to trigger this code whenever our Gravity Forms form is submitted. In our form, we use the text-based confirmation that appears after a form is submitted (either with AJAX or a full refresh). We’ll drop our dataLayer.push() code in there.

First, navigate to your form’s confirmations settings page:

Navigate to the confirmation settings page
Navigate to the confirmation settings page (Click to expand image)

Then edit the default confirmation:

Editing the default Gravity Forms confirmation

Inside the Message text box, drop your dataLayer.push() function inside a <script> tag:

Add trigger code to the Gravity Forms confirmation text
Add your trigger code to the Gravity Forms confirmation text (Click to expand image)

Make sure you disable auto-formatting, so your code won’t break:

Disable Gravity Forms auto-formatting to keep your code intact

Finally, save your confirmation message.

You should be all set! Next time your form gets submitted, you’ll see an event in Google Analytics (immediately if you use real time tracking; after a day or so if you don’t).

Viewing real-time events in Google Analytics

Triggering on a click event

If you don’t use Gravity Forms, or want to trigger an event on an arbitrary click, that’s easy too! Here’s how you might do it in jQuery:

This lets you trigger an event whenever you click an element with the ‘my-random-element’ ID. Using jQuery, you can trigger events just about any time you like: when a user scrolls a certain distance down your page, whenever they open a an image lightbox, etc. Of course, you’ll want to change your event category, action, and label!

To sum up:

Once you know how, triggering events in Analytics is easy. To sum up, here’s what we did:

  1. Set up a basic Google Analytics tag in Tag Manager to track page views
  2. Set up event “macros” based on our “data layer variables” (aka the event category, action, and label that we want to pass to Google Analytics)
  3. Created a Google Analytics tag to save a Google Analytics event every time we push an event named ‘gaTriggerEvent’, that passes on the data layer variables we set up earlier
  4. Used dataLayer.push() to trigger that tag on our website every time a form is submitted (or every time an element is clicked)

The best part of this approach is that you only need to configure tag manager one time. Once it’s set up, you can use the dataLayer.push() function to track any number of events; just change your category, action, and label to match your situation, and you’ll be all set!

Did this tutorial work for you? Having trouble? Leave a note in the comments and we’ll see if we can help!

Watch the video

I recorded a video version of this tutorial as well. Check it out below!

Want more Analytics tips?

We love sharing tips for getting the most from your web analytics. Want more like this? Sign up for our email newsletter below. You'll also get our small business website launch checklist completely free!


  1. Keith Lindner wrote:

    Great post Chris. I’m new to GTM and very limited as a developer so I’m trying to figure this out on my own. I’m using the Pie Register plugin for WordPress on our site so I can’t follow this exactly unfortunately. So I was hoping you could help me understand the jQuery part a bit better.

    I want to track when a user submits a registration form on our site. At the moment when someone registers they are just redirected to the same page they were on before the registration page so there is no confirmation page (although this is easy to add back in if necessary). So do I just put in the jQuery code you lay out above on top of the GTM code or can I link it to the Submit button itself somehow?

    And also, what is the ‘my-random-element’ part in that code? Is this just something I could change to “New-User-Registration”?


    Comment — July 7, 2014 @ 2:31 am
  2. Oleg Ishenko wrote:

    Thank you for the post. Followed your instructions, everything works. Saved me tons of time!

    Comment — May 1, 2015 @ 8:24 am
  3. Venugopal Malapati wrote:

    Thanks this is really nice post helped me a lot.

    Comment — June 22, 2015 @ 7:44 am
  4. Huong Nguyen wrote:

    Thanks for very detailed and helpful article. But i have one concern that if we can prevent the loading page if not redirect from our action submit?

    Comment — October 15, 2015 @ 5:04 am

Leave a comment