Preview and debug containers

Make sure your tag configurations function as expected.

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, so that you can test a container configuration before it is published. 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 debug pane is not currently available for mobile app containers. To learn more about how to preview and debug mobile app containers, read the iOS and Android developer documentation.

Enable preview mode

To enable preview mode, click Preview. Tag manager will show a banner on the Workspace page that indicates preview mode is active.

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:

  1. Click Versions.
  2. Find the version you would like to work with and select Action and then Preview.

Use preview mode

Once 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.

If the debug pane does not load, try a "forced refresh." This action will force the web browser to reload any cached assets. On Chrome, the keyboard shortcuts for a forced refresh are:
  • Windows and Linux: Shift + F5 or Ctrl + Shift + r
  • Mac: ⌘ + Shift + r

Use the information in the debug console to find out if tags and triggers fire properly and what data they pass to their respective services. As you click through your previewed website, the debug console will update information about how your tags are fired. You can use this information to see if a tag fired successfully, 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 debug console's event list is the Summary option, which will display aggregate information about the container. The Summary under the Tags tab shows all the tags fired on the page so far, as well as a list of tags that are present but that have not fired yet. Click on a tag in this view to see information about the tag’s properties and triggers. View Summary under the Data Layer tab to see most recent events and variables that have been pushed to the data layer.

Select any event from the left column of the debug console 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. Click on a tag in this view to inspect its properties and triggers.

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 preview mode is enabled, the previewed container configuration and debug pane are only visible from the same browser from where you activated preview mode. You can share this preview with others with a custom generated URL.

To share a preview of your workspace configuration with a colleague:

  1. Click Share Preview from the preview notification banner.
  2. In the Share Preview dialog, enter your target website domain (e.g. https://example.com/.)
  3. Copy the resulting preview URL from the indicated box.
  4. Paste the copied preview URL into an electronic message and send it to a colleague. 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.

Exit preview mode

To exit preview mode from your container:

  1. Click Workspace.
  2. Click Leave Preview Mode.

To exit preview mode on a website:

  1. Click the link received to go to the shared preview landing page.
  2. Click Exit preview and debug mode.
Was this article helpful?
How can we improve it?