Bubble_reverse_RGB

How To Add Google Tag Manager To WordPress

Web development
28 February 2021
Mark Tuxford
Mark Tuxford

If you’re looking for reliable, step-by-step instructions on how to install Google Tag Manager to your WordPress site, you’ve come to the right place. All you need is your Google Tag Manager container ID, which is a number that identifies your container, and WordPress site access, which you should have if you’re reading this.

What is Google Tag Manager?

Web managers/owners regularly need to add multiple code snippets to their websites in order to track conversions, traffic or allow external websites to interpret the site behaviour.

With Google Tag manager you can easily add and manage all of these scripts from a single dashboard. You can do this using the built in tag templates or by using custom HTML to add your own tracking or any other code that you want to add.

The benefit of this is the ability to add (and remove) code injections easily from your site whilst doing so from one dashboard.

Setting up Google Tag Manager

Create an account or use an existing one at tagmanager.google.com to login to your dashboard. A new container will be created by default; its this container that will hold all your code snippets such an Analytics, Adwords or Hubspot etc.

Tag Manager Dashboard

Note: You can also create additional containers within each account if this benefits your way of working.

Now that a container is installed, you’re ready to add new tags.

Click Tags from the navigation menu.

  • To add a tag: Click New. Select the tag type and specify triggers for when the tag should fire.
  • To edit a tag: Click a tag in the list and make changes on the “Edit Tag” page. For example, you might update the triggers for when the tag should fire.
  • To delete a tag: Click a tag in the list. On the “Edit Tag” page.

When you’ve chosen a new tag, hit the Tag Configuration box to bring up a list of pre made code snippet templates.

New Tag Dashboard

Adding Tag Manager to WordPress

You can achieve this by installing a plugin to you WordPress site such as Head, Footer Injections. Upon installing and activating the plugin you’ll be presented with a dashboard like this.

Head, Footer Injections Plugin Dashboard

From here you’ll be able to insert code into the common places such as in the section or after the **_ _**tag.

  • Proceed to paste your Google Tag Manager code in the section before the .
  • Click on the save button to store your settings.
  • Clear your cache.

If you do not wish to install or use a plugin, then you can also add the Google Tag Manager code in your WordPress or Child theme. Edit the header.php template and paste the code right after tag.

Publishing your container

You code snippets are managed inside your Tag Manager container and its this that will be pushed onto your live website environment.

When you have set up your tags it will be time to push the container live, you can do this by clicking the blue _Submit_button in the top right of the dashboard, which will bring you to the submission configuration (below). This page allows you to name your container version and give it a description if you wish. After this go ahead and hit the blue _Publish_button.

Publishing your Tag Manager Container

Thats it! Your code is live and should be working as intended. Told you it was simple. Due to the use of plugins etc, installing Google Tag manager on your WordPress site doesn’t require any coding knowledge as far knowing what a code snippet is and where to install it.

How to Integrate Google Tag Manager without a Plugin in WordPress

For those that want to do add Google Tag Manager to WordPress without using any plugins, you’ll need to add code to your functions.php file located in the theme.

Follow the steps below to achieve the installation;

Before adding additional code to your theme, ensure you’re using the child theme for changes to functions.php. If you don’t, your edits will simply be removed out the next time your theme updates.

  • In the WordPress dashboard, go to Appearance -> Editor.

  • On the right-hand side, you’ll see a file list.

  • Scroll down till you find “functions.php”.

  • Selecting this will open it up for editing in the text area.

  • Paste the below code at the bottom.

    function add_gtm_to_head() {

    $google_head_script = <<<EOD

    EOD;

    echo $google_head_script;

    }

    add_action('wp_head', 'add_gtm_to_head');

    function add_gtm_to_body( $classes ) {

    $block = <<<EOD

    height="0" width="0" style="display:none;visibility:hidden">

    EOD;

    $classes[] = '">' . $block . '<br style="display:none';

    return $classes;

    }

    add_filter( 'body_class', 'add_gtm_to_body', 10000 );

  • Replace the first piece of bold text in the example above with your own code, which is the first code tag you see in Tag Manager. The replace the second piece of bold text above with your own code.

Hallelujah! You’re done. It’s far easier to use a plugin rather than editing your theme code as one wrongly pasted line can cause real problems.

As well as the SEO resources listed above, feel free to leave a comment and I will try and get back to you as soon as possible or feel free to send us a message. Also, check out our guide on how to install rich snippets to your website.

Photo by Agnieszka Boeske on Unsplash

Share this article
Don't miss a post, subscribe to our newsletter
Explore how to make websites better, opinion pieces, and more
Get started

Write us a brief for your new website

Introduce yourself

Introduce the main contact

About your business

Next step