Day 25: Google Tag Manager - The Primer

[Phenom]

What is Google Tag Manager?
Google Tag Manager is a free tag management system offered by Google. If you have multiple tracking scripts and tags (Analytics, re-marketing, E-comm, Custom HTML, etc) on your website, GTM allows you to store them in a container and fire them as needed.

When this system is used correctly, deploying new marketing tags and code is easy and will not break code in your source. This allows marketers to focus on ROI and marketing, rather than debugging code and scripts. If GTM is new to you, I strongly suggest taking the GTM fundamentals course offered by Google to get an idea of how this platform works!

Getting Started With GTM
Starting out with Google Tag Manager is fairly straightforward—With the updated visual UI, making your first tag is simple. In this primer series we will be walking through the process of setting up an account and a few basic tags. This GTM guide will follow these steps

• Creating A GTM Account
• Creating A Website Container
• Installing GTM Container
• Create Google Analytics Tracking Tag

After completing these steps we will be using GTM for Analytics tracking. If you have any questions please reply to this thread!

Creating A Google Tag Manager Account
Creating a GTM account is free and pretty painless. If you already understand how to create an account/container and installing it, you can move down to the tag creation section. But we will be walking through the process from start to finish.

If you do not have a Google account, I suggest creating a gmail account that will be used for all your accounts. (GTM, Analytics, AdWords, etc) and are connected. This will help you down the road with account organization as well as being able to see all the data Google offers from one login. After you have created a Google account it is time to create your GTM account.

Navigate To https://www.google.com/analytics/tag-manager/ And Sign In

After creating an account you should be brought to your GTM account home page. If you have nothing set up there should not be much there, if you do have accounts already in GTM, this is where you will see them all. After you have created your account the next step is creating the container that will be placed on your site

Creating A Google Tag Manager Website Container
First of all, what the hell is a GTM container?

The simplest way to understand how containers work in GTM is to associate the concept with a real life example.

"In your home you may have a storage box that contains different seasonal decorations. Items such as Thanksgiving dishes, Christmas lights, and Easter decorations are all in this same box. When the time comes to use each one of them, you can use them for the corresponding holiday, but you do not have to use the other items in the box as they are not needed. Rather than having a box for each season or holiday, you keep all of the items in one central “storage box” and only use the ones needed."​

This is the same concept of Google Tag Manager. The GTM container holds all of your scripts/tags that need to run on your website (Analytics, Adwords, Distilled, HTML Tags, etc.). Essentially it is one piece of code that resides on your site that can store your scripts and fire them based on rules set in GTM.

Take a look at the description from Google at https://support.google.com/tagmanager/answer/6103697?hl=en

Now that we have an idea of how this tool works, it is time to create the container that will hold our tags and scripts for our website.

From your GTM account homepage, navigate to the “Create Account” link and click.
The Google Tag Manager container is the backbone of the GTM platform. This container holds all of your tags and scripts and fires them on the pages you specify. Creating your GTM container is easy, so lets setup a container for our website. I will be using my personal blog as an example. See images below.

Setup Account and Give It A Descriptive Name
When I create my accounts, I typically name the account whatever the company name is. e.g. “Builder Society” as the account name. Whatever you name this will be shown as the account from your GTM homepage, in my case I have 30 clients with GTM, so I try to name them something I can easily distinguish from other accounts.

After you have chose a name click the continue button below the “Account Name” field. There is a checkbox to share data with Google and other, this option is entirely up to you, I typically choose not to share data, but if you would like, you can check that box and it will not have any effect on how GTM works.

Naming Our GTM Container and choosing container type
After you have named the account the next step is to setup the container. I typically name my containers whatever domain/subdomain you will be putting it on. This just helps with accounts with multiple containers.

After choosing a container name, you are asked where you will be using the container. As you can see GTM can be used on a website, iOS application as well as android applications. So from an organization standpoint you can create an account, and then multiple containers for each of your properties. For this example I will be putting a container on a wordpress website, so choose the “Web” option like pictured below. When you are done you can click “create” and we are ready to go!

You will be prompted to accept the ToS agreement, click yes. You will be then taken to the account screen and presented with the container code. Don’t worry about this right now, we will be installing that code snippet shortly.

