How to Install Google Tag Manager On WordPress
Google Tag Manager

How to Install Google Tag Manager On WordPress

Connor Bearse
Connor Bearse
Operations Manager
How to Install Google Tag Manager On WordPress

In order to effectively utilize tracking tags on your website, you need to install Google Tag Manager on WordPress. This article will show you how to do that no matter which WordPress theme you are using!

Google Tag Manager (sometimes shortened to GTM) makes it easy for you to add tracking codes (tags) to your website without having to edit the actual code of WordPress yourself. It also allows you to manage all of your tags from one place with some great quality of life features like versioning and no hassle Google Analytics setup.

So, if you're looking for an easy way to get started with Google Analytics or other tracking tools, GTM is a good option.

In this tutorial, we'll walk you through the steps of installing Google Tag Manager on WordPress.

This walkthrough is broken down into steps outlined below. Feel free to click a step in the outline to skip right to the specified step.

Let's get started!

The GTM Account Structure

To fully understand how to setup Google Tag Manager it's important to understand some vocabulary and account structure first.

Your Google Account - This is your normal Google Account that you log into Gmail, YouTube, Google Docs, and more with.

A Tag Manager Account - This is a company-specific account that can be created to house multiple Google Tag Manager containers. You can have multiple Tag Manager accounts associated with your Google Account.

Google Tag Manager Container - This is what we install on your website. A Google Tag Manager container lives inside a Tag Manager Account. You can have multiple containers inside an account (i.e. your company or brand has multiple websites.)

Let's look at this hierarchy visualized. Remember, you can have multiple Tag Manager accounts associated with your Google Account - and then you can have multiple containers associated with each Tag Manager account.

The Google Tag Manager Account Hierarchy

Now, let's look at the hierarchy applied to the Google Tag Manager "All Accounts" view with multiple accounts and containers. This is the page that you will most likely see when navigating to the Google Tag Manager website.

The Google Tag Manager Account Hierarchy Shown on the Website

Create Your Google Tag Manager Account & Container

To get started with Google Tag Manager all you need to do is navigate to the GTM website ( https://tagmanager.google.com/ ) and sign into your Google Account.

Once you are logged in, you will have the option available to "Create Account". Click the button.

Creating a new Google Tag Manager Account

A screen will pop up asking you for information about the Google Tag Manager account and the first container associated with the account. Fill out the following:

  • Account Name
  • Country
  • Container Name - I like to use the domain that the container will be installed on
  • Select the target platform - for the purposes of WordPress choose "Web".
Setting Up Your Google Tag Manager Account

On the next screen you will be asked to accept the terms of service. Please review and accept if you are willing.

Accepting the Google Tag Manager Conditions

If all went well, you will be welcomed with the installation code!

You can navigate back to this screen at any time, but it is a good idea to save this code somewhere safe as we will need it when installing Google Tag Manager on your website.

The Google Tag Manager Installation Code

The next step is to install this code onto your WordPress website!

To get to the right instructions, choose from the following options for your WordPress configuration:

If you need to find your installation code again then the next section is for you!

Find Your Google Tag Manager Installation Code

If for any reason at all you need to get back to your Google Tag Manager installation code, here is how you access it:

Navigate to the Google Tag Manager container that you want to find the code for.

On the "Overview" screen, which should be the default screen you see after navigating to the container, click the container ID at the top right. The ID usually starts with "GTM".

Where to click to find your Google Tag Manager installation Code

After you click on the ID, this pop-up will show up with your Google Tag Manager installation code.

The Google Tag Manager Installation Code

Verify Your Google Tag Manager is Live

After your Google Tag Manager account and container are created, it's always a good idea to verify that your container is live.

Nothing is worse than trying to troubleshoot why your installation is not working only to realize that your container is not live!

To verify that your Google Tag Manager Account and container are live, start by clicking the "Versions" tab in the container navigation menu.

Navigating to "Versions" in the Google Tag Manager menu.

The versions screen will tell you whether or not your container is live!

Verifying your Google Tag Manager is Live
This Google Tag Manager Account and container is live and can be installed!

Add The GTM Code To WordPress

Now that you have your Google Tag Manager Account and container setup, verified it's live, and have access to the installation code - let's get it installed into WordPress!

Be sure to keep your installation code handy for this section as we will be copy and pasting it. If you don't have your code, click here to jump to the section on finding your Google Tag Manager Installation Code.

In this tutorial, we are going to cover installing the code natively with two extremely popular WordPress themes (Elementor and Divi), and then cover how to install the code on any WordPress website - no matter the theme.

For Websites That Use Elementor

If you are using Elementor on your WordPress website, then installing Google Tag Manager involves adding two "Custom Code" snippets into the Elementor settings.

1) Log into the backend of your WordPress website

2) On the left-hand navigation menu select "Elementor". This will reload the page with more menu options now available under the "Elementor" navigation item

3) In the Elementor Sub-menu select "Custom Code"

4) If you do not have custom codes created, you will see the following screen with a green button that says "Add New Custom Code"

Navigating to Custom Code in Elementor

If you have existing custom codes, you will need to select "Add New" at the top of the page

5. You will be brought to a page where you will need to complete the following (see image below for screenshot)

  • Set your Title to "Google Tag Manager"
  • Set the Location to <head>
  • Copy and paste the <head> code from your Google Tag Manager installation code
  • Hit Publish
Configuring an Elementor Custom Code snippet for the head code of Google Tag Manager

6) Once you hit "Publish", a new screen will pop up. This is the Elementor "Publish Settings".

Verify that the condition says "Include: Entire Site" and hit "Save and Close"

Configuring the Elementor Publish Settings for a Google Tag Manager Installation

7) The first code snippet is now saved! Let's hit the "Add New" button to add the second necessary code snippet.

