Google Tag Manager for Beginners: Overview and Setup

February 16, 2016 | 6 min read
By Adam Smith

If you missed it, I did the marketing version of this song to Google Tag Manager (GTM) a few months back. I’m East Side and GTagMan is West Side. Since then, I have done several more tag implementations using Google Tag Manager. While I still feel my beefs are valid, I want to give my people some useful guidance on using GTM. Hopefully, I can keep this feud from escalating to violence. I don’t want to end up performing as a hologram at Coachella.

What the Heck Is Google Tag Manager Again?

Websites are getting increasingly more sophisticated. Not only do you have your own code, you are adding services such as:

    • Analytics
    • Ad platforms
    • Marketing automation
    • Customer relationship management
  • Raptorize (for when you absolutely MUST insert a moving raptor onto your page)

Implementing these services usually meant you had to get the attention of your friendly web developer. That is the same person who is probably implementing new sections of your site, optimizing images, doing site support, updating content, coding forms, and fronting a rap-rock band in their off-hours. Needless to say, they’re busy and usually get to your requests in about three to five years, depending on the holiday schedule.

Web developers have known for a long time the power of include files. You take one chunk of code that you use often and just “include” it on the pages that you need it. This is great for sections of your site that appear on every page like headers and footer, navigation or just select pages like sidebars and advertisements. When this shared code needs an update, you update one file and it automagically changes everywhere on the site. This is the basic premise of Google Tag Manager — one source for your external scripts that allows you to update once and deploy across your entire site. Since you update Google Tag Manager through the GTM website, you don’t need to bother your over burdened web dev.   

Setup

Screenshot of new account screen in Google Tag ManagerCreating your account

If you have a Google account, signing up is easy-breezy.  Head on over to googletagmanager.com, and click the “Sign Up For Free” link. Once you put in your Google Account credentials, you are good to go. Name your account and continue on.

Next is the container setup. GTM suggests you use the URL of your site for the container name, but you are free to name it whatever you want. You are presented with three choices on where to use the container, Web, iOS, or Android. Unless you are doing app development, choose Web. 

What the heck is a container? It’s a bucket for code. Instead of you or your web developer putting all sorts of different code in your site for varying services, you now just put in the code for your container. Now, you can add all the fun little code snippets into your bucket through the Tag Manager interface instead of harassing your poor web dev 11ty billion times a day.   

Your account can have many containers. This is useful if you blog is on a subdomain or you manage several sites. You can also have access to many different accounts. If you are a world-class digital marketing agency like Marketing Mojo, you might have been granted access to dozens of Google Tag Manager accounts. 

Last, agree to a ToS agreement and your account is setup!

Screenshot of Google Tag Manager Home Screen

You made it! The home screen for your container.

Installing the code on your site

Now you are presented with some lovely JavaScript. GTM instructs you to copy and paste the code after the opening body tag on every page of your site. EVERY PAGE because you won’t be able to implement tags on pages without it. Load this sucker onto your site or send it over to your friendly web guru for implementation. Make sure you let them know that you will bug them less after this is online. Also, give them a treat. Web developers LOVE treats. 

Once it is ready on your site, let’s move on to actually putting stuff in this bucket. Here is an example with the account id masked to protect the innocent. You can check to see if it’s installed on your site by viewing the source of any page and search for “Google Tag Manager.” If you see this code, you are ready to begin.

[code]

<!– Google Tag Manager –>
<noscript><iframe src=”//www.googletagmanager.com/ns.html?id=GTM-XXXXXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘//www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM-XXXXXX’);</script>
<!– End Google Tag Manager —>

[/code]

The Details

Versioning

To protect you from yourself, GTM offers a versioning system. This allows you to see what changes have been made to your container over time and roll back to a previous version if you dun goofed really hard.   Screenshot of Google Tag Manager Publish/Preview/Save as New Version dropdown menu

Preview and debug

I really do love this feature. Once you have setup your first tag (easy now, we’ll get to that), you can put GTM into “Preview and Debug” mode. This injects the new container into your site on your browser only and gives some handy information on what is going on within your container.   

Screenshot of the version information in Google Tag Manager.

Wrap Up

While I don’t think my feud with Google Tag Manager is over quite yet, I’m willing to concede that it can be a useful tool and provide a nice degree of separation from your site code and other tags. Tracking and tagging are vital to having a successful website. Just remember, “mo money mo problems” doesn’t apply to a successful business. 

Stayed tuned for Part two, which will be all about how to make this actually work for you using triggers and tags.

Questions, comments, or want to have a rap battle? Comment below or hit me up on Twitter: @Schmack.


What We've Learned from Super Bowl Search Data
How to Use Google Analytics Behavior Reports
Subscribe to the Digital Marketing Tip!
Get the latest insights and time-tested wisdom from veterans of the digital marketing industry.

