• Google Analytics:为链接点击设定事件追踪的方法


    在 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 的过期时间,如果时间到了还没有跳转,就人工跳转,保证访客可以正常访问。

    原文链接:https://www.renfei.org/blog/google-analytics-event-tracking-for-links.html

  • 相关阅读:
    Vue路由跳转时修改页面标题
    Vue整合Quill富文本编辑器
    XML中的转义字符
    整合SSM框架环境搭建
    Android搞定权限申请
    Android实现秒开效果
    tail -f 与tail -F的区别
    druid 启动报错
    sqoop flume学习笔记
    20180911
  • 原文地址:https://www.cnblogs.com/xs-yqz/p/5679860.html
Copyright © 2020-2023  润新知