Adding a new custom code snippet in Elementor

8) Now we will set up this tag just like before, with just a few tweaks.

  • Set your Title to "Google Tag Manager (body)"
  • Set the Location to <body> - Start
  • Copy and paste the <body> code from your Google Tag Manager installation code
  • Hit Publish
Configuring an Elementor Custom Code snippet for the body code of Google Tag Manager

9) The Elementor Publish Settings will pop up again. Verify that the code will display on the entire site and then hit "Save and Close".

Configuring the Elementor Publish Settings for a Google Tag Manager Installation

That's it! You have successfully installed Google Tag Manager on your Elementor WordPress website. The screenshot below is what your "Custom Code" settings page will look like after setting up both code snippets.

A fully configured Google Tag Manager Installation on an Elementor WordPress website

The only thing left is to verify that your Google Tag Manager is installed correctly!

You can click here to skip to our section on verifying your Google Tag Manager Installation.

For Website That Use Divi

If you are using Divi from Elegant Themes for your WordPress website, then installing Google Tag Manager involves adding the code to the integrations tab in the Divi settings.

1) Log into the backend of your WordPress website

2) On the left-hand navigation menu select "Divi" which will navigate you to the Divi Theme Options

3) In the Divi Theme Options navigation menu select "Integrations"

Navigating to the Integration settings on a Divi WordPress website.

4) On the Integrations page you will need to locate the box labeled "Add code to the < head > of your blog". Copy and paste the <head> code from your Google Tag Manager installation code into this box

5) On the same page, find the box labeled "Add code to the < body > (good for tracking codes such as google analytics)". Copy and paste the <body> code from your Google Tag Manager installation code into this box

Where to put the Google Tag Manager installation code on a Divi WordPress website.
Click this screenshot to view the full-sized image

6) Scroll down and hit "Save Changes"!

Saving the Divi Integration Settings

You have successfully installed your Google Tag Manager container onto your Divi WordPress website!

Now, it's best practice to verify that your installation is live on your website.

You can skip to our section on verifying your Google Tag Manager Installation.

Install Google Tag Manager On Any WordPress Theme

If you are not using Divi or Elementor, you can still easily get Google Tag Manager installed on your WordPress website!

To do so, we will be installing a plugin that will allow us to install two code snippets.

1) Log into the backend of your website

2) Install the following plugin on your WordPress website and verify that the plugin is enabled: WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager

WPCode Insert Headers and Footers installed and enabled on WordPress

3) On the left-hand navigation menu select "Code Snippets". This will reload the web page and show more menu options under the "Code Snippets" menu

4) On the left-hand navigation menu select "+ Add Snippet"

5) In the "Add Snippet" window select the "All Snippets" category

6) Find the snippet titled "Add Your Custom Code" and select "Use Snippet"

How to add a code snippet using WPCode's Code Snippet Plugin

7) Now we will be greeted with a page that allows us to configure the first code snippet

  • Set your Title to "GTM Head"
  • Switch the snippet to "Active"
  • Set the Code Type to "HTML Snippet"
  • Copy and paste the <head> code from your Google Tag Manager installation code into the text area
  • Set the Location to "Site Wide Header"
  • Hit "Save Snippet"
Configuring a Code Snippet for Google Tag Manager's Header code

8) The first snippet is complete! Now let's repeat the process of creating a new snippet

How to add a code snippet using WPCode's Code Snippet Plugin

9) And configure the second snippet as follows:

  • Set your Title to "GTM Body"
  • Switch the snippet to "Active"
  • Set the Code Type to "HTML Snippet"
  • Copy and paste the <body> code from your Google Tag Manager installation code into the text area
  • Set the Location to "Site Wide Body"
  • Hit "Save Snippet"
Configuring a Code Snippet for Google Tag Manager's Body code

10) Your tags are now configured and Google Tag Manager is installed on your WordPress website!

The following screenshot shows what this configuration should look like from the main "All Snippets" menu

Google Tag Manager configured using WPCode's Code Snippet WordPress Plugin.

Keep reading on to verify that your website has the code installed correctly using Google's own Tag Assistant tool.

How to Verify Your Google Tag Manager is Installed Correctly

Getting the Google Tag Manager code onto your website is only the first step. The only way for you to be 100% sure that your installation is correctly configured is by utilizing a tool that will confirm it for you.

Lucky for us, Google supplies us with that tool in the form of Tag Assistant.

Let's take a look at how to use Google Tag Assistant to verify our Google Tag Manager installation:

1) Navigate to https://tagassistant.google.com/ and log in with the same Google Account as your Google Tag Manager account

2) Click the "Add Domain" button

Adding a domain to Google Tag Assistant

3) Enter in the full URL (https:// included) and hit "Connect"

Configuring a domain on Google Tag Assistant

4) If all goes well, you will see a "Connected!" screen on the window with Tag Assistant, and a little box at the bottom right of the domain that says "Tag Assistant Connected"

5) Hit "Continue" on the tag assistant window - do not hit "Finish" on your website.

Navigating a successful Google Tag Assistant Connection

6) Now, to verify that your Google Tag Manager container is installed and published correctly you need to verify that the Google Tag Manager Container ID is showing up in the tag assistant window

Verifying Your Google Tag Manager is Installed Correctly by cross referencing the Google Tag Manager ID

7) If the ID is showing up then you are good to start working in Google Tag Manager! You're all set! If it does not it's time to start troubleshooting

Some troubleshooting tips if you are not seeing your ID:

  • If your WordPress theme has a cache, try clearing it and check again
  • If your WordPress host has a server cache, try clearing it and check again
  • Verify that your Google Tag Manager Container is live
  • Verify that you have installed all of the Google Tag Manager code onto your website. One missing character will break the installation