Toolonomy Logo

Google Tag Manager Installation on WordPress (Step-by-Step)

If you're looking for a way to install Google Tag Manager using our favorite Advanced Scripts Plugin then don't scratch your head and just follow this tutorial to get it done within a few minutes.
Mohammed Wasim Akram
Blog Post Author
Last Updated: March 21, 2022
Blogpost Type:
0 Shares

If you're looking for a way to install Google Tag Manager on your WordPress site using one of our favorite plugins Advanced Scripts, then stop scratching your head and just follow this tutorial to get it done within a few minutes.

This method of installing Google Tag Manager is applicable for WordPress Themes and Website Builders so please go through the tutorial and you would understand how to implement this for any of the scenarios.

However, this job could also be done using any available free plugins in the WordPress Repository. But I hate installing plugins for these kinds of small things and I would consider using Google Tag Manager for the WordPress plugin over Advanced Scripts when I use Woocommerce on the sites.

Advanced Scripts is a very unique plugin with a lot of potential especially when you don't want to mess with backend code for injecting small snippets as it will also help you manage all your snippets in one place.

You can also use the free Code Snippets or Scripts Organizer plugin to inject and manage snippets but this tutorial is dedicated to teaching you the way of adding Google Tag Manager using the Advanced Scripts plugin.

However, at this moment Advanced Scripts (being a paid plugin) is far superior to Code Snippets (a free plugin) in all aspects in my opinion, and I recently migrated all my snippets from CS to AS and I'm completely satisfied.

Now I would like to give a shout-out to Abdelouahed Errouaguy for helping me to learn how to add the GTM Tag using Advanced Scripts, who is also the man behind this and other powerful plugins like Hydrogen Pack and Oxygen Attributes.

Also if you want to learn more about Advanced Scripts, then head over to the detailed Advanced Scripts Review written by me.

Find the important links related to all the tools that we're going to need:

Find The Google Tag Manager Script

Step #1. Login to your "Google Tag Manager" account.

Step #2. Select the account you want to use for your WordPress website (Here I'm assuming that you have already created a GTM Account).

Step #3. Head over to the "Admin Tab Menu" from the top of the page.

Step #4. Click on the "Install Google Tag Manager" link from the available link options.

Open The Advanced Scripts Window in WordPress

Step #1. Login to your "WordPress Admin Dashboard".

Step #2. Hover over to the "Tools" menu from the "Admin Sidebar" on the left.

Step #3. Click on the "Advanced Scripts" submenu under the "Tools" menu.

Add The Google Tag Manager Script in Advanced Script Manager

Google Tag Manager provides a total of 2 Scripts that you need to add to your WordPress site, one script to add on the "HTML Head" and the other one to add in the "HTML Body Opening".

In this section, you will learn how to add them both on your WordPress site with the help of the Advanced Scripts plugin.

Install First GTM Code to The <Head>

Head Script for Google Tag Manager and WordPress Integration - Image - SyncWin
  • Save

In this section, you will learn how to add the first GTM Script to your website Head with the help of the Advanced Scripts Plugin.

Step #1. Head over to the "Install Google Tag Manager" page again where we left off.

Step #2. Copy the "First Script" that is asking to add it to "<head>".

Step #3. Now get back to the "Advanced Script Manager" page again which is open on the WordPress backend.

Step #4. Add a name in the "Title" field (Example - Google Tag Manager: Header).

Step #5. Add further details in the "Description" field if required.

Step #6. Select "HTML" under the "Type" dropdown field options.

Step #7. Select "Front-end" under the "Location" dropdown field options.

Step #8. Add "wp_head" under the "Hooks" field.

Step #9. Leave the "Priority" field as "10" which is the default value.

Step #9. Leave the "Conditions" option default which should show "0 Conditions Set".

Step #11. Paste the snippet under the "HTML Code Field" area that you copied from the "Install Google Tag Manager" page.

Step #10. Now hit the "Save & Activate" button of Advanced Scripts and your 50% job is done.

Install Second GTM Code to The <Body>

Body Script for Google Tag Manager & WordPress Integration - Image - SyncWin
  • Save

In this section, you will learn how to add the second GTM Script to your website Body with the help of the Advanced Scripts Plugin.

Step #1. Head over to the "Install Google Tag Manager" page once again.

Step #2. Copy the "Second Code" that is asking to add it to "<body>".

