Tuesday, July 16, 2019
How to Implement Google Tag Manager Code in WordPress

How to Implement Google Tag Manager in WordPress

Wordpress is a very popular framework with nearly 60% market share of CMS category as per few stats websites. It is easy to use and very flexible when it comes to customizations. Majority of the plugins are free to use and can be hosted even on shared hosting plans which are comparatively cheap(from $50 onwards yearly).

Below is a complete step-by-step guide with screenshots to implement Google Tag Manager to your WordPress website. We will cover other CMS systems like Joomla, Prestashop e.t.c in our upcoming blogs.

Step 1

First, login to your Google Tag Manager account to copy the code. If you do not have a Google Tag Manager Account then follow my How to Setup Google Tag Manager Account blog steps to create one for you.

how-to-implement-google-google-tag-manager-code-in-wordpress-step1

Step 2

After logging in, please click on the gear icon in the top right corner.

how-to-implement-google-google-tag-manager-code-in-wordpress-step2

Step 3

Click on the Install Google Tag Manager link from the menu as shown in the picture below.

how-to-implement-google-google-tag-manager-code-in-wordpress-step3

Step 4

You will see your <head> & <body> code here. Leave it open & login to your WordPress Admin panel now.

how-to-implement-google-google-tag-manager-code-in-wordpress-step4

Step 5

Once you are logged in to your WordPress admin panel, Mouseover on Appearance and then select Editor from the left menu column.

how-to-implement-google-google-tag-manager-code-in-wordpress-step5

Step 6

From the top right corner, select your active theme from the drop down and click on the Select button.

how-to-implement-google-google-tag-manager-code-in-wordpress-step6

Step 7

Once theme is selected, scroll-down under Theme Files section until you will find the header.php file. Click on this file for the next steps.

how-to-implement-google-google-tag-manager-code-in-wordpress-step7

Step 8

Once header.php file will be loaded, scroll-down slowly until you will find the </head> tag. Now, go back to the Google Tag Manager and copy the code from the <head> section and paste it just before the </head> tag.

Next, copy the <body> tag from the Google Tag Manager and paste it right after the <body> tag in your WordPress header.php file. Have a look at the screenshot below. Once done, click on the Update File button at the bottom of the page. Once saved, go back to Google Tag Manager to test if the code is getting fired properly or not.

how-to-implement-google-google-tag-manager-code-in-wordpress-step8

Step 9

In Google Tag Manager, click on Workspace to go back to home & then click on Preview from the top right corner. Please make sure you are using Google Chrome as this option works best on Chrome.

how-to-implement-google-google-tag-manager-code-in-wordpress-step9

Step 10

Once the page is fully loaded again, open a new tab within the same Google Chrome and open your website. If you will see a Google Tag Manager preview section at the bottom of your page, then your tag was implemented successfully.

how-to-implement-google-tag-manager-code-in-wordpress-step10

Step 11

Leave the preview mode now by clicking on the Leave Preview Mode button & click on Submit button in the top right corner to publish these changes. Please note that until you will not publish, changes will not work and will remain in testing mode.

Step 12

Enter the tag details so the other users will know what you are posting or keep track of the tag history and hit the Publish button.

Congratulations! Your tag was implemented successfully.

Leave your comments if you like this post or have any questions.

About the Author