To understand how Google Tag Manager can collect data and trigger tracking codes on user interactions, please read this article on the official GTM4WP website.
Ff you are now familiar with the concept of the data layer, you can install several browser extensions to unveil how the data layer is filled with data while using GTM4WP.
Let me show you some examples. All of those extension are available for free in the Chrome Web Store.
Adswerve dataLayer Inspector+
https://chrome.google.com/webstore/detail/adswerve-datalayer-inspec/kmcbdogdandhihllalknlcjfpdjcleom
One of the most popular extensions among Google Tag Manager users is this one. It can not just show you what information is added into the data layer but also the very details of many tracking codes like Google Analytics, Facebook Pixel, Adobe Analytics, etc.
All data is outputted into the console of Chrome thus you will need to open this while examining a page.
Click on each line in the console to see what key-value pairs have been added with that line:
Most lines that start with “Google – dataLayer.push()” will also include the event name that you can use within Google Tag Manager to create a Custom Event trigger that catches that event. The name of the event will be shown in bold at the end of the line title. You can also click to open more details and unveil additional data provided with that event:
dataLayer Inspector+ also provides you a fancy way to activate a Google Tag Manager container in any website, but only in your browser instance. This way, you can setup tracking even before developers have added the necessary container code into the website. In our case, you can use this feature to activate your very own Google Tag Manager container to test and setup tracking with GTM4WP features:
Click on the icon of the extension next to the address bar. It will open a settings panel. Open the “Advanced Options” section and the “Add functionality” subsection. Check the option “Insert GTM Container” and enter your own container ID. Enter gtm4wp.dev into the “Host” field and click on the “Save & Reload Page” button at the bottom of the panel.
The currently shown page reloads and your GTM container will be activated. Now you can use the preview mode of GTM and activate your triggers and tags but only in your browser, it will not affect other site visitors.
Data Layer Checker
https://chrome.google.com/webstore/detail/datalayer-checker/ffljdddodmkedhkcjhpmdajhjdbkogke
This extension does almost the same as dataLayer Inspector+ but instead of dumping everything into the browser console, it shows a bit more fancy visualization:
As you can see, you can read all data layer variable name and value. Each box will have a title: if you see just {data}, that means no event name was provided for that block of data layer variables. This is usually safe for the first item (actually the last in the list), subsequent lines should include an event name to make sure you can catch that moment with a Custom event trigger within GTM.
Clicking on the Settings button at the top right corner of the panel will show you some great options especially if you scroll down to the bottom of the settings page:
Enabling the “Browser console” option will output everything into the console panel as well, just like with dataLayer Inspector+. The GTM Injector is the same useful tool that you can use to activate a Google Tag Manager container on this Sandbox site, but only in your browser instance.
Do you know any other good browser extension? Send the URL using the contact form on the official plugin page.