When you are working with Google Tag Manager, you are creating different types of tags, triggers and variables. However, before implementing those changes live on the website, you need to make sure that your implemented tags are working as expected.
If you are publishing directly, then the changes would go live on the website and measurements like pageviews and events will start to be tracked. But what if the tags are not working properly? How can you make sure that the tags are actually firing when they are supposed to?
This is when you can enable a preview mode in Google Tag Manager which allows you to validate the configuration of the tags before publishing the container.
If you publish something accidentally, without validating, then the entire setup may not work and break the complete configuration.
Through the Google Tag Manager preview and debug console window, you can make sure that your tags, triggers, variables anddata layers work as expected.
By default, what you actually preview and debug is the deployment of the current container draft on your website. You preview and debug the container draft on your website as if it is currently deployed.
When you enable preview mode, the GTM preview and debug console window, a new tab is opened with Google Tag Assistant in the domain name, which is now the new version of preview mode.
This replaces the orange banner that used to appear for older versions when the GTM container was in preview mode.
Note: The preview and debug window is currently not available for the mobile apps which contain the mobile app container tags.
Step-1: In order to enable preview mode, log in to your GTM account and then click on the ‘Preview’ button:
Step-2: A new tab opens with Google Tag Assistant in the domain name as shown below.
Step-3: You will see an option like below which states ‘Start Tag Assistant’.
Step-4: Now provide the URL of the website for which you want to enable preview mode in the URL section.
Step-5: Click on the ‘Start’ button to enable preview mode for the URL entered.
Step-6: You will see the success message which states ‘Connected!’ once the preview mode is enabled for the URL.
Step-7: Additionally, on the page where the Google Tag Manager debug mode is enabled, you will see the notification which shows that the debugger is connected.
Step-8: You can also validate if the preview mode was on by checking in the Tag Assistant tab, on the left-hand side. It should say ‘Connected’.
How to disable the GTM preview mode on your website
In order to disable GTM preview mode on your website, follow the steps below:
Step-1: Navigate to the page where the GTM preview mode is enabled and at the bottom of the page you will see the ‘Debugger connected’ panel, like below.
Step-2: Now click on the ‘X’ that is on the pop-up, which is labelled ‘Stop debugging’.
Once you refresh the web page, the debug console window should disappear from the bottom of the web page.
Step-3: You can also check in the Tag Assistant tab, it should show ‘Not connected’ once you have clicked on ‘Stop debugging’.
By default, whenever you enable the preview mode in GTM, you preview and debug the deployment of the current container draft on your website. But you also have the option to preview any previous version of your container.
To do that, follow the steps below:
Step-1: Login to your GTM account and then click on the ‘Versions’ tab:
Note: Version is the saved snapshot of your container.
Step-2: Scroll down to the version number, you want to preview and then click on the ‘Actions’ drop-down menu next to it:
Step-3: Click on the ‘Preview’ link to enable the preview mode for the chosen container version. In our case, the chosen container version is version 49.
How to use the preview and debug mode
Once you have enabled preview mode, you will notice that a new tab opens. After entering the URL you will see an option to click on ‘Start’. When you click on ‘Start’, the url you entered will be opened in a new tab.
With the current change in the GTM preview mode, you will now see that every action you take on the page will be tracked in the Tag Assistant tab. This is different from the older versions where you see the debug console on the same page.
You see a screen like below, which is exactly like the older debug console but instead of viewing it below the URL, you see it in a different tab.
Say for example you are on the home page (www.optimizesmart.com) and in the debug console in a different tab you will be able to see all the tags that fired on the home page.
Now let’s say, you have navigated to the contact us page, in the debug console tab under the ‘Summary’ section you will notice a new tab with a drop-down, as shown below.
This makes it easier for troubleshooting issues. You can now separately view the tags that fired on that particular page.
Note: The debug console window will appear only to you and not to your website visitors or other users of your GTM account.
How to update the preview and debug mode in Google Tag Manager
Every time, you make changes to any tag, trigger or variable in your GTM container, you should update the preview and debug mode.
You can do that by clicking on the ‘Preview’ button in the GTM container. It will automatically refresh the Tag Assistant tab.
Automatic update of the debug console tab
As you navigate through the previewed web page, you would see additional tabs with drop-down being created in the tag assistant tab for every page you navigate.
You can debug and view all the tags fired on every page individually. Say, for example, you are interested in checking what tags are fired on the ‘Contact us’ page, then you can click on the ‘Contact us’ tab in the ‘Summary’ section of the Tag Assistant page.
You also have an option to close the drop-down by using the arrows on the left-hand side.
Understanding tags in Google Tag Manager debug console
When you navigate to the Tag Assistant debug mode tab, the first thing that you will notice on the page is a summary of all the tags fired on the page.
Click on the tag fired to view the tag details. This section shows the trigger associated with the tag, properties and also the blocking trigger details.
You can also view the tags that did not fire on the page and check if there are any blocking conditions.
Under the firing triggers conditions, you can view why that particular event did not trigger. The cross marks that are seen next to ‘Page URL’ in the screenshot below state that it didn’t satisfy the condition.
Additionally, to validate the reason why that particular tag did not fire, you have a ‘Display Variables’ option on the right-hand side when you open the tag details. Click on ‘Values’ as shown below:
By default ‘Names’ will be selected. Click on ‘Values’. Now you can find out why your tag did not fire.
The left-hand side shows the details that fired on the page and the right-hand side shows the values that are set in the trigger condition. So, referring to the screenshot above, the tag was supposed to fire on gtm.click event but on the current page it was gtm.click event that fired. Since the trigger doesn’t match the tag, it was not fired on the page.
Click on the “Variables” tab to check for all the variables that are set for that particular page.
Similarly you can also view the data layer values for the specific event (Pageview, link click etc) on the page by click on the “Data Layer” Tab.
Note: In order to make your debugging easier, enable only those built-in variables which you really need. Additionally, delete all those user-defined variables which you no longer use.
Just like tags, a variable can have a different state (return type & return value) for each new event pushed into the data layer.
You can minimize the debug console window by clicking on the small arrow button.
This setting can come in handy if you want to view the tags that fired on individual pages. You can minimize the tags fired on one page and troubleshoot the issue on another page without any interference.
How to share the GTM preview mode of your website
If you want to share the preview mode of the container with someone. Go to the versions tab in your GTM container and click on the three dots that you have and click on share preview.
After clicking on the share preview link, you should notice a dialog box appears like below, provide your website URL in the destination URL box.
In order to start previewing, the person with whom you shared the preview link, just click on the link, as shown below:
Once the person starts previewing, he should see the debug console window at the bottom of the page. He will see the debug console window despite being logged in to your GTM account.
This is the advantage of sharing the preview mode.
Google Tag Manager debug console not working? Here is how to fix it
If the debug console window does not appear/load on your web page, then do the following:
#1 Make sure you have enabled preview mode in GTM
If the preview mode is not enabled in GTM then it won’t enable on your website either.
#2 Make sure you have entered the right URL in the preview mode
Just enabling the preview mode within the GTM user interface won’t automatically enable the preview mode on your website. You also need to provide the proper URL, that starts with https, and click on ‘Enter’.
#3 Consider temporarily disabling your caching plugin/setting
If you are planning to make and test lot of changes in your container tag and your website is so heavily cached that you need to do multiple refreshes in order to see changes in your debug console then temporarily disable your caching plugin and/or caching feature in your CDN.
You need to disable the cache so that your browser does not keep loading the previous version of your web page while you are making changes to it for testing purposes.
Your testing could become really hard if you can’t see the changes you are making.
#4 Make sure that the GTM container tag code is hardcoded on your website
Check the source code of the web page (where you want to see the debug console window) to make sure that theGTM container tag is present.
Without this container tag, the debug console window won’t appear on your website.
#5 Check whether you have enabled the preview and debug mode of a wrong container
If you have got access to multiple GTM accounts then there is always a possibility that you accidentally enabled GTM preview mode of a container which does not match with the container code hardcoded on the website.
Note down the container ID from the hardcoded container tag on your website and then compare it with the container ID you see within the GTM user interface.
They both need to match.
If they are different then it means, you have enabled the GTM preview mode of a wrong container:
#6 Check your website firewall settings
Sometimes website firewall settings can stop the GTM container code from firing.
Contact your web developer and make sure that it is not the case.
#7 When everything else failed
If everything else fails and the debug console window still does not appear on your web page then clear all your cookies, cache and history and restore your browser settings to default, or even better reinstall your web browser.
Register for the FREE TRAINING...
"How to use Digital Analytics to generate floods of new Sales and Customers without spending years figuring everything out on your own."
Here’s what we’re going to cover in this training…
#1 Why digital analytics is the key to online business success.
#2 The number 1 reason why most marketers are not able to scale their advertising and maximize sales.
#3 Why Google and Facebook ads don’t work for most businesses & how to make them work.
#4 Why you won’t get any competitive advantage in the marketplace just by knowing Google Analytics.
#5 The number 1 reason why conversion optimization is not working for your business.
#6 How to advertise on any marketing platform for FREE with an unlimited budget.
#7 How to learn and master digital analytics and conversion optimization in record time.
My best selling books on Digital Analytics and Conversion Optimization
Maths and Stats for Web Analytics and Conversion Optimization
This expert guide will teach you how to leverage the knowledge of maths and statistics in order to accurately interpret data and take actions, which can quickly improve the bottom-line of your online business.
Master the Essentials of Email Marketing Analytics
This book focuses solely on the ‘analytics’ that power your email marketing optimization program and will help you dramatically reduce your cost per acquisition and increase marketing ROI by tracking the performance of the various KPIs and metrics used for email marketing.
Attribution Modelling in Google Analytics and BeyondSECOND EDITION OUT NOW!
Attribution modelling is the process of determining the most effective marketing channels for investment. This book has been written to help you implement attribution modelling. It will teach you how to leverage the knowledge of attribution modelling in order to allocate marketing budget and understand buying behaviour.
Attribution Modelling in Google Ads and Facebook
This book has been written to help you implement attribution modelling in Google Ads (Google AdWords) and Facebook. It will teach you, how to leverage the knowledge of attribution modelling in order to understand the customer purchasing journey and determine the most effective marketing channels for investment.
About the Author
Himanshu Sharma
Founder, OptimizeSmart.com
Over 15 years of experience in digital analytics and marketing
Author of four best-selling books on digital analytics and conversion optimization
Nominated for Digital Analytics Association Awards for Excellence
Runs one of the most popular blogs in the world on digital analytics
Consultant to countless small and big businesses over the decade
Get My Step-By-Step Blueprint For Finding The Best KPIs (32 pages ebook)
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checkbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.