This article shows you how to add the Google Tag Manager (GTM) code to your WordPress Child theme in four easy steps. Before starting you should already have set up your Child Theme, Tag Manager & Google Analytics.

Why You Want to Add Tag Manager to Your WordPress Child Theme

Adding the Tag Manager code to your child theme ensures that it is never overwritten when you update your theme and gets you away from having to use Plugins which can slow down your site.

The four steps for adding Google Tag Manager to your child theme are:

  1. Get Your Google Tag Manager code
  2. Insert the GTM code into the template
  3. Add the code to your child theme’s function.php file
  4. Test to make sure it works

Step 1 – Get Your Google Tag Manager Code

Once you have set up your Tag Manager go to Tag Manager > Admin > Install Google Tag Manager. That should take you to a screen which has two sets of code blocks and will look like the following:

If you are having any issues setting up your Tag Manager, make sure to visit the Google Tag Manager help page or check out one of the many videos and or “How to Set Up Tag Manager” articles out there.

Step 2 – Insert the GTM code into the Template

Open a text editor and copy the code below.  Then take the two sections of code from Step 1 and insert them into the template below, replacing the “//Replace with…” text with the  two separate the GTM code portions.

add_action('wp_head','my_analytics', 20); 
  function my_analytics() {
?> 

// Replace with first Tag Manager code

<?php
}

add_action('__before_header','tag_manager2', 20);
  function tag_manager2(){
?>

// Replace with second Tag Manager code

<?php
} 
  You should get something that looks like the following:
add_action('wp_head','my_analytics', 20);
  function my_analytics() {
?>

<!-- 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 -->

<?php
}

add_action('__before_header','tag_manager2', 20);
function tag_manager2(){
?>

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) --> 

<?php 
}

If you’re interested, here’s a very quick explanation of what is happening. If not, proceed to: Step 3 – Adding the Code to your Child Theme

add_action('__before_header','tag_manager2', 20);
add_action() tells it to add, or hook, the following function (code) into your theme.


add_action('__before_header','tag_manager2', 20);
The first part inside the brackets defines where we want that code to be placed in the theme:

  1. ‘wp_head’ puts it at the very top of the <head>
  2. ‘__before_header’ places the code at the top of the <body>. Note: The “header” is different than the <head>. The header is located at the top of the <body>, where we want the second bit of GTM code to be.

add_action('__before_header','tag_manager2', 20);
The next part names the function that we want to insert. (i.e. the Tag Manager tracking code)


function tag_manager2() {
?>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<?php
}

We then define what the function will do. This is where we paste the Tag Manager code.

Step 3 – Add the code to your child theme’s function.php file

You should now have your GTM code inserted in the template from step 2 and sitting in a text editor. There’s a couple of ways you can add this code to your child theme. I’m going to go over the simplest way of doing it but this can also be done in your Control Panel or with an FTP client like Filezilla.

First make sure your site is backed up and you should also have a copy of your Child Theme’s function.php file open in case things go wrong. If you don’t have access to the FTP or Control panel there is a simple (if inelegant) workaround to “backup” your child’s function.php file, which I’ll explain below. Now let’s add the code.

  1. Go into the WordPress dashboard, making sure you are using your Child theme, and go to: Appearance > Editor
  2. On the right side, click on Theme Functions (functions.php).

**If this is your first time in the editor you will get a warning message. If you do the next step wrong you’re going to break your site. You’ve been warned.

Make sure you open up your child theme’s functions.php file and make a copy of this file in a text editor. This will be your Oh sh!! backup in case things go wrong. You can minimize this window, hopefully you’ll never have to use it. If something goes wrong and the site does go down, the easiest and quickest way to fix the issue is to delete the code you added and re-save the function.php file.

Paste your finished code to the bottom of the file & hit save

In WordPress you should be looking at your child theme’s functions.php file. There should be a bunch of code and then usually a message at the bottom that says something like:

/** add your custom functions here**/.

Paste the entire code from Step 2 at the bottom of your child theme’s function.php file.

Step 4 – Confirm that it is working

Confirm you haven’t broken your site.

Open a new tab and go to the live site. Check if the site is working by hitting ctrl + F5 (command + F5 on a Mac). If the site is down, go back to the functions.php file and remove the code you added to the bottom of the file. Save and make sure the site is working.

Troubleshooting:
a. Check that you copied and pasted the entire code correctly. Start from scratch if necessary to make sure there were no typos.
b. If you have copied the code correctly and it still doesn’t work, you’re going to need to find someone with programming knowledge or alternatively use a plugin.

Site is Working - Confirm the tracking code is working

I find the easiest way to see if it’s working is to go to your Google Analyics > Real-Time > Overview. Open a new tab and go to your website. In Analytics you should see an active user on your site from your region. Try a couple of pages to make sure it’s working properly.

If your site already has a lot of traffic and/or you are you are transferring from Analytics to Tag Manager and still have the Analytics tracking code, you can check out this list of other ways to check whether your Tag Manager is working.

Troubleshooting:
a. Check to confirm you set up Tag Manager correctly
b. Check to confirm you copied the entire Tag Manager code into the template correctly
c. In Analytics, check to make sure you are not using a view that blocks your local IP address (embarrassingly I did this once)

There you have it, the four steps to adding Google Tag Manager code to your WordPress child theme. As an FYI, this has been tested and used on numerous themes and sites.

If you have any questions or would like someone to help setting this up, please feel free to contact me.