• Mathew Collins

Adding Google Tag Manager to a WordPress Site

Updated: Jun 30

Google Tag Manager is a tag management system (TMS) that enables you to quickly and easily update measurement codes and related code fragments collectively known as tags on your website or mobile app. Once the small segment of Tag Manager code has been added to your project, you can safely and easily deploy analytics and measurement tag configurations from a web-based user interface.

Tag Manager allows you to add and update your own tags for conversion tracking, site analytics, remarketing, and more. There are nearly endless ways to track activity across your sites and apps, and the intuitive design lets you change tags whenever you want.

Below are the key benefits of Google Tag Manager:

Fast deployment of tracking codes - Google Tag Manager speeds up many processes. Changes and new tags can be made rapidly and a lot of them do not require code changes to the website. This is great for marketers because it can really speed up launch time by testing each change themselves and deploying when ready.

All tags are controlled in one place - In the old days, when tag management was just a myth, all tracking codes were coded directly in website’s/app’s source code. The worst part, those little pieces of JavaScript code snippets were scattered across different files. So if you need to do a minor change, the developer needs to: (1) find all those codes, (2) update them.

Thanks to GTM, this process is made easier: all tags are controlled in one place.

Built-in and 3rd party testing tools - Troubleshooting and correcting tag errors is simplified via Google Tag Manager’s Preview and Debug mode that shows which tags are fired on a page and which are not. It also includes information about triggers that fire tags and data contained within tracking tags.

Reusable container templates (recipes) - Another awesome benefit of Google Tag Manager is the possibility to export all tags, triggers, and variables into a single file (which can be imported later). What does it mean? Well, you can create your own templates with commonly used tracking codes/settings.

Now that we have shared to you the basic concepts and benefits of adding Google Tag Manager to your website, below are the steps in setting it up in a Wordpress site.

  • Environment Setup

Important: This SOP works only for self-hosted WordPress sites, aka and not

  1. Download the Google Tag Assistant Legacy Chrome Extension (Free)

  2. Sign up for Google Tag Manager (Free):

  3. You’ll need to log in to your Google account.

  4. If this is your first time creating a Google Tag Manager Account, you’ll be prompted to set up one right away.

  • You can just use your company/website name for both the account and container.

  • Under “Where to Use Container”, select “Web”

c. Accept the terms and conditions.

d. You will see your Google Tag Manager code, but you won’t need it using this method.

e. Once, you are in your Workspace, make note of your Google Tag Manager ID.

f. Click on Submit > Publish > Continue to publish your Google Tag Manager container

  • Install and configure the Google Tag Manager WordPress plugin

  1. Log into your WordPress site.

  2. In the WordPress sidebar, go to Plugins > Add New

  3. Enter “Google Tag Manager for WordPress” in the search box

  4. Install the Google Tag Manager for WordPress plugin (the image may vary)

5. Activate the plugin

6. In the WordPress sidebar, go to Settings > Google Tag Manager

7. Paste your Google Tag Manager ID (the one you got from the Google Tag Manager dashboard) in the available field

8. The plugin offers several ways to install the container code on your site. Before you implement any of these, we recommend you create a backup of your site.

a. Option 1: Codeless injection — with this option, the plugin will try to figure out the right placement for the container for you. This is the easiest option but there’s a small risk it might break something on the frontend of your site. If you decide to go with codeless injection, select this option from the list and click “Save changes”

After selecting this, visit the website in a new tab or window and make sure everything looks right. If it does, you can move on to the next step of QA-ing the installation.

b. Option 2: Custom — with this option, you will need to make a small edit to your theme files. If your WordPress theme allows you to make changes and you’re comfortable with the theme editor, you can use this option. Select the “Custom (needs tweak in your template)” container code placement and click on “Save Changes.”

c. Copy the php code provided by the plugin and click on “Save Changes”

d. In the WordPress sidebar, go to Appearance > Theme Editor

e. Make sure that you are editing the Theme that you currently have installed in your site (you can go to Appearance > Themes to check the name of the theme you are using)

f. Select the “Theme Header” template from the list on the right.

g. This template is different depending on the theme that you have installed. However, you will always be able to find an opening <body> tag in the code.

h. Paste the php code provided by the plugin right below the opening <body> tag.

i. Click on “Update File”

QA-ing your installation

  1. Open your website homepage using Chrome.

  2. Click on the Google Tag Assistant Chrome Extension

3.Click on “Enable”

4. Refresh the page and click on the Google Tag Assistant Chrome Extension again

5. You should see a green tag for Google Tag Manager, indicating that the installation was successful.

Congratulations for reaching up to this stage, adding up a Google Tag Manager to your website will be a big help for any digital marketer. For any help you need with your digital marketing, DigitalxMarketing can surely help. DigitalxMarketing provides Digital Strategy, Digital Services, Training and Education to Business Owners, Executives and Marketers. As a DigitalMarketer Partner, we provide the World's leading digital marketing training and up-to-date tools & resources.

15 views0 comments