Installing Your GTM Container On Your Website
Now that we have created the account and the website container, it is time to take the container code and put it on our website. Now there are many different ways to get this code added, and depending on your knowledge, you may need a developers help.

There is a wordpress plugin also that we will cover if you are not comfortable adding the code manually to your website. Also be sure to use https://developers.google.com/tag-manager/quickstart if you run into any issues.

Navigate to your account and find your code snippet.
This screen is the container home page, from here you can do many different things such as seeing the tags you have created as well as recent activity. Make yourself familiar with the user interface as this is where you will be spending most of your time. When you are ready, navigate to the container number “GTM-XXXXXX” in the top left corner. Click this link.

After clicking this screen, you will get a popup window with your container code snippet. This is the code that we will be using to add GTM to our sites. Copy this code to a text file or you can come get it again when you need.

Ok, now we are ready to add this code to your website. This is going to be the most painful part for the majority of people learning GTM. The container script has to be placed IMMEDIATELY after the opening <body> tag on EVERY page you want to track. Assuming you are using a CMS such as wordpress, this would involve editing some files or writing some code to make sure it is on every page. Either way is fine, but if you are nervous about installing the code, I would suggest using this plugin. https://wordpress.org/plugins/duracelltomi-google-tag-manager/

Install GTM Via Code in Header
The first way we can install our code is just a simple copy and paste method. Now, if you do not know what you are doing I would get a developers help. If you do not install this correctly it could basically break your site, no bueno. If you do not have your container code, get it from the steps above and navigate to your header file.

The reason I prefer to add this code in the header file, is I know it is being deployed on all pages. And in order to track analytics through GTM, you need to have the container on EVERY page you want to track. ( I am using a wordpress site as an example, but the code needs to be placed after the OPENING body tag on every page.)

I am using the header.php file in my wordpress install to add it. Make sure it is after the <body> tag as this does not reside in the same place as Google Analytics. (head tags)

IF YOU DO NOT SEE YOUR CONTAINER IN THE SOURCE CODE, PLEASE BE SURE TO CLEAR BROWSER CACHE AND ENSURE CACHE PLUGINS ARE NOT CAUSING AN ISSUE WITH NOT SEEING YOUR CONTAINER CODE

Using A Wordpress Plugin For GTM Implementation
There are a few decent wordpress plugins that allow you to use GTM without basically touching any code. The wordpress plugin we will be using is https://wordpress.org/plugins/duracelltomi-google-tag-manager/. This is a well supported plugin and seems to be updated with new features regularly. If you are not comfortable adjusting code, I strongly suggest this plugin.

After you download the plugin and activate it, it is time to fill out the settings and give the plugin our GTM container id. Navigate to the plugin settings.

On the screen you are presented with a few options. First we want to make sure you add your GTM id (GTM-XXXXXX) into the field. Next, make sure “Codeless Injection” is the selected option for container code placement. Click save changes, and we are installed. There are a ton of other options, but for now we do not need to worry about them. MAKE SURE TO LOOK AT YOUR SITE AND NOTHING IS BROKEN!

Checking to see if the container is showing in the live source code
Now that we have added the container snippet to our site, it is time to see if we can see the code on the live site. I do this by checking the source code. Navigate to your website and right click in the content, and select “View Source”. From there we do a CTRL+F and search for “GTM”. If all is set up right, you should be able to see the GTM container in the source code.

If your container is showing up we are good to start creating tags. if you do not see your container code when you look in the source code, go back through the steps above or take a peek at the GTM developers help center. https://support.google.com/tagmanager/answer/6102821?hl=en

Creating A Google Analytics Tracking Tag
Now that we have the container installed on our website, it is time to create some tags for tracking our visitors. The first tag we will be creating is a Google Universal Analytics tag. This tag allows us to use GTM to deploy our GA tracking scripts. This tag needs to be the first one built. If you do not have an analytics account, you can create one at http://www.google.com/analytics/.

Create Your Tag In GTM
Navigate back to your GTM account page, and click on the “Add A New Tag” button from the account homepage.

After clicking, you will be brought to the screen where we build the tag.

