Ready, Set, BFCM! Explore Tools & Tips to Prep Your Store - Learn more

Google Tag Manager Tutorial: How you can use it to improve your website’s analytics (without touching any code)


CONTENTS


Remember when you decided to connect Google Analytics to your online shop’s website?

You probably thought it’d be all smooth sailing – until you stumbled upon an incredibly long snippet of code and something about the “head” of your template that sounded Greek to you (unless you had some notion of web design).

So you probably ended up calling an outside web designer that took less time than it takes to drink a cup of coffee (while still charging you for the full hour of work).

And then the same thing happened when you added the Google Ads code.

And the Facebook or Snapchat pixel.

And so on and so forth.

So


Wouldn’t it be better to do the job yourself and stop being dependent on others every time you connect a web analytics tool to your e-commerce shop?

Well, it’ll be possible if you start using Google Tag Manager.

And in this post, we’re going to tell you what it is and how to use it step-by-step with a very detailed tutorial.

This way, you can stop paying your developers’ coffee addictions. 😉

👉 What Google Tag Manager is and how it works

To get a solid grasp of it, imagine your site is a building and, in order to access it, each tool uses its own door (its label or tracking code).

So every time you want to connect a new tool, you have to create an exclusive door for it (that is, you have to access the website’s source code and edit it).

However, Google Tag Manager (GTM) allows you to create a “universal door” to let all tools in.

In other words:

Google Tag Manager generates a unique code snippet (called a “container”) to connect any external tool without changing the site’s source code. 

This way, whenever you want to use a pixel for SEM, a heat map, or anything else, you’ll be able to do it yourself from the GTM interface.

Much simpler (and cheaper). 😉

✅ Basic Google Tag Manager terms you need to know

You might be at a loss now if you don’t know much about web design.

No worries.

Here are a few terms for you to familiarize yourself with to get the most out of this tutorial:

  • Container: the code fragment generated by Google Tag Manager, and the only one you’ll need to insert on your website. This is the “door code” we told you about before.
  • Tag: tags are the references that other tools use to connect to your site. Google Analytics has its own tag; Google Ads has a different one, Facebook pixel another one. It’s like the ID they use to get through the door.
  • Variable: variables are the instructions tags receive, like “collect data from the user’s cookies”. We’ll tell you more about that later in this post.
  • Trigger: it tells you a tag’s activation event. For example, the tag will start collecting data from a user’s cookies “when the page has been fully loaded”. 

Now that all these terms have been spelt out, let’s see how you can use Google Tag Manager on your site.

👉 Tutorial: How to install and use Google Tag Manager

The first part is the only difficult step of the process, as you will have to make some changes to the code.

Everything will be a piece of cake after that. 😉

✅ 1. Installing Google Tag Manager on WordPress

To make everything easier, we’re going to teach you how to install GTM on WordPress.

If you use PrestaShop, Magento or Shopify (or any other open source CMS) instead, don’t worry, because the process is basically the same.

âžĄïž A. Create an account

Like with most Google tools, you must create a user account to use it.

To do that, head over to the Google Tag Manager Website and fill in the following information:

  1. Account information: name and country.google-tag-manager-account
  2. Container: here you have to create your first container.

You just need to give it a name (so it can be identified later) and indicate its use (normally “Website”).

google-tag-manager-container

Once you’ve clicked on “Create” and accepted the terms and conditions, you’ll be taken to  Google Tag Manager’s interface.

âžĄïž B. Installation

When you’re in, you’ll first see a pop up with two pieces of code, like this:

google tag manager html code e1592213694485

These are the only two code snippets you need to insert into your website; they’ll act as containers for the tags from the rest of the tools.

There are basically two ways of doing it:

  1. With the WordPress editor: This involves accessing the file through WordPress’ source code and inserting the code fragments there. We advise against that unless you know exactly how to do it (as you could delete something important).
  2. With a plugin: The easiest option is to have these codes inserted via a plugin. There are plenty of them with this option, but you can also use the plugin from Google Tag Manager itself.

If you’re unsure, it’s best to ask the developer directly (this will be the only time you’ll have to do it). 😉

Once you’ve installed the code, click “Send” in the upper-right corner of the GTM interface.

google tag manager send container

It’ll show you a window where you’ll have to type the name of this version. Every time you make changes to a container (like connecting a tool, for example), the system will create a new version of that container.

Finally, click on “Publish” to activate it.

✅ 2. Installing a tracking code

Now comes the time to learn to connect those web analytics tools quickly and easily with Google Tag Manager.

Some of them, like Google Analytics, already have a predefined configuration, whereas others require manual settings.

Let’s see an example of each.

âžĄïž A. Google Analytics

Let’s first see the process of installing Google Analytics.

Click on “New Tag” on the Google Tag Manager interface. You’ll see a window where you need to follow these steps:

  • First of all, give the tag a name (so you can identify it if you want to edit it later on).
  • After clicking on “Tag Manager”, you’ll see a list with many different options. Choose “Google Analytics”.
  • For “Tracking Type” select “Page view” (usually the default option).

Leave Google Tag Manager open and sign in to Google Analytics.

Go on Admin > Property settings and copy the number under “tracking ID”.

google tag manager analytics e1592213739908

Go back to the Google Tag Manager tab and click on “Variable configuration” and then on “New variable”.

google tag manager variables e1592213768651

Paste the code from Google Analytics into “Tracking ID”. Leave “cookieDomain” on auto.

Now we’re going to set anonymous registration for cookies to adhere to the Data Protection Act. To that end, in the very same window, click on “Fields to Set” and add the following fields:

google tag manager anonamyze ip 1 e1592213800994

Once you’re done, click on “Save”.

Next, head over to “Triggering” to establish when to launch the tag’s variable.

By default, the tag will be activated on all the pages of your website once the window has loaded.

But you can also click on “New trigger” (the “+” sign in the upper-right corner) to add a new filter so that it’s activated only on specific pages (for example, if you only want to measure the traffic of a landing page).

google-tag-manager-activation

Our recommendation is to go for the default option. Once you’ve clicked on save, your Google Analytics tag will be up and running. 

Now let’s see how to install the tracking tag for an option that’s not on the list.

âžĄïž B. Facebook Pixel

For this next example, we’re going to use the pixel from Facebook Ads. However, it’s the same process for any other tag you’d like to add.

First, click on “New Tag” and then choose “Custom HTML Tag” under the configuration options.

Then, you’ll see a box where you have to add your pixel’s code snippet (you can find it in the Ads Manager section of your ad account.

Next, click on “Advanced settings” under the box. Select “Tag firing options” and then “Once per event”. You don’t need to change anything else.

Under “Fire on”, you can choose for your pixel to be fired on all pages of your website or just on selected ones.

After clicking on save, your pixel will be ready to record your website’s visits so you can launch retargeting campaigns.

👉 Now you know how to use Google Tag Manager, but why would you settle for only external tools?

There’s another aspect to web analytics that many of our clients don’t take into account.

Most of the time, the most interesting data to help your business grow can be found inside your very own website.

For example, the stats generated with an intelligent search engine like Doofinder.

Want to learn more?

Then download this e-book where we explain how you can increase your sales by 20% with an intelligent search engine

And if you want to try Doofinder for yourself, you can get a 30-day free trial by clicking here.

Oh! And it works like a plugin, so don’t worry about messing around with any source code. 😉

FREE EBOOKS