Adding Google Tag Manager to a WordPress Site

1 year ago

Setare Afsharzadeh

3 minutes

Task:

Integrate Google Tag Manager into a WordPress website.

Desired Outcome:

Flawless installation of Google Tag Manager, free of technical issues.

Compatibility:

This process is exclusive to WordPress.org websites.

Importance:

Google Tag Manager simplifies adding and managing various tracking codes and pixels without modifying your site’s code directly.

Location:

The setup involves both your WordPress installation and Google Tag Manager.

Frequency:

A one-time setup during the initial Google Tag Manager installation.

Responsibility:

Website management or analytics personnel.

Environment Setup

Crucial Note: This guide addresses only self-hosted WordPress sites (WordPress.org), not WordPress.com.

Acquire the free Google Tag Assistant Chrome extension.
Sign up for Google Tag Manager (free): a. Login using your Google account. b. For first-time users, you’ll be directed to the account creation page.
Provide the following details: a. Account Name – A name to identify this account. b. Country – Your country of origin. c. Container Name – Insert your website URL. d. Target Platform – Where you plan to use Google Tag Manager (website, mobile, etc.). e. (Optional) Share data anonymously with Google.
Click “Create” upon completion.
A Google Tag Manager Terms of Service pop-up will appear. Accept the terms by checking the box and clicking “Yes”.
You’ll see the installation code for Google Tag Manager. Disregard this, as we won’t be adding code manually to your WordPress site. Click “OK”.
Within your Workspace, record your Google Tag Manager ID. a. Click Submit > Publish > Continue to publish your Google Tag Manager container.

Install and Configure the Google Tag Manager WordPress Plugin

Log in to your WordPress site.
In the WordPress sidebar, navigate to Plugins > Add New.
Search for “Google Tag Manager for WordPress” in the search bar.
Install the GTM4WP plugin (image may vary).
Activate the plugin.
In the WordPress sidebar, go to Settings > Google Tag Manager.
Paste your Google Tag Manager ID (obtained from the Google Tag Manager dashboard) into the designated field.
The plugin offers various methods to install the container code on your site. We recommend creating a backup of your site before proceeding.a. Option 1: Off – The plugin automatically attempts to find the optimal placement for the container. This is the easiest option, but it carries a slight risk of disrupting your site’s frontend. If you choose codeless injection, select this option and click “Save Changes”.
- After selecting this, visit your website in a new window or tab and confirm everything appears correctly. If so, proceed to the next QA step.
b. Option 2: Manually Coded – This option requires a minor edit to your theme files. If your WordPress theme allows modifications and you’re comfortable with the theme editor, you can use this option. Choose “Custom (needs tweak in your template)” container code placement and click “Save Changes”. i. Copy the PHP code provided by the plugin and click “Save Changes”. ii.

In the WordPress sidebar, navigate to Appearance > Theme Editor. iii. Verify that you’re editing the currently active theme (go to Appearance > Themes to check the active theme name). iv. Select the “Theme Header” template from the list on the right. v. This template varies depending on your theme, but there will always be an opening <body> tag. vi. Paste the PHP code provided by the plugin directly below the opening <body> tag. vii. Click “Update File”.

QA Your Installation

Open your website homepage using Chrome.
Click on the Google Tag Assistant Chrome extension.
Click “Enable“.
Refresh the page and click on the Google Tag Assistant Chrome extension again.
A green tag for Google Tag Manager should appear, indicating successful installation.