Environment Setup for Adding Google Tag Manager
Before you move on to the actual setup of Google Tag Manager:
- Install the Google Tag Assistant Chrome Extension. This tool is extremely helpful not just for Google Tag Manager setups, but also to debug many other tracking tools.
- Sign up for a new account on Google Tag Manager if you haven’t done this already:
a) If this is your first time creating a Google Tag Manager account, you will be prompted to set one up.
b) For now, you can enter your company’s website and the company name for both the account and the container name. In our case, this was http://www.asiteaboutemojis.com/, our testing ground.
c) Select your country.
d) Click “Continue”.
e) Enter the container name (the actual website).
f) Under “Where to Use Container”, select “Web”.
g) Accept the terms of service – read them if you want, but the short version is that you sign your life away to Google.
- Once you have set up your Google Tag Manager, the platform will give you two codes. There are two methods you can use at this point:
a) Do as instructed on the page:
- The first GTM code: they will ask you to take it and paste it as high in the <head> section of your HTML as possible. You should do this for all of your site’s pages.
- The second GTM code: they will ask you to paste this immediately after the opening of the <body> tag.
- Remember, if you are hand-coding or hand-designing your site, and if you want to paste the code in there, you can definitely do this – but otherwise, specially if you are using WordPress, we have an easier method, as shown below.
b) Don’t do as instructed on this page, and follow this easier method (only for WordPress) instead:
i. Hit the “OK” button without doing anything with the codes they offer you when you first sign up for Google Tag Manager.
ii. When you open your Google Tag Manager dashboard, the first thing you see is your Google Tag Manager ID (up top). Right click and copy that into a note to have it later on, when you install Google Tag Manager on your WordPress website.
iii. Click on the “Submit” button at the top right-hand corner.
iv. The pop-up on the screen will allow you to add Version Names and Version Descriptions of the Google Tag Manager containers. This will useful in the future when you will want to push other Google Tag Manager containers – but for now, you can leave it as it is.
v. Click the “Publish” button at the top of the page to push the GTM container.
vi. Skip the description and click “Continue”. Your Google Tag Manager is now live.
Adding Google Tag Manager to Your WordPress Website
Now that you’ve set up the Google Tag Manager account and published your first container, it’s time to set it all up in WordPress as well. To do this, you will have to install a WordPress plugin, and then edit the custom HTML theme a bit.
- Go to your WordPress Dashboard.
- Go to Plugins → Add New.
- Go to the search bar in the upper right-hand side of the screen, under “keyword”, and search “Google Tag Manager”.
- You will see a lot of options available there, a lot of which work. However, the easiest one and the one I’m going to show you today is usually the first one that shows up. It’s called “DuracellTomi’s Google Tag Manager for WordPress”.
- Click “Install now”.
- Once installed, click “Activate”.
- Go to settings down, on the left-hand side, click on “Google Tag Manager”.
- Paste the Google Manager ID you copied from your Google Manager Account earlier on.
- Leave the “Container code placement” to its default, “Custom”.
- Click “Save Changes”.
- You will have to tweak your WordPress template just a little bit in order to get this to go. This is a one-time thing and once you make it work, you can add and remove pixels ad nauseam, forever and ever.
a) Copy the php code they show right above the “Save Changes” button.
b) In the WordPress sidebar, go to “Appearance” → “Editor”.
c) Make sure you’re editing the theme that you currently have installed in your site. Everyone’s theme is going to look a little bit different, but I’ll show you the way to do it that should apply to most WordPress websites.
d) Select “Theme Header” from the list on the right. If you can’t find the “Theme Header” in the list, use CTRL+F (Windows keyboards) or Command+F (Mac keyboards) to look for your “header.php” file.
e) Find the body tag – it’s usually near the top. Again, if you can’t find it, press CTRL+F or Command+F and search for “<body”.
f) Hit Enter right after thetag.
g) Paste the little snippet of php code that the Google Tag Manager plugin gave you before.
h) Scroll down and click “Update File”.
Once you’re done with this section (or any of the following ones), don’t forget to mark it as done on the free SOP (Standard Operating Procedure) that accompanies this blog post (if you haven’t downloaded it yet, get it in the beginning of the blog post):
QA the Google Tag Manager Installation
Now that you have set up Google Tag Manager and installed it to your WordPress website, it’s time to QA the entire process:
- Go to your website.
- Click on the Google Tag Assistant Chrome Plugin you installed earlier.
- Leave all the default settings there.
- Click “Done”.
- Click “Enable”.
- Reload the page and you will see that Google Tag Manager is working.
That’s it! That’s how you add Google Tag Manager to your WordPress website. Doing this once will allow you to easily add, track, and remove all pixels, tools, and events, on your website, so that you can easily manage your digital marketing efforts.
If you want to do this periodically or have a member of your team to do it, download and use the free SOP (Standard Operating Procedure) that accompanies this blog post here.
Even More Resources
If you’re JUST getting started with digital marketing, we have a number of awesome guides you can use to get going. Take a look at our digital marketing strategy guide or our seo strategy guide.