Custom Data Attributes HTML Nesting issues + Data Collection using GTM and GA4

Question

I'm developing custom event tracking on my website using Custom Data Attributes ( data-* ) in the HTML code. The data collected should be sent to Google Analytics using Google Tag Manager (that enables the data collection using variables, triggers, and tags). However, I'm facing several issues.

I have different sub-level data attribute categories. For example:

• data-analytics-region (nesting the data attributes below)
• data-analytics-section-engagement (nesting the data attributes below)
• data-analytics-title (etc.)

Here is an example:

        <section class="homepage-section collection-module" data-module-template="tiles" data-analytics-region="tiles">
            <div data-unit-id="maintenance" data-analytics-section-engagement="maintenance">
                <div class="unit-wrapper">
                    <a class="unit-link" href="/fr/services/maintenance/" target="_self" rel="follow" data-analytics-region="learn more"></a>
                    <div class="unit-copy-wrapper">
                        <h4 class="headline">Entretien</h4>
                        <h5 class="subhead" role="presentation">Moteur de performances<br class="large-hide medium-hide small-show" /> qui tiennent la route.</h5>
                        <div class="cta-links">
                            <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>
                            <a class="icon icon-after icon-chevronright nowrap" href="/fr/contact/" target="_self" rel="follow" data-analytics-title="Free estimate - Maintenance" aria-label="Obtenez gratuitement un devis">Devis gratuit</a>
                        </div>
                    </div>
                    <div class="unit-image-wrapper">
                        <figure class="unit-image unit-image-maintenance-tile" data-progressive-image></figure>
                    </div>
                </div>
            </div>
            <div data-unit-id="financing" data-analytics-section-engagement="financing">
                <div class="unit-wrapper">
                    <a class="unit-link" href="/fr/services/financing/" target="_self" rel="follow" data-analytics-region="learn more"></a>
                    <div class="unit-copy-wrapper">
                        <h4 class="headline">Financement</h4>
                        <h5 class="subhead" role="presentation">Pour toutes les marques.<br class="large-hide medium-hide small-show" /> Et toutes les bourses.</h5>
                        <div class="cta-links">
                            <a class="icon icon-after icon-chevronright" href="/fr/services/financing/" target="_self" rel="follow" data-analytics-title="Learn more - Financing">En savoir plus</a>
                        </div>
                    </div>
                    <div class="unit-image-wrapper">
                        <figure class="unit-image unit-image-financing-tile" data-progressive-image></figure>
                    </div>
                </div>
            </div>
        </section>

I was always able to retrieve the correct data-analytics-title value (which is the lowest data attribute category level in the above code). However, for the other data attributes, it failed.

Here is how I set up the data attributes data collection in Google Tag Manager:

For example, if I clicked on

<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>

Here is what I get using the Google Tag Assistant (preview mode):

As you can see, only the data-analytics-title has a value.

1. I want the data-analytics-region and data-analytics-section-engagement to have a value as well (here it says undefined ), so that I'm able to know where exactly the user clicked on the page. What am I doing wrong?
2. Finally, and it is linked to my 1st question, I want to be able to link the different data attributes so that I know from which page/section/link/etc. the user triggered an event. I'd like to have a clear view of that in my GA4 Reports. How can I do so?

Thanks for your help:-)

Answer 1

First thing we need to know is that user is clicking which element. And the Data you need is which element.

Let's take a simple version of the html code.

<x data-analytics-region="xxx">
  <y data-analytics-section-engagement="yyy">
    <z data-analytics-title="zzz">
    </z>
  </y>
</x>

Now the user is clicking the z element. So the GTM trigger fired and get the data-analytics-title

But we don't get the value from data-analytics-section-engagement and data-analytics-region . Why? Because they are different element

So we need to find those element first. Based on the click element. From the example: We need to find the y element and x element based on z element.

There are few ways we can do it. I would try on the Element.closest()

Not test yet but similar to

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");

You might need to adjust the code based on your real html but the direction is the same.

Answer 2

I've come up with this (set as a Custom JavaScript Variable in GTM):

 function() { var clickElement = {{Click Element}}; var findAnalyticsTitle = clickElement.closest('a'); var dataAnalyticsTitleValue = findAnalyticsTitle.getAttribute("data-analytics-title"); var findAnalyticsButton = clickElement.closest('button'); var dataAnalyticsButtonValue = findAnalyticsButton.getAttribute("data-analytics-button"); var findAnalyticsSectionEngagement = clickElement.closest('section'); var dataAnalyticsSectionEngagementValue = findAnalyticsSectionEngagement.getAttribute("data-analytics-section-engagement"); var findAnalyticsRegion = clickElement.closest('div'); var dataAnalyticsRegionValue = findAnalyticsRegion.getAttribute("data-analytics-region"); return dataAnalyticsRegionValue + ' | ' + dataAnalyticsSectionEngagementValue + ' | ' + dataAnalyticsButtonValue + ' | ' + dataAnalyticsTitleValue; }

Still nothing though... So I tried with OpenAI Codex but the code it provided didn't do anything:

 function() { var region = {{Click Element}}.getAttribute('data-analytics-region'); var sectionEngagement = {{Click Element}}.getAttribute('data-analytics-section-engagement'); var title = {{Click Element}}.getAttribute('data-analytics-title'); var button = {{Click Element}}.getAttribute('data-analytics-button'); if (region == null) { region = {{Click Element}}.parentElement.getAttribute('data-analytics-region'); } if (sectionEngagement == null) { sectionEngagement = {{Click Element}}.parentElement.getAttribute('data-analytics-section-engagement'); } if (title == null) { title = {{Click Element}}.parentElement.getAttribute('data-analytics-title'); } if (button == null) { button = {{Click Element}}.parentElement.getAttribute('data-analytics-button'); } if (region == null) { region = {{Click Element}}.parentElement.parentElement.getAttribute('data-analytics-region'); } if (sectionEngagement == null) { sectionEngagement = {{Click Element}}.parentElement.parentElement.getAttribute('data-analytics-section-engagement'); } if (title == null) { title = {{Click Element}}.parentElement.parentElement.getAttribute('data-analytics-title'); } if (button == null) { button = {{Click Element}}.parentElement.parentElement.getAttribute('data-analytics-button'); } if (region == null) { region = {{Click Element}}.parentElement.parentElement.parentElement.getAttribute('data-analytics-region'); } if (sectionEngagement == null) { sectionEngagement = {{Click Element}}.parentElement.parentElement.parentElement.getAttribute('data-analytics-section-engagement'); } if (title == null) { title = {{Click Element}}.parentElement.parentElement.parentElement.getAttribute('data-analytics-title'); } if (button == null) { button = {{Click Element}}.parentElement.parentElement.parentElement.getAttribute('data-analytics-button'); } return region + ' | ' + sectionEngagement + ' | ' + title + ' | ' + button; }

Anyone with a possible solution?