操作配置

用户可针对某个可以点击的交互元素，例如注册、添加购物车、下载、移动广告点 击、小工具、Flash元素、AJAX嵌入式元素以及视频播放等事件，将其单独配置成操作来监控其用户操作过程中的响应耗时体验。

事件分为两类:

• 自动创建事件：可以直接指定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({
        ...
    });
}

下面详细说明2种事件的使用方式。

自动创建事件

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

window.TINGYUN.createAutoEvent(options);

示例

• 创建事件。

示例: 创建名称为'事件1'的事件。

var event = window.TINGYUN.createAutoEvent({
    key: '事件1'
})

• 结束事件

当认为事件成功时:

event.end();

当认为事件失败时:

event.fail();

createAutoEvent options对象选项列表:

场景示例

加入购物车

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

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

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

跨页面事件

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

嵌码示例：

页面1:

var event = window.TINGYUN.createAutoEvent({
    key: '跨页面事件'
});


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

event.store();

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

页面2:

  // 页面2加载完成后结束事件
window.addEventListener('load', function() {
    if (window.TINGYUN && window.TINGYUN.endStoreEvent) {
        window.TINGYUN.endStoreEvent({
            key: 'key1', // 需要和页面1的事件对应, 不传会结束最近存储的事件
            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不能跨域。