SPE

概述

SPE用户体验监控 SPE（single-page Event简称SPE）是基调听云推出的针对单页面应用和单页面事件的真实用户体验性能监控解决方案。

SPA单页面应用(Single Page Application，SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。当用户点击链接并与网页互动时，系统将以动态方式加载后续内容。应用会经常更新地址栏中的网址来模仿传统的网页导航，但始终不会再发出整个网页加载请求。

SPE适用场景：

• 单页面应用监控： 在单页面应用中嵌入基调听云Browser 探针即可监控应用主页面的性能，而基于Ajax请求的虚拟页面，可通过SPE绑定为事件监控，即可监控到其事件（虚拟页面）的响应耗时，包含事件调用次数、平均响应时间、服务器端响应次数、服务器端平均响应时间、Ajax请求量、Ajax平均响应时间、Ajax错误率、事件成功率等指标。适用于Backbone、Knockout、AngularJS、Avalon等主流单页面框架。

• 单页面事件监控：单个网页内部某个可以点击的交互元素，例如注册、添加购物车、下载、移动广告点击、小工具、Flash 元素、AJAX 嵌入式元素以及视频播放等事件，都可以通过SPE进行监控其用户操作过程中响应耗时体验。

说明：应用需嵌入1.7.0以上版本探针，方可使用SPE用户体验功能。

分类

SPE事件分3类:

• 预定义SPE事件：需要在基调听云控制台中预先创建事件，使用生成的event key在嵌码中标识事件。

• 自动创建SPE事件：可以直接指定key为事件名称, 相同key的事件将被归为一种事件。

• 跨页面事件

容错代码

事件监控的基础是，应用必须已嵌入并加载Browser JS探针，故为防止探针移除或未加载提前调用导致的事件监控错误， 请务必在事件代码前加入容错代码，代码如下：

//容错代码，当前页面声明一次即可，当移除tingyun_rum.js时进行容错处理
if(!window.TINGYUN){window.TINGYUN={};window.TINGYUN.createEvent=window.TINGYUN.createAutoEvent=function(){var e={};e.end=function(){};e.fail=function(){};e.store=function(){};return e};window.TINGYUN.endStoreEvent=function(){}};

如果不添加容错代码，建议在调用接口前自行判断接口可用:

例如:

if (window.TINGYUN && window.TINGYUN.createEvent) {
    window.TINGYUN.createEvent({
        ...
    });
}

下面详细说明3种事件的使用方式:

预定义SPE事件

步骤1: 报表新建事件并获取key。

进入基调听云控制台，依次点击**用户体验分析 -> SPE用户体验分析 -> 新建事件**，创建事件并获取key。

步骤2: 创建事件。

var event = TINGYUN.createEvent({
    name: '转向商品列表', // 填写预定义事件名称，名称起标注作用
    key: '9f2d4b5c-15f1-4d4b-8d0b-e603283c0a4b' // 填写创建的事件的key
});

步骤3: 结束事件。

当认为事件成功时：

event.end();

当认为事件失败时：

event.fail();

场景示例:

以用户加入购物车为例，监测用户点击“加入购物车”这个事件的耗时及加入购物车动作是否成功，可参考以下示例代码：

<button id="add-btn">加入购物车</button>

$('#add-btn').click(function(){
    //创建加入购物车事件
    var event = TINGYUN.createEvent({
        name: '加入购物车',
        key: '9f2d4b5c-15f1-4d4b-8d0b-e603283c0a4b'
    })
    //发送xhr请求保存到购物车
    $.post('/cart/add',{},function(response){
        if(response.status==true){
            //成功操作,事件结束
            event.end();
        }else{
            //业务失败，记录事件失败
            event.fail();
        }
    });
});

自动创建SPE事件

创建方式

自动创建事件可以在key属性中指定事件名称，不需要在基调听云控制台提前创建，使用createAutoEvent接口:

window.TINGYUN.createAutoEvent(options);

示例：

var event = window.TINGYUN.createAutoEvent({
    key: '事件1' // 自定义事件名称
})

// ...

event.end();

// 或

event.fail();

createAutoEvent options对象选项列表：

使用场景

VueRouter切换自动监控

对于VueRouter路由切换，探针提供了专用的API做支持，此API内部通过createAutoEvent创建自动事件实现，适用于有beforeEach 和 afterEach 路由守卫的VueRouter版本:

window.TINGYUN.wrapVueRouter(router[,options]);

嵌码示例:

Vue 项目main.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Foo from './components/Foo';
import Bar from './components/Bar';

Vue.use(VueRouter);
const routes = [
    { path: '/foo', name: 'foo',component: Foo},
    { path: '/bar', name: 'bar', component: Bar }
];
const router = new VueRouter({
    routes
});

// 监控代码开始
if (window.TINGYUN && window.TINGYUN.wrapVueRouter) {
    window.TINGYUN.wrapVueRouter(router, {
        endDelay: 500 // 切换路由后延迟结束时间
    });
}
// 监控代码结束

new Vue({
    router
}).$mount('#app');

wrapVueRouter options对象选项列表：

wrapVueRouter内部在vueRouter的路由守卫beforeEach， afterEach中分别开启和尝试在一定时间内结束自动创建事件。开启此监控后，可以在每次路由切换后生成一次名称为新路由的事件，并关联路由加载之后一段时间内发起的请求。

其他框架路由切换监控

对于未提供封装API的其他框架，可以通过自动创建事件API createAutoEvent 实现相同的监控效果，下面以react router为例：

React Router 3 监控路由切换示例：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
import Page1 from './component/Page1'
import Page2 from './component/Page2'
import Dashboard from './component/Dashboard'

browserHistory.listen(function(location) {
  // 嵌码示例开始
  if (window.TINGYUN && window.TINGYUN.createAutoEvent) {
    window.TINGYUN.createAutoEvent({
      key: location.pathname, // 事件名称，可以是路由名称
      autoEnd: true, // 标识此事件将会自动结束
      endDelay: 500, // 可选，自动结束的延迟时间, 不配置默认200ms
    });
  }
  // 嵌码示例结束
});

ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Dashboard} />
      <Route path="page1" component={Page1} />
      <Route path="page2" component={Page2} />
    </Route>
  </Router>
), document.body)

