如何使用 Google Analytics 跟踪 html 元素中的点击次数答案

【问题标题】：How to track the clicks in html elements using Google Analytics如何使用 Google Analytics 跟踪 html 元素中的点击次数
【发布时间】：2016-09-28 14:37:00
【问题描述】：

我有多个 div、select 和 span html 标签，具有唯一的 ID 和类。每个 div 和 span 都有 onclick 并用作幻灯片和按钮。

我想跟踪号码。对每个 div 的点击次数，选择并跨越以了解哪个 div 被点击的次数最多。

我如何使用 Google Analytics 做到这一点？

【问题讨论】：

标签： javascript html google-analytics onclick

【解决方案1】：

您应该使用 GA 事件跟踪https://developers.google.com/analytics/devguides/collection/analyticsjs/events

活动是专门为您想要的而设计的

事件是用户与内容的交互，可以独立于网页或屏幕加载进行跟踪。下载、移动广告点击、小工具、Flash 元素、AJAX 嵌入元素和视频播放都是您可能希望作为事件进行跟踪的操作示例。

由于每个元素都有一个 onclick，因此只需在其中放置一个 ga 事件，例如：

ga('send', 'event', 'click on element', 'div', 'id = my_id');

当然，你可以用这样的一个函数来实现它：

document.querySelectorAll('div,span,select').forEach(function(elem,index){
   elem.addEventListener('click',function(){
      var myId = elem.id;
      var tagName = this.tagName.toLowerCase();
      ga('send', 'event', 'click on element', tagName, myId );
   },false)
});

请注意，如果您有嵌套的 div，单击内部的 div 会冒泡到它的包装器并创建多个事件

【讨论】：

像这样，例如<div class="slider-selection" onclick="sliders.term.Move(window.event); ga('send', 'event', 'click on element', 'div', 'class= slider-selection');"></div>?
完全正确。您将能够在“实时”->“事件”下立即在您的谷歌分析中看到它
所以我会将现有的 onclick 函数和每个 div/span/select 中的 ga 结合起来，这些都有一个 onlick 事件？
是的。您还可以使用我的函数自动将 eventListeners 添加到所有 div、span 和 select 中