来自 li 属性的 GTM 自定义变量

Question

（前言：我不是编码员，所以如果我在这里表达不当，请告诉我，我会尽力更正或提供更多信息。）

我们将一系列搜索结果以无序列表的形式呈现给用户，父级 class 后跟许多有用的元数据，包括列表位置。像这样：

<li class="article-panel" data-articletype="knowledgebase" data-list-position="1">...</li>
<li class="article-panel" data-articletype="blog" data-list-position="2">...</li>
<li class="article-panel" data-articletype="news" data-list-position="3">...</li>

我正在尝试创建一系列变量以允许我们在事件中使用元数据，以便我们可以跟踪被单击对象的列表位置作为事件的标签或值。我运行遇到的问题是，因为这些对象中的每一个都使用相同的 class 名称，所以变量总是 returning 只有第一组值，无论我是哪个对象点击。

Variable configuration: 
DOM Element
CSS Selector
Element Selector = .article-panel
Attribute Name = data-articletype

使用这个例子，上面的变量总是 returning "knowledgebase"，即使当我点击新闻或博客文章时（数据列表位置也是如此总是 returning "1".)

如何指定我想要 return 单击的对象的变量而不总是只引用 DOM 中那个 class 的第一个实例？

Answer 1

只需创建自定义（数据层类型）变量，例如：

gtm.element.dataset.articletype

它应该捕获自定义属性中的值。然后你可以将它用于事件等。

另一方面，如果 link 标签直接放在 li 标签中，你应该使用这样的东西：

gtm.element.parentNode.dataset.articletype

从父级访问数据。

Answer 2

首先，我看到你在暴雪娱乐工作。那是毒品。遗憾的是，我将介绍的解决方案对开发人员而言并非友好，但希望您能够实施它。

我实际上能够在商店中的暴雪主网站上对此进行测试。和你贴的代码不太一样，但是逻辑应该很相似！

我建议为此创建一个自定义HTML 标签。我已经编写了以下脚本，您可以将其粘贴到 Custom HTML Tag 字段中：

<script>
(function ($) {
   $(function () {
      $('li.article-panel').click(function() {
        var label = $(this).attr('data-list-position');
        dataLayer.push({
            'event': 'GAEvent', 
            'eventCat': 'Your Event Category', 
            'eventAction': 'Your Event Action', 
            'eventLabel': 'Item Position = ' + label,
            'gaNonInt': false
        });
      });
   });
}(jQuery));
</script>

您可以为此代码使用网页浏览触发器。将其设置为仅在您的列表所在的页面上触发。别担心，标签不会推送数据，除非通过单击 <li> 元素激活 JQuery 功能。

现在，为了使其正常工作，您需要为事件类别 (eventCat)、事件操作 (eventAction)、事件标签 (eventLabel) 等设置变量。我的变量可能与您的不同，因此您需要将它们换掉。

在 dataLayer 数组中（在附加函数中找到），您还需要更改附加到每个变量的字符串。因此，将 eventCat 设置为您想要的事件类别名称，并对 eventAction 执行相同的操作。我设置了 eventLabel 来向您显示所单击项目的列表位置。它在 GA 中应读作 'Item Position = (item position #)'。确保您没有删除任何单引号。他们是必要的！

如果可以的话，我建议让开发人员帮忙！我可以向您介绍每个功能的作用，但可能很难理解。也就是说，如果您有任何问题，请告诉我！干杯！

Answer 3

如果要访问已单击列表元素的元数据，则不应使用 DOM 类型变量。相反，您应该启用内置变量集中的点击变量，特别是 {{Click Element}}.

如果您这样做，{{Click Element}} 将自动更新并包含单击的元素。然后，您可以在 HTML 标记或自定义 javascript 变量中使用它，通过 {{Click Element}}.getAttribute('data-articletype').

获取您的数据属性

Answer 4

谢谢大家的提示。不幸的是，无论我们做了什么，我们都无法找到一种方法让 Google Analytics 在 CSS 树中注册具有更高变量的事件；事实上，我们的实现似乎正在发生某些事情，以防止该 UL 级别中的任何触发器持续触发。我们决定将元数据标签进一步添加到实际的交互事件中，以便它在点击级别注册并避免任何 CSS-Selector 触发器。

来自 li 属性的 GTM 自定义变量

GTM Custom Variables from li attributes

google-analytics

google-tag-manager