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

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. 

You can verify whether Google Tag Assistant is tracking all the pages reached by a user by opening all of your pages once. 

If there are any pages that Google Tag Assistant isn’t able to track, then it might be due to internal errors with your theme files or your plugin settings. 

It is extremely important for Google Tag Manager to track all the pages in order to deploy all of our codes successfully. 

Once you’ve verified all of the pages, you can exit the preview mode by clicking on the cross icon and choosing Stop debugging. 

This will also bring your website back to normal mode. 

So once the background work is complete, we’ll be able to install and implement our Tags. 

That was our quick lesson on how to install Google Tag Manager to your website. If you want to test your knowledge on this lesson, check out this Lesson 2 Quiz.

How to Create a Tag Plan for Your Tracking Implementation

We’re going to take a look at how we can analyze the current implementation that we have on our web page. 

In order to have a complete view of the tracking systems, we’ll set up a tracking plan. 

This not only helps in organizing presentation plans for your clients, but it is also crucial for the development of your project. 

If you have a new joiner like a PPC manager on your team, this implementation of tracking plans will help him understand your goals in a simpler way. 

But the most important reason for this process is that we’re not analyzing random sets of data. We’ll be configuring Intentional tracking. 

Intentional tracking is the process that adds value to your tracking by implementing valuable configurations to analyze the data in a simplified manner. 

Let’s open our demo shop to understand the process. We already have tracking installed on the website. 

However, we haven’t installed GTM tracking on the website. Rather, we have hard-coded the tracking into the Page Source. 

No doubt, you can use the various source codes on your website wall to analyze your tracking data. 

But we recommend a simpler way. You can use Chrome extension tools like Google Tag Assistant Legacy. 

This extension shows you various tracking processes that are implemented on your website simultaneously. 

For example, on our website, we have three different tracking processes that are active. 

The Global site tag code is running in the background. It mentions the AW code below the name. This suggests that this activity is performed by Google AdWords currently. 

Next, we also have a Global site tag for G, which is running for Google Analytics. 

Also, we have a Google Ads Conversion Tracking process running in the background. 

Google Tag Assistant Legacy, however, only shows Google Tags on your website. 

You can also use other plugins like Facebook Pixel Helper, that show you the data on your Facebook Pixel account. 

If you want general information about all other integrations, you can also use the ObservePoint Tag Debugger plugin. 

This plugin allows you to access information from the More Tools → Developer Tools section of your website. 

Click on ObservePoint and reload the page. 

This will show us all the tracking processes from the various tools we configured on our website.

If you want an even more extensive analysis of the codes and the sources of those Tags, we recommend you install WASP Extension Web Analytics Profiler. 

It helps you recognize the sources of various scripts. These may not be marketing scripts but are helpful for debugging. 

You can explore various extensions depending on your requirements. Some of these are the Twitter Pixel Helper Extension and the UET Tag Helper Extension. 

It is always a good idea to converse with various people related to the tracking field like the IT department, marketeers, or even various agencies. 

This can give you a clear understanding of what Tags are already installed on your website scripts and what codes you can further implement to make the tracking easier. 

We have created a sheet to formulate the Tag plan for our demo shop account. You can download a copy of this sheet and change the formatting of the sheet to meet your business needs. 

You can use it to document information like the date of the creation or implementation of a Tag.

Let’s add the date for a sample Tag we will create today. Our Date will be the date 15/02/2021 as we created the Tag on that day. You can add the date when you wish to create the Tag. 

Next, we’ll add the Tag Type. In our case, our Tag Type was Event Tag. As we used it for Google Analytics 4, we’ll keep the Tool as GA4. 

Add the Name you chose for your Tag. It is essential to have a naming convention for your Tags. This will help you in organizing them. The Name of our Tag is GA4 – Event – Button Click. 

For the Description/Purpose, we’ll add Tracks all Buttons on Pages. You can also add a note for the Tag. In our case, it will be Parameters: Click Text. 

Under Responsibility, you can add the name of the individual who is responsible for that Tag campaign. For our Tags, this name is Julian. 

Lastly, also mention whether there are any ToDo left for the Tag. In our Tag, this will be migrate to GTM. 

Although it does seem cumbersome at first, making an organized Tag plan helps a lot in the long run. 

This process is especially useful if you are implementing a major Tag migration. 

It helps you to keep track of the Tags that are migrated and the Tags that need to be removed from the website once it’s already inside GTM.

We have an example where we’ve inputted several Tag entries which we wish to install on our GTM account.

This gives us a good idea about the configurations for each Tag. 

We don’t need to open our Facebook Pixel account for Pixel ID or our Google Analytics account for the Google Analytics Tracking ID. 

