Google Tag Manager (GTM) is a super useful tool for getting data into Google Analytics as well as a number of other tools. GTM is infinitely customizable and can fit almost anyone’s needs, if you have just a bit of knowledge of the toolset and Javascript. In this article we’ll walk through how to use GTM to grab data attributes from HTML and store that.
An HTML data attribute is a very simple thing: it’s a bit of text that is put inside an HTML element in order to label it. Data attributes are non-essential, and are simply used for containing a bit of date that you’d like to some how keep alongside some HTML, say a button, div, or collection of elements, like a card.
“class” is a type of data attribute though it’s become much more than that over the years (it used to be one of the few allowed). Modern data attributes will sit inside your standard HTML tags, but they will start with “data-“. Here’s an example:
div id="tangerine" data-segment="mango" data-size="10">stuff</div
You see the normal id attribute and then some arbitrary data that might be easy to understand but probably don’t mean a whole lot unless you built the website. The attributes won’t do anything on their own, but you can use JS or tools like GTM to grab the data attributes and store the contents. This is useful for analytics and other metrics gathering.
Here’s the scenario: You are running GTM, you have HTML with data attributes, and you want to grab and store them when there is some kind of interaction with that element (almost always a click, so let’s go with that, but it could be anything).
GTM doesn’t have a built-in tool for grabbing a data attribute, so we’ll need to use the custom Javascript function to get them. The good news is that the JS is very simple once you know the basics.
This isn’t a GTM basics guide, so you probably also know GTM relies on a Tag, a Trigger, and a Variable (or variables).
In this example we’ll be using the Google Analytics tag to trigger a custom event when an element with a data attribute is clicks. So the tag is Google Analytics: Universal Analytics. This will be set to use Track Type = Event and then the Category, Action, and Label will be ones that make sense for your scenario. One of these three might be a variable populated by our data attribute, but we could also use a custom dimension for that.
The trigger is the thing that causes the tag to fire. A typical trigger for data attribute storage would be Click – Just Links, with some limits to the type of Click URL, like “contains xyz” or “starts with cloudconfusing.com”.
You might have lots of variables in involved here, but at least one of them is going to contain the data attribute. The point of the whole articles is how do you get the data attribute into your GTM variable?
To store the data attribute you’ll need to go to Variables and then User-Defined Variables, and then “New“. Choose a Custom Javascript variable and populate it with this:
function() {
return {{Click Element}}.getAttribute('data-MY_ATTRIBUTE');
}
GTM understands the {{Click Element}} macro as being the element of what was clicked.
getAttribute is how Javascript knows to look for an HTML attribute on whatever you define in the parentheses. In this case it’s “data-MY_ATTRIBUTE”. You could customize this with some tweaking like {{Click Element}}.parentElement.getAttribute("data-MY_ATTRIBUTE");
And that should be it!
Sal February 22nd, 2020
Posted In: Analytics