How to Launch Google Analytics Click Events through Google Tag Manager

Digital teams look to analytics to tell them what users are actually doing on the site. Most of the time a simple Pageview tag won’t do the trick for defining all the user actions. For this purpose, we need to add Event tags to the site to be able to understand all the user actions and how the site is affecting the user experience.

These Event tags are focused on micro engagements like a click on a button that leads you to a form. This blog post is meant to help you implement tags in Google Tag Manager to be able to functionally capture the data on these micro conversions.”

Micro and Macro Conversions—Defining These Bad Boys

You may be wondering how you would define micro and macro conversions in Google Analytics (GA) and on your site. Let’s set one thing straight, right here, right now: macro conversions should always be set up as Goals in GA. Goals make your life easier and help you to optimize content and traffic coming to your site. This is because Goals are used as separate metrics in your data and come with built in Conversion Rates, Completions, Starts, and Drop-Off metrics.

Macro conversions should always be Goals on your site. Think of a form submission, purchase, or new lead as a macro conversion that needs to have a Goal associated with it.

Micro conversions, on the other hand, are the steps that lead up to a particular macro conversion. Let me give you an example. On the McGaw.io site, we can see that the Homepage has a big Contact Us button.

This button click is not what I ultimately want users to do on the site, but it is a big indicator of interest, so I want to make sure and tag this button so I can see what campaigns and traffic sources are driving the most users to the site that click the button.

The contact us button would be considered a micro conversion for the site. Now, once users click this button, it sends them to the Contact Form.

On the contact form, we have a bunch of micro conversions and one main macro conversion. The form fill out events are all micro conversions. Sometimes, if a form is short, we only tag the beginning of the form, but we always want to tag the Submit button with an event as a macro Conversion.

(Note that usually it’s best to set the macro conversion as a Thank You page view, or Destination Goal. But the McGaw.io site doesn’t fire a separate URL for the Thank You page, so we’ll use the Submit button as a macro conversion.)

Setting Up Click Events in Google Tag Manager

Back in the day, click events used to be part of the code that was directly hard coded on the site. You would have to keep track of what you called each separate event in the code and work directly with development teams to get each click event working. IT WAS A NIGHTMARE!

Now, thanks to Google Tag Manager and other tag management systems, setting up click events is easy peasy!

How to Set Up Click Events in Google Tag Manager

Logging in to GTM gets us the container home screen. Click the “New Tag” CTA to begin the process of building a new tag. Note that we don’t have specific changes shown here yet since we haven’t created any changes in the container. Also, you can see that we’re on the Live version of the container, so publishing is going to make all tags directly live on the site. This means we’ll need to do some QA before publishing to make sure our tags don’t break anything. Remember that GTM inserts Javascript into the site, so any tag that adds code to the site can break other code if it’s not placed correctly.

Once you have GTM installed, then it’s time to set up your GA implementation inside the new container.

Alright, now let’s choose the Universal Analytics tag, and that will give us the main Universal Analytics Tag screen with options to choose Pageview, Event, Social, E-commerce, or other types of tags. Choose Event (see steps below).

(Click Tag Configuration)

(Choose Universal Analytics)

(Choose Tag type “Event” and set Google Analytics ID for tracking)

Next, we get to the screen where we can build the values for our Event tag. This screen has five major areas to consider:

