如何知道页面浏览时长系列之 Web 篇_查看网页浏览时间

一、前言页面浏览时长是网站分析中很常见的一个指标，反映用户在某些页面上浏览时间的长短，体现了网站用户黏性然而精确的页面浏览时长是很难统计的，比如需要考虑单页面网页应用路由切换、用户切换浏览器 tab、最小化及恢复浏览器窗口等多种复杂场景。

因此，为了解决上述问题，神策数据 Web JS SDK 1.18.14[1] 版本推出了 Web 页面浏览时长功能[2]该功能可以在用户授权同意后自动采集页面浏览时长，不耦合或入侵客户业务代码此外，在 1.21.5 版本[3]兼容了单页应用。

下面，我们一起来看一下神策数据 Web 端分析页面浏览时长的三种方案二、方案一对于网站或者 App 来说用户一系列的行为是一次访问，即 Session（会话）举个例子介绍一下：如果把网站或者 App 比喻成一个商场，那互联网用户的行为就如同逛街的顾客，他们从商场任意一扇门进入，然后东逛逛西瞅瞅，有的意兴阑珊很快就离开了商场，有的兴致不错买了一些商品后才离开。

对于商场而言，顾客一系列的行为是一次来访，同理对于网站或者 App 来说，用户的一系列行为就是一次会话[4]Session 分析功能可以从页面浏览行为推算出用户大概的页面停留时间，一般情况下使用这个功能就足够了。

2.1 原理简介使用 Session 分析功能分析页面浏览时长，可以先在神策分析页面定义一个只包含 Web 页面浏览事件（$pageview）的 Session用户访问页面时，会触发一次 $pageview 事件，在这个页面内无论点击哪个按钮触发点击事件，都还在当前页面。

因此计算两个页面 $pageview 事件的时间间隔，更符合计算逻辑根据行业经验值，一般网页端的 Session 切割时间建议设置为 30 分钟（可根据业务自定义时间），即相邻两个 $pageview 事件的间隔大于 30 分钟就切割。

比如用户 A 打开神策官网后，立即离开座位参加了 1 小时会议，回来后继续浏览其他页面，两次 $pageview 事件间隔大于 30 分钟明显是异常值，不能算作同一次会话中假设用户 A 会话从 10 点开始，具体行为序列如图 2-1 所示，切割为 3 个 Session：

在神策分析环境中，按如图 2-2 所示查询某个具体页面的浏览时长：

2.2 优缺点优点：1. 业务代码侵入性小；2. 埋点成本低，只需开启全埋点的 Web 页面浏览事件采集即可；3. 兼容切换 tab、单页应用场景这两种场景下 $pageview 事件均可正常采集缺点：

1. 只能大致分析页面浏览时长，精确度不高；2. 一般都会少于用户实际在网站上停留的时间，因为无法知道最后一个页面上的停留时间三、方案二使用 Session 分析功能达不到严格的分析标准，而精确的页面停留时长又很难统计。

例如一个用户很可能同时打开多个网页窗口，然后一直不关闭如果只是想要统计页面打开到关闭的时间，可以使用手动埋点3.1 原理简介当进入某个页面时获取开始时间，页面关闭或者进入一个新的页面时（此时视为当前页面已经消失）获取结束时间，页面浏览时长 = 结束时间 - 开始时间。

