There are tons of solutions available when you need to add a tracking code (or tag) to your WordPress website. Unfortunately, most of them use a WordPress plugin and if you are, like me, trying to avoid as much as possible installing extra plugins on your website, this tutorial is for you.
We will see how to code and configure your website with Google Tag Manager without any plugin. We will put the required code snippets directly into our child theme.
Google Tag Manager allows user to deploy and update measurement tags on your website and mobile apps without major changes and app releases.
The main benefit is that you only need to add a code to your website once. Then, for every tag you will want to implement in the future (for example a Facebook Pixel, Twitter Ad, LinkedIn Insight, etc.) you will deal directly with your Tag Manager dashboard.
Table of contents:
- Part 1: Setup and Configuration of Google Tag Manager (GTM)
- Part 2: Adding Tags to your website using GTM
- Troubleshooting
Part 1: Setup and Configuration of Google Tag Manager (GTM)
Step 1: How to configure Google Tag Manager?
If you don’t have your website container created yet, do it now. Go to your Google Tag Manager account. Click on Create Container, name it (your website name for example) and select the type of platform (Web, iOS, Android or AMP).
After clicking on “Create” you should see the code snippet. If not, click on “Admin”, and then “Install Google Tag Manager” to show the code snippets.
Keep this page open as you will need to copy both codes into your website.
Step 2: How to configure your WordPress site?
In this example we used the default WordPress theme TwentyTwenty, but this works with any theme. Copy the header.php from your parent theme, and paste it in your child theme folder (using a child theme is not a requirement, but a best practice).
Then, open your child theme header.php and paste both code snippet in place like in the picture below.
The first snippet needs to go as high as possible in the <head>...</head> HTML tag. The second code fragment needs to go right after your opening <body> tag.
Save your header.php.
Step 3: How to check that everything works correctly?
You can use the Tag Assistant (By Google) Chrome extension to help you check your site configuration. Or you can directly check the source code of your page and detect if the code you just pasted is showing.
Please note that you might have some caching on your browser / server / hosting and won’t be able to see the code change right away. Please see troubleshooting at the end of this article for more information.
Part 2: Adding Tags to your website using GTM
Google Tag Manager is composed of three main parts:
- Tags: Code snippet or tracking pixel from third-party companies (a Facebook pixel, a Twitter Universal Website Tag, Hotjar heatmap, etc.).
- Triggers: When should the tag be actually triggered (pageview, event, click, etc.).
- Variables: For example your Google Analytics Tracking ID (UA-XXXXXXX-X).
With Google Tag Manager, you usually create one Account, and then setup one Container per website. Inside each container you have Workspaces to group and manage your tag changes.
For this example we will add a Google Analytics tracking code to your website using Google Tag Manager.
Step 1: How to create a variable?
- Create a new Variable: Variables -> New
- Choose the variable type “Google Analytics Settings” in the list
- Add your Tracking ID (UA-XXXXXXX-X). You can find your tracking ID in your Google Analytics admin account
- Let the options by default (Cookie Domain: Auto)
- Name and save your Variable
Step 2: How to create a tag?
- Create a new Tag: Tags -> New
- Click on Tag Configuration and select “Google Analytics: Universal Analytics” in the list
- Let Track Type by default (it should be set to Page View)
- Select your previously created Variable in the dropdown list Google Analytics Settings
- Click on Triggering and select “All Pages – Page View” in the list
- Name your Tag and save it
Step 3: How to publish your GTM workspace?
Remember: you need to submit and publish your workspace in order to see the changes on your website.
- Click Publish on the top right corner
- Add a name and a description so you can remember what you have done in the future.
- You can double check the Workspace Changes to see what you have done since the last time you published.
- Hit “Publish” and you’re done.
Step 4: How to test your results?
If you already have confirmed your GTM container is in place and working, you can test the result directly into Google Analytics. Open your website on a browser and open your Google Analytics dashboard on second window.
You should be able to see your visit in real time. If you have other people watching your website at the same time, be sure to look at the location (the place you are right now) and eventually change from page to page in order to make sure you are viewing your own pageview.
Below is a second way of checking that everything works correctly, by using the Google Tag Assistant chrome extension. This extension is quite powerful and gives you a lot of information, I recommend that you check it out.
Don’t forget to deactivate any eventual Ad blocker or Google Analytics won’t see your pageviews.
Troubleshooting:
- Make sure you deactivate all ad blocker otherwise you won’t see your pageview live
- Make sure you didn’t filter your IP in the Google Analytics Admin Settings. (Filtering your IP address in Google Analytics allows you to remove your own views and events avoiding data discrepancy or inconsistency).
That’s the end of the tutorial, let me know in the comments below if you have anything to include or if you have any question.