Google Tag Manager: Saves Time to Developers and Helps the Business

Do you have a website but do not use any tool for web analytics? Would you like to, but you do not have a developer? Or you may have some analytics deployed, but since the developer tends to be busy with other tasks, each change takes a lot of time. Luckily, there is a tool that solves this problem: Google Tag Manager.

Why do we need analytics?

If you do not use analytics, you might be interested in why you actually need them. That is why we will start with a simple example.

On the homepage, you have a so-called CTA (call-to-action) button. Such a button is one of the essential elements on a page - and the first step towards a visitor conversion. It can point, for example, to a page with a product order if you are selling something or to a form that enables asking questions with the possibility of consultation in case you are offering a service. Maybe many people click on this button but leave the website within the next step. In any case, you want and need the website visitors to click on this button because it is crucial for your business. If you find out that they don't click the button often enough, it is an impulse to optimize the design or content of the website. At least you know where to look for an issue.

Web analytics will tell you how much or how little the visitors click on something. That is why you need an analytical tool on your website (for example, Google Analytics) and set up event tracking which records user interactions with elements on a page. This is mainly set up by the developer within the code. What to do if the developer cannot do it?

GTM: One script to rule them all

Google Tag Manager (GTM) is a tool for managing measurement codes on websites.

It works based on so-called tags and triggers. A tag can include a script for adding Google Analytics to the website or a specific trigger, such as clicking on a button or a link or sending a form. The triggers determine when the given tag is executed.

All tags and triggers are stored in a container. To run GTM on a website, it is necessary to create a container and insert its code into each page where you want to measure something. Suppose you want to use services such as Google Analytics and Hotjar on your website or to track events. In that case, all you need to do is to set up Google Tag Manager on your page and add the rest of the scripts using the GTM interface. For simple measurements, such as the example from the beginning, inserting the container code is the only step that needs to be done directly in the code.

Using the tags and triggers, you can add different measurement codes to the website, which you would otherwise have to add to the page's HTML code. You can manage everything directly in the GTM interface, so there is no need to involve the programmer.

Is it really that simple?

Yes and no. To send simple events, you only need basic knowledge of HTML so that you can select the correct identifier for the event object from the code, such as a button that the user clicked on. For more complex events, it is necessary to know JavaScript (or have a skilled developer). We will look at the setup of a simple event in the example from the beginning.

We will look at the setup of a simple event in the example from the beginning.

You have a button which has something like the following HTML code:

<button type=“button“ id=“cta-button“>Book a consultation</button>

You are looking for the part id="cta-button", specifically the part in the quotation marks. No two elements on the page should have the same id, so this is an unambiguous identifier of our button.

How can you get to this code? You can try it out right away. Right-click the button and select "Inspect element". Developer tools will open, and the highlighted line will represent the button. Copy the id of the button (the text within the quotation marks) and open Google Tag Manager.

First, click on Variables → Configure and select the variable Click ID.

Through Triggers → New, create a new rule for clicking on an element add a condition where you select “Click ID” and insert the copied button id.

Save the rule and continue by creating a tag.

Click on Tags→ New and ad tag type, select GA4 Event or Universal Analytics, depending on which version of Google Analytics you are using. Select the proper configuration (a tag that includes the ID of the Google Analytics service where you want to send the data). Into the field Event name, write the name of the event that will be displayed within Google Analytics – in this case, for example, cta_button_click. In the Setup section, assign the trigger you created and save the tag.

In the right-hand corner of the screen, there are two buttons. The button Preview button will open a testing interface, where you can try whether the new triggers and tags are working correctly. Test that clicking on our button triggers the tag. The changes are not public at this point and are only accessible through the Preview. You still need to publish them through the Send button to apply the new setting to all visitors.

After that, you can see in Google Analytics how many people clicked on the button.

Google Tag Manager: And that’s it!

Setting up sending events on button click is this simple using the Google Tag Manager tool. In GTM, there are templates for different triggers – apart from clicking on different elements, you can also easily measure the depth of scrolling, playing Youtube videos or displaying a specific element on a page. For more advanced measurements, you still need a developer, but thanks to Google Tag Manager, you can handle the basic events on your own. In case you still need help with the setup of Google Tag Manager or events, let us know.

Sources:

1. Tag Manager overview https://support.google.com/tagmanager/answer/6102821?hl=en