在 Google Analytics 中,可以使用 Event Tracking 功能跟踪自定义的事件。但是,如果你要跟踪的是一个链接点击,那么单纯这样写则很有可能导致漏掉许多事件:
<a href="http://www.example.com" onclick="_trackEvent('link', 'click', this.href)">Visit example.com</a>
这是因为,每次自定义事件被触发的时候,浏览器都会向 Google 的服务器发送一个请求,从而发送数据。但是点击链接会直接进入下一个页面,如果此时需要发送的请求还没有完成,浏览器就会放弃该请求而直接跳转。所以,就会导致事件无法被记录。
解决方法
经典跟踪代码 (ga.js) 的解决方法
既然事件没有记录是因为跳转得太快,那么我们可以通过setTimeout
函数设定一个比较小的延时来给浏览器充足的时间向 Google 的服务器发送数据。一般设为 500ms 或 1000ms 就足够了,同时用户也不会察觉到。
我们可以把触发事件的语句包装到一个自定义函数中:
var trackOutboundLink = function(url) { _trackEvent('link', 'click', url); setTimeout("document.location='" + url + "'", 500); }
同时在 HTML 中这么写:
<a href="http://www.example.com" onclick="trackOutboundLink(this.href);return false;">Visit example.com</a>
其中return false
语句防止了默认行为(点击a
而跳转)的发生,实际跳转由我们自己来完成。
Universal Analytics (analytics.js) 的解决方法
Google 建议的方法
如果你已经升级到了 Universal Analytics,那么 Google 给出了这种情况下的官方建议。在新版的跟踪代码中,设置事件的函数包含了一个 callback,在成功设置完毕后触发。于是我们可以把手工跳转的代码写到 callback 函数中,这样就不用显式地设置 timeout 了,同时浏览器也能够「尽快」跳转。
同样声明一个包装函数:
var trackOutboundLink = function(url) { ga('send', 'event', 'outbound', 'click', url, {'hitCallback': function () { document.location = url; } }); }
这次,使用了hitCallback
,它所对应的函数将在成功发送事件信息后被调用。类似,HTML 代码中这么写:
<a href="http://www.example.com" onclick="trackOutboundLink('http://www.example.com'); return false;">Check out example.com
(以上两段示例代码来自 Google 官方文档,链接见上文)
还可以做得更好
本来教程到这里就可以结束了,可是还有一点值得说明。上述解决方法在绝大多数情况下是完全没有问题的,但是除了一种情况:浏览器无法正常发送事件数据到 Google 服务器。例如,如果 Google 的服务器忽然「无法访问」(你懂的),或者加载analytics.js
失败,那么hitCallback
就将永远不会被调用。这种情况下这个链接就变成点了也没用的了。
在访问 Google 完全没有问题的情况下,这种情形自然不必考虑。不过为了提供最大程度的保障,可以人工加一个防御措施:
var trackOutboundLink = function(url) { var redirectTriggered = false; ga('send', 'event', 'outbound', 'click', url, {'hitCallback': function() { redirectTriggered = true; document.location = url; } }); setTimeout(function() { if (!redirectTriggered) { document.location = url; } }, 1500); }
即,在进入trackOutboundLink
之后,设置 1500ms 的过期时间,如果时间到了还没有跳转,就人工跳转,保证访客可以正常访问。
原文地址:http://www.renfei.org/blog/google-analytics-event-tracking-for-links.html
Google Analytics:为链接点击设定事件追踪的方法的更多相关文章
-
Google Analytics 统计用户点击和每个页面浏览的用户id
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-805xxx-10"></sc ...
-
Google Analytics谷歌分析事件之非互动事件
非互动事件官方的解释如下 “非互动”一词是指可选的布尔值参数,此参数可以传递到用于发送事件命中的方法.通过此参数,您可以确定要如何为网站上包含事件衡量的网页定义跳出率.例如,假设您的首页上内嵌有一个视 ...
-
jquery 触发a链接点击事件
jquery 触发a链接点击事件 <p class="btnSubmit"><a href="javascript:submitData();" ...
-
使用 Google Analytics 跟踪 JavaScript 错误
Google Analytics(谷歌分析)不仅仅是一个流量统计工具,你还可以用它来测量广告活动的有效性,跟踪用户多远到所需的页面流(从点击广告到购物车到结账页面)获取,并基于用户的信息设置浏览器和语 ...
-
vue-cli的工程如何正确使用Google Analytics?
前言 最方便的方法,莫过于使用vue-analytics:https://github.com/MatteoGabriele/vue-analytics. 包是有了,可是真正使用起来会发现Google ...
-
Google Analytics 学习笔记三 —— GA常用术语
一.Sessions 1.会话,指定的时间段内在网站上发生的一系列互动,例如一次会话可以是网页浏览.事件或电子商务等.参考Google Analytics(分析)如何定义网络会话 2.会话结束的方式分 ...
-
【转载】国内网站博客数据统计选免费Google Analytics还是百度统计
[转载]国内网站博客数据统计选免费Google Analytics还是百度统计 Google Analytics谷歌统计是我用的第一个网站统计工具,当然现在也一直在用.Google Analytics ...
-
Google Analytics for Firebase 是一款免费的应用评估解决方案,可提供关于应用使用和用户互动情况的数据分析
Google Analytics for Firebase Google Analytics for Firebase 是一款免费的应用评估解决方案,可提供关于应用使用和用户互动情况的数据分析.Fir ...
-
Google Analytics Advanced Configuration - Google Analytics 高级配置
该文档提供了Android SDK v3的部分元素的高级配置说明. Overview - 概述 Android Google Analytics SDK提供了Tracker类,应用可以用它给Googl ...
随机推荐
-
Android 6.0权限适配
targetSdkVersion 23以上,必须适配新的权限模式 安卓6.0及之后,权限分为三类 1.不涉及隐私的正常权限,如innernet2.危险权限 3.特殊权限 system_alert_w ...
-
editGrid自定义列自定义F7
添加自定义列,配置控制自定义F7 自定义F7的地址为连接界面的url /dynamicPage.do?event=initialize&method=doEvent&uipk=com. ...
-
MongoDB命令学习
mongodb不像关系型数据库有很强大的GUI客户端,虽然mongodb也有,但功能和稳定性实在不敢恭维,所以操作mongodb我们大部分 都是用类似cmd命令的方式(mongodb称为shell操作 ...
-
com.service.impl
package com.service.impl; import java.util.ArrayList; import java.util.LinkedHashMap; import java.ut ...
-
Oracle EBS-SQL (SYS-24):职责列表
select B.application_name, TL.responsibility_name from fnd_responsibility_tl tl, fnd_responsibility ...
-
Loadrunner 读取文件
char buffer[1000]; long file_stream; char * filename = "d:\log.txt"; file_stream=fopen(fil ...
-
浅谈js中null和undefined的区别
在JS中,null和undefined是经常让人摸不着头脑的东西,尤其是在数据初始化以及处理的过程中,经常稍微不注意,就会让页面在渲染时出现报错,下面来细说下,这两者之间的区别: null 表示一个对 ...
-
原生js的一些研究和总结(1)
数据类型 基本类型值包括: undefined,null,Boolean,Number和String,这些类型分别在内存中占有固定的大小空间,它们的值保存在栈空间,我们通过按值来访问的. 引用类型包括 ...
-
Android双击退出
重写返回键 private long tempTime = 0; /** * 双击退出 */ @Override public void onBackPressed() { long firstCli ...
-
C#线程安全类型
1.IProducerConsumerCollection (线程安全接口) 此接口的所有实现必须都启用此接口的所有成员,若要从多个线程同时使用. using System; using System ...