We are pleased to launch the latest version of the Data Layer Inspector+. In addition to the new branding, we’ve added features and functions that can make an analyst’s life easier. 

Overview

  What is the Inspector+?

The Data Layer Inspector+ is a Chrome extension that provides real-time, information-rich viewing of dataLayer activity and Google Analytics hits as they happen in the Developer Tools console. In addition, it has other features that support development and web analytics debugging.

Summary

The UI has been updated to pack all the features into a compact, easy-to-use set of options. 

Add Functionality

Provides additional abilities, beyond the basic features; e.g. push events to the dataLayer, insert a GTM container, add code to the page, and block and swap network requests.

Control Output

Enhance or hide outputs; e.g. timing, postMessages, DOM mutations, console highlights, call stack, internal redirects (302s), specific events, specific properties and CD names.

Other Analytics

Observe code and network activity for other analytics implementations; Adobe DTM, Adobe Analytics, Tealium, Facebook, DoubleClick and Custom.

Handy Links

Get links to relevant documentation and resources. 

Basic use

Badge

The badge will indicate current settings with color and short text. 

– On
– Off
– Classic Mode
– dataLayer.push
– GTM Inserted
– Multiple Added Functions
– Code inserted or Block and Swap on

 

Console Output

Banner

HRef 

Href is document.location.href at the time the Inspector loads on the page, and could be different from what is in the address bar or what is sent in DL and DP, especially when the page is a Single Page Application (SPA).

Shortcut: Clicking on the HRef will take you to the source code in the Sources tab. Similar to right-clicking and selecting View Source, but you can “Pretty Print” the source in the developer tools view.

Referrer

This is document referrer when the Inspector loads on the page. It may not be the same as seen in the GA hit in the dr parameter. Analytics.js does not include the referrer from the same domain and single page applications 

Notes: In Single Page Applications (SPA), this banner remains at the top, and the HRef and referrer do not change. 

Example: PII in HRef and Referrer: http://localhost:8000/?referrer_pii=testy.testor@gmail.com & create link https://www.foodlion.com/?page_pii=testy.testor@gmail.com

Filter

Use the Tilde (~) to exclude non-Inspector console logs.

Make sure you have “All levels” selected.

Collapsed Banner

If you’d like to save space in the console, you can select “Collapse banner” in the “Control output” options. This will hide the hint and filter note.

 

Data Layer Pushes

Anatomy of dataLayer.pushes (and other analytics calls)

Summary – console.groupCollapsed(…)

The summary includes a logo, brand, object, function, key and value. If there is no event, and multiple keys, “Object – Expand for details” is displayed.

Details

Each push contains details of the push; e.g. stringified object, pointer to the push currently in memory (will not be there on the next page when preserve log is checked), and the call stack. When showing timing, it will include seconds to the thousandth, since Document Start (when the Inspector was first loaded.)

Uses: See the stringified content of the dataLayer push. See evaluations when the Summary is not green. Access the Call Stack. See timing when turned on.

Object Pushed (or Arguments)

The stringified object shows the type of entity pushed to the dataLayer; (e.g. object or Arguments) and a formatted version of the entity (that will be there on the next page, when preserve log is checked, and can be copied and pasted into the console to replay).

Use: See the values of the push, even from previous pages.

Currently in Memory

This is a link to the actual object in memory. The topmost line is accurate for when the object was pushed to the dataLayer. When you click on the arrow to the left of the object, (after the colon), the object will expand and an information symbol will display . This indicates that the value of the object was evaluated on the click. Notice that the event value in the top line is different from the second line. This is because the event value was modified after the push and before the click.

Uses: To see what is in the dataLayer push when the object is too large or too complex to stringify.

Call Stack

Links to the code that executed from the start to the console.log are shown in the expanded “Call Stack.” The top links are inside the Inspector+. The bottom link is to the line of code that initiated the push. The link before function [as push], is to the code that called dataLayer.push.

Uses: Understanding where the  dataLayer.push come from or what code initiated the push.  

Common dataLayer pushes

These pushes are seen on every page when GTM is installed and only once per page.

Gotchas: Using these events in a Single Page Application. For example, using gtm.js as a pageview in a SPA will only send a pageview when the page first loads.  

gtm.js

Pushed from gtm and gtag snippets.

gtm.start is the time the push was made

MDN – “the numeric value corresponding to the current time – the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC with leap seconds ignored.”

The stack is not available when the script runs before the Inspector was loaded.

