The Google Tag Manager Tutorial for Beginners

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. 

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:

• Understand GTM’s functions and features
• Install GTM onto your website
• Create a Tag plan for your tracking implementation
• Integrate Google Analytics 4 pageview tracking with GTM
• Integrate Facebook Pixel conversion tracking with GTM
• Track button clicks using the auto-events tracking feature of GTM
• How to continue learning
• GTM Quiz

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. 

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. 

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.

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

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.

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. 

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

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.

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. 

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. 

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. 

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. 

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. 

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. 

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. 

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

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

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

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

Save the trigger configuration. 

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. 

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. 

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

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

Finally, we’ll configure our trigger. We’ll choose click – Add to cart as our trigger type. 

Once done, click Save. 

So that’s how we install our Tags and triggers! 

However, this version isn’t live yet. We can still edit and debug it in the Preview mode as we learned earlier. 

Let’s connect our website in the preview mode of our browser to verify our Tag implementation. 

We’ll choose a product on our website and click on Add to cart. 

This information is tracked in our Google Tag Assistant account, as well. 

Under the event of Click, our Facebook Add to cart Tag is fired. 

Let’s also test our Tag before we make it live on our website! 

On the Facebook Business Manager, navigate to Test Events → Open Website. 

This leads us to our demo website.

Reload the page and choose an item for the Add to cart event. 

This event will definitely be monitored by Google Tag Assistant. However, we want to verify the results with Facebook Business Manager, as well. 

Under Test Events, we’ll find our fired Tag for Add to cart. 

Since the Tag is working as expected, we can publish this version on our website. It will deploy our tracking to the website for all our audiences. 

Remember: The best practice is to first create the Tags, and then verify them in debug mode before making any changes to the live website. 

Click on Submit to submit the current version of tracking. 

You can add a name to the version. Click on Publish once done. 

Henceforth, all the users who click on the Add to cart button will be tracked through our implementation of the Facebook Pixel. 

One of the advantages of this setup is that you can always navigate back to your previous versions of tracking and restore them. 

So that was our quick lesson on how Google Tag Manager works. If you want to test your knowledge on this lesson, check out this Lesson 1 Quiz. 

This was just an overview to help you familiarize yourself with the tool to start your own tracking system. 

There is much more to Google Tag Manager. One of the major benefits is installing it on our website. 

How to Install Google Tag Manager onto Your Website

Let’s first open our Google Tag Manager account. 

First-time users will need to sign in to the account. You can sign in with any kind of Google account including your YouTube or Gmail account. 

In case you don’t have a Google account, you can create one instantly. 

We have a new demo account for the purpose of this lesson. Let’s click on Create Account, as this is the first time login with this account. 

Google Tag Manager is made with accounts and containers. 

So, any account is simply a collection of various containers. 

Containers are the snippets that are installed onto our website. 

It is a good practice to use your company name as your Account Name in GTM. Next, you can add your country name. This is important for privacy reasons. 

You can also choose to share this information anonymously with Google. 

Let’s move on to containers. 

We’ll add our website URL as the Container Name in this case. It isn’t necessary to use the URL for the container name, but we have chosen our own conventional method. 

If you have multiple accounts or containers, it is always good to have your own naming convention systems for those accounts. 

Next, we’ll choose the Target platform. 

Ideally, you can install Google Tag Manager on Web, iOS, Android, AMP, and Server-side platforms. 

However, we’ll choose the Web platform for this tutorial. 

Click on Create once done. 

You’ll receive the terms of service agreement once it configures your information.

Read the agreement once, click the acceptance tick, and click on Yes if you wish to proceed. 

With this, we have set up the account portion of Google Tag Manager. 

Our next step will be to install the GTM snippets into our website scripts. This is very important for us to deploy codes through Google Tag Manager. 

Click on your GTM ID to access your GTM snippets. 

You can also access those snippets through Admin → Install Google Tag Manager.

Let’s now configure these codes onto our website! 

Installing GTM Snippets Onto the Website

Snippets are extremely important for us to deploy codes through Google Tag Manager. 

These scripts will be the last codes we install onto our account, as henceforth, we’ll deploy all our Tags through the Google Tag Manager. 

There are two different types of codes in this script. One code is placed in the head section of the script, while the second code is placed in the body section of the script. 

We have a demo website for illustration purposes. Our demo website runs on the CMS WordPress setup.

Although WordPress is a widely accepted form of CMS, there are other CMS tools. Therefore, the installation process may vary accordingly.

For example, in WordPress, we can use the theme files, or plugin into our functions PHP, or install a plugin to configure Google Tag Manager to the website. 

But once our installation is complete, the outcome will be the same for all of the setups. 

Let’s open our website, and right-click on it to open View Page Source. 

You’ll notice that the page script contains a header code for GTM at the beginning of the code. 

Also, in the central region, you’ll find the body code for GTM. 

There are various methods for executing this installation, but we’ll choose to add the codes to our functions PHP, as this is the most accessible method for all WordPress websites.

Login to the backend section of your website, and navigate to Appearances → Theme Editor.

You can choose the theme as Storefront Child Theme. This way, any updates on our main theme won’t overwrite the edits in this section.

Go to the Theme Header file. This is where we’ll add our changes to the script.

Let’s first copy our header code. 

We’ll place the header code below the opening head Tag. This should be as high in the code as possible. 

Next, we’ll copy the body code and place it below the opening body Tag. Click on the Update File after configuring the codes. 

Let’s inspect the HTML after installing the codes. 

Reload the website page, and again open the View Page Source section. 

If the configuration is correct, you’ll see the GTM code at the beginning of the script. 

Similarly, you’ll also see the GTM body code in the central section of the script. 

Let’s also verify the results of the script. 

Open the Google Tag Assistant Legacy plugin from your browser. You can sign in with the same account as you use for GTM. 

If the installation is correct, you’ll see Google Tag Manager on your plugin. Click on it to verify more details. 

If you see GTM in yellow color, it means the installation is incomplete. 

You’ll need to publish a version from GTM in order to make this into a green color. This is because although we have GTM installed on our browser, currently it’s not getting any data.

Let’s solve this by going into Workspace and clicking on Submit to publish a version. 

This is just our initialization version. So we’re not adding any Tags or triggers to the setup, but we’re just verifying that our container is in ready-to-use condition. 

Add a Name to the version, and click on Publish. 

Let’s reload our website and verify the results in Google Tag Assistant Legacy. If the installation was successful, you’ll see that Google Tag Manager is now seen in green.

Once we’re able to verify the results of Google Tag Manager from the Google Tag Assistant Legacy plugin, our next step will be to use the preview mode on our browser. 

This will put our browser into a special mode in which only our browser will be able to track the changes we deploy in the Google Tag Manager account. 

Click on Preview to enter the preview mode. 

Add your website URL and click on Start. 

This will open our website in a special mode in the new tab. 

Let’s navigate any page on our website. The URL changes for different pages. 

The Google Tag Assistant account will monitor these changes for us.