This can be especially useful for presentations to your clients or explaining your tracking systems to your colleagues or employees. 

Make a copy of your Tags and plan the implementation of your marketing strategy on the sheet. 

Once your planning is complete, we’ll deploy our first Tag in a step-by-step process to put this plan into action.

This was our quick lesson on creating a Tag plan for the tracking implementation through Google Tag Manager. If you want to test your knowledge on this lesson, check out this Lesson 3 Quiz. 

How to Track Pageviews in Google Analytics 4 with GTM

Let’s open our Google Tag Manager account. We already have a version published with this account. But we haven’t yet implemented any Tags inside this container. 

We have already created a plan for configuring a GA4 PageView Tag to the account. 

The Tag deploys GA4 base tracking. We also have the tracking ID as the notes for configuration. 

Let’s see how we got the tracking ID. 

Reopen the Page Source code. We can see the gtag code configured to our page. The code also mentions the configuration ID for our account. 

We’ll use this ID to migrate our GA4 Tag to the GTM interface. In case you don’t have a Google Analytics 4 account, you can create it by signing in to the Google Analytics website. 

Further, you can also find your Tag installation ID by navigating to Admin → Setup Assistant → Tag installation. 

Copy your Measurement ID. We’ll use this ID to migrate our codes. 

Once we have all the prerequisites, we’ll set up the Tag. 

Open your GTM account, and click on Add a new tag. 

Add a name to your Tag. It is a good practice to use your own customized naming convention for that purpose. 

Click on Tag Configuration to add the Tag type. You’ll see various templates for creating a Tag here. 

Choose Google Analytics: GA4 Configuration. 

This is simply a form in which you can fill in various fields to generate your Tags. 

Under the Measurement ID, paste the ID we copied from the GA account.

We also want to send a PageView event with this Tag. So, we’ll click on that option as well.

Next, we’ll configure the trigger.

Triggers are the conditions under which we deploy the Tag. 

As we don’t have any special requirements, we can choose All Pages as our trigger type. Click on Save once done. 

Let’s verify our implementation by entering the Preview mode. 

If your preview mode is successful, you’ll see a message window on your website about Debugger connected.

If you verify the data on your preview tab, you’ll see that the Tag for GA4 – Preview – Configuration – All Pages is fired successfully.

We can also verify the same through the DebugView section on the Google Analytics website. 

Currently, our page_view is deployed on our page. 

Let’s add another click event on our page to verify the results. You can simply reload the website. This will create another page view event for our tracking tools. 

It may take several moments for the data to load. 

When the results load, you’ll be able to see that two page-view events are tracked by our tracking tools. 

The reason for the two PageView events is that we have two different tracking scripts installed for tracking. 

First, we have a tracking code installed in the View Page Source section. Additionally, we also have a Google Tag Manager code running on our page script. 

As we are manually tracking this event and also using GTM as our tracking tool for the same event, we are able to see two different entries for the same event. 

However, as we know that our GA code is deployed through GTM, we can actually remove that script from our page’s source code. 

Let’s now Submit our version for this Tag. It will go live on our website for all our users now. 

Add a Name to the version and click on Publish to make the version live.

We’ll now also remove the secondary tracking code from our page source.

Open the theme files for your website. Find your Global Site Tag code, and delete the entire code. Update the file once done.

Reload the website and close the Google Tag Assistant tab. 

Finally, we can see that Google Tag Manager is deployed on our website, and Global Site Tag through Google Tag Manager is deployed on the page. 

You can verify this once again by navigating to the Page Source code. 

If the codes are correctly removed, you’ll be able to see that we only have Google Tag Manager installed on our script. 

The Global Site Tag is deployed through GTM. 

Going forward, you won’t be able to use DebugView to track user movements. This is because it is only able to track activity for the Preview mode. 

Hence, we can use Real-time reports to analyze user behavior and various tracking events. 

However, if you develop codes from scratch, you won’t need to remove any access codes as there won’t be any duplicates. 

This process is only needed when you are migrating your Tags to Google Tag Manager. 

🚨 Note: Google Tag Manager can be integrated with various platforms, learn more about Google Sheets tracking with GTM and Active Campaign tracking with GTM.

This was our quick lesson on planning and implementing the tracking plan through Google Tag Manager. If you want to test your knowledge on this lesson, take the Lesson 4 Quiz. 

How to Track Conversions in the Facebook Pixel with GTM

We already have a GA4 Tag installed on our website. Now, we also want to install the Facebook Pixel Tags with GTM. 

Both of our Tags will be Fb Pixel Tags. The first one is a Pageview – All Pages Tag, and the second one is a Form – Confirm Page Tag. 

