Use GTM dataLayer sifter for retrieving DOM elements’ values

Google+Tweet about this on TwitterShare on FacebookShare on LinkedIn

Here’s a quick tip on how to get value of a certain DOM element (ex. form field) on different kind of events using Google Tag Manager. In case you missed it, there is now a very handy tool called GTM datalayer sifter created by Grueandbleen team. Using this Chrome extension, you can easily retrieve almost any necessary value from your DOM. In this article I’d like to provide a quick guide on how to use this tool.

GTM datalayer sifter - chrome extension

Download the extension

First, you’d want to download the extension itself. Here’s a link. And, yes, it’s absolutely free.

Use-case

Suppose, you have a table containing four different PDF documents (see the pic below). And you want to retrieve the document’s title each time the pdf download link is clicked so later you can determine the most-coveted document and put the download link for it right at the top of the page (thus helping your visitors).

GTM datalayer sifter - table

 

Using GTM datalayer sifter, you can easily do that. The extension itself offers a simple step-by-step guide.

GTM datalayer sifter - guide

If you’ve gone through all the steps correctly, in your results panel you should see three dot notations.

GTM datalayer sifter - results

Use the notation in GTM datalayer variable

Since we want to retrieve the value of the element, we will use the “path to the element” notation. So, all that remains is to:

  • create a dataLayer variable which uses the above notation for the name

GTM datalayer sifter - variable

  • use this variable in the UA Event tag which fires each time the download link is clicked

GTM datalayer sifter - tag

That’s it! Now we can easily track the title of the document that’s been downloaded.

GTM datalayer sifter - ga results

The advantages of the tool are obvious! It lets you retrieve the value of the desired element without any coding. Here’s an example of a custom JS variable I’d create in case I wanted to use vanilla JavaScript for getting the above title.

Makes sense, doesn’t it?

For example, using this extension, you can easily get the values of the form fields on your site. But please do mind Google Analytics Terms of Service before passing any users’ personal data to GA.

Caveats

Though in most cases the above solution works perfectly, there are circumstances which claim the usage of Javascript (see the example of the Custom JS variable above).

Summary

In case you need more information, here’s a video guide on how to use the extension for retrieving fields’ values of a form that you may find useful.

Google+Tweet about this on TwitterShare on FacebookShare on LinkedIn

Tag Manager ,
  • Pingback: Tracy Glastrong()