-
Resolving Challenges with Custom Data Attributes and Google Analytics Integration
I’m fiddling around with custom event tracking on my website using these cool things called Custom Data Attributes (
data-*) in the HTML code. I’m supposed send this data to Google Analytics using Google Tag Manager, which fetches the data using stuff like variables, triggers, and tags. But I’ve ran into a speed bump or two.I’ve got different sub-level data attribute categories like:
data-analytics-region(nesting further data attributes)data-analytics-section-engagement(again, more nesting)data-analytics-title(low-level stuff)
And here’s a lil’ example:
// (bunch of HTML code goes here -- I’m assuming you don’t need the assistant to rephrase this exact large HTML sample in less formal tone)I got no problem grabbing the right
data-analytics-titlevalue (the low-level stuff in the example). But, for some reason, I can’t get the rest of the data attributes. Bummer.Here are some photos of how I’ve set up the data attributes data collection in Google Tag Manager:
For instance, when I click on something like this:
<a class="icon icon-after icon-chevronright" href="/fr/services/maintenance/" target="_self" rel="follow" data-analytics-title="Learn more - Maintenance" aria-label="En savoir plus sur l'entretien">En savoir plus</a>And here’s the result from Google Tag Assistant (using the preview mode):
You see? Only the
data-analytics-titlehas a value. So,- I want
data-analytics-regionanddata-analytics-section-engagementto spit out some values. Right now, all they’re giving me isundefined. That way I can know where users click on my page. JuSt where am I going wrong? - Also, I wanna figure out how to connect different data attributes so I can tell which page/section/link/etc. set off a user event. That way, I can feel like a detective in my GA4 Reports. Can anyone show me the way?
Thanks guys! 🙂
-
2 Replies
-
Sure, here’s how it works.
Suppose you’ve got a simple version of the HTML code. A user clicks on an element, let’s call it “z”. Now when the user does this, Google Tag Manager (GTM) springs into action and captures the “data-analytics-title”.
‘Yeah, but why don’t we get the values for the “data-analytics-section-engagement” and “data-analytics-region” too?’ I hear you ask. Well, it’s because those are different elements entirely!
What we need to do next is to find these elements, y and x. You see, all of these tags are related, just like a family tree! We’ve got the clickable ‘z’ element that originates from the ‘y’ and ‘x’ elements.
Now there are a couple ways we can find these, but I recommend trying the Element.closest() approach. We’re gonna use this to navigate from our click point, the ‘z’, upwards to the ‘y’ and ‘x’ elements.
Here’s a bit of JavaScript that might help you capture those elusive “data-analytics-section-engagement” and “data-analytics-region” values:
`javascript
var clickElement = {{Click Element}};
var findXElement = clickElement.closest(‘x’);
var dataAnalyticsRegionValue = findXElement.getAttribute(“data-analytics-region”);
var findYElement = clickElement.closest(‘y’);
var dataAnalyticsSectionEngagementValue = findYElement.getAttribute(“data-analytics-section-engagement”);
`Oh, before I forget: you may need to tweak the code slightly to fit your real HTML content. But hey, isn’t the process of discovery fun? You’re on the right track!
I hope this helps. Happy coding!
-
Your issue might be related to the way you’re nesting your data attributes. Remember that data attributes should be directly related to an element to be able to fetch them efficiently. So you might want to check how you have structured your HTML code. As for connecting different data attributes, Google Analytics 4 has the capability of creating complex event-based tracking which can be set up to listen to these attributes and you can use that to relate which page/section/link triggered an event. Make sure all data is being captured properly in your HTML, that Google Tag Manager is set up correctly to fetch this data, and that Google Analytics is correctly set up to receive and categorize this data. It might be a bit of trial and error to get it right but hang in there!
Log in to reply.