Search
Close this search box.

The Google Tag Manager Tutorial for Beginners

Last Modified on May 2, 2024

Are you new to Google Tag Manager but want to learn what GTM is all about and how to use it?

Google Tag Manager is a powerful tracking tool that is used by almost all digital marketers. 

GTM For Beginners

Sign up to the FREE GTM for Beginners Course...

In this Google Tag Manager tutorial, we’ll learn what GTM is all about and how to effectively use it for tracking purposes.

An overview of what we’ll cover:

Let’s dive in!

How Google Tag Manager Works

Google Tag Manager is an all-in-one Tag management system that allows us to integrate all our tracking needs into one user-friendly interface without constantly implementing various codes on our system. 

You can install the scripts manually by adding pixel code to the website. These are known as the marketing Tags

Installing the Pixel codes to the website script

You can also access your code editor to customize the script according to your needs. You can also have an overview of all the codes installed on your website from this code. 

Customizing the website script to manually add codes to track pageviews by users

However, Google Tag Manager eliminates this need to implement various codes. You can simply install the central snippet of Google Tag Manager on your page.

Accessing Google Tag Manager snippets to manually install them to the website script

After implementation of the code, all your Tags can be managed through the graphic interface of the Google Tag Manager system. 

Analyzing the graphic user interface of the Google Tag Manager account

You simply need to configure the data that you wish to track and create triggers for each data set. Triggers are the rules that define intervals or times at which your Tags get fired. 

Finally, you can configure the Tag and send it over to the marketing vendors. After successfully deploying the Tag, GTM implements your tracking codes in the background. 

In addition to this, there are several advantages of using Google Tag Manager. 

You have a version control system that allows you to control any published changes on your website, a preview mode to test your Tags before they go live, and a management function that helps to monitor everything. 

Overall, this is a more flexible and granular way to organize your marketing Tags. 

We’ll learn about more of such functionalities as we move forward in this guide. 

GTM Overview

Let’s learn the basic overview of GTM with the help of an example. 

Before we start with the example, let’s understand the prerequisites for setting up GTM Tags

As we mentioned earlier, we’ll need to install the GTM code scripts into our account to implement codes on various tools like Google Analytics or Facebook.

So we have the Global Site Tag script from Google Analytics that we can install on our website.

Accessing Global Sit Tag snippets to manually install them to the website script

For demonstration purposes, we have created a demo website that we’ll use to configure our Tags. 

We have already configured Global Site Tag and Facebook Pixel to the website. You can access the configured scripts from the Google Tag Assistant extension of the browser. 

Accessing the configured codes to the website from the Google Tag Assistant legacy extension

Open the source codes of the website by right-clicking on the website tab and navigating to the View page source

Viewing the page source to access the source codes of the website

If your configuration is successful, you’ll be able to see the Facebook Javascript code as well as the Global Site Tag installed on the source code.

Analyzing the code snippets from the page source of the website

Following is another demo website created for the purpose of configuring Tags. Let’s open the source code for that website. 

There aren’t any excess codes added to this website. We can only see one snippet for Google Tag Manager. 

Analyzing the Google Tag Manager snippet from the website source code

This is what Google Tag Manager is really all about. It eliminates the need to configure various tracking codes. 

Henceforth, we can deploy all our various tracking codes and Tags through this all-in-one central management interface called Google Tag Manager. 

Open the Tags section on your Google Tag Manager account. You’ll find all the Tags that you deployed for your website in one single place. 

Accessing various Tags from the Tags section in the Google Tag Manager account

When you open a Tag, you’ll realize that all of the Tags are implemented in the form of templates, not codes. 

You can see the Tags on a visual interface and configure them accordingly. 

For example, we have a Facebook Pixel Tag configured on our website. All we need to do is add a Facebook Pixel ID, and we can implement this Tag. 

Configuring a Tag with Facebook Pixel type configuration

Similar to the Tag interface, Google Tag Manager brings various other functionalities that can ease the process of Tag implementation. 

One such feature is the preview option. 

Preview Mode

When you click on the Preview mode for your website, it will put your browser into a special mode that connects to your website. 

Entering the preview mode of the website to analyze tracking changes to the website

Hence, you can verify the Tags deployed on your website.

For example, the preview mode for our website shows the various Tags we configured to our website under the category called Tags Fired

Verifying the deployed Tags by Google Tag Manager from the Google Tag Assistant tab in the preview mode

Preview mode is especially useful for debugging, tracking or finding errors in our implementation. This is much easier than finding errors in the codes configured in our websites. 

This was just one feature provided by Google Tag Manager. Another such feature is called the trigger.

Triggers

As we mentioned earlier, triggers are the rules that define intervals or times at which your Tags get fired. 

For example, the triggers for the Tags on our website are on All Pages. This means the Tags we configured will deploy on all the pages of our website. 

Analyzing the trigger configuration of the fired Tags from the Google Tag Manager account

However, we can also add exceptions to the triggers that will allow our Tags to deploy only on specific pages or interactions.

Let’s understand this with the help of an example.

Suppose we want to track when someone clicks on the Add to cart option on our website. 

Selecting the add to cart option on the website to generate data for tracking

Open your Google Tag Manager account, and navigate to Triggers → New

Creating a new trigger from the triggers section of the Google Tag Manager account

Give an appropriate name to the trigger, and click on the Trigger Configuration to add a trigger type. 

Configuring an add to cart trigger from the Google Tag Manager account

This will give you all the different templates to create a new trigger. In our case, we’ll choose the All Elements type trigger. 

Selecting an all elements trigger to configure in the Google Tag Manager account

We’ll set the trigger to fire on Some Clicks. Configure the conditions as Click Text contains Add to cart

Save the trigger configuration. 

Configuring an add to cart trigger with custom firing conditions for some clicks on Google Tag Manager

We can now attach this trigger rule to our marketing Tags for tracking purposes. 

Let’s say we want to configure this trigger rule into our Facebook account. So let’s go to Tags → New and create a new Tag to configure this trigger. 

Creating a new Tag from the Google Tag Manager account

Add an appropriate name to the Tag. 

Similarly to a trigger, we also have various types for a Tag template. Let’s choose the Facebook Pixel as the Tag type. 

Choosing a Facebook Pixel type Tag configuration from Google Tag Manager

You’ll need to configure your Pixel ID by going to the Settings section of the Facebook Business Manager account. 

Accessing the Facebook Pixel ID from the settings section of the Facebook Pixel account

Paste the Facebook Pixel ID to the Tag. As the event type, let’s choose AddToCart under the Standard category.