Question

（前言：我不是编码员，所以如果我在这里歪曲了某些内容，请告诉我，我会尽力纠正或提供更多信息。）

我们在无序列表中向用户呈现了一系列搜索结果，其中包含父类，后跟许多有用的元数据，包括列表位置。像这样：

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

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

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

使用这个例子，上面的变量总是返回“知识库”，即使我点击新闻或博客文章（数据列表位置总是返回“1”也是如此。）

如何指定我想返回单击对象的变量而不总是只引用DOM中该类的第一个实例？

Answer 1

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

gtm.element.dataset.articletype

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

另一方面，如果链接标记直接放在li标签中，您应该使用以下内容：

gtm.element.parentNode.dataset.articletype

从父级访问数据。

Answer 2

首先，我看到你为暴雪娱乐公司工作。这就是麻烦。不幸的是，我提出的解决方案并非非开发人员友好，但希望您能够实现它。

我实际上能够在商店的暴雪主网站上测试这个。它与您发布的代码不完全相同，但逻辑应该非常相似！

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

<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来显示单击项目的列表位置。它应显示为＆＃39;项目位置=（项目位置＃）＆＃39;在GA。确保不删除任何单引号。他们是必要的！

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

Answer 3

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

如果您这样做，{{Click Element}}将自动更新并包含单击的元素。然后，您可以在HTML代码或自定义javascript变量中使用此功能，以通过{{Click Element}}.getAttribute('data-articletype')获取您的数据属性。

Answer 4

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

来自li属性

4 个答案: