Preview Mode

Preview mode provides a real-time debugging interface for your Tag Manager configuration using a Chrome extension. It displays events, tags, variables, and data layer state as they occur on your website, helping you verify that your tags are firing correctly.

---

Chrome Extension

The Ours Privacy Tag Manager Chrome extension integrates directly into Chrome DevTools, providing a seamless debugging experience without popup windows or URL modifications.

Installation

1. Install the Ours Privacy Tag Manager extension from the Chrome Web Store
2. The extension will automatically appear in your Chrome DevTools

Using the Extension

1. Navigate to your website where the tag manager is installed
2. Open Chrome DevTools (F12 or right-click > Inspect)
3. Click the Tag Manager tab in DevTools
4. The extension will automatically detect and display tag manager events

---

What You Can Debug

The Chrome extension allows you to:

• See events in real-time: View all events as they fire on your website
• Inspect tag firing: See which tags fired, which were blocked, and why
• View variable values: Check variable values at the time of each event
• Examine data layer: See the complete data layer state for each event
• Debug triggers: Understand why triggers fired or didn't fire

---

Using the Preview Interface

Left Panel: Event Timeline

• Chronological list of all events that have fired
• Shows event name and timestamp
• Click any event to view its details

Right Panel: Event Details

When you select an event, the right panel shows detailed information across three tabs:

Tags Tab

• Fired tags: Tags that successfully fired
• Blocked tags: Tags that were blocked by block triggers
• Not fired tags: Tags that didn't fire because trigger conditions weren't met
• Each tag shows its type, name, and reason for firing/not firing

Variables Tab

• All variable values at the time of the event
• Shows variable name, type, and current value
• Values are displayed as JSON for complex objects

Raw Tab

• Raw event data in JSON format
• Useful for debugging complex data structures

---

Best Practices

1. Test before publishing: Use preview mode to verify your configuration before publishing
2. Check multiple events: Test different user interactions to see how tags fire
3. Verify variable values: Ensure variables resolve to expected values
4. Test trigger conditions: Verify that triggers fire when expected
5. Check for blocked tags: Review why tags were blocked to understand your configuration

---

Troubleshooting

Extension Not Showing Events

Problem: The Tag Manager tab shows no events.

Solutions:

1. Verify tag manager is installed: Ensure the tag manager script is loaded on your website
2. Refresh the page: Reload the page with DevTools open to capture all events
3. Check for errors: Look in the Console tab for any tag manager errors
4. Interact with your site: Events only appear when they fire - try clicking links, submitting forms, or triggering other events

Tag Manager Tab Not Appearing

Problem: The Tag Manager tab doesn't appear in DevTools.

Solutions:

1. Check extension is enabled: Go to chrome://extensions and ensure the Ours Privacy Tag Manager extension is enabled
2. Close and reopen DevTools: Sometimes DevTools needs to be reopened for new tabs to appear
3. Reinstall the extension: Try removing and reinstalling the extension from the Chrome Web Store

---

Related Documentation

• Installation Guide: Learn how to install the tag manager
• Publishing & Versions: Understand how to publish your configuration
• Tags: Learn about creating and configuring tags
• Triggers: Understand how triggers work
• Variables: Learn about variables and how to use them