跨页面事件

SPE 通常监控单页面中的事件，如果事件在同域条件下跨页面需要使用跨页面事件API（跨页面事件API也可以在同一个页面使用，但普通使用方式效率更高且更简洁，因此建议在需要跨页面的场景下使用此API）。

嵌码示例

下列示例演示了从页面1跳转页面2的场景，计算页面跳转耗时。

步骤1: 在页面1创建事件

• 方式1: 使用预定义事件创建。

进入基调听云控制台，依次点击**用户体验分析 -> SPE用户体验分析 -> 新建事件**，创建事件并获取key。

var event = window.TINGYUN.createEvent({
    name: '跨页面事件', // 填写预定义事件名称，名称起标注作用
    key: '9f2d4b5c-15f1-4d4b-8d0b-e603283c0a4b' // 填写创建的事件的key
});


// 执行逻辑
// 逻辑执行完后不使用end或fail, 使用store暂存当前事件 event.store(); 此时事件并未结束

event.store();

// 后续逻辑跳转页面2...

• 方式2: 使用自动创建事件。

var event = window.TINGYUN.createAutoEvent({
    key: '跨页面事件' // 名称自定义
});

event.store();

步骤2: 在页面2结束事件。

在页面2加载完成后结束事件。

// 页面2加载完成后结束事件
window.addEventListener('load', function() {
    if (window.TINGYUN && window.TINGYUN.endStoreEvent) {
        window.TINGYUN.endStoreEvent({
            key: 'key1', // 需要和页面1的事件key对应, 不传会结束最近存储的事件
            status: 'success', // success 或 fail 表示事件的状态 
            timeout: 60000 // 事件超时时间，超时不会上传，不传默认60秒超时
        }); 
    }
})

如果不传参数，则默认结束最近一次存储的事件，状态为成功。

window.TINGYUN.endStoreEvent();

接口说明

window.TINGYUN.endStoreEvent(); // 无参数调用
window.TINGYUN.endStoreEvent(options); // 有参数调用

endStoreEvent options对象参数说明:

跨页面事件的处理方式和一些注意的问题：

1. 跨页面事件同时进行的只能有一个，每次调用store函数，当前跨页面事件会使用新的事件替代。
2. 探针数据请求会在结束事件的页面发送，如果结束事件页面与开始事件页面不是同一个页面，会默认增加一条页面的加载信息作为网络请求上传。
3. 页面1和页面2需要同时嵌码，上传的事件归属在页面2嵌码的应用中。
4. 页面1和页面2不能跨域。