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:

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

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

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:

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

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:

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:

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:

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!

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:

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:

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:

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:

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

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:

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

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:

Then edit the default confirmation:

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

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

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

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!