DataLayer Tab

The DataLayer tab provides a dedicated panel for inspecting data layer pushes from various tag management and analytics platforms. It captures events and data structures that drive your tracking implementation.

Supported Sources

TagDragon detects and decodes data layer pushes from:

Google Tag Manager — window.dataLayer pushes
Tealium — window.utag.link and window.utag.view calls
Adobe — adobeDataLayer and _satellite.track calls
Segment — window.analytics track calls
W3C digitalData — Via proxy interception

Push List

Each data layer push appears as a row in the push list:

Color-coded by source — Each source gets a unique color for quick identification
Event name — Shows the event type if available
Push index — Sequential number for each push
Timestamp — When the push occurred

Detail Sub-tabs

Click on any push to see detailed information:

Push Data

The raw JSON of the pushed data object, formatted for readability. Expand nested objects to inspect the complete data structure.

Diff

Deep diff from the previous push showing:

Added keys — Keys that are new in this push
Removed keys — Keys that existed before but are gone
Changed keys — Keys that were modified with before/after values

Changes are color-coded for quick visual identification.

Current State

The cumulative merged state up to the selected push. This shows the complete data layer state after this push, useful for understanding what data is available at any point in time.

Correlation

Network requests captured within 2 seconds of the push, sorted by delay from push time. This helps you understand which tracking requests were triggered by each data layer event.

E-commerce Detection

TagDragon automatically detects common e-commerce events:

Purchase — Order completion events
Checkout — Checkout initiation events
Impression — Product impression events
Promo — Promotion view events
Refund — Order refund events

When e-commerce events are detected, TagDragon displays formatted product tables showing:

Product name
Product ID
Price
Quantity
Category

Filters

Refine the push list with multiple filter options:

Text search — Search across all push data
Source filter — Show only pushes from specific sources
Event name filter — Filter by event type
Key existence filter — Find pushes containing specific keys
E-commerce only — Toggle to show only e-commerce events

Validation Engine

TagDragon v1.5.6+ includes a rule-based validation engine for data layer pushes. Validation rules run automatically against each push and highlight issues in real-time.

Preset Rules

Required keys — Flag pushes missing essential keys (e.g., event)
Key types — Validate that specific keys contain expected data types
Forbidden keys — Detect unexpected or deprecated keys

Custom Rules

Create your own validation rules to enforce your team’s data layer conventions. Custom rules can check for specific key patterns, value formats, or structural requirements.

Watch Paths

Pin specific dot-notation paths in the Live Inspector for focused monitoring. Watch paths highlight changes to the fields you care about most.

Pin up to 10 paths for simultaneous monitoring
Changes to watched paths are highlighted in real-time
Useful for tracking specific e-commerce properties or user identification fields

Group by Source

Organize the push list by source instead of a flat chronological view. Grouping options:

GTM — window.dataLayer pushes
Tealium — window.utag calls
Adobe — adobeDataLayer / _satellite.track
Segment — window.analytics calls
digitalData — W3C digitalData

Toggle grouping on/off from the toolbar.

Sort Options

Configure how pushes are displayed in the list:

Time — Chronological order (default)
Key count — Sort by number of keys in each push
Source — Group and sort by data layer source

Sort preference is persisted across sessions and restored when you reopen DevTools.

Auto-prune

To prevent memory issues on pages with heavy data layer usage, TagDragon automatically prunes the oldest pushes when the limit of 1,000 pushes is reached. This keeps the DataLayer tab responsive even on complex single-page applications.

Configurable Correlation

The correlation window (network requests linked to a push) is now configurable:

Forward window — How long after a push to look for triggered network requests
Lookback — How far before a push to include preceding network requests

Adjust these settings to match your site’s tracking latency characteristics.

A dedicated filter popover provides advanced push filtering options:

Event name — Filter by specific event names
Key existence — Show only pushes containing specific keys
E-commerce events — Toggle to show only e-commerce-related pushes
Source — Filter by data layer source