WordPress is the most popular content management system (CMS) out there. Powering almost 40% of the internet websites, according to W3Techs.
In my last article we have discovered how to create a Google Tag Manager account and container. Now that you have this covered I will show you 3 different ways through which you can implement the GTM code in your WordPress website.
Just as a refresher, GTM is one of the best tag management platforms out there. It can allow you to simply implement snippets of code (remarketing codes, conversion codes) to your website without the need of programming know-how.
Disclaimer: Although WordPress is the most popular CMS not all WP implementations are born equal, different combinations of WP versions, themes, plug-ins, custom code can influence the way you will need to implement the code in your website.
With that out of the way let’s see…
How to install GTM in your WordPress Website
Below I will show you three methods on how to achieve this. Two methods are based on plugins and one where you implement the code directly in your WordPress files. I do strongly recommend sticking to the plugins if you don’t want to bother with any code changes.
Method 1: Google Site Kit Plugin (Recommended)
The most straightforward way of implementing the GTM code that I’ve found is using the Google Site Kit, a WordPress plugin developed by Google themselves.
I chose this this way to implement the GTM code on my website because of 3 main reasons:
- It has a very simple setup process.
- It’s made by Google, which also developed Google Tag Manager.
- The plug-in also gives you the ability to connect to multiple services (e.g. Page Speed Insights, Search Console) and a dashboard where all the information can be displayed.
How to implement GTM code using Google Site Kit Plugin
The process of setup has two parts. The first one is the set up of the Google Site Kit plugin, which we will cover right below and the second is the linking of the Google Tag Manager service through the Site Kit.
Even if it sounds complicated it is as simple as it can get, because you basically just have to go through some simple steps.
Setting up the Google Site Kit plugin
- Go to Plugins -> Add New, search for “Google Site Kit”, install and activate the plugin.
- Click the “START SETUP” button, after the plugin is successfully activated.
- You will now be taken to another page with three steps, to start the process click “Sign in with Google” button.
- Select your Google account by clicking it and give Site Kit the required permissions, by clicking on the “Allow” button.
- Now you will simply need to go through the three steps we’ve seen earlier, by clicking the “Proceed” buttons for steps one and two and “Add site” for the final step.
- Congratulations! Site Kit has been successfully set up for your WordPress site. Now click the “Go to my Dashboard”.
Linking Google Tag Manager trough Site Kit
- Starting where we left off above, navigate to Site Kit -> Settings, and click on the “Connect more services” tab and click the “Set up Tag Manager” hyperlink.
- Sign in with your google account, again, accept the required permissions, again.
- Select the proper Account and Container, take into consideration that you might need to click the drop-down menu and select the right account if you have access to multiple accounts. Click “Confirm & Continue”.
- Congratulations! Google Tag Manager is now connected and live on your website!
In order to see all the connected Google services navigate again to the Site Kit -> Settings. You can also see details here related to the connected accounts (i.e. Container ID for GTM).
Method 2: Adding the code yourself (aka Harcoding)
For the second options I’ve wanted to show you a different way of implementing the code. This is the most obvious path for a tech person, but it might not be the right way for you if you don’t possess the required technical know-how.
Disclaimer: This implementation method tempers with the theme files. Any unwanted changes here can cause your website to malfunction so be mindful of this when making any changes in those files. I do not take responsibility for any changes that might affect your website in any negative way.
How to implement GTM code directly in the header.php file
- Navigate to Appearance -> Theme Editor
- If you are accessing this section for the first time you will see a notification message informing you about the risks associated with editing any of the contained files. Click “I understand”
- Access the “header.php” file from the right-side “Theme Files”
- Go back to your GTM and copy the <head> section of your code and add it right below the opening <head> tag in your WordPress file.
- Go back to your GTM and copy the <body> section of your code and add it right below the opening <body> tag in your WordPress file.
- Click “Update File”.
- If everything went smooth the GTM code should be active on your website now.
Method 3: Using Google Tag Manager for WordPress Plugin
This is a great alternative to the Google Site Kit plugin, actually this one was the only option available before the Site Kit was available. I would recommend going this way if for some reason Site Kit does not work for your website.
You can read more about this plugin and download it by accessing it’s official website.
I won’t delve much in the implementation of this particular plugin because there are already great sources of information out there.
The implementation process is pretty straightforward, you will have to:
- Go to Plugins -> Add New, search for “Google Tag Manager for WordPress”, install and activate the plugin
- Go to Settings -> Google Tag Manager
- Under the General tab add your GTM ID in the “Google Tag Manager ID” field and select your preferred container code placement form the 4 available options. Here you can go with the “Footer of the page” option to avoid other changes.
- You are done!
BONUS: How to check if your implementation was successful
There are multiple ways to check if the GTM is active on your website. The one I strongly recommend is using Google Tag Assistant. It’s a free Chrome extension that allows you to see all the tags on a particular page.
To use the extension simply install it (you can use the link above to go to the extension page) and click on it’s icon from the extensions bar in Chrome to activate it. Now you will be able to see all the tags from the particular page you are viewing.