• Event Category: Think of this as the top bucket for the event flow. We want this to correlate to the site structure, and it can be set as a major section of the site like “Homepage” or “Navigation.” For this example, we are tagging the main Contact Us button on the Homepage, so I’m going to set it as “Sign Up Funnel.” This will help me to determine what is happening inside of the sign up funnel separately when I look at the data.
• Event Action: This is the next level for all Events. This could be the text for the CTA we want to pull, or a section inside of a major section of the site. For instance, if you have “Homepage” as the Event Category, you could set the Event Action as “Hero Click” for the main Hero CTA. For our example, we’ll just use the {{CTA Text}} variable to pull in the actual CTA text “Contact Us” into the data. Note that variables will make your life easier as a GTM ninja because variables pull in content dynamically. If the CTA text here were “I Like to Eat Tacos,” then that’s the data that would flow into our Event Action bucket.
• Event Label: This is the next level of Event data, and it’s the last level to rule them all!!! No just kidding, it’s not that intense, but Event labels are really important because you want the data to correlate to one specific click inside of the Event Action and Event Category. For us, we want to pull in the specific Page that the click took place on and the page that sent users here, or {{Referrer}}, as our variables. This could bring in either a page URL or an (entrance) data point. For the “Contact Us” CTA, we want to see what user path is the best at driving clicks, so this data point will help us to decipher the data.
  • Note here that to separate the two variables I added a “:”. You can add anything you want to split the two, but it’s best practice to add a delimiter between the two variables so that when it comes time to analyze the data in Excel or another tool, you can easily split the data up by using that delimiter.
• Event Value: This puts a number value on the Contact Us click or any other Event you set up. Personally, I don’t use this data field very often because lots  of clicks can happen on a single CTA, and not all of those clicks are money. (Bottom line? It gets messy.)  I use Goals to say if a click is good or not because a Goal will only fire once during a specific Session.

Non-Interaction Hit: This one can be very important. If you have events that are firing on a Page load to pull data into the system, (think Scrolling Events) then this field should be set “True”. This is because all clicks will go into calculating your Bounce Rate and Time on Page/Site. So, if you have a scrolling event on your site that fires when the page loads and it’s not set to a Non-Interaction status, you will have a nearly 0% Bounce Rate on your site. That’s not good for looking at what type of engagement your landing pages are getting.

Setting Up the Trigger for Our Click Event in Google Tag Manager

Now that all of our settings are built into the tag for our Contact Us click event, we need to set a way for this event to fire. We need to set our trigger for the tag.

Triggers for click events can be a bit tricky in the new way that GTM fires triggers on the site. For your first click event, this will be a two step process.

First, we need to set a click trigger for every click on the site so we can see the different variables for the content that are sent into the datalayer. This sounds a little intimidating, but overall it’s pretty simple, and I’ll walk you through it.

Second, we need to set the specific trigger for the variable we find that will specify the exact clicks we want to pull into the data.

Setting a Click Event Trigger

GTM used to do this step out of the box, but now we need to do this separately. So to set a new trigger, we need to move away from the tag we have open now.Click “Save” in the upper right hand corner and you’ll get a message pop up that looks like the one below. Just click Save Tag. We’ll come back and set the trigger here later.

Now let’s navigate to the Triggers!

Clicking on the “Triggers” link will show all the current triggers available in our container for the site.

As you can see, we already have a click trigger set up in our site, but it’s not currently tied to any specific tags. We want to leave it that way because if we tagged everything anybody clicked, it would create a lot of bad data. For our example, I’ll just go ahead and start building a new tag. Here are some guidelines when it comes to building out specific Triggers for your tags:

• Triggers should be named specifically so that you know the element being triggered by looking at the naming convention.
  • For instance: gform_submit_button is specific to our form submit button and is the name of the trigger for that button click.
• Triggers should be set only for specific data variables that you know aren’t used elsewhere on the site. This can happen a lot with specific button types (like a submit button) since there could be multiple forms on the site.
  • This can cause problems later when we try building a Goal with a Form Submit click and there are multiple different buttons flowing into the data.
  • If possible, troubleshoot this problem before launching the tag, but it can also be seen if we pull in all PagePath data for the Event, like we have in our example above.

Setting the Click Trigger is pretty simple: just click the “New” red button at the top left of the page and you’ll get a brand new sweet little baby Trigger.

This guy is ready to be used for anything, so let’s take a look at our options. Click in the Trigger Configuration area, and you’ll see you have multiple different things we can play around with. For this trigger, we want to use the “All Elements” trigger type. We could use the “Just Links” type, but that only fires a variable when a user clicks an actual link vs any type of click. For some sites this is a problem because not all clicks are tied to a specific URL, so we want to make sure and capture variables on all clicks.