Google Tag Manager for Beginners: Overview and Setup

February 16, 2016 | 6 min read
By Adam Smith

If you missed it, I did the marketing version of this song to Google Tag Manager (GTM) a few months back. I’m East Side and GTagMan is West Side. Since then, I have done several more tag implementations using Google Tag Manager. While I still feel my beefs are valid, I want to give my people some useful guidance on using GTM. Hopefully, I can keep this feud from escalating to violence. I don’t want to end up performing as a hologram at Coachella.

What the Heck Is Google Tag Manager Again?

Websites are getting increasingly more sophisticated. Not only do you have your own code, you are adding services such as:

    • Analytics
    • Ad platforms
    • Marketing automation
    • Customer relationship management
  • Raptorize (for when you absolutely MUST insert a moving raptor onto your page)

Implementing these services usually meant you had to get the attention of your friendly web developer. That is the same person who is probably implementing new sections of your site, optimizing images, doing site support, updating content, coding forms, and fronting a rap-rock band in their off-hours. Needless to say, they’re busy and usually get to your requests in about three to five years, depending on the holiday schedule.

Web developers have known for a long time the power of include files. You take one chunk of code that you use often and just “include” it on the pages that you need it. This is great for sections of your site that appear on every page like headers and footer, navigation or just select pages like sidebars and advertisements. When this shared code needs an update, you update one file and it automagically changes everywhere on the site. This is the basic premise of Google Tag Manager — one source for your external scripts that allows you to update once and deploy across your entire site. Since you update Google Tag Manager through the GTM website, you don’t need to bother your over burdened web dev.   

Setup

Screenshot of new account screen in Google Tag ManagerCreating your account

If you have a Google account, signing up is easy-breezy.  Head on over to googletagmanager.com, and click the “Sign Up For Free” link. Once you put in your Google Account credentials, you are good to go. Name your account and continue on.

Next is the container setup. GTM suggests you use the URL of your site for the container name, but you are free to name it whatever you want. You are presented with three choices on where to use the container, Web, iOS, or Android. Unless you are doing app development, choose Web. 

What the heck is a container? It’s a bucket for code. Instead of you or your web developer putting all sorts of different code in your site for varying services, you now just put in the code for your container. Now, you can add all the fun little code snippets into your bucket through the Tag Manager interface instead of harassing your poor web dev 11ty billion times a day.   

Your account can have many containers. This is useful if you blog is on a subdomain or you manage several sites. You can also have access to many different accounts. If you are a world-class digital marketing agency like Marketing Mojo, you might have been granted access to dozens of Google Tag Manager accounts. 

Last, agree to a ToS agreement and your account is setup!

Screenshot of Google Tag Manager Home Screen

You made it! The home screen for your container.

Installing the code on your site

Now you are presented with some lovely JavaScript. GTM instructs you to copy and paste the code after the opening body tag on every page of your site. EVERY PAGE because you won’t be able to implement tags on pages without it. Load this sucker onto your site or send it over to your friendly web guru for implementation. Make sure you let them know that you will bug them less after this is online. Also, give them a treat. Web developers LOVE treats. 

Once it is ready on your site, let’s move on to actually putting stuff in this bucket. Here is an example with the account id masked to protect the innocent. You can check to see if it’s installed on your site by viewing the source of any page and search for “Google Tag Manager.” If you see this code, you are ready to begin.

[code]

<!– Google Tag Manager –>
<noscript><iframe src=”//www.googletagmanager.com/ns.html?id=GTM-XXXXXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘//www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM-XXXXXX’);</script>
<!– End Google Tag Manager —>

[/code]

The Details

Versioning

To protect you from yourself, GTM offers a versioning system. This allows you to see what changes have been made to your container over time and roll back to a previous version if you dun goofed really hard.   Screenshot of Google Tag Manager Publish/Preview/Save as New Version dropdown menu

Preview and debug

I really do love this feature. Once you have setup your first tag (easy now, we’ll get to that), you can put GTM into “Preview and Debug” mode. This injects the new container into your site on your browser only and gives some handy information on what is going on within your container.   

Screenshot of the version information in Google Tag Manager.

Wrap Up

While I don’t think my feud with Google Tag Manager is over quite yet, I’m willing to concede that it can be a useful tool and provide a nice degree of separation from your site code and other tags. Tracking and tagging are vital to having a successful website. Just remember, “mo money mo problems” doesn’t apply to a successful business. 

Stayed tuned for Part two, which will be all about how to make this actually work for you using triggers and tags.

Questions, comments, or want to have a rap battle? Comment below or hit me up on Twitter: @Schmack.

Share This Post
PREVIOUS POST

What We've Learned from Super Bowl Search Data
NEXT POST

How to Use Google Analytics Behavior Reports
Subscribe to the Digital Marketing Tip!
Get the latest insights and time-tested wisdom from veterans of the digital marketing industry.