自定义数据属性 HTML 嵌套问题 + 使用 GTM 和 GA4 收集数据

Question

我正在使用 HTML 代码中的自定义数据属性 ( data-* ) 在我的网站上开发自定义事件跟踪。 收集的数据应使用 Google 跟踪代码管理器（支持使用变量、触发器和标签进行数据收集）发送到 Google Analytics。 但是，我面临几个问题。

我有不同的子级数据属性类别。 例如：

• data-analytics-region （下面嵌套数据属性）
• data-analytics-section-engagement （嵌套下面的数据属性）
• data-analytics-title （等）

这是一个例子：

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

我总是能够检索到正确的data-analytics-title值（这是上面代码中最低的数据属性类别级别）。 但是，对于其他数据属性，它失败了。

以下是我在 Google 跟踪代码管理器中设置数据属性数据收集的方式：

例如，如果我点击

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

这是我使用 Google Tag Assistant（预览模式）得到的结果：

如您所见，只有data-analytics-title具有值。

1. 我希望data-analytics-region和data-analytics-section-engagement也有一个值（这里它表示undefined ），这样我就能够知道用户点击页面的确切位置。 我究竟做错了什么？
2. 最后，它链接到我的第一个问题，我希望能够链接不同的数据属性，以便我知道来自哪个页面/部分/链接/等。 用户触发了一个事件。 我希望在我的 GA4 报告中清楚地了解这一点。 我该怎么做？

谢谢你的帮助：-）

Answer 1

我们需要知道的第一件事是用户点击了哪个元素。 您需要的数据是哪个元素。

我们来看一个简单版本的 html 代码。

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

现在用户正在单击z元素。 所以 GTM 触发器被触发并获得数据分析标题

但是我们没有从data-analytics-section-engagement和data-analytics-region中获得价值。 为什么？ 因为它们是不同的元素

所以我们需要先找到那些元素。 基于点击元素。 来自示例：我们需要根据z元素找到y元素和x元素。

我们几乎没有办法做到这一点。 我会尝试Element.closest()

尚未测试但类似于

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

您可能需要根据您的真实 html 调整代码，但方向是相同的。

Answer 2

我想出了这个（在 GTM 中设置为自定义 JavaScript 变量）：

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

不过还是什么都没有......所以我尝试使用 OpenAI Codex 但它提供的代码没有做任何事情：

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

有人有可能的解决方案吗？