(function(w,d,s,l,i) {
  w[l] = w[l] || [];
  w[l].push({
    'gtm.start': new Date().getTime(),
    event:       'gtm.js'
  });
  var f = d.getElementsByTagName(s)[0],
      j = d.createElement(s),
      dl = l != 'dataLayer' ? '&l=' + l : '';
  j.defer=true;
  j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;
  f.parentNode.insertBefore(j,f);
})(window,document,'script','gdGlobals','GTM-XXXXX');

Gotchas: 1. gtag and gtm pushes look different in the dataLayer, but are seen as the same in GTM. A dataLayer push from gtag with Arguments containing js and the date/time will be evaluated by GTM the same as the above event: ‘gtm.js’

2. Needed data in the hit that isn’t there when the event triggers. 

Uses: Understanding when the GTM Pageview is triggered and, when the call stack is available, seeing the code that pushes the event.

gtm.dom

Pushed from GTM when “The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.” MDN. The document object is ready.

Uses: When you need access the DOM. 

gtm.load

“The load event is fired when a resource and its dependent resources have finished loading.” MDN 

Gotchas: gtm.load is not a reliable event in some sites, especially publication sites, because resources may load very slowly and sometimes get blocked.

 

Network Hits

Anatomy of Network Hits

Summary

The summary includes a logo, brand, type and more information. Pageviews have the property ID. Events have the category, action and label (ec, ea, and el). The brand and type are color coded with three levels: green is good, brown is worth noting and red is an error.

Parameter Definitions

GA and Adobe parameters

Includes links to documentation

Data sent

The stringified object shows the data sent (that will be there on the next page, when preserve log is checked ).

Use: See the values of the push, even from previous pages.

Evaluations

General Conventions

Green Is Good 

Pageview hit is valid and contains recommended CD(s)

Brown Is a Notice 

Pushes should have an event key:

Multiple GTM containers push gtm.js

Snippet not in the head, as per spec

Red Is Bad 

Duplicate Pageviews, dataLayer reset

Examples of Evaluations

DataLayer Reset

Sometimes, dataLayers are initialized incorrectly, and after data has been pushed to the dataLayer. When the dataLayer has data and is reset using syntax like dataLayer = [], and the Inspector is observing the dataLayer, you will see the following error in the console. NOTE: This evaluation can only happen if the Inspector+ is observing the dataLayer at the time of the reset. 

Demonstration: Inject this code into a site with a dataLayer.

document.addEventListener("DOMContentLoaded",(event) => {
    window.dataLayer = [{stuff: 'stuffing'}]
});

Ecommerce Object Data

Required structures, types and content specified by Google in the Enhanced Ecommerce (UA) Developer Guide are evaluated and, if there is a notice or error, the push will be highlighted and the details will include the reason(s).

 

GTM Snippet Location

The GTM snippet should be installed in the HEAD element. If it is not, you’ll see a console log of  a notice with a link to the script. You can click the arrow to see the script. Right-click on the script to “Reveal in Elements Panel”.

GTM, Optimize, and gtag Configuration Evaluated

These evaluations are in early alpha. The evaluation is done on gtm.load (when all should have been loaded). Sorting through the implementation combinations and the implications is an emerging effort. 

Multiple containers using the same dataLayer

Multiple GTM Containers

Controls

Inspect

On/off

Auto detect dataLayer

Naming the dataLayer can provide better sequencing of pushes and hits

Options

Classic Mode

The Original Version

Use: When you feel nostalgic about the simple days of Digital Analytics.

JSON-ld

Add Functionality

.push({}) 

Pushes an object to the dataLayer (or named dataLayer; e.g. anotherDatalayer) when the Inspector+ is loaded on the page. Usually used when testing GTM and the data needs to be in the dataLayer asap.

To use, add JSON formatted key (e.g. “event”) and value (e.g. “dataLayer-push”) pairs with colon in between, separated by commas for multiple sets.

 

Insert GTM Container

Inserts a Google Tag Manager snippet into the page when the Inspector+ is loaded and the host is exactly what is in the Host: field, or, when RegEx is checked, the host matches the regex.

Use: When you want to add a GTM container to a page.

Hint: To keep the inspector dropdown window open while you go and get the GTM ID and the URL, right-click on the dropdown window and select “Inspect”. 

Note: GTM not inserted:will be pushed to the console if the conditions for insertion do not match.

Inject Code

Inserts a script tag into the head. The code will run immediately upon insertion.

Use: When you want to add code to the page immediately or on an event.

Hint: To delay until the DOM is ready, use addEventListener; e.g.