After clicking the All Elements type, we get to the main trigger screen where we can set any type of variable to fire this trigger. We want this trigger to fire on all elements, and that is the preset option. All we need to do to make this trigger work is set an identifiable name and click “Save.” Now we have our Click Trigger!

Find Which Variables Work to Set Contact Us Click Trigger

Now we need to see what our specific “Contact Us” button is firing on a Click Event so that we can identify it in the data and send GA an Event. Let’s begin!

Click “Preview” in the Trigger main view, and you’ll see the orange bar appear that states we’re in Preview mode. Now, when we go to the site in the same browser, we’ll be able to see the awesome GTM preview on the site. If you remember from our previous post, this allows us to see all the tags and triggers that are firing on the site for user actions.

(Preview mode on live site)

Here we are on our site, ready to click the CTA we want to tag…so exciting! Alright, now that we’re done geeking out, let’s click the button.

Not so fast! If you click this button, you’ll go to a new page and you won’t  be able to see the variable that fires to tag the Click Event. So, if you’re a  Window’s user, do a CTRL + Click to stay on the page. MAC users can do Command + Click.

Now we see the gtm.click fire (our Click Trigger we set up) and we can click on that “gtm.click” event to see what variables are firing in the datalayer with the click.

We can see that no tags are firing yet on the gtm.click event for the Contact Us button, so we need to click on the Variables and datalayer links at the top of the Preview window to see what variables we can use to push data into GA for the button click.

We can see that the list of variables available for this button are pretty slim. Usually we like to see a specific Click Class or Click Element that we can use to specify the button click.

That’s okay, we can use the Click Text, Click URL, and URL variables to specify this button click on the specific page. Note that we don’t want to just use the Click text variable of “Contact Us” because that will make it so anywhere on the site that has a Contact Us text will fire the same trigger, so we need to filter it down by the specific URL and Click URL.

Going back to our Trigger container page in GTM, we can now add the Trigger based on those specific variables that are firing on the site. After clicking “New” we get the list of options below:

(List of Trigger options)

Select the “All Elements” Trigger type under the Click category, and then click the “Some Clicks” radio button to get a list of different variables we can add to the trigger to filter for.

Here is where we set the rules for our new trigger to fire. We want the trigger to fire on the Homepage only for Click Text that is “Contact Us” since no other CTA on the Homepage has Contact Us in the text. You can see how the trigger will look with the listed out variables in the setup below:

Notice that I set the name to be something I’ll recognize in the data to understand the trigger associated with the tag that is firing.

Now we can go back to the tag we set up previously, set the trigger that we just made, and click “Save”. This will set the trigger to be associated to the tag, and that will make it so that we can Preview how the tag will fire on the site in the Preview setting. Below is how the Tag will look when the trigger is set.

Going back to the live site, we can refresh the Preview and the browser, and then we can click the Contact Us (CTRL + Click) to see if our tag fires.

Success! Note that once this container is published, the data will start flowing into Google Analytics for this specific event. You can look in Real Time reports in GA to see the Events that are firing to QA and make sure the data is flowing the way you want it to flow. Example below:

Summary

Now you’re ready to take on your GTM container and fill it up with all sorts of Event triggers and build some amazing Click Event data into Google Analytics. Just remember a few things first:

• Try to minimize the amount of specific CTA triggers you set and use your variables in the datalayer to fire multiple events with one tag and one trigger.
  • For instance, a site navigation that has one identifying property across all the CTA links could use only one Click Event tag to fire all the events under a Navigation Event Category.
• Remember that Google Tag Manager inserts code into your site, so you need to QA everything you build, especially if it gets complex.
• One button could fire on multiple different pages if you tag an event on a Click Class Trigger like “btn-small”. Think about this and whether or not it could send  the wrong data into Google Analytics, especially if this button is tied to a Goal completion.