Google Tag Manager – How to track events on your site
NIDMThese behaviors are known as “events,” so today, we will show you how to send them to Google Analytics via Google Tag Manager.
The Battle Plan
Let’s make a battle plan as usual so that we all know what we are doing.
We will begin by stating that we will. Compile a listWe want to track.
We will, second. Set up event triggers. You can track every event on your website with a tool called CSS Element Selectors.
We will also be distributing the information. Set up tags send data to Google Analytics for each event.
We will, finally. Use the “preview” feature in Google Tag Manager to ensure that all events are correctly tracked.
We recommend Google Tag Manager to track events for the following reasons:
This is the approach that does not require you to add any code to your website. Implementation will be much easier if there isn’t a technical person in your team.
Google is always changing its tracking system. They are soon to release gtag.js, their new tracking code library. Google Tag Manager is a great way to avoid having to go back into your codebase and change the tracking mechanism each time there is an update.
Google Tag ManagerThis interface is easier to use to see which events are being followed; if you have many events to track on your website, this interface will help you keep organized.
Step 1: Create a list
First, identify the events you want to track.
I was a big fan of the “track all” approach. This advocates the tracking of every event that occurs on your website.
This approach has the advantage of allowing you to see the entire user experience on your site. Being a data scientist, I love the idea of all the data.
This approach has a drawback: It is easy to become overwhelmed by the volume of data and overestimate the business value of spending time analyzing every element of your page.
This approach is not recommended for small to medium-sized businesses. Larger companies should still consider investing in sophisticated tools for behavior tracking, such as Hotjar (for event mapping) or Heap Analytics (for tracking event funnels) rather than using Google Analytics.
Recently, I have become a big fan of the “macro-and-micro conversion” approach. This advocates only tracking macro and microscopic conversion events on your site.
This approach recognizes the danger of analyzing every website event and teaches analysts to only record those events that are important to your business.
These events can be macro conversion events. These are the steps your customers must go through in order to make a purchase or to submit a lead form. These events could also be called micro-conversion
events, which indicate greater audience engagement. These could include clicking buttons to sign up for your newsletter or browsing product information on the website.
Based on the above description, compile a list of micro-and macro-conversion events that you can use for your website. Next, we’ll be ready for the next step: actually setting up event tracking.
Step 2: Setting up event triggers
Let’s begin by briefly recapping what we talked about last week regarding triggers.
Google Tag Manager automatically tracks page visits and events on your website by default. It doesn’t keep any data unless you ask it to. You can use triggers to tell GTM to track specific events or page views you wish to send to Google Analytics and other services.
We need to inform Google Tag Manager that the events we have compiled in the previous steps will be sent to Google Analytics. We will use a CSS element selector to do this.
A brief primer on how to choose events
It is important to conceptually understand how buttons on your website are coded and how we will choose these elements to identify the events you wish to track.
All elements on your website are coded using HTML tags following the structure shown below.
An HTML tag contains several key components.
The tag NameIndicate the function of the tag in the context of your website. In this example, “h1” refers to “the first header.”
Attribute name you can also specify additional information about the header, such as its description. Class this is used to group tags with similar attributes. This is used as the unique identifier for tags Styles.
The affected ContentThis is the text that will appear on the website in a button or a paragraph.
A CSS element selector, which is a search language that allows you to identify specific HTML tags on your site using the components of the tag, can be used to help you understand these elements.
The following query, “h1.primary”, can be used to select the HTML tag shown in the graphic.
The link below will provide more information about the syntax and use of CSS selectors.
Enable the Element Selector in Google Tag Manager
We have now conceptually understood the process of selecting events. Let’s get down to business.
Google Tag Manager lets you identify events on your website using the various attributes of those events (they call them “variables”). Google Tag Manager allows you to view a complete list of its built-in variables by clicking the “variable-config” button.
Google Tag Manager provides a comprehensive list of variables that can be used to identify events.
This tutorial will be about clicking, which is one of the most fundamental events.
We will use the “Click Element” variable to accomplish this. It can be enabled on the screen below by clicking the box next to “Click Element.” You can also enable other boxes within the Clicks category for more options during event selection.
Identify the CSS selector for your events.
We now need to identify the unique CSS selector for each event.
To do that, we will enlist the help of Google Chrome Web Development Tool, a series of tools that you automatically have access to if you have Google Chrome.
As an example, we will use the Google Merchandise Store.
When a user clicks the add-to-cart button for a product on Google Merchandise Store, the add-to-cart action takes place on the page and not on a separate page. This click must be recorded as a micro-conversion.
When on this specific screen (you can follow along by going to this link), right-click and select “inspect” on the dropdown menu. The right-hand side panel of the console will appear in the screenshot below.
The screenshot explains that you need to first click on the element selection icon in the upper left corner of your console. Next, hover over the element you are interested in using your cursor. Click on it to reveal your CSS identifier.
Finally, use the console query document.querySelectorAll to make sure there is only one result returning, so the CSS selector is unique (this will usually be the case). You now have your CSS selector.
P.S. P.S. If that doesn’t work, identify the overlapping element in your CSS selector and exclude it from Google Tag Manager Triggering (we’ll show you how).
Setup the Trigger
We are now ready to trigger the alarm.
Select “New” from the “Triggers” section in Google Tag Manager.
Click on the Trigger Configuration Box and choose Click All Elements.
Select “Some Clicks” in the setup screen. This means that you want to only track clicks occurring on your website.
Next, click Click Element, Matches HTML Selector, and enter the unique CSS selector that you have identified in the previous step.
You should make sure that your CSS selector is unique even if you extend the parameters.
It should look something like the picture below once everything is set up.
Finally, save all configurations. We are now ready to assign the tag!
Step 3: Set up the tag
Good news! The most difficult part of this process has been completed. It’s now all non-technical smooth sailing!
This step will allow us to set up a tag that sends the event trigger through Google Analytics.
As I explained in our last week’s post, navigate to the “Tag” section on Google Tag Manager by using the right navigation bar.
Click on the red “New” button at the top of your screen.
Configure the Tag
You can configure the tag using the exact same Google Analytics settings that you used last week, but this time select “Events.”
You will have more options to tell Google Analytics about the event by selecting it. This is how I recommend organizing events. However, you can create your own structure.
Category: This is the general category of the event. It can be a check-out event, engagement event, or something else.
Take action. This is the action that took place during this event. For example, click_add_to_cart or click_video.
Label: Here, you can add additional information about your events, such as the product clicked or the video being watched.
I value the following: If you’re using sophisticated micro-conversion values assignment in your analytics pipeline, you can assign a value for this event. If you don’t have a sophisticated micro-conversion value assignment, you can assign a value to this event. Otherwise, I recommend that you leave it blank.
Once you have completed all information, click Save. Let’s now set up the Trigger.
The Trigger can be connected to the Connect Tag.
This step is easy. This step is easy. Save, and your tags will be officially configured.
Step 4: Debugging using the Preview Feature in Google Tag Manager
Technically, you need to make sure that all your events are correctly configured on Google Analytics. This is a common problem with every technology.
This is why you have to be prepared.ToolsGoogle Tag Manager’s preview function is available to assist you in determining if the event tracking you have just set up is functioning.
Once you have set up all the events that you want to track, click the “Preview” button in the upper right corner to go into preview mode. Open the Google Tag Manager tab and then open a new tab to your website. The bottom of your screen will have a debugger section that looks similar to the one below.
This section lists all actions you have taken to your website. The right side shows you which tag fired in each action.
Go back to the event list and click on each one to verify that the tag is working correctly. Double-check everything to ensure it’s working correctly.
Once everything is properly configured, return to Google Tag Manager and submit all changes for event tracking. Congratulations, you are done!