document.addEventListener("DOMContentLoaded",(event) => {
// Do your stuff here; e.g. dataLayer.push…
window.dataLayer.push({
event: 'example-event',
stuff: 'stuffing'
})
});

Block & Swap Script

URLs that match the first comma-separated value are replaced by the second value; e.g. GTM, https://www.googletagmanager.com/gtm.js?id=GHDSRD

Use: When you want to replace a resource like a GTM container with another. In addition, you can use this to block specific tracking.

Example:  https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX, https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX

Hint: While you can use Block without swap, Chrome’s Request blocking feature is far more flexible.

Control Output

Collapse Banner

Reduces the space taken up by the banner. 

Before:

After:

Uses: When you don’t need to be reminded about the console filter; e.g. a tilde(~) excludes non-Inspector+ console messages.

Show Client ID

Appends the client ID (cid) after the property ID of the pageview hit.

Before:

After:

 

Hide Highlights

Turns off the highlights for hits.

Before:

After:

 

Uses: When you don’t care if you don’t see the hits and the highlights distract you.

Ignore Internal Redirects

When forceSSL is not true in GTM fields to set, and the page is HTTP, the hit will be internally redirected from HTTP to HTTPS. This can be mistaken for a duplicate pageview if you aren’t careful. 

Hide SpecificEvents

Sometimes developers get verbose with dataLayer pushes and you may want to ignore one or more events. This uses a Regex match, so you can block multiple events you want with a well-formed regex.

Use: Hide dataLayer push events. 

Show Hits to a Specific Property

This will limit the GA output one specific property.

Use: When there are multiple properties and you are only interested in one.

CD Names

This feature will add the names of the CDs that are found in GA, to the network hit details and protocol definitions. Go to Custom Dimensions in the Custom Data area of Google Analytics admin panel, and you will see a green button that will allow you to add the CD names to the Inspector+. Make sure you have all of the CDs visible. There is also a way to share the CDs with those that don’t have access. The instructions and data will be logged to the console when you add the CD names.

To reset (clear all): This will remove all properties’ CDs.

Use: When you’re implementing and QAing a bunch of CDs that you don’t have memorized.

Show postMessage

Listens to window.message and pushes to the dataLayer the origin, data and the MessageEvent.

Uses: Communication monitoring from iFrames is a common use case; e.g. cross-domain tracking, video events and ads.

Show Mutations

Sets listeners on the head and body element of the DOM and logs the array of changes when they happen.

Uses: Answering the questions “What is changing, and when is it changing?” 

Hide Call Stack

Does not retrieve and display the call stack in the dataLayer.push details.

Use: Declutter the dataLayer push details.

Show Timing

dataLayer.push

The number of seconds since the document start (when the Inspector+ was first loaded), in thousands of seconds.

Use: Measure how long it takes for an event to happen or the duration of tag processing.

push processing time

The number of milliseconds the code takes to process the push; from push to callback.

NOTE: Both gtag and GTM process dataLayer pushes.

Other Analytics

Google Marketing

Floodlight and other Google Marketing hits are displayed in the console. 

Adobe _satelite

Dynamic Tag Manager is Adobe’s legacy tag management system. It’s being replaced by Launch. The feature is early Alpha, meaning it’s incomplete and may not be reliable. 

Adobe Analytics

Like Google Analytics, Adobe sends tracking hits to their own platform. The Inspector+ will monitor the hits and display them in the console similarly to how GA hits are displayed. The feature is early Alpha, meaning it’s incomplete and may not be reliable. 

Recommendation: Use Adobe Experience Cloud Debugger 

Telium

This is a tag management system (TMS) that is agnostic to the analytics platform. The inspector monitors view and link calls and displays the calls in the console, similarly to dataLayer pushes. This feature is in advanced beta and is planned to be released to the public.

Recommendation: Use with Tealium Tools

Facebook

Like Google Analytics and Adobe, Facebook sends hits to their own platform. Like GA and Adobe hits, these are displayed in the console. The feature is currently public.

Recommendation: Use with Facebook Pixel Helper

Custom Analytics

This feature will add a “monkey patch” to a function on an object and when the function is called, it will log to the console something similar to dataLayer.push..

 

Examples: window.addEventListener, dataLayer.push

A Common Question

Why does the dataLayer.push NOT expand when clicked?

This is usually due to the console filter either having something other than a tilde (~) or when the levels are too strict. 

Remedy: Use the tilde (~) for a filter and select “Default levels”. 

Known Issue

Console output

Incomplete output when DevTools is opened

On some sites, when you open the console, the output is incomplete. Refresh the page to see the complete output.