GA4 Live Debugger Documentation

Getting Started

After installing the extension, you can access the debugger in two places:

• Side Panel: Click the extension icon in Chrome's toolbar, or press Alt+Shift+D. The panel opens alongside your page so you can browse and debug simultaneously.
• DevTools Panel: Open Chrome DevTools (F12) and look for the GA4 Live Debugger tab. This gives you a wider view while you work in Elements, Network, or Console.

Both views show the same data in real time. Use whichever fits your workflow.

Hit Inspection & Routing

The feed captures every GA4 network request in real time. Hits automatically group by page navigation so you can trace exactly what fired and when.

Search & Filtering

Use the search bar at the top of the panel to quickly find specific event names, parameter values, or URLs. You can also use the quick-filter chips to instantly isolate Issues (hits with warnings or errors), or filter the feed by event type: Page, Auto, Ecom, Recom, and Custom.

Transport Badges

Each hit shows a badge indicating where the request is being sent. This tells you at a glance whether data is going client-side, through a proxy, or to a server-side GTM container.

Batch Unpacking

GA4 often batches multiple events into a single network request. The debugger unpacks these automatically. Each event displays as its own card with a numeric indicator showing its position in the original batch. No manual payload inspection needed.

Campaign Parameters

The extension automatically extracts industry-standard campaign tracking variables and ad click identifiers from each hit. These are displayed in a dedicated section so you can instantly verify that your UTM parameters and attribution tags are passing through correctly, without having to manually parse complex query strings.

Tracking Setup Discovery

The extension automatically detects and lists every Measurement ID and GTM container active on the page, including Google's Optimized GTM containers. Each entry shows a hit count so you can confirm all expected properties are receiving data and spot unexpected containers.

DataLayer & Platform Monitoring

The DataLayer tab captures every dataLayer.push() in real time. You can toggle between a formatted table view and raw JSON for each push. Beyond standard GTM arrays, the debugger monitors platforms that bypass the standard DataLayer architecture.

Shopify & Tealium Support

The extension captures tracking events from popular ecommerce and tag management systems:

• Shopify Customer Events: Captures events from Shopify's analytics.subscribe API, even when firing inside an isolated Custom Pixel sandbox.
• Tealium iQ: Intercepts utag.view and utag.link events directly on the page, surfacing the client-side Tealium payload without touching the network layer.

Event Correlation

The debugger links each DataLayer push to its resulting GA4 network hit. Matched pairs show a link badge. Click it to jump directly to the corresponding card.

When correlation breaks, you'll see one of two states:

• Orphaned DataLayer Push: A push fired but no GA4 hit followed. Likely causes: tag trigger not configured, consent denied, or the event name does not match any tag.
• Orphaned GA4 Hit: A network request fired without a preceding push. This typically means a hardcoded gtag('event', ...) call that bypasses GTM entirely.

Diagnostics & Audits

The Diagnostics panel runs over 30 automated checks against your tracking implementation. It surfaces issues you would otherwise have to hunt for manually, inspecting everything from page-level GTM configuration down to individual event parameters.

Privacy & Data Governance

Ecommerce Validation

SPA & Session Integrity

GTM X-Ray & Implementation

GA4 Limits & Quotas

Control Modes

Two toggle switches in the toolbar control how the extension interacts with outgoing requests.

Debug Mode

Appends the debug_mode=1 parameter to all outgoing GA4 requests. These hits appear in your GA4 property's DebugView in real time.

Block Mode

Intercepts all GA4 requests at the network level and prevents them from leaving the browser, regardless of destination. This covers standard Google-owned endpoints, first-party sGTM domains, Google Tag Gateway, and self-hosted server-side endpoints. Hits still appear in the debugger feed so you can inspect every parameter, but nothing reaches Google's servers.

When to use it:

• QA testing on production without inflating real metrics.
• Validating event parameters before going live.
• Debugging consent implementations without sending denied-consent pings.

Data Dictionary & Team Sync

The Data Dictionary brings your tracking plan into the debugger. Hover over any event name or parameter in the feed to see its definition in a tooltip. No more switching between spreadsheets and the browser.

Adding Definitions

Open the extension settings to manage your dictionary. You have two options:

• Manual entry: Add individual event or parameter definitions one at a time.
• CSV import: Bulk import from a file. Useful for migrating from an existing tracking spec.

Definitions can be scoped to Global, Account, Property, or Measurement ID level. Narrower scopes override broader ones.

Team Sync via Google Sheets

Keep your entire team working from the same definitions without manual exports:

1. Create a Google Sheet with your tracking plan definitions.
2. Publish the sheet to the web as CSV (File → Share → Publish to web → CSV).
3. Paste the published URL into the Team Sync field in extension settings.

The extension syncs in the background. Imported definitions show as read-only in the UI to prevent local drift from the source of truth.

Settings & Preferences

Open the extension settings or use the panel overflow menu to customize the debugger's behavior.

• Red Toolbar Alerts (Auditor Mode): Turns the extension icon red in your browser toolbar when critical errors (e.g. PII leaks, non-prod GTM containers) are detected on the page.
• Raw Data Mode (Show/Hide Warnings): Hides all inline error badges and warning cards for a clean, presentation-ready view. The informational grid stays visible.
• Audit using GA4 360 Limits: Adjusts the debugger's alert thresholds. Suppresses standard warnings for high parameter counts (allows up to 100 parameters) and long values (up to 500 characters) for Enterprise properties.
• Show Raw Parameter Keys: Displays original GA4 protocol keys (e.g. lps, gcd) instead of friendly labels in the feed.
• Console Logging: Mirrors every captured event directly to the Chrome DevTools console. Useful when you need hit inspection available while actively working in the Elements or Network panels.
• DataLayer Correlation: Toggle the push-to-hit correlation engine on or off to optimize performance.
• Click to copy parameter values: Click any parameter value in the feed to instantly copy it to your clipboard.
• Compact DataLayer cards: Hides action buttons on DataLayer cards until expanded, saving vertical space in the feed.
• Hide URL path: Removes the page path from hit card headers for a narrower Side Panel layout.
• Custom DataLayer Name: Specify a custom array name if your site uses one instead of the default dataLayer.

Exporting Data

Click the Export button in the overflow menu to download your capture session. Available formats include CSV, TSV, and JSON. You can scope exports to visible hits only or all captured hits.

Troubleshooting