具体可参考以下代码（使用 jQuery 检测页面开始浏览和离开事件）：var loadHandler = function(e) { : T, g1 N, D, h5 a1 h, @7 J2 M# } start = new Date();, ]' n* |( L8 n) n6 k }; 1 j+ a9 e% T3 w9 B% a& l% j9 V4 a& w+ _ var unloadHandler = function (e) {* u- W4 K! n3 ^) P- A6 m var end = new Date(); ; F& y, k% q) y // 如果用户一直不关闭页面，可能出现超大值，可以根据业务需要处理，例如设置一个上限 4 u6 {- R% w% _" \# V- J# J var duration = (end.getTime() - start.getTime()) / 1000;# I& M6 \+ [, b6 z" n6 t0 R // 定义一个记录页面停留时间的事件 pageclose,并且保存需要的属性(停留时间和当前页面的地址)( i" o! H% a8 n" p, J sensors.track(pageclose, {. r$ g* @2 f4 I8 ]- K$ R& [+ m' { $event_duration: duration, . o4 G% ^, T) C: Q; [! w* [ $url: window.location.href& t2 |. @5 \! g5 }- P8 E }); 0 U8 O% J) _' }& E" N };, v+ Q |# ~/ d ! a& ]! X3 K$ d if (onpageshow in window) {* S1 c% e' p) K' q- J; J $(window).on(pageshow, loadHandler);: Z( y" |5 H9 n $(window).on(pagehide, unloadHandler);! G( b2 D8 Y1 H/ J8 P; N } else {6 k& K n) y2 M- I, u $(window).on(load, loadHandler); 8 ]: E. e6 H: K $(window).on(unload, unloadHandler);1 U1 j; z m4 ~2 J9 H1 h8 R: D }

3.2 优缺点优点：1. 灵活性强，能满足各种特殊场景的时长采集；2. 精确度较高缺点：1. 业务代码侵入性大；2. 埋点成本高四、方案三通过上面的介绍可以知道，Session 分析功能准确性不够；手动埋点对客户业务代码侵入性大，并且客户使用的成本较高。

随着客户对页面浏览时长采集的需求日渐增长，神策数据重新调研和实现了精确统计页面浏览时长的方案，推出了 Web 页面浏览时长功能该功能可以在用户授权同意后自动采集页面浏览时长，不耦合或入侵客户业务代码，只需要简单一行代码，即可开启页面浏览时长采集。

并且在 Web JS SDK 1.21.5 版本兼容了单页应用4.1 原理简介我们可以把一个页面生命周期抽象为三个动作：「进入」、「活跃状态切换」、「离开」，如图 4-1 所示：

核心原理如下：1. 神策数据 Web JS SDK 会在页面的「活跃状态切换」、「离开」这两个生命周期，采集页面浏览时长事件（$WebPageLeave 事件），其中浏览时长属性（event_duration）是指页面浏览的时长（单位是秒）；2. 配合心跳备份方案，每隔 5 秒（默认）心跳模式更新 LocalStorage 中备份的页面浏览时长。

在异常关闭浏览器或 App 被强杀等事件上报失败的场景下，再次进入页面时会将 LocalStorage 中备份的页面浏览时长事件进行补发$WebPageLeave 事件数据上报到神策分析后，可以使用如下条件分析页面的浏览时长，如图 4-2 所示：

4.2 采集流程如果想要使用采集页面浏览时长的功能，只需要在初始化 Web JS SDK 之后，添加一行代码使用 PageLeave 插件：sensors.use(PageLeave[, option]) 即可。

option 为页面浏览时长可选配置参数，示例代码如下：sensors.use(PageLeave, { custom_props: { page_title:我的标题 }, heartbeat_interval_time: 5 })) F0 a B& T; R' x& E2 _! m // 设置页面浏览时长自定义属性 page_title 为我的标题，并设置页面浏览时长心跳记录刷新时间为 5 秒。

采集页面浏览时长的流程如图 4-3 所示：

