Adobe Analytics – 应用Navigation Timing Object跟踪网页加载速度

在前几篇Adobe Analytics的文章中,我向大家介绍了如何跟踪和分析网站内容;而在网站分析中,网站访问速度是另一个分析的主要维度。这篇文章我会向大家介绍HTML5中网页性能分析接口:Navigation Timing API,以及在Adobe Analytics中集成插件并调用它进行数据跟踪。

Navigation Timing API - Breaking Down Page Load Event

在DOM生命周期中,我们很熟悉的开始——结束起止于onLoad事件:

var start = new Date().getTime();
function onLoad() {
var now = new Date().getTime();
var latency = now - start;
alert(“page loading time: “ + latency);
}

然而,这段代码的问题在于,它的真正起始时间是网页加载并且执行第一行Javascript代码,并没有为我们提供向服务器请求网页及JS文件的时间。对一个网页请求,我们更希望统计一个端到端的响应:从用户点击导航开始到页面请求完成。因此,在HTML5中,一个新的接口:Navigation Time API诞生了,目前支持它的浏览器包括Chrome、FireFox及IE9+,但不包括Safari、Opera以及IE8之前的版本。

Navigation Time API允许Javascript获取到客户端到服务端的完整时间,因为它记录了用户开始导航的时间戳navigationStart:

function onLoad() {
var now = new Date().getTime();
var page_load_time = now - performance.timing.navigationStart;
alert(“User-perceived page loading time: “ + page_load_time);
}

下图中是navigationStart至load过程中的所有事件:

timing-overview

 

集成Adobe Analytics插件

Adobe Analytics已经提供了网页加载时间的插件,实际上就是一个调用Navigation Timing Object的Javascript函数:

/*

  • Copyright 2011-2013 Adobe Systems, Inc.
  • s_getLoadTime v1.36 - Get page load time in units of 1/10 seconds
    */
    function s_getLoadTime() {
    if (!window.s_loadT) {
    var b = new Date().getTime(),
    o = window.performance ? performance.timing : 0,
    a = o ? o.requestStart : window.inHeadTS || 0;
    s_loadT = a ? Math.round((b-a)/100) : '';
    
    }
    return s_loadT;
    }
    针对未实现Navigation Timing API的浏览器,我们只能使用旧方式取得load时间,在scode.js文件开始或网站第一行Javascript中加入:
    var inHeadTS = (new Date()).getTime();

    接下来在s_doPlugins()函数中调用插件,将时间值写入到预先规划的prop中,这样当我们调用s.t()发送浏览事件时,s_doPlugins()会被调用并发送网页加载时间:
    s_doPlugins = function() {
    s.prop1 = s_getLoadTime();
    }

    这些数据将在Adobe Analytics中生成网页性能分析报表。
© 2018 Silent River All Rights Reserved. 本站访客数人次 本站总访问量
Theme by hiero