html - 使用 gtm 中的数据属性进行基于事件的跟踪

Question

我们正在尝试跟踪公司内部网站上的社交事件。不是像 facebook 或 twitter 那样的社交事件，而是我们自己的社交类型事件，如下所示，对于我们想要记录以下的每个社交事件 action:label:value

• 分享:电子邮件:{电子邮件地址数量}
• share:invite:{邀请的人数}
• 讨论:帖子:1
• 讨论:答案:3
• 评分:星级:--
• 评价:喜欢:--
• 标记:项目:--

我们在页面上设置了通用分析和谷歌标签管理器。我关注了this tutorial on event tracking using data attributes它正在发挥作用。我是这样设置的:

<ol data-ua-event-social data-ua-action="rate" data-ua-label="stars">
  ...interactive star elements go in here
</ol>

<div data-ua-event-social data-ua-action="share" data-ua-label="email" data-ua-value="3">
  // some javascript on the page sets the data-ua-value node
  // as the user picks who/how many to share with.
</div>

我设置了数据层变量来获取 gtm.element.dataset.uaAction、gtm.element.dataset.uaLabel 和 gtm.element.dataset .uaValue。有一个点击 - 所有元素触发器与 css 选择器 [data-ua-event-social] 匹配。

最后是一个在触发器上触发的标签，并使用自定义变量填充 ua 事件的操作、标签和值。我在跟踪代码管理器预览和分析实时事件中看到了这项工作。

但似乎在每个 html 可跟踪 html 元素上添加三到四个数据元素会给我的页面带来很多臃肿。

有什么方法可以将其结合起来或简化它吗？

我应该以完全不同的方式来做这件事吗？您能推荐一个展示其他方法的教程吗？

我们还有其他类别的事件，例如 navigation、media 等，我们也会遇到类似的问题。所以我需要一些可以扩展到所有类型的跟踪事件的东西。

Answer 1

您应该能够在数组中同时推送多个事件。我将在这里发布一个例子。我不确定这是否真的能缓解浮肿。无论哪种方式，都必须传入变量名称和值。您可以通过以下链接找到有关此内容的更多详细信息: https://developers.google.com/tag-manager/devguide#events .

<a href="#" onclick="dataLayer.push({
     'color': 'red',
     'conversionValue': 50,
     'event': 'customizeCar'
});">
    Customize Color
</a>