Detailed how-to guide on setting up events in Google Analytics with examples

29 November 2020
Using Google Analytics out of the box gives you the ability to access such information as:
  • The number of new and returning visitors
  • Visitor’s geographic location
  • The number of sessions visitors made
  • The pages visitors viewed

In addition, you can see how users landed on your website, whether from Google search, through a link on a social media, forums, or external blog posts, etc. However, to learn more about user behaviour on your site, you need to set up Google Analytics events.

Google Analytics events are actions a visitor can take while browsing your resource.

The types of information you can get from Google Analytics event tracking include:
  • Button or link clicks (onclick event tracking)
  • File downloads
  • Page scrolling (by percentage 25%, 50%, 75%, etc.)
  • Interaction with an embedded video
  • Form completion
  • Many more
Note: By default, Google Analytics tracks page view actions only. So once you set up Google Analytics on your site, it will automatically track and show the information about the pages your visitors viewed in the GA interface.
You, as the site manager or owner, can use the data leveraged by event tracking to improve user experience on your site. For example, you can build a “web funnel”, a route a user takes from entering your site to completing an action you consider to be the most valuable (a goal).

In this article, I will tell you how to use Google Tag Manager to configure Google Analytics events without any coding or developer required.

The general Syntax of a Google Analytics event

Before you start setting up Google Analytics events, you should understand the “anatomy” of events, in other words, what an event is made of.

Every event consists of the two must-have and two optional elements:
  • Category (required)
  • Action (required)
  • Label (optional)
  • Value (optional)

An example of a Google Analytics event and its syntax

For example, I want to configure an event that will be recorded once a visitor clicks a “Sign up” button that is located in the top-right corner on the home page of my site.

For me and Google Analytics to be able to differentiate it from other events on my site, I will assign the following attributes to it:
  • Category: Sign-up - because I want all sign-up buttons that are located on my site to fall under this category.
  • Action: Button click - this one is easy; the action a user takes to trigger this event is a click on a button.
  • Label: Home-1st-top - this attribute is tricky, since I want to add a unique description that will allow me to understand where exactly on my site the Sign up button click action occurred.
  • Value: In this case, I will not include this attribute because this action doesn’t provide a measurable value to me.
Note: If you want to dive deeper into every element of a Google Analytics event, then proceed reading further. If you want to start setting up your first Google Analytics event, then jump directly to this linked section.

Category

Let’s familiarize ourselves with the Category element.

Category is the highest element in the hierarchy of the event’s syntax. It is called to group all similar actions or related content types under one group (category).

For example, if you would want to see how users interact with Sign up buttons throughout the site, you would probably want to call the category Sign up.

Alternatively, if you want to see what interactions users perform on your Home Page, including tracking the depth of scrolling, link and URL clicks, video plays and pauses, then it would be wise to group all these interactions under the Home Page category.

The Google Analytics event report gives you an opportunity to view this high-level data by category.
Recommendations:
  • Plan your event map beforehand. I usually start a new spreadsheet that contains every event and their category, action, label and value respectively. So if I forget what a specific event was about, or how I categorized them, I can always go back and remind myself.
  • If you decide to change the name of a category from Sign up to Sign ups, the new incoming data will be grouped under Sign ups, leaving the Sign up data available in Google Analytics interface (historical data doesn’t change).

Action

Everything is quite simple with the Action element.

The Action element explains the type of an interaction a user takes on your site. These can be represented by:
  • A button click
  • A link click
  • Scroll percentage (e.g. 25%)
  • Play, stop or pause actions (for interactions with video content), etc.

The name of the action can repeat itself across several Categories.

Google Analytics allows you to view the data segmented by a certain Action (which may be part of different Categories).
Note: If your reports collect too many button clicks, you may want to split them into more groups. For example, clicks on buttons leading to purchases, called “Buy” or “Checkout”, and those that are available in your Pricing table such as “Review subscription/plan”, etc.

Label

Labels allow you to specify interactions as part of a category and event you want to track.

For example, say you have a “Start Free” button on all pages of your site. However, it is important for you to know on which page the interaction with the “Start Free” button occurred.

Some possible options for labels in this case include: “Home page”, “Contacts page”, “Our Services”, “Features”, and others.

As with Category and Action elements, you may view a high-level report with the most popular labels across your web resource.

Non-interaction Hit

Non-interaction hit is a term I would like to explain to you before we move on to configuring your first Google Analytics event.

While creating any Google Analytics event in Google Tag Manager, you will see a field called “Non-interaction hit” with the default value set to “False”. This means that this particular event you are creating now (any event – click, scroll, video interaction, etc.) will be considered a valuable interaction with the page where it occurs, and so will increase session duration and be counted towards the bounce rate calculation of every visit.

