Preview and debug containers
Google Tag Manager’s preview mode allows you to browse a site on which your container code is implemented as if the current container draft was deployed. Sites with preview mode enabled will display a debugger pane below the website content so that you can inspect which tags fired and in which order.
Note: The debugging pane is not currently available for mobile app containers. To learn more about previewing and debugging mobile app containers, please reference the iOS and Android developer documentation.In this article:
Enable preview mode
To enable preview mode, click on the arrow next to the publish button and select Preview.
You can also preview any version of a container. A version is essentially a saved snapshot of the container. To preview a previous version of your container, navigate to the Versions tab and next to the desired version select Action → Preview.
You will see an orange preview notification banner on the Workspace Overview page when preview mode is enabled.
Use preview mode
Once the preview mode is enabled, navigate to the site where the container is implemented and you will see a debug console window at the bottom of your browser showing detailed information about your tags, including their firing status and what data is being processed. This console window will appear only on your computer as you preview the site, and is not visible to your other website visitors.
- Windows and Linux: Shift + F5 or Ctrl + Shift + r
- Mac: ⌘ + Shift + r
You can use this information in the debug console to find out if tags and triggers are firing and what data they are passing to their respective services. As you click through your previewed website, the debug console will update tag firing information. You can use this information to see if a tag fired or not, and what triggered (or did not trigger) its firing status.
In the left column of the debug console you will see a list of all events that have been pushed to the data layer, in the order that they were pushed. Selecting an event allows you to see a snapshot of the container state for a particular event.
At the top of the event list is the Summary option, which will display aggregate information about the container. When viewing the Summary under the Tags tab a list showing all the tags fired on the page so far will be displayed, as well as a list of tags that are present but that have not fired yet. Clicking on a tag in this view will show information about the tag’s properties, firing triggers, and blocking triggers. When viewing the Summary under the Data Layer tab, the five most recent events pushed to the data layer along with additional variables set for each will be displayed as well as the current state of the data layer within Tag Manager.
You can select any event from the left column and inspect the state of tags, variables, and the data layer using the corresponding buttons at the top of the panel.
When an event is selected in the left column, the Tags tab will show the tags present for that event. The tags are separated between those that fired on the selected event and those that did not. Clicking on a tag in this view will show its properties and their values, as well as detailed information about it’s firing and blocking triggers. In this view any variables used in the tag are displayed as chips, and a selector at the top of the page allows you to switch between displaying variables as names and resolved values.
The Variables tab will display detailed information about variables in the selected event, including the type of variable, the type of data returned, and the resolved value.
The Data Layer tab will show the exact message object as it was pushed to the data layer for the selected event, and what the data layer looks like after the message transaction is complete.
Share preview mode
When you enable preview mode, the previewed container configuration and debugger pane are only visible from the same browser from where you activated preview mode from. However, you may share your preview mode with others using the share preview feature.
To share your preview mode, click Share Preview from the preview notification banner. This brings up a dialog box where you can copy a URL to send to someone else. Enter the website domain (such as https://example.com/) and copy the resulting preview URL in the box below.
You can then send the preview URL to another person. The preview URL will take the user to a landing page where they will be informed that their browser has been enabled for preview mode. There will also be a link on the landing page to disable preview mode for that browser.
Exit preview mode
To exit preview mode from your container, click Leave Preview Mode, located in the orange banner on the Workspace Overview page.
For shared previews, use the link received to go to the shared preview landing page. Click on Exit preview and debug mode to end your preview session.