Nowadays it’s an easy task to insert a tracking code to our website. Basically “copy/paste” either in our source code or using a plugin/module (in case of a CMS). As Google Analytics is the most popular tool to achieve this task, from now on we will consider just this tool to explain how we can go further about this subject.
To start tracking website events without using code, configuring site trackers is a task that we must do and if we are not, it’s time to start. What does tracking do? It allows us to know how visitors “play” with our website; how effective are our call to actions; which file download is the most popular; how effective are our tabs, accordions, and navigation elements; and so on.
When we install the GA tracking code on our website, it will start tracking immediately. But what will it be tracking? That’s something that is not clear for many people, especially when they are not tech specialists or at least tech enthusiasts. Well, it will start tracking just page views, which means that each time a visitor lands on a page (e.g. after clicking on a Google search result or after clicking on an internal link/menu item, requesting a page reload or opening in a new tab), GA will register this visit as a “Page View”.
Now, what happens when that page has interactive elements (image sliders, tabs, links to pop-ups/light boxes, etc.), which won’t redirect the user to another internal page (or at least reload the current one), and the visitor interacts with them? Will our website tracking code register those interactions? The answer is no.
So how could we know if our visitors are using these interactive elements?
Any interaction between the user and the website is known as an “Event” and can be tracked by defining “Triggers”, which are conditions that will help us to determine “when” we want to track an event. Based on it, in order to understand and evaluate the interactions that a visitor does with our website and how well it is working, we need to start tracking events.
How can we do website event tracking?
First of all, we should define exactly which events or interactions we would like to track. My advice: it’s not a good idea to say “I want to track it all”. While it’s true that we’d like to track it all, sometimes it’s unnecessary as there are some
interactions that won’t tell us if we are doing things well.
For instance, if we want to install security cameras in our house, and the technician asks where do we want to install them, we can’t just say “all over the house”. It will imply to buy too many cameras, which at the same time will imply a great effort on working hours installing all of them and of course, money.
On the other hand, there are parts of our house that we probably wouldn’t like to watch over like inside a closet, under the beds, etc. So we first have to define our goal before installing security cameras: What’s the main objective? What do we want to watch over?
For example, if we need to protect our house from thieves, we’ll need to install them on strategic locations like front and back doors, on the backyard and all the places we think we could catch any thief. But if we just need to monitor our baby, then we just need one camera well located in the baby’s room.
Translating the previous example to our website, “tracking everything” will imply a lot of working hours setting up each interaction, and the worst part is that the more events we track, the more impact it will have on our website performance.
Now that we have clear what we should and shouldn’t do, let’s see how can we start tracking events:
1. As I said before, we need first to define our objectives. What do we want to track? Why? When? Will this tracking contribute to our website improvement? How?
2. Define exactly which events we would like to track and in which pages. Here are some events examples:
- Clicking on a Link/Button.
- Clicking on a video’s play/pause/stop button.
- Clicking on an image.
- Scrolling down the page.
- Opening a pop-up or light box.
- Interacting with an image slider (next/prev).
- Navigating through tabs or accordion items.
- Even mouse movements.
3. Build a tracking map or structure. Google Analytics offers a way to organize our events within the next basic structure:
So we need to organize our events defined in step 2 based on this structure, by grouping each event action inside categories and assigning labels and values to our events. The Event Value is optional and is used just in case you want to track some values related to the event itself.
Great! We have defined our tracking plan and set up our events structure on a document, now what?
Let’s go to the practice
Basically, there are 2 ways of tracking events in Google Analytics:
- By editing our source code.
- By using Google Tag Manager.
I can’t say that one way is better than the other one, or that I suggest one way over the other one. They are just 2 different ways of doing it, and each one has it’s own pros and cons.
I won’t delve into the first way as it’s not the goal of this post. I just have to say that, for obvious reasons, if you go for the first choice, you have to know how to code. Now, what happens if you don’t?
Google Tag Manager to the rescue!
If you don’t know how to code, or just don’t want to touch your website source code, you can achieve tracking events at 100% from Google Tag Manager (GTM). Of course, you will need some basic HTML knowledge, but there’s nothing to worry about, I’ll explain some basics later.
Steps to start an event tracking
1. Create an account on Google Tag Manager (if you don’t have one yet), create a new container for your website and install it. You can follow the instructions on the GTM official help page.
You can follow the instructions on the Google Tag Manager official help page.
2. Once you have connected your website to your GTM account, login to the GTM Admin Panel and click on your container. There we have some components to the left side, but we will focus on the 3 components we will use for our tracking process:
- Variables: are elements that will allow us to save some values to be used later, and even to be used many times on other components (e.g. Google Analytics tracking ID).
- Triggers: As I said before, triggers are components that will help us to define when do we want to track an event and in which cases will it be fired (e.g. When a user clicks on a determined link).
- Tags: Are the components which will finally send all the data to Google Analytics. In other words, they are the link between our tracking setup and GA.
3. Enable some GTM variables which will be used later:
4. Let’s create our first variable: Google Analytics Tracking ID.
a.- Scroll down to the bottom of the page and click NEW button under the “User-Defined Variables” module:
b.- Set a name for your variable, e.g. “GA Tracking ID”, click on “Choose a variable type to begin setup…” and select “Google Analytics Settings” as your Variable Type:
c.- Enter you Google Analytics Tracking ID (must be in the form UA-XXXXX-X):
d.- Now your variable should appear under the “User-Defined Variables” module:
You can add as many variables as you need, not only for Google Analytics but for any other tracking code or event for being used on events.
5. Now let’s create our triggers. In this example, we will create just one trigger, but it will help us to understand how to configure them and what are they for, and then create as many triggers as we need.
Let’s say we have a button or link on our site which opens a lightbox or popup and we want to know if visitors interact with this link, so we want to track click events on this link.
a.- Click on “Triggers” and then “New“:
b.- Set a name for your trigger, e.g. “Open lightbox”, click on “Choose a trigger type to begin setup…”. You can select a click-based trigger to specify if you want it to only listen for clicks on regular links (“Just Links” option) or for clicks on any HTML element on the page (“All Elements” option). In this case, we will select “Just Links” as we want to track a regular link:
There are many other trigger types that we can use to track anything on our website. For more information, please read all about triggers on the Google Tag Manager official help page.
c.- Now, select the option “Some Link Clicks” as we won’t want to track clicks on all the links on the site, but just clicks on our link defined above (which opens a lightbox/popup).
After selecting this option, we will have 3 fields which we need to set up. The first one is the attribute or variable related to the element we want to track. The second one is the condition that we need the attribute to meet, and the last one is the value to be used on the condition. To define these values, we’ll need to inspect our page source code, but don’t worry, it’s far easier than you may think.
d.- Open your website on Google Chrome, navigate to the page which contains the button or link that you want to track, right click on the button/link and select “Inspect” from the drop-down menu.
This will open the “Developer Tools Panel” and the element we selected (our button) will be highlighted on the source code:
There we can see the attributes of our button. Some examples of attributes could be Class, ID, Target, href (URL), etc. And precisely these attributes are the values that we can find on the first field of the GTM Panel, on Trigger configuration. In this case, we can see that our button (which actually is a link) has a class defined as “lightbox-button”, and that class is what we need to define our trigger.
In fact, good code practices tell us that if we have more than one element on our website that looks very similar to them and accomplishes the same function, they should have the same class assigned. In this case, if we had more than one button which opens a lightbox, they should have the same class attribute, so we could track all of them with just a single trigger.
Following with our trigger configuration, now that we know that our button has a Class attribute that contains the string “lightbox-button”, let’s fill in the fields:
Of course, we can select another condition, like “starts with”, “ends with”, “does not contain”, etc. In this case, we selected “contains” as it’s usual that an element has more than one class.
f.- Then click SAVE.
6. Connect the trigger with Google Analytics by creating a TAG.
a.- Click on “Tags” and then “New“:
b.- Set a name for your tag, e.g. “GA Event – Open lightbox”, click on “Choose a tag type to begin setup…” and select “Universal Analytics” as the tag type.
c.- Next, on Track Type, select “Event” and fill in the fields from 2 to 5 according to the tracking map or structure that we defined at the beginning of this article. You can create your Event Categories as Variables so you can reuse them on each new Tag. If
so, you won’t need to type the category name on each tag you create, but just select the variable name from the list by clicking on the icon next to the field.
d.- On Google Analytics Settings select the variable we created before, called “GA Tracking ID”.
e.- Scroll down to the module “Triggering”, and click on “Choose a trigger to make this tag fire…”:
f.- Select the trigger we created on step 4:
g.- Finally click on “SAVE“. And that’s all! We have created our first event tracking without editing our website source code.
How can we know if we did it well?
To test our tracking we can click on “PREVIEW” button:
This will enable a Preview Mode. You can leave it anytime you want or even refresh in case you do additional changes to your Variables, Triggers or Tags.
Open a new tab and visit your site, you can see a GTM Panel at the bottom of your browser:
Click on your button to test the event tracking. The panel will update the “Tags Fired On This Page” module, with the name of the Tag we created on step 5:
If it doesn’t, there could be an error in our configuration, then we need to start testing another option on the Trigger Configuration.
Optionally, we can click on the “Fired Event” (on the left panel) and then on “Variables” to see all
the details of the event:
These details could help us to define if we made some mistake in our configuration process.
Once we have validated it works fine, we can publish our GTM changes so they go live. To publish our changes, we need first to click on “SUBMIT“:
Then fill in a “Version Name” (e.g. “Lightbox/popups tracking”), “Version Description” (a detailed description of the changes) and finally click on “PUBLISH“.
And that’s how we can track our events without editing our source code.
As a last validation step, we should check that our events are being registered on our Google Analytics account, but we have to wait for about 24 hours to check it, or in some cases, we can do it by going to the Real-Time option on our Google Analytics Panel. I hope you liked this article and it was helpful not only to know how to track events but also how to plan the tracking.