Hey there, I'm Benjamin from Loves Data.
In this video, you will learn how to use the new preview mode in Google Tag Manager to
check and test your tags.
The new preview mode is called 'Tag Assistant', before this update, you would enable the preview
mode, then navigate to your website.
Then as you loaded a page, you would see the debug console for the individual page-load
at the bottom of your browser window.
As we'll see in a moment, the new preview mode stores all of the details about your
tags, variables, and data layer in a separate browser tab.
This means you can easily capture and see the details for multiple pages and other actions
to understand if your tags are firing.
Let's head to Google Tag Manager to take a look…
Okay, I've opened my Google Tag Manager container, and we can see there are different tags I've
added to my website.
We can see there's a Google Analytics tag, a tag for the new version of Google Analytics
(Google Analytics 4, or GA4), there's a Google Optimize tag.
I've also added a new tag and trigger to track people clicking the email address on my website.
Whenever we make changes to our Google Tag Manager container, it's important to preview
the changes to check that they work as we expect.
For example, we can check that our tags are triggered for the correct actions taking place
on our website.
You can preview your tags using any browser, but today I'm using Chrome.
If you are using Chrome, then I also recommend installing the Tag Assistant extension for
Chrome.
Installing the extension means that your website opens in a new browser tab (instead of a new
window), and it also adds a visual icon for each page you preview.
I've included a link to the Chrome extension in the description below this video.
Here we can see I've already added the extension...
Now let's click 'Preview' to check our changes…
We can see a new tab opens for 'Tag Assistant'...
We can then enter the URL of our website.
(If you previously entered your website's URL, then you will see it's pre-populated.)
We're also going to leave 'include debug signal in the URL' enabled.
This will add a query parameter to our URL.
If your website doesn't accept query parameters, you can disable this option, but it will make
the preview mode less reliable.
Keeping this option enabled, also means we can use the debug reports in the new version
of Google Analytics (that is GA4).
We will come back to this later in the video.
And if you'd like to learn more about GA4 properties, then check out my getting started
tutorial.
You can find a link in the description below this video.
Okay, let's click 'Start'...
'Tag Assistant' connects to our website.
And our website opens in a new tab.
If you haven't installed the Tag Assistant extension for Chrome, then your website will
open in a new window.
We can see on the bottom right corner, that the debugger has connected to our website.
------ If the debugger doesn't connect, then there are a few things to check…
First, check to make sure the pop-up isn't being blocked by your browser.
For example, if you're using Safari, then Tag Assistant will try to open your website
in a new window and this can be blocked by default.
You should also check that the correct Google Tag Manager container is installed on your
website and that you're previewing the correct container.
You can also try closing the window or tab that is used to preview your website, then
refresh the Tag Assistant tab, and then click 'Start' to reconnect to your website.
------ Okay, now let's select the 'Tag Assistant' tab…
And let's click 'Continue'...
We can also see that the debugger is connected by looking for the flashing fav-icon in the
browser tab and on the top left corner of the Tag Assistant tab.
On the left-hand side, you will see the pages that you've loaded while using the preview
mode.
So far, we've only loaded a single page, so we can see this on the left…
We can also see the triggers associated with page.
This includes built-in triggers, like when the Google Tag Manager container loads on
the page, as well as any other triggers you've configured.
For example, if we select 'Container Loaded', then we can see that tags that fired for the
page…
And tags that weren't fired...
We can select a tag to then see more details.
Let's select the Google Analytics tag…
We can see the details for the tag…
And below this, we can see the trigger conditions that allowed the tag to fire…
And below this, we can see any exception triggers that might prevent the tag from firing...
Let's close the tag…
Apart from viewing the tags, we can also select the 'Variables' tab to see the information
that's available to use in Google Tag Manager…
And the 'Data Layer' tab lets you view the information in the data layer…
Now let's head back to my website…
And let's open another page in a new tab…
Since I have the Tag Assistant extension for Chrome installed we can see a small icon in
the debugger panel on the bottom right corner…
This makes it easy to identify the page in Tag Assistant.
Let's head back to the Tag Assistant tab...
We can see we now have details for the two pages we've loaded on the left…
And the icon means we can quickly identify the different tabs we have open to preview
our website.
We can also see that since we clicked a link to open the new page, this trigger is now
included under the first page…
Let's select 'Link Click'...
And since we're still on the 'Variables' tab we can see the information that we could use
in Google Tag Manager.
For example, if we wanted to create a new trigger for the specific link we clicked,
or if we wanted to pass information to a tag.
Now let's select the new page we opened on the left...
And let's select the 'Tags' tab…
We can again see the tags that have and haven't fired for the page.
Let's head back to my website again…
And let's click the email address…
And now let's open the Tag Assistant tab again…
We can now see the 'Link Click' has triggered…
And selecting this…
We can also see that my new tag has been fired…
If you have added a GA4 tag to your website, then Tag Assistant will automatically identify
this and you can select the 'Measurement ID' for your GA4 property using the drop-down
at the top of the tab...
This lets you view the information that has been sent to your GA4 property…
For example, we can select the first page we viewed…
And this lets us see the different hits that were sent to our GA4 property…
And we can then switch back to our Google Tag Manager Container ID…
You can quickly clear the current pages and triggers from Tag Assistant by clicking the
trash can icon…
This is useful if you want to debug something else on your website.
It means you'll be starting with a clean slate.
And if you're working with other people to check your implementation, you can also share
the preview from Tag Assistant.
To do this, select the three vertical dots on the top right corner…
And then select 'Share'...
You can adjust the URL, the tags, and then copy the link…
You can then send this link to anybody that is helping you to check your implementation.
Finally, I want to show you the 'Debug View' in Google Analytics.
So let's head to Google Analytics…
If you have a GA4 (or Google Analytics 4) property, then you can also use the 'Debug
View' to see that data that's sent as you preview your website using Tag Assistant.
Let's open the report…
We can now see all of the hits that have been sent to Google Analytics while we were previewing
our website.
This is a great way to double-check that your GA4 tags will collect the correct data for
your reports.
In order to use the 'Debug View', you will need to ensure the 'include debug signal in
the URL' option is enabled when you click 'Start' in the Tag Assistant tab.
That's it!
So that's how you can use the new preview mode in Google Tag Manager.
The great thing about this update is that it's easier to see details for multiple pages
and actions.
For example, if you've created a trigger for form submissions, you can submit the form,
and then open the 'Tag Assistant' tab to check if your tag was fired.
All of the pages and actions are available in 'Tag Assistant'.
Have you used the new preview mode in Google Tag Manager?
Do you have any tips you'd like to share?
I'd love to know!
Let me know in the comments below.
And if you found this video helpful please subscribe, share it with your friends, and
hit the like button so I know to make more videos like this.
See you next time!