4.3 核心逻辑4.3.1. 页面展示检测页面的 pageshow 事件，获取当前时间为 PageLeave 的开始时间代码如下所示：/**; l: P5 F. Q0 | * 添加页面展示检测$ W7 G6 D2 o" V$ }' \7 R8 g */# F0 Y% f! T% T) T+ h7 N" O PageLeave.prototype.addPageStartListener = function () {7 H8 W) b4 S( c( x/ @3 V `7 @2 T var _this = this;0 o2 {; y" ]4 l; U! F; h5 b; A if (onpageshow in window) {3 t h. z3 E( k/ ~4 U: e$ R1 P1 Q this._.addEvent(window, pageshow, function () { / A+ q4 o0 a% w _this.pageStartHandler();( @$ t8 B. i s) | _this.hiddenStatusHandler(); 6 z/ A5 Z4 A2 E d1 F6 W });- x# u6 T9 B' E6 Q8 a }0 ?' W0 o" v$ m/ e3 L) B, P1 M };5 q8 Q2 W0 u/ H4 h' w& e9 d * `* d i9 J3 z4 z- H8 M% t /**$ J9 }- l: F ~3 ]0 g * 页面展示检测处理程序 4 O, d7 A3 \$ e3 a! \ */ r2 t2 c1 ^ f' g/ x PageLeave.prototype.pageStartHandler = function () { & r' p0 p! q3 i2 [% d' v9 G this.start_time = +new Date(); ; n/ [' d0 X% T9 h : f6 w" Z0 q8 k2 \* T! x if (!document.hidden === true) {+ B4 Y3 K: \0 j6 q) D7 q; }7 I this.page_show_status = true; 5 b- s( N) [8 q. a } else {! \/ {2 \" F: g$ X% _- u) k. X" m this.page_show_status = false;' Y. O( t* F* y0 l1 D/ X& } N }) d8 j) {' M1 J' v, T! R this.url = location.href; 4 d7 [& S" a) Z4 f0 n1 C };。

4.3.2. 页面切换检查是否支持 visibilitychange，页面获取焦点 focus 的时候去调用页面展示检测方法，页面失去焦点 blur 的时候去调用页面关闭检测方法，并发送 $WebPageLeave 事件。

