logo标签列表

我该如何通过Javascript监测用户点击链接？

javascripthtmlajax
3
我被分配任务确定是否可以使用javascript检测链接点击。我知道 onclick 属性可以部分实现此功能，但除此之外，我不知道最好的方法是什么。我已经告诉我的上司，这可能涉及某种形式的ajax，这可能涉及大型库，这是不可接受的。是否有其他方法而不是使用ajax，或者任何不会增加大量时间的使用ajax的方法？
编辑：他想要能够告诉有多少次用户在网站主页上使用了链接。不幸的是，我们无法进行流畅的服务器端解决方案，因为几乎所有页面都只是纯html。我很想将所有页面转换为php或其他替代方案，并注意 HTTP_REFERRER 数据，但目前不可能。我们已经使用了Google Analytics；它不记录引荐数据。
再次编辑：事实证明，我的老板没有看到覆盖层，我假设他点击了所有选项卡。经过我的调查，最初它们都报告零次点击，但我发现我们放置了旧版的Google Analytics说明。快速升级到新的精华版，问题就解决了。感谢所有回复。
你有后端吗？如果没有，并且Google Analytics不在考虑范围内，你的老板打算如何动态跟踪点击数据？ - Crescent Fresh
@crescentfresh：神奇的是，他们想要GA，只是似乎不知道如何正确使用它。 - GEOCHET
我不会对我上面的人的能力做出任何声明。 :) - Allyn
@Allyn，说真的：AJAX或其他JavaScript技巧在此处被提出需要一个后端来报告数据。如果您不使用Google Analytics，您打算如何解决这个问题？ - Crescent Fresh
嗯，它不需要一个复杂的后端。一点ajax到php脚本，更新数据库，问题解决了。总体来说相当简单，我只是发布了这个帖子，因为该页面每月有数百万次点击..不需要太多就能增加大量带宽使用。 - Allyn
10个回答
8
3

不讨论这是否是一个好主意，以下是可以实现您所要求的代码。

正如您所说，onclick事件是一种方法。您需要创建一个脚本来循环遍历a标签，并为它们分配一个onclick事件。代码如下：

<script type="text/javascript">
window.onload = function() {
  var a = document.getElementsByTagName("a");
  for(var i=0; i < a.length; i++ ){
    a[i].onclick = function() { alert("link clicked"); };
  }
}
</script>

如果你想告诉服务器有关点击事件的信息，而不是弹出警报框，那么你需要使用AJAX调用 :) 这个片段放在头部部分以起作用。
另一种方法是监听通用的window.onclick事件，并跟踪被点击的对象，如果它是一个a标记，你可以执行任何你想要的代码。
3
如果这是关于网站使用数据收集的话，您是否考虑过使用Google Analytics呢？
分析工具具有跟踪所有链接的能力，包括 AJAX 链接。 - Justin Yost
@Rich 如果我们不想将数据存储在谷歌服务器上怎么办？我更愿意处理文档点击事件并从中取出src元素。 - Ramesh
@Ramesh：对我来说，那听起来很愚蠢和多疑。为什么要重复造轮子呢？ - GEOCHET
@Rich - 假设客户是一家金融公司，不需要任何信息存储在他们的服务器之外。 - Ramesh
@Ramesh：你认为 Google Analytics 到底是做什么的，存储了什么数据？ - GEOCHET
显示剩余2条评论
2

jQuery.min.js的大小为30k或以下。这并不算大。

为什么你的老板想要监控链接点击呢？如果是针对你自己网站上的URL，那么你应该可以从访问日志或Google Analytics中获取此信息（或者一些更有用的变体）。

1

如果由于某些原因无法使用Google Analytics，请尝试处理window.onclick事件，并从事件对象中读取src元素。这将告诉您触发单击事件的对象。（我相信单击事件将同时触发键盘和鼠标）。

仅适用于IE的示例代码。如果需要其他浏览器，您可能需要修改代码。

document.onclick = function()
{
    alert(window.event.srcElement.id);
}
@cres - 它不会弹出警报，你可以通过将此ID作为获取参数调用页面。 - Ramesh
@Ramesh：是的，我知道，我只是在幽默一下 ;) - Crescent Fresh
1
如果您最终使用了jQuery（正如这里的某位发帖者所推荐的），您可以相当容易地拦截所有链接。例如，如果您想计算每个链接被点击的次数（按id索引），您可以编写类似以下代码的内容：
var clickCount = [];
$('a').click(function() { clickCount[$(this).attr("id")]++; return true; });
1
除了Google Analytics之外，您可能还希望查看ClickTale。它提供了网站覆盖层以及许多Google没有的功能。
1
0

在RXJS中：

        import { fromEvent } from 'rxjs';

        const source = fromEvent(document, 'click').pipe(
            filter(value => (value as any).toElement.localName === 'a'),
            map(value => (value as any).toElement)
        ).subscribe(value => {
            track('Clicked Outbound Link', {link: value.href})
        })
0

另一个你可能想要查看的伟大工具是http://mouseflow.com。鼠标跟踪、视频回放和热图。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接