Step #3. Now get back to the "Advanced Script Manager" page on WordPress once again.

Step #4. Add a name in the "Title Field" (Example: Google Tag Manager: Body).

Step #5. Add further details in the "Description" field if required.

Step #6. Select "HTML" under the "Type" dropdown field options.

Step #7. Select "Front-end" under the "Location" dropdown field options.

Step #8. Now if you are an Oxygen builder user then add "ct_before_builder" in the "Hooks" field.

OR if you are using a different theme and page builder then you need to add the "wp_body_open" in the "Hooks" field.

Step #8. Leave the "Priority" field as "10" which is the default value of Advanced Scripts.

Step #9. Leave the "Conditions" option default which should show "0 Conditions Set".

Step #10. Now hit the "Save & Activate" button of Advanced Scripts and the job is done.

Test if The Google Tag Manager is Working or Not

Adding the scripts to your site is not enough if they don't work properly. Therefore, you need to test if the GTM tag is working on your site or not, and in this section, I am going to show you the simplest method to do that.

Step #1. Add "Tag Assistant (by Google)" browser extension to the "Chrome Browser".

Step #2. Open the "Frontend" of your website to the "Chrome Browser".

Step #3. Click on the "Tag Assistant Icon" from the "Top Bar of Chrome".

Step #4. Click the "Enable Button" from the dropdown window of the "Tag Assistant" to turn it on.

Step #5. Now "Reload the Website" or "The Browser Tab" (both does the same thing BTW).

Step #6. Now if the "Result of Tag Analysis" shows a bunch of tags that you have added on "Google Tag Manager", then your GTM Tag is working fine and if it shows nothing then you got it 😉

Conclusion

In this tutorial, I have shared step by step method to add Google Tag Manager Scripts on a WordPress website with the help of the Advanced Scripts plugin.

I hope you found this tutorial very helpful and if that is the case then consider sharing this post with your friends and community to help them out as well.

Also if you have any feedback about this topic then feel free to share that in the comment section below. I would request you to be constructive and add value to the other readers.

Thank you for visiting Toolonomy.com!

0 Shares
Toolonomy Online Community Image
Join Toolonomy Community
Toolonomy Community is a dedicated place to explore the Discussion, Content, Deals & Hidden Details about the Business Development Tools that have the potential to help you succeed in your journey to Digital Entrepreneurship by letting you build, manage, and grow your Business Online with ease.
Free Membership
A Google & HubSpot Certified Digital Marketing Specialist, Self-Taught WordPress Expert, Useful BizDev (Business Development) Tools & Deals Explorer, and the Founder of SyncWin & Toolonomy.
Subscribe
Notify of
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Guido
Guido
2 years ago

I have the new version of AS and don't have this option for the second code:

Step #6. Select "Custom Hooks" under the "Location Dropdown Field" options.

How do i do it with the new version of AS?

Guido t Hooft
Guido t Hooft
Reply to  Mohammed Wasim Akram
2 years ago

Hi Mohammed,

I eventually figured it out lol. But always good to have your tutorial updated 😉

Thanks!

Guido

Related Blog Posts
Explore all the other related blog posts.
WordPress
How to Restore a Missing Header on WordPress Websites?
Get your disappeared WordPress header or footer back in no time with our step-by-step tutorial. Learn how to fix the vanished header or footer by restoring the missing theme PHP file with ease. Click now to bring y...
WordPress
Yabe Webfont Review: Best No-Code WordPress Font Manager
Discover the Yabe Webfont plugin to effortlessly manage fonts on your WordPress site with this game-changing plugin and enhance the website appearance without any coding skills. Seamlessly integrate with WordPress ...
WordPress
How to Hide WordPress Admin Menu Items with Zero-Code?
Simplify your WordPress Admin Menu customization by learning how to hide any of the menu and sub-menu items for specific user roles effortlessly using WP Admin Cleaner. Streamline your website management without an...
Explore Blog

Become a Toolonomy Community Member for Free!

Consider joining our Official Community Group if you want to get access to exclusive insider content and information about Exclusive Digital Tools and Technologies. Also, you will be able to get involved in interesting group discussions with like-minded people that are interested in similar topics as you.
Become a Member
Toolonomy Logo
Made with ❤ for Digital Tool & Tech Enthusiasts
Copyright © 2018 - 2023 by SyncWin | All Rights Reserved.
Top crossmenu
0 Shares
Copy link