The Form Tag is a conversion Tag that tracks whenever a user fills a form and sends over a Lead Event as the result. 

Let’s add these Tags to our customized Tag plan. 

We also have the configurations from our Pixel accounts. You can find them in the Overview section on your Facebook Business Manager account. 

You can also find the configurations from the Settings section of your Pixel account.

Let’s copy the configuration code so we can implement the planned Tag. 

Let’s create a New Tag from Tags. 

We need a Tag for the Facebook Pixel configuration. Unfortunately, Facebook Pixel isn’t available as one of the templates in the standard templates by Google Tag Manager. 

So, we’ll open Community Template Gallery to access the Tag templates by different users. 

Search for the relevant Tag and choose the Facebook Pixel Tag configuration.

Go to Add to workspace → Add to confirm the use of the template configuration for our Tag. 

The Tag template will now be available in our Tag as its configuration. 

Paste the Facebook Pixel ID that we copied from the Facebook Pixel account. 

We will keep all the other settings unchanged for this Tag template. 

We still need to add a trigger for this Tag. As our Tag is for all our pages, we’ll use the All Pages trigger for this Tag. 

Give an appropriate Name to the Tag, and click on Save. 

Open the Preview mode to verify the Tag configuration.

Let’s reload our website to monitor the changes. As the Tag is configured on all pages, we can track it simply by reloading our page. 

If the configuration is correct, you’ll see the Fb – Pageview – All Pages Tag live on your website from your Google Tag Assistant account.

In addition, you can also verify the fired Tags from the Facebook Pixel Helper extension on your browser. 

Our Pageview event has already been sent over. 

You can also verify the event details from your Facebook Business account.

Navigate to Test Events and add the website URL. Once done, click on Open Website.

This action will open your website on another tab. You can reload the website once again to generate a Pageview event. 

If the configuration is successful, you’ll see a PageView event added in the Test Events section of your Facebook Business Manager account. 

You’ll also get details about your event in this section. The data about the URL, Action Source, and Advanced Matching Parameters are all tracked in our case. 

So that’s how we added a Facebook Pixel PageView Tag. We’ll also add the second Tag so that we can go ahead and Publish both Tags in a new version.

Our second Tag is a Fb – Form – Confirm Page Tag. 

A form is just one of the many actions that you can track. 

It is important to analyze the audience requirements on your website. This will give you an idea about the events you can optimize to generate more traffic on your website. 

You can also monitor this traffic by making your users perform a certain action. Creating a form and tracking its confirm page action is one way to do it. 

🚨 Note: Check out our detailed guide to form field tracking with Google Tag Manager.

If you have an eCommerce website, you can also track the purchases of users and analyze data accordingly. 

Let’s now understand how Fb – Form – Confirm Page Tag works. 

We have prepared a sample form on our demo website. Let’s fill out the form to see how the Tag works. 

Once the form is filled, we’ll be redirected towards the confirmation page.

We’ll learn to track user movement by using this confirmation page. 

Facebook provides a large number of pre-coded tracking scripts on its developer website. You can navigate the one that meets your business requirements. 

In our case, the best match for our requirements is the Lead event. This resonates with the standard form that we’re filling on our website.

To send over such a standard event, we first need to create a trigger that will only activate on the confirmation page on our website. 

Once we’ve received a confirmation for the completed form, we will open Container Loaded → Variables to verify the tracked data. 

Variables are placeholders that GTM uses to evaluate whether it should fire the Tags. 

For example, if our Page Path is /ninjaforms/confirm/, then we’ll fire the Tags. Let’s also copy the path URL. 

However, if we compare this data with other page views, the page will change based on the page we compared. 

Hence, we’ll set our trigger to fire on the variable that follows our chosen path. 

Navigate Triggers → New from your GTM account. 

This won’t be an All Pages trigger anymore like the ones we previously used. This trigger will only fire on the /ninjaforms/confirm/ path. 

Add a Name to the trigger. 

We’ll choose Page View as our trigger type. Let’s configure the trigger to fire on Some Page Views only. 

As we want our trigger to fire only on a particular page path, let’s add the event conditions as Path Path equals /ninjaforms/confirm/. 

Save the Trigger once you’re done. 

This trigger will now fire only our /ninjaforms/confirm/ page. 

Let’s configure this trigger to a Tag. 

Create a new Facebook Pixel type Tag. Add your Facebook Pixel ID. 

Choose the Standard Event Name as Lead. 

Attach the pv- /ninjaforms/confirm/ trigger that we just created for this Tag. 

Add a Name to the Tag, and click on Save. 

Let’s verify the configuration by entering the Preview mode.