Fatal编程技术网

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

google-analytics

Google analytics 来自li属性的GTM自定义变量,google-analytics,google-tag-manager,Google Analytics,Google Tag Manager,（前言：我不是编码员，所以如果我在这里误传了什么，请让我知道，我会尝试更正或提供更多信息。） 我们在一个无序列表中向用户展示了一系列搜索结果，其中包含一个父类，后跟许多有用的元数据，包括列表位置。大概是这样的： <li class="article-panel" data-articletype="knowledgebase" data-list-position="1">...</li> <li class="article-panel" data-article

（前言：我不是编码员，所以如果我在这里误传了什么，请让我知道，我会尝试更正或提供更多信息。）

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

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

gtm.element.parentNode.dataset.articletype
使用这个例子，上面的变量总是返回“knowledgebase”，即使我点击新闻或博客文章（数据列表位置也总是返回“1”）

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

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

gtm.element.dataset.articletype
它应该捕获放置在自定义属性中的值。然后您可以将其用于事件等

另一方面，如果链接标记直接放置在li标记中，则应使用如下内容：

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

gtm.element.parentNode.dataset.articletype
要从父级访问数据。

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

gtm.element.dataset.articletype
它应该捕获放置在自定义属性中的值。然后您可以将其用于事件等

另一方面，如果链接标记直接放置在li标记中，则应使用如下内容：

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

gtm.element.parentNode.dataset.articletype
从家长处访问数据。

首先，我看到你在暴雪娱乐公司工作。那是毒品。不幸的是，我将介绍的解决方案不是非开发人员友好的，但希望您能够实现它

事实上，我可以在暴雪的主要网站上，在商店里进行测试。它与您发布的代码不完全相同，但逻辑应该非常相似

我建议为此创建一个自定义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.article panel'）。单击（函数（）{
var label=$（this.attr（'data-list-position'）；
数据层推送({
'event'：'GAEvent'，
“事件类别”：“您的事件类别”，
“事件操作”：“您的事件操作”，
“eventLabel”：“项目位置=”+标签，
“加诺宁”：假
});
});
});
}（jQuery））；
您可以对此标记使用页面视图触发器。将其设置为仅在列表所在的页面上激活。别担心，标签不会推送数据，除非通过单击
    • 元素激活JQuery功能

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

    在
    数据层
    数组（位于附加函数中）中，还需要更改附加到每个变量的字符串。因此，将eventCat设置为所需的事件类别名称，并对eventAction执行相同的操作。我设置eventLabel以显示所单击项目的列表位置。在GA中应该读为“项目位置=（项目位置#）”。确保不要删除任何单引号。它们是必要的

    如果可以的话，我建议找一个开发者来帮忙！我可以引导您了解函数的每一部分的功能，但它可能很难理解。也就是说，如果你有任何问题，请告诉我！干杯

    首先，我看到你在暴雪娱乐公司工作。那是毒品。不幸的是，我将介绍的解决方案不是非开发人员友好的，但希望您能够实现它

    事实上，我可以在暴雪的主要网站上，在商店里进行测试。它与您发布的代码不完全相同，但逻辑应该非常相似

    我建议为此创建一个自定义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.article panel'）。单击（函数（）{
var label=$（this.attr（'data-list-position'）；
数据层推送({
'event'：'GAEvent'，
“事件类别”：“您的事件类别”，
“事件操作”：“您的事件操作”，
“eventLabel”：“项目位置=”+标签，
“加诺宁”：假
});
});
});
}（jQuery））；
    您可以对此标记使用页面视图触发器。将其设置为仅在列表所在的页面上激活。别担心，标签不会推送数据，除非通过单击
    • 元素激活JQuery功能

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

    在
    数据层
    数组（位于附加函数中）中，还需要更改附加到每个变量的字符串。因此，将eventCat设置为所需的事件类别名称，并对eventAction执行相同的操作。我设置eventLabel以显示所单击项目的列表位置。在GA中应该读为“项目位置=（项目位置#）”。确保不要删除任何单引号。它们是必要的

    如果可以的话，我建议找一个开发者来帮忙！我可以引导您了解函数的每一部分的功能，但它可能很难理解。也就是说，如果你有任何问题，请告诉我！干杯

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

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