在 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:为链接点击设定事件追踪的方法的更多相关文章

  1. Google Analytics 统计用户点击和每个页面浏览的用户id

    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-805xxx-10"></sc ...

  2. 如何使用DTM将App事件发送到Google Analytics

    本文分享于华为开发者论坛<如何使用DTM将App事件发送到Google Analytics>,可观看视频具体集成指导. 作为一名开发者或App运营人员,实时获取用户在App中的行为数据是日 ...

  3. Google Analytics谷歌分析事件之非互动事件

    非互动事件官方的解释如下 “非互动”一词是指可选的布尔值参数,此参数可以传递到用于发送事件命中的方法.通过此参数,您可以确定要如何为网站上包含事件衡量的网页定义跳出率.例如,假设您的首页上内嵌有一个视 ...

  4. jquery 触发a链接点击事件

    jquery 触发a链接点击事件 <p class="btnSubmit"><a href="javascript:submitData();" ...

  5. 使用 Google Analytics 跟踪 JavaScript 错误

    Google Analytics(谷歌分析)不仅仅是一个流量统计工具,你还可以用它来测量广告活动的有效性,跟踪用户多远到所需的页面流(从点击广告到购物车到结账页面)获取,并基于用户的信息设置浏览器和语 ...

  6. vue-cli的工程如何正确使用Google Analytics?

    前言 最方便的方法,莫过于使用vue-analytics:https://github.com/MatteoGabriele/vue-analytics. 包是有了,可是真正使用起来会发现Google ...

  7. Google Analytics 学习笔记三 —— GA常用术语

    一.Sessions 1.会话,指定的时间段内在网站上发生的一系列互动,例如一次会话可以是网页浏览.事件或电子商务等.参考Google Analytics(分析)如何定义网络会话 2.会话结束的方式分 ...

  8. 如何使用Google Analytics Universal Analytics增强型电子商务

    Google Analytics: Universal Analytics增强型电子商务,可以让运营人员轻松地跟踪用户在其购物历程中与产品的互动,包括产品展示.产品点击.查看产品详情.将产品添加到购物 ...

  9. 【转载】国内网站博客数据统计选免费Google Analytics还是百度统计

    [转载]国内网站博客数据统计选免费Google Analytics还是百度统计 Google Analytics谷歌统计是我用的第一个网站统计工具,当然现在也一直在用.Google Analytics ...

随机推荐

  1. USBSpirit(USB精灵)更新到1.2.300.105

    USBSpirit(USB精灵)是CopyU!的内核引擎,CopyU!的主要功能均由该引擎提供,此次更新主要内容如下:(版本号:1.2.300.105) 1.[修复]:修复了几处引擎的资源泄露问题,提 ...

  2. 【转】Java多线程操作局部变量与全局变量

    原文网址:http://blog.csdn.net/undoner/article/details/12849661 在这篇文章里,我们首先阐述什么是同步,不同步有什么问题,然后讨论可以采取哪些措施控 ...

  3. delphi7编写客户端调用java服务器端webservice示例

    1. 首先取得java-webservice服务器端地址.我的是:http://localhost:8080/mywebservice/services/mywebservice?wsdl 2. 然后 ...

  4. 黑马程序员_Java集合Map

    Map Map概述: 接口Map<k,v> 类型参数: k-此映射所维护的键的类型 v-映射值的类型 Map集合:该集合存储键值对.一对一对往理存.而且要保证键的唯一性. 嵌套类摘要: s ...

  5. 什么是Ajax? (转载于疯狂客的BLOG)

    Ajax的定义 Ajax不是一个技术,它实际上是几种技术,每种技术都有其独特这处,合在一起就成了一个功能强大的新技术. Ajax包括: XHTML和CSS,使用文档对象模型(Document Obje ...

  6. (2015多校第6场)HDU5361--In Touch (Dijkstra应用)

    In Touch Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total ...

  7. Remove Node in Binary Search Tree 解答

    从BST中移除一个节点是比较复杂的问题,需要分好几种情况讨论. 如这篇文章,就讨论了删除节点 1.有无左右子树 2.只有右子树 3.只有左子树 三种情况. 一种简单些的思维是只考虑删除节点是否有右子树 ...

  8. 今天在写powershell脚本中犯的两个错误

    可能是因为牙痛没睡好,今天老是犯错,还是脚本写错,特别难调. 第一个错误: powershell脚本里面,函数与函数互相调用的传参.其实就像调用普通的cmdlet一样的写法,应该这么写: Add-Sc ...

  9. Android全局变量使用

    1.通过一个Data.java实例类,能够实现全局数据保存,这里就不多说了,学Java的都知道. 2.Android特有的Application,是应用的入口,执行贯穿整个app执行过程,能够在这个类 ...

  10. iOS动画开发之五——炫酷的粒子效果

    在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一现,想用UIKit框架写出一款炫酷的休 ...