If you select “Truth” under the “Non-interaction” hit field, that means that this event doesn’t play an important role in user engagement and will not be counted towards session duration and the calculation of the bounce rate.

I usually assign the “Non-interaction hit” to “False” at all times.

How to set up simple events in Google Analytics

Setting up events in Google Analytics via GTM can be as simple as that. Make sure you record all Categories, Actions, Labels, and Values for all events that you set up. Here is the link to an example Google spreadsheet where I recorded all my GTM events. Later you will be able to use them for setting up goals.
Note: If you haven’t set up a GTM yet, please check out this step-by-step guide that explains how to set it up for your site. The examples are for WordPress, but you can grasp the logic and do it for any site that you have.

How to set up a scroll event in Google Analytics

Let’s say that I want to track unique events when people scroll 25% of an “Introduction to Google Analytics” article.
1
Open Google Tag Manager and go to your web property container.
2
Create a new tag and name it.
Note: Please come up with a naming convention that you will remember and be able to interpret in the future. To remember them, I use the same Google spreadsheet where I add all my events to. So, if I forget what it was about, I can easily go back and remind myself about it.
3
Pick Google Analytics: Universal Analytics as Tag Type, then fill out the form as shown below.
4
Then create a trigger. Pick Scroll Depth as a Trigger Type, then fill out the form as shown below.
5
If you want this tag to fire on a specific page, then tick the box next to some pages and GTM will ask you whether you want to add a link.
To learn how you can test whether your scroll Google Analytics event is working, please jump to this section of the article.

How to set up a link click event in Google Analytics

In this example, I will configure an event for clicking on this URL, which is located in the “Introduction to Google Analytics” article: https://m-decoder.com/set-up-google-analytics-wordpress#google-analytics-tracking-id
1
Open GTM, and our container. Click create a New Tag.
2
Name your tag.
3
Pick Google Analytics: Universal Analytics as Tag Type, then fill out the form as shown below.
4
Now scroll down to the Triggering section and click “Choose a trigger to make this tag fire…”
5
A new window will open that includes the already configured events. In my case, I need to create a new trigger, so I click “+”
6
Name the trigger and choose the trigger type. You can choose between the Clicks category “All elements” or “Just links”. I usually use “All Elements”.
7
Then set the following parameters:
  • This trigger fires for “Some Clicks”.
  • Under firing conditions, pick “Click URL”, “contains”, and add the following value into the last cell (the part of the URL) “/set-up-google-analytics-wordpress#google-analytics-tracking-id
  • Just in case you have the same link on other pages, add one more condition that includes the following parameters: “Page URL”, “equals”, “https://m-decoder.com/what-is-google-analytics”, where it is the page URL where you expect the link click to happen.

How to set up a button click event in Google Analytics

For this example, I need an event to be recorded to Google Analytics when a user clicks a certain button on my site.

At this moment, there are just two buttons on my Home page.

Approach #1

This option will work for a very small site like mine where all your buttons have different names.
1
Create a new tag. Name it.
2
As a tag type, select “Google Analytics: Universal Analytics”
3
Fill out the form:
  • Track type: event
  • Category: Website Button
  • Action: Button click
  • Label: Subscribe (the name of the button I want to track)
4
Google Analytics Setting - select the initially created Google Analytics Settings variable
5
Click “Save”, then click “Add trigger”.
6
Click “Save”, then click “Add trigger”.
7
Name the trigger.
8
Choose the trigger type - Click, All Elements.
9
This trigger fires for “Some Clicks”
10
Then select the following conditions: “Click Text”, “equals”, “Subscribe” - this means that the trigger should fire when a site visitor clicks the button named “Subscribe” on your site.
11
You may also add a second condition, so it refers to the button on a specific page, to specify the button only located on a specific page.
12
Click “Save”.

Approach #2

You may also add a second condition, so it refers to the button on a specific page, to specify the button only located on a specific page.
If I want to set an event to be fired when somebody clicks the button, I need to know what its unique address is. So, I entered the inspect mode (right mouse click) and saw this:
I’ve also checked what the second button looks like:
Now, let's compare them to make sure each of their values are unique.
The "Search" button:
<div class="t838__blockbutton">
<button class="t-submit" style="color:#ffffff;background-color:#241cc4;border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;">Search</button>
The "Subscribe" button:
<div class=”t-form__submit”>
<button type="submit" class="t-submit" style="color:#ffffff;background-color:#241cc4;border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px;">Subscribe</button>
Usually, when you work at a company and there are developers who create the site, you can ask them to add custom tags to each element on your site.

This is an example of how it’s done correctly.
<a class="button" rel="nofollow" data-gtm="signup-1st-center" href="/sign_up">Start free</a>
Where data-gtm="signup-1st-center" is a unique tag we used to set up events in GA through GTM.

[class*="signup-1st-center"]

