There’s a long list of reasons that make using Google Tag Manager (GTM) essential in digital marketing: but the single most important one is that consolidating all of your scripts into one specific place is a huge advantage these days.
- If you’re a small business website owner you may not have much (or any) engineering resources to push your tracking code to your WordPress website.
- If you’re working at a larger company, pushing a simple script to production can be costly, dangerous, and annoying to the engineers.
Google Tag Manager is a tag management tool that allows you to easily consolidate and push all of your marketing tools’ scripts safely, using a friendly user interface. This tool allows you to set a range of tags including Google Analytics and Google Ads.
In this step-by-step tutorial, you will be learning exactly how to add Google Tag Manager to your WordPress site, which should only take about 5 to 10 minutes.
Here’s a quick high-level overview of everything we’re going to do next.
- The goal: To add Google Tag Manager to your WordPress site.
- The ideal outcome: Google Tag Manager is properly installed and there are no technical issues.
- Prerequisites: This specific method is only applicable to WordPress.org installations, so anything on WordPress.com is not going to work, but if you’ve installed WordPress onto your domain, you should be fine.
- The importance of this action: As an internet marketer, a GTM account is a single place where you should be putting all of your tracking pixels because it allows you to easily manage all your tools, pixels, and code in one centralized spot while allowing you to preview your additions before pushing to production and to revert to previous versions very easily in case something goes wrong.
- Where this is done: This will be done in both your WordPress back-end and in Google Tag Manager.
- When this is done: Only once. You only have to install Google Tag Manager one time, and then you’re set going forward.
- Who does this: The WordPress admin who is managing your website or your analytics, anyone running paid campaigns, your web developer, or maybe just you.
Before getting your hands dirty, make sure you download the free SOP (Standard Operating Procedure) that complements this blog post. It will teach you exactly what to do, which tools to use, and what to look for with an almost painful level of detail:
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 container and account 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 Google Tag Manager codes. There are two methods you can use at this point:
a) Do as instructed on the page:
- The first GTM code snippet: they will ask you to take it and paste it as high in the opening body tag section of your HTML as possible. You should do this for all of your site’s web 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, 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 be 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 on 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 GTM to WordPress
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 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 theme sidebar, go to “Appearance” → “Editor”.
c) Make sure you’re editing the WordPress theme that you currently have installed on 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):
Checking For Errors
Now that you have set up Google Tag Manager and installed it on your WordPress website, it’s time to check for errors. This is also known as quality assurance, or “QA”.
- 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 a new tag, and track and remove all pixels, tools, events, and pageviews 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 do it, download and use the free SOP (Standard Operating Procedure) that accompanies this blog post here.