Name Your Tag And Choose Tag Type
Choose a name for your tag. Since we are creating an analytics tracking tag, I name mine “Universal Analytics”. You can choose to name your whatever you would like, but I suggest making it descriptive enough that you know what it is from a glance.

After your tag is named, we then need to choose what product type this tag is. As you will see, there are many different types of tags, but for analytics tracking, we want to select “Google Analytics”. Then navigate down and click continue as shown below.

This brings us to the “Choose a Tag Type Options” since we will be using Universal analytics, we want to select that option and press continue. If you are using Classic Analytics please refer to the help center as I do not use Classic Analytics.

Configure Universal Analytics Tag
Now that you have chose your tag type, it is time to configure the tag information. The first thing we need to do is add our tracking ID. The ? next to the tracking ID field has a link to help you. I typically log into my analytics and get it there. If you can not find it please check out this link https://support.google.com/tagmanager/answer/6107124?hl=en&rd=1. After we have our ID we need to enter it into the field.

The “Enable Display Advertising Features” is an option that I do not use often, but if I am doing re-marketing I will have this turned on. So for this example I am going to leave it unchecked. But I encourage to learn more about what it does.

Then we have the “Track Type” dropdown option. This should show “Page View” by default, but if not, set it as Page View. There are More/Advanced settings below, but for this tag we do not need to worry about them. After your tag looks like the one pictured below (with your tracking id), click continue.

Choose What Pages The Tag Fires On
Now that we have our tag configured, we have to choose what pages of our site the tag will fire on. Considering this is the Universal Analytics tracking script, we most likely will want to track every page on our site. To do this we select the “All Pages” option as pictured below. This will then attach a trigger that will fire your tag on all pages of your website. After you can see the “All Pages” firing trigger attached, click “Create Tag”

After you click create tag, you will be directed to the “Tags” screen. From this screen you can see all the created tags that are being stored in your container, as well as see triggers and editing information. If you created the tag correctly, the screen should look like below.

Testing GTM Tags
Now that we have created our Google Analytics tag in Google Tag Manager, it is time to test and see if our tag is working and tracking visitors properly. We do this by using a built in feature called “Preview Mode”. This give us an overlay when we visit our website and allows to see if our tags are firing in real-time. This is one of the best features in the tool as you can test unpublished versions of your container and make sure they are all working before publishing your container. The first step of this process is to click the preview option from the dropdown in the top right corner as shown below.

After you activate preview mode you will see a bright orange banner that says “Now Previewing Version X” on your homepage. This will stay this way until your leave the preview mode. Keep in mind after debugging and testing you will most likely want to turn it off.

Now that we have our preview mode enabled, browse to your website. If everything to this point has been done correctly, you should see a “Google Tag Manager Overlay” This overlay shows you the tags that fired and did not fire on the page. This is extremely handy when you start tracking events and building more advanced tags. If it is working, you should see something like this:

If you see that the tag did not fire, you will need to check that the tag firing rules is set to all pages. If you can see a screen like this, you have successfully added your analytics tracking to Google Tag Manager!

Publish Your GTM Container
Now that we have verified the tracking tag is being deployed and working, it is time to publish our container. Navigate back to the Google Tag Manager account screen for your container. Turn off the preview mode if you have not already. Navigate to the top right corner of the GTM interface and click publish.

Then you will see:

The last thing you are going to want to do is check and make sure that your tracking in Google Analytics. We can do this by looking at the “Real Time” section in your Google Analytics reporting account. Make sure you are not filtering out your IP and you should see something like this.

Welcome To Google Tag Manager

You now are able to create, install and create an analytics tracking tag using Google Tag Manager. The possibilities of this tool are endless, from event tracking to implementing Schema and structured data. I encourage you all to learn as much as you can about this tool as it may have a learning curve, but with time and practice it can speed your workflow up as well as give you insights you can not get elsewhere. I hope you enjoyed this guide and it helps you get your feed wet with GTM. If you have any questions you can drop them in here, or reach out to me as well. Good luck to you all and I hope this may lead to bigger and better things for you all!

You can follow me on twitter at https://twitter.com/iamzackhayes

 

[Phenom]