Let’s get back to our example and imagine that you (like me) don’t have access to developers who can just add a custom element to the string of code.

What has to be done
So, we see that if we use the “div class” and “button class”, it will make our button unique.
<div class="t838__blockbutton">
<button class="t-submit" style="color:#ffffff;background-color:#241cc4;border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;">Search</button>
The generally accepted rule here: write the formula like this div.t838__blockbutton button.t-submit, where
  • Div.t838__blockbutton – is the syntax for div class writing. Enter “div” and then “.”, followed by the class value. Separate the div class with other information with a single space.
  • Button.t-submit – use the name of the next class, which is called “button” in my case then dot, followed by the button class value “t-submit”.

To test whether you’ve correctly written this string:
  • Right-mouse-click on the website.
  • Switch to the “Console” tab.
  • Then use the string we’ve just created, but wrap it into the document.querySelector(“ “)
  • Here is what it will look like:
document.querySelector("div.t838__blockbutton button.t-submit")

Now it’s time to create a tag and trigger:
1
Go to Google Tag Manager, video Tags, then click “New”.
2
Create a new tag, and name it.
3
As a tag type, select “Google Analytics: Universal Analytics”.
4
Fill out the form:
  • Track type: event
  • Category: Website Button
  • Action: Button click
  • Label: Search (the name of the button you want to track)
5
Non-interaction hit: False.
6
Google Analytics Setting - pick the initially created Google Analytics Settings variable.
7
Click “Save”, then select “Add trigger”.
8
Name the trigger.
9
Choose the trigger type - Click, All Elements.
10
This trigger fires for “Some Clicks”.
11
Then select the following conditions: “Click Element”, “matches CSS selector”, “div.t838__blockbutton button.t-submit” - the last one is the string we created earlier.
12
Then click “Save”.

How to test Google Analytics event tracking

The easiest way to test if your event’s setup is working is by using the Google Tag Manager Preview mode.
Note: The way it works has recently been updated. It’s a very useful Google Tag Manager feature that can benefit your work greatly (while testing and debugging events for Google Analytics”).
1
In the top-right corner, click “Preview”.
2
GTM will start Tag Assistant. Type in your site’s URL and click “Start”.
3
It will now connect to your site. Click “Continue”.
4
The Tag Assistant will open your site in a new window. Place GTM interface and your site next to each other, like this:
5
On the left side you will have GTM, and on the right will be your website.
Note: Make sure the Tag Assistant interface status says “Connected”.
6
Now, start performing actions for which you’ve set up tags and triggers in GTM:
  • Click the link
  • Click the button
  • Start viewing the YouTube video
7
On the left side, you can see that all my tags fired.

When will the Analytics tracking code send an event hit to Google Analytics?

The Google Analytics event code will send an event hit to Google Analytics immediately.

To check this:
  • Open Google Analytics interface https://analytics.google.com/
  • Open your website in the next tab of your browser
  • On your website, perform any action that should trigger an event. I will open an article and click Play on the first embedded YouTube video I see there.
  • Then go back to Google Analytics. On the left-hand side select “Real-time report”, then go to Events.

This is how you can see how quickly the tracking code can send event hits to Google Analytics.
The Analytics Help Center says that:

  • Google Analytics Ga.js tag is able to process the first 10 hits immediately (without delay). After that, it processes one event hit per second. A total of 500 event hits can be processed per session.
  • Google Analytics analytics.js and gtag.js tags are able to process the first 20 hits immediately (without delay). After that it processes two event hits per second. A total of 500 event hits can be processed per session.

Where in Google Analytics can I see my tracked events?

In addition to the Events section of the Real-time report, you can see your tracked events in the Behavior Google Analytics report.

To find the specific events section:
1
Open Google Analytics interface https://analytics.google.com/.
2
On the left-hand side, select “Behavior” report, then go to “Events”.
3
There you will see Overview, Top Events, Pages and Events Flow reports.
4
By default, the “Overview” report shows a one-week timeline with events split across it. It also includes information about the total number of events, the number of unique events, event value, avg. value, sessions with event, and event per session with event. Then it has a section with top events by Category, Action, and Label.
5
The "Top Events" report has a one-week timeline with a list of events ordered by popularity. A secondary dimension can be selected to have more information about which events in the category were triggered more often.
6
The "Pages" report shows the timeline and a list of pages (listed by their URL) where the events were recorded.
7
The "Events flow" section shows the user behavior funnel, built based on the sequence of triggered events, building a so-called “user journey” on your website.
That's all I wanted to tell you about Google Analytics events for now. Next I will publish an article which will try to answer the question "How to set up events for interactions with an embedded YouTube video?".
In the meantime, feel free to add comments, ask questions, raise new topics, correct me if I am wrong, recommend anything you think is relevant to any published post.
comments powered by HyperComments
Made on
Tilda