How to setup Google Tag Manager on a WordPress site (without plugins)
This article will show you how you can install Google Tag Manager (GTM) on a WordPress site without installing an extra plugin to do it for you.
If you are wondering why you should install Google Tag Manager, then you can read more about that here
Prerequisites:
- This guide is for a self-hosted WordPress.org site
- You have already created a Google Analytics account
1) Create your Google Tag Manager Account
Head over to https://tagmanager.google.com/ and create your Google Tag Manager Account by signing in with your Google account.
If this is the first time you’ve logged in, you should see the screen below
Click on “Create Account” and fill in the details for your account and site. Make sure you set your Target Platform to Web
Once you create your account and accept the terms & conditions, you should be presented with your tracking code.
If you don’t see the code, navigate to Admin -> Install Google Tag Manager
We are going to install this code on our WordPress site in the next step.
2) Install Tag Manager Tracking Code in WordPress
Now that we have retrieved the tracking code for Google Tag Manager, it’s time to install it on our WordPress site. In order to do this without a plugin we are going to edit our themes functions.php file to add the code.
You can either do this directly in WordPress or by using an FTP client like FileZilla to download and edit your functions.php file.
If you are using a theme you have purchased, I advise you to edit your child theme otherwise this will be overwritten if you update your theme in the future. (You can read more on child themes here)
Open up your WordPress sites “Theme Editor”
Now look for your “Theme Functions (functions.php)” file and select it. (Don’t worry if the contents look different to mine!)
The first script you have will go in between the two “ “ (inverted commas). This will add the Google Tag Manager code to the head section of your website so it loads as quickly as possible.
function add_gtm_to_head() {
$gtm_script = "
<!-- Google Tag Manager -->
<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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
";
echo $gtm_script;
}
add_action('wp_head', 'add_gtm_to_head', 10);Once you’ve added that, save it and make sure there’s no errors. Here’s what my functions.php file looks like after I’ve added it.
Now for the second script we need to add to our header.php file. We will add the second code snippet from Google Tag Manager just under the <body> tag
Here’s what it looks like after I’ve added it
Now save that file, make sure there’s no errors and that’s it!
3) Verify Google Tag Manager Is Installed
The quickest and easiest way to verify that you have installed tag manager is to enter “Preview Mode”. This is also really helpful for debugging your tag manager installation.
To do this, click on the “Preview” button in Google Tag Manager
Now reload your website, you’ll probably need to perform a hard refresh if it doesn’t show the first time. If everything has worked, then you will see the Tag Manager debug bar appear at the bottom of your website.
How To Hard Refresh
If the debug pane does not load, try a “forced refresh.” This action will force the web browser to reload any cached assets. On Chrome, the keyboard shortcuts for a forced refresh are:
Windows and Linux: Shift + F5 or Ctrl + Shift + r
Mac: ⌘ + Shift + r
And that’s it! Now that you have Google Tag Manager installed, you can start adding any tags such as Google Analytics or Facebook Analytics through Google Tag Manager instead of by updating the code on your website!