代码如下所示：/**8 C9 B: U: j+ q * 添加页面 tab 切换检测; ?% V- G0 ]$ i$ C# u */: H h$ H7 j8 m( T; C PageLeave.prototype.addPageSwitchListener = function () { & K" |: Z& a0 D! o) Y var _this = this; 2 Q* p; @+ ~& N: H( `. Q this._.listenPageState({' s& {# N2 N7 F" Q visible: function () { * R: a" P( z6 M$ p. { m _this.pageStartHandler();; B4 @' ?4 X% e5 @1 u f N- @ // 修正 page_hidden_status 5 z& H& N9 J; X% s _this.hiddenStatusHandler(); * b7 K+ l' q7 T" L // 显示时，开始心跳记录及心跳补充 - v0 u7 q! k( z. f& Z0 Y _this.startHeartBeatInterval();4 q$ Y- ?* X0 F3 Q E: a }, * ]$ \/ G/ J9 \# `* | hidden: function () {& N% u# t6 } |3 ^+ Y, j // 切换 tab 时，为当前页面的关闭，url 为当前页面 url，referrer 为改变前的 url$ G4 [* P7 y' w0 n* [1 \, J _this.url = location.href;# g* [) C# W: D1 B H& @' F _this.pageEndHandlear();, s1 q4 i X3 i i // 隐藏时，停止心跳记录及心跳补充+ O+ u% K8 T; U, r/ B _this.stopHeartBeatInterval();0 _4 Q) J" d0 U } 6 y, q% N. A. l" G });; f1 F2 t- N7 v; j9 ?% L" B };

4.3.3. 单页面跳转如果 Web JS SDK 发现 Hash 模式或 history 模式跳转，则执行 singlePage.prepend 方法此方法将里面的 function 插入到数组起始位置，先发送 $WebPageLeave 事件后停止心跳记录及心跳补充。

下个页面打开时记录开始时间，重新开始心跳记录及心跳补充，同时触发当前页面的 $pageview 事件/** + l6 B: W) K4 x; j1 J: Q+ G) N% |: d * 添加单页面切换检测 * {' m" b7 Y7 E2 q */ g, R- n1 |( \8 v5 | PageLeave.prototype.addSinglePageListener = function () {3 o9 ~% s% Z+ c7 P& E6 a var _this = this;6 k7 Z5 O" Q {* y) ~5 j: a // 检测 Hash 及 history 跳转，根据开关进行控制 5 X3 e) n# X4 I this.sd.ee && . |. t8 _& ^! Z- c1 w5 e3 | this.sd.ee.spa.prepend(switch, function (last_url) { : F$ X+ [+ p/ s: u- ` // 检测 Hash 及 history 跳转 & n) {* N+ }7 w3 i3 D4 l if (last_url !== location.href) {6 V+ v$ Q* }! W0 a2 A // 指定上一个页面地址为pageleave的页面url 4 o1 U3 C2 s8 c3 H% @3 }1 i T C1 \ _this.url = last_url;' f4 F7 B3 u5 x // 触发页面关闭, s$ q6 V8 u' C+ {- X+ h- G& n$ i _this.pageEndHandler();: R8 d9 }' m7 v4 m# L3 _9 i3 N4 g" k // 停止心跳记录及心跳补充! P( ]0 f2 b; D6 p2 W- e: C _this.stopHeartBeatInterval();. h7 h" T1 ^ y // pageleave发送完毕后，且url发生改变，将referrer切换为改变前的url* f# h) j# j6 l( L6 h _this.current_page_url = _this.url; ( V7 j' y3 Q5 P- q. n- h) I // 触发页面打开3 S! Q* x4 Q6 s9 ~# L _this.pageStartHandler();+ r, r8 H; e; G' \; J+ i) d // 修正 page_hidden_status. W0 e* |$ a1 O; |. a/ l3 z" Y: O _this.hiddenStatusHandler();- ]7 @( Z* h* w; J) \: X! a: R* y // 显示时，开始心跳记录及心跳补充 9 q9 E% I# P# ?! `2 D+ s% p _this.startHeartBeatInterval();9 i- u4 D3 t7 q1 G, ] } ; o/ X) Z8 J% O+ P2 ~+ y6 J }); 7 I$ e3 `6 a4 Z# g7 ~ };

4.3.4. 页面关闭页面的关闭事件是检测 pagehide、beforeunload、unload 这三个事件页面浏览时长（event_duration）= 当前时间 - 开始时间组装页面浏览时长等属性数据到 data 中，触发 $WebPageLeave 事件。

刷新页面关闭状态，并删除当前页面心跳记录代码如下所示：/** / m3 C/ {9 K0 ?, z ~ * 添加页面关闭监听 6 t% n7 d' U" \! O6 J6 v6 j */ ) V( o8 {) V9 m# d( B0 J PageLeave.prototype.addPageEndListener = function () {' Z8 C) }0 b7 |+ j: K! ~ var _this = this;/ Z" W( r+ K7 u% `9 j. c this._.each([pagehide, beforeunload, unload], function (key) { ( b) H; @( F$ e if (on + key in window) { 3 A4 v( ~7 M! C7 ~; `3 r# T _this._.addEvent(window, key, function () {( ~1 X1 v6 @9 w! S _this.pageEndHandler(); # Q! U& b6 P" b6 f3 a6 G2 y a( s : q$ K3 l; a* B: K // 停止心跳记录及心跳补充" [ h$ F- J3 h* b+ t3 g _this.stopHeartBeatInterval();1 M9 f, c) q# ]* F4 o) @ });0 z6 a% J8 T9 u9 }7 s; e g: L: R }! `4 o4 W) B; P( g+ r( [0 ]2 L }); 1 P* P( D- R+ A( M9 D5 U };3 s, _: m+ l; q$ A 2 k3 M- v7 w. V& I9 K8 s /** }# _ o& K- h6 ~' c% n- { * 页面关闭检测处理程序' @* l, v0 ?8 @6 s */ ' O+ O& B* b D9 ~ PageLeave.prototype.pageEndHandler = function () {' w7 j1 V: M3 Y+ |: j# q3 Y if (this.page_hidden_status === true) return; N( ~5 }0 \7 N) v * N) Z" B2 n1 V0 o9 U9 z2 V9 h* { var data = this.getPageLeaveProperties(); . O- h. c! V! a) g/ X# h" K if (this.page_show_status === false) { 5 u2 |6 A' R: }( ~ delete data.event_duration;! y) Q8 S; m9 b' [7 r } / a# g) Z* F8 T- ^$ _. T // 切换页面状态 0 ?6 S ` k& [, z9 u$ L( u! V# d& Y this.page_show_status = false;; a; o- s6 A+ |' n0 L this.page_hidden_status = true; 7 @% A% k8 F1 p3 S: I+ Q8 w$ t& V5 W3 j" J% B! V: E if (this.isCollectUrl(this.url)) { ) y7 ~% r9 U! k! N0 Q this.sd.track($WebPageLeave, data);+ y: f* u% c* z6 e" m- a# v } * T# `! d; z* U" ^# Z$ s( K3 S* j( l x // 刷新页面关闭状态 + I4 o8 C7 e. I2 z$ S this.refreshPageEndTimer(); + P0 u5 J$ A/ f // 删除当前页面心跳记录2 Q9 n# G5 B' U1 h- U this.delHeartBeatData();; U% |3 ?1 j, `6 b3 J! x5 } };

4.3.5. 心跳记录初始化时设置的心跳记录，默认页面浏览时长（event_duration）最小为 3.14s3.14s 是首次设置心跳补发写入 localStorage 的浏览时长，每隔一定时间会更新浏览时长，目的是为了解决检测不到页面关闭，导致 $WebPageLeave 事件丢失的问题。

然后组装 $WebPageLeave 数据，定时更新 localStorage 中记录的当前页面的 page_id 和 $WebPageLeave 的数据代码如下所示：/** ! y' w, c! `" K% \ * 心跳记录6 F7 e, S* I8 \- P( t' \( g */: J, S0 ^5 }5 v PageLeave.prototype.saveHeartBeatData = function (type) { + ~- I ?1 M9 q var pageleave_properties = this.getPageLeaveProperties();/ k' y! j8 Y" O // 使用设备时间 ( G8 O5 {: d% c3 \0 ? pageleave_properties.$time = new Date(); 5 b! u, E! ^/ r. m2 j if (type === is_first_heartbeat) {- M$ X, U' r2 c2 C( T pageleave_properties.event_duration = 3.14;5 p& J- S1 i+ G" |; _5 [7 L7 N } + d* G7 K1 d c 6 K7 D. ~* o- ] i0 y var data = this.sd.kit.buildData({+ `- D2 d5 m" I+ A3 } type: track,+ @/ Z2 r- X( q& ~% ` event: $WebPageLeave,, c, _# `* v# k7 O7 _ properties: pageleave_properties 9 ~% s' ~6 b: g) J/ y }); " e# ~7 G. ]( U t) i9 s1 z // 记录当前页面的 heartbeat_interval_time# a/ P8 q. O& `- C2 [ // 作用：在对比超过阈值时间时，根据原页面所使用的配置。

! o6 ^) u, _; }6 X+ I' Z data.heartbeat_interval_time = this.heartbeat_interval_time; ( A: p5 z* _; C0 @ this.sd.store.saveObjectVal(this.storage_name + - + this.page_id, data);% A7 g u5 U4 d' z2 o% U& @ };。

4.3.6. 补发数据获取 window 上 localStorage 的长度进行比较，检查是否有上次页面浏览时的心跳记录尚未发送，进行补发并删除上次页面浏览时长事件的记录代码如下所示：/**( l1 \2 F' N7 W! w4 s * 补充数据 & u k( d. F; Z$ @) `0 }4 _ */ d4 Y6 R2 @! m: l PageLeave.prototype.reissueHeartBeatData = function () { 3 m' m @: G0 W5 ? var storage_length = window.localStorage.length;0 ]6 Z+ u- F) K3 v* X $ L. \$ `. R. L, @% D, Q for (var i = storage_length - 1; i >= 0; i--) { 8 A' k) U" k: M* Y0 l2 ^5 M* B$ R& p var item_key = window.localStorage.key(i);2 N7 z+ D- U2 S$ v o; _5 {2 E if (item_key && item_key !== this.storage_name + - + this.page_id && item_key.indexOf(this.storage_name + -) === 0) {1 G$ ^! a Q d. P4 ?3 G var item_value = this.sd.store.readObjectVal(item_key);- n: a- @3 b, M6 T5 `$ d; X8 Q if (this._.isObject(item_value) && new Date() * 1 - item_value.time > item_value.heartbeat_interval_time + 5000) {( k( ^( | }/ d# ?- P' l delete item_value.heartbeat_interval_time; ' y, o3 E; K3 ]! n( A9 O this.sd.kit.sendData(item_value);7 Y4 z8 c7 I" Y this.delHeartBeatData(item_key); + J4 x, f( Y9 D% `5 i" A }. G1 l- Z2 B( @, o- E L+ W" ~6 L# \ }* B. Y4 h" l4 V; Y5 ~8 N" J2 P; t }4 \- H& L+ ^1 z1 v2 g/ W };+ a7 e5 G2 D' w8 V 。

页面浏览时长功能的时序图如图 4-4 所示：

4.4 支持场景说到这里，大家一定想知道目前神策分析 Web JS SDK 支持采集哪些场景下的页面浏览时长这里总结了几种场景供大家参考，如下所示4.4.1. PC 端的支持情况注意：hash 兼容 IE8 以上，history 兼容 IE10 以上。

IE9 hash 模式跳转支持，history 模式跳转不支持，所以 IE8 及以下采集不到单页面切换时的页面浏览时长PC 端的支持情况如图 4-5 所示：

4.4.2. 手机端的支持情况手机端的支持情况如图 4-6 所示：

另外，通过微信打开网页，微信浏览器关闭、刷新、前进后退、杀死微信等场景可以正常采集页面浏览时长App 内嵌 H5 页面，App 退到后台、点击 App 的返回键、杀死 App、息屏等场景也均可以正常采集页面浏览时长。

五、总结本文对于神策数据 Web 端分析页面浏览时长的三种方案进行了讲解，介绍了 Session 分析功能、手动埋点、Web 页面浏览时长功能的实现原理及优缺点实际场景中，建议将分析方式与分析目标相结合：。

如果想大致分析各页面的浏览时长，不追求极致的精准度，使用 Session 分析功能方便快捷，业务代码侵入性小；如果有特殊需求，比如页面上具体某一部分的浏览时长，可以使用手动埋点，精准度高且满足实际需求，但对业务代码侵入性强；

除此以外，可以使用精确统计页面浏览时长功能，埋点成本低，精准度高，兼容单页面等多种场景当然，目前我们的采集页面浏览时长功能还不够完美，仍然在不断地更新迭代，欢迎大家在开源社区与我们进行交流，更多细节可以参考神策分析 Web JS SDK 源码[5]。

参考文献：[1]https://github.com/sensorsdata/sa-sdk-javascript/releases/tag/v1.18.4[2]https://manual.sensorsdata.cn/s

a/latest/tech_sdk_client_web_high-42795073.html#id-.SDKAPI(Web)v2.3-%E9%A1%B5%E9%9D%A2%E6%B5%8F%E8%A7%88%E6%97%B6%E9%95%BF

[3]https://github.com/sensorsdata/sa-sdk-javascript/releases/tag/v1.21.5[4]https://www.sensorsdata.cn/blog/ru-

he-ying-yong-sensors-analytics-jin-xing-session-fen-xi/[5]https://github.com/sensorsdata/sa-sdk-javascript