Part 2 - From Tags To Riches
Now that GTM is setup with the Google Analytics tracking working, it is time to dive into the different things we can do with Google Tag Manager. In this section we will be going over the creation process of tags that can be used to help you dominate your niche and give insights on what users are actually doing on your site. There are countless different things you can do with this platform and I encourage you all to go and learn more.

The following tag will assume that you have created a GTM account and container already, have it published to your website, and you are familiar with previewing and publishing GTM containers.

Local Business Schema Tag
Ah yes, with the growing need for Local SEO means you need Schema. GTM makes this a painless process by injecting our local business schema using a JSON-LD format without adjusting the way the page displays. This means it reduces the need for you to go adjust code that would conflict with the way the page renders to users. BALLER!


Think about that for a second…. Google is allowing you to inject detailed local business information that is marked up properly, on only the pages that are needed, without touching any HTML on your site.


We will be using the template from Schema.org in this example and will be using the JSON-LD format. http://schema.org/LocalBusiness has many different examples of additional things you can add to your local business listings, but here is a template that I typically use for basic Local Business websites.

<script type="application/ld+json">

{

  "@context": "http://schema.org",

  "@type": "LocalBusiness",

  "address": {

    "@type": "PostalAddress",

    "addressLocality": "Mexico Beach",

    "addressRegion": "FL",

    "streetAddress": "3102 Highway 98"

  },

  "description": "A superb collection of fine gifts and clothing to accent your stay in Mexico Beach.",

  "name": "Beachwalk Beachwear & Giftware",

  "telephone": "850-648-4200"

}

</script>

Now that we have the code needed to create our tag, it is time to log into GTM and create a tag.

Creating The Local Business Schema Tag

1 - Login to Google Tag Manager container view and click “Add A New Tag” or “New Tag”

2. - Name your tag and click the “Custom HTML Tag” as shown below.

3. Copy and paste your local business schema JSON-LD code into the “HTML area”.

4. Set Firing Rules For The Tag - “All Pages” and Click “Create Tag”

5. Enable GTM Preview And View Your Site

Now browse to your website and see if your tag fires using the GTM preview overlay.

If everything is firing, head back to GTM and publish that version of your container to your live website.

Verify Tag Information With The “Google Structured Data Testing Tool”
Now that the GTM container has been published to the live website, we need to check the injected schema data for errors. The tool we will be using is the Google Structured Data Testing Tool provided directly from Google. https://developers.google.com/structured-data/testing-tool/. This will allow us to see the data that Google is actually seeing when crawling our site.

1. Click “Fetch URL” and enter your website URL, and then Click “Fetch & Validate”

2. Verify That Local Business Markup Is Showing With No Errors

You have just created your local business schema markup and are using GTM to inject it.


Resources:

• Local Business Schema
• Google Structured Data Testing Tool
• Google Tag Manager Help Community

 

[BrownSugar]

@Phenom If my business has multiple locations, would I then select "Some Pages" and define the Schema separately for each page/location?

 

[Phenom]

@Phenom If my business has multiple locations, would I then select "Some Pages" and define the Schema separately for each page/location?

Yes! Like for example if you had a directory type site, you could make a tag for each location and just set it to "some pages" an put in the page that corresponds to the schema tag.

 

[Island]

Do you think Google Tag Manager is a good idea for a small local business that doesn't have that much tracking code (GA, Adwords, Facebook pixel, and maybe a couple of others)?

I'm wondering if its worth implementing Tag Manager for a client. I'm not that good at coding or Javascript and I keep hearing people saying that Google Tag Manager requires some coding knowledge. Not sure if its going to be worth the time to learn the platform for a fairly simple client site. Or maybe I should learn it just for the future so I'm comfortable with it?

Thanks!

 

[Phenom]

@Island 100%, I work at an agency and we deal with smaller clients and run GTM. It keeps your codebase lighter for sure. Also, schema. Creating custom HTML tags and adding schema via GTM is super powerful. I markup anything I can without even touching the code. This is also a great way to test stuff without breaking the page.
Here is a guestpost I did for SERPWoo https://www.serpwoo.com/blog/experts/google-tagmanager-adding-schema-markup/

 

[uzz]

Hey @Phenom - do you still recommend using Schema through GTM now that it doesn't show up in Googles testing tool?