A plugin to find the dot notation from an event's element to another element on the page.
Find DOM elements and their values within the Data Layer fast. GTM dataLayer Sifter can be used to search a particular event in the Data Layer for a DOM element to be used in Google Tag Manager. TABLE OF CONTENTS 1. OVERVIEW 2. HOW TO USE IT 3. TO-DO 4. VERSION HISTORY -------------------- 1. OVERVIEW Every Analyst’s dream is to be able to find the data they’d like to track easily and comprehensively. With access to Google Tag Manager’s dataLayer and dot notation, you can pull out any value you’d like and send those values into Google Analytics or any other tracking system. The difficulty comes is finding those values within the massive amounts of data that exist inside the dataLayer. Say you have a form and you’d like to get the value of a dropdown within it whenever one is submitted. That information exists within the dataLayer as a selected value, but you’d need to sift through the element to find it, write down its path, and push it over to Google Tag Manager as a custom variable. This is time consuming and annoying. This plugin offers a solution. Introducing: GTM dataLayer Sifter. Let this plugin do the work for you, while you reap the data benefits. Just select your click or form submit event in the GTM dataLayer sifter console, and select another element on the page with your chrome element selector, and the plugin will return both the path to the value in dot notation and the path to the innerText in case the value is funky (and you know those values be Funky sometimes). The path will be given to you in dot notation, so just create a new GTM Data Layer Variable and copy-and-paste the selected path into the Data Layer Variable name. And voila! You’ve got yourself some dynamic data to do with what you will. Think of it as a treasure map to your data! 2. HOW TO USE IT Open Chrome Dev Tools and perform the action for which you’d like to see data (i.e. a click or a form submit). Navigate to your GTM dataLayer Sifter interface and select the click event or form submit event for which you’d like to return a user selection/value. Once you have your click or form event selected, use the dev tools element selector to select something like a dropdown value, form fill value, check box value, or radio button value for which you’d like data in association with that click/form event. The plugin will reveal a dot notation path to that element in the dataLayer. Copy that value and head back to Google Tag Manager. Select the Variables tabs and create a new user-defined variable. Paste the dot notation path into the element field and name your variable. Now you can use that variable associated with that event and send it with your Google Analytics event or another data tracker. 3. TO DO - Clean up code - Handle errors more gracefully - Update UI to better match GTM style 4. VERSION HISTORY v0.2 - September 13, 2016 - removed unnecessary permissions v0.1 - August 31, 2016 - First release - Clicking GTM Event in sidepanel, selecting an element on page returns dot notation for element and values
- (2018-11-05) Pete Blakemore: Fairly useful, but returns quite lengthy DOM element strings when an alternative shorter version is available in the dom. For example, for one element it gave me gtm.element.childNodes.3.childNodes.1.childNodes.3.childNodes.1.childNodes.1 When this alternative was available in the same datalayer and gave the same result gtm.element.parentNode.1
- (2017-07-12) Kevin Chamberlin: Great extension but had a little trouble with the instructions and kept missing a step. But Dan over at grueandbleen was quick to help. thanks again highly recommend this if you use GTM or any tag management system.
- (2017-04-24) Casey Pearson: Awesome tool! dataLayer sifter makes it so easy to dynamically capture data that otherwise would be impossible (or very difficult) for analysts like me who do not use JS on a day to day basis. Definitely a life saver!
- (2016-12-21) Dennis P: Makes it easy. I like to avoid the console as much as possible.
- (2016-12-03) Dmitri Ilin: Great tool! Can be quite useful for retrieving DOM elements' values in most cases. But sometimes you'd need to use good-old JS to get the desired value.
- (2016-09-01) Shwaman Josh: This makes my life as an analyst so much easier, its great to have data like this at my fingertips!
- (2019-07-26, v:0.3) Luthiers: Data Layer not found
It says data layer not found, but the GTM has it well installed
- (2018-11-14, v:0.3) Kristina Popat: DataLayer Not Found
I only ever see 'Datalayer not found'?
- (2018-08-02, v:0.3) DataLayer not found Chrom 68
Using GTM in Preview Mode but addon shows "DataLayer not found" in Chrome Console
- (2017-09-15, v:0.3) cannot extract the values
I have been trying to grab values from a field for over an hour and every time i click it using the element tool it continues to show "n/a". I am clicking on the even in the list of GTM events, and am then selecting the field I wish to grab the value from.