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:
- Advanced Scripts Review: https://toolonomy.com/advanced-scripts-review/
- Advanced Script Deals: https://toolonomy.com/showcase/advanced-scripts/
- Google Tag Manager: https://toolono.me/googletagmanager
- Google Tag Assistant: https://toolono.me/googletagassistant
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>
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>
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!
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?
Hey Guido, please check the tutorial again as I have updated all the steps as per the latest version of Advanced Scripts UI.
Hi Mohammed,
I eventually figured it out lol. But always good to have your tutorial updated 😉
Thanks!
Guido