Kotrace JS SDK

预置采集数据

字段 | 描述 -----|----- $token | Kotrace的token $dtsession_id | 会话标识，由Kotrace自动生成 $session_id | 用户系统自己的sessionId $user_id | 用户系统自己的userId $DTTID | 用户唯一标识 $url | 当前页面地址 $url_path | 当前页面路径。如果有hash，会保留hash $title | 当前页面标题 $referrer | 当前页面来源 $referrer_host | 当前页面来源的主机地址 $screen_height | 屏幕高度 $screen_width | 屏幕宽度 $screen_colordepth | 屏幕色深 $lang | 语言类型 $user_agent | 浏览器相关信息 $timestamp | 埋点日志时间（时间戳的形式） $trigger_type | 触发类型（需用户自己填写，必填项） $stay_time | 当前页面停留时间（多页应用自动采集，单页应用需自己手动添加） $element_id | 触发事件元素的id $element_class_name | 触发事件元素的类名 $element_content | 触发事件元素的html内容 $element_name | 触发事件元素的name属性 $element_type | 触发事件元素的节点类型 $element_target_url | 触发事件元素的href属性 $screenX | 触发事件时鼠标点击位置X轴坐标 $screenY | 触发事件时鼠标点击位置Y轴坐标

注：默认采集参数均”$“开头，自定义参数请不要以”$“开头，以免混淆。

使用说明

安装

script引入

<script src=".../ko-trace.min.js"></script>

npm安装

npm install ko-trace --save

import Kotrace from 'ko-trace';

用法

第一步 初始化

Kotrace.init({
    serverUrl:<收集数据的服务器地址，必填>,
    getSessionId:function(){
        return <用户系统自己分配的sessionId>;
    },
    getUserId:function(){
        return <用户系统自己分配的userId>;
    },
    sessionExpiration:'<Kotrace.js生成的session的过期时间，非必填>',
    params:<自定义预置采集数据，会与Kotrace预置采集数据组合（Object），但不会覆盖Kotrace预置数据>，
    debug:<是否开启Debug模式，非必填，默认false>
});

第二步 埋点

目前支持以下四种方式进行埋点：

第一种：html标签自定义属性

所有带有<kotrace>这个类名的html标签，点击时都会触发埋点操作，并一并采集 data-kotrace-[参数名] 设置的值

<button class="kotrace" data-kotrace-eventid="[对应值]" data-kotrace-[参数名]="[对应值]"></button>

• data-kotrace-eventid 这个自定义属性必须要有

第二种：调用Kotrace.launchRocket

Kotrace.launchRocket(eventid,extraParams,event);

• eventid 必选。事件id。 类型：Number
• extraParams 非必选。额外采集的数据。类型：Object
• event 非必选。JS事件对象

第三种：利用Kotrace.carryRocket对方法进行改造

html

<button id="btn1">点击我</button>

js

var btn=document.getElementById("btn1");

btn.onclick=Kotrace.carryRocket(eventid,function(e){
    console.log(e.target);
    return extraParamsTwo;
},extraParamsOne);

• eventid 必选。事件id。 类型：Number
• extraParamsOne 非必选。该事件触发之后，额外采集的数据。类型：Object
• extraParamsTwo 非必选。return 返回的采集数据，一般用于需要事件响应函数处理过的采集数据，优先级大于extraParamsOne。类型：Object

第四种：利用@KotraceRocket装饰器改造方法

import {PureComponent} from 'react';
import {KotraceRocket} from 'kotrace';

class App extends PureComponent{
   state={
   count:0
  }

  @KotraceRocket(eventid,extraParamsOne)
  add(){
    const {count}=this.state;
    this.setState({
      count:count+1
    });
    return extraParamsTwo;
  }

  @KotraceRocket(eventid)
  subtract(){
    const {count}=this.state;
    if(count>0){
      this.setState({
        count:count-1
      });
    }
  }
  render(){
    const {count} = this.state;
        return (
            <div>
                <button onClick={this.add.bind(this)}>加1</button>
                <button onClick={this.subtract.bind(this)}>减1</button>
                <div>结果：{count}</div>
            </div>
        )
  }s
}

• eventid 必选。事件id。 类型：Number
• extraParamsOne 非必选。该事件触发之后，额外采集的数据。类型：Object
• extraParamsTwo 非必选。return 返回的采集数据，一般用于需要事件响应函数处理过的采集数据，优先级大于extraParamsOne。类型：Object

API说明

init

参数名 | 参数类型 |参数说明 ----|----|---- serverUrl | String|必选。收集数据的服务器地址 getSessionId |Function |非必选。获取用户系统的sessionId的函数 getUserId |Function|非必选。获取用户系统的userId的函数 sessionExpiration | Number|非必选。Kotrace.js生成的session的过期时间,精确到毫秒。默认30分钟 params | Oject |非必选。全局的额外采集数据，会与默认采集数据组合 debug |Boolean|非必选。是否开启debug模式。默认false

示例：

    Kotrace.init({
        serverUrl:"http://localhost:8005",
        getSessionId: function(){
            return Kotrace.cookie.get('SESSIONID')
        },  
        getUserId: function(){
            return window.userId;
        },  
        sessionExpiration:24*60*60*1000,
        params:{
            "realName":"隔壁老王",
            "role":["一级管理员","二级管理员"]
        },
        debug:true
    });

launchRocket

参数名 | 参数类型 |参数说明 ----|----|---- eventid | Number |必选。事件id params | Oject |非必选。该响应函数执行时，额外采集的数据 event |Oject[Event]| 非必选。事件对象，Kotrace会采集其相关信息

示例：

html

   <form id="form_register">
       <div class="form-group">
            <label for="exampleInputUsername">Username</label>
            <input type="text" class="form-control" id="exampleInputUsername" name="username" placeholder="Username">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword" name="password" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-default">Send invitation</button>
    </form>

js

    var form=document.getElementById("form_register");
    form.onsubmit=function(e){
        Kotrace.launchRocket(3008,{
            form_type:"register",
            username:form.username.value,
            password:form.password.value
        },e);
    };

carryRocket

参数名 | 参数类型 |参数说明 ----|----|---- eventid | Number |必选。事件id fun | Function| 必选。被改造事件响应函数。 params | Oject |非必选。该响应函数执行时，额外采集的数据

示例：

html

   <form id="form_search" class="form-inline">
        <div class="form-group">
            <label for="exampleInputName2">Name</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail2">Email</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
        </div>
        <button type="submit" class="btn btn-default">Send invitation</button>
    </form>

js

    var form=document.getElementById("form_search");
    form.onsubmit=Kotrace.carryRocket(3008,function(){
        ...
        execute your code about business
        ...
    },{
        form_type:"search"
    });

Param.get

参数名 | 参数类型 |参数说明 ----|----|---- name | String |非必选。对应数据名的预置采集数据值

• 无参数时，会获取当前全局预置采集数据,自定义预置采集数据+Kotrace预置采集数据。
• 若自定义预置采集数据和Kotrace预置采集数据存在同名字段，遵循自定义>Kotrace的原则。

示例：

   Kotrace.Param.get("realName"); //获取预置采集数据"realName"对应的值
   Kotrace.Param.get(); //获取当前全局预置采集数据

Param.set

参数名 | 参数类型 |参数说明 ----|----|---- params | Oject |非必选。自定义预置采集数据。

示例：

    //全局预置采集数据添加一条realName(隔壁老王)的预置采集数据
    Kotrace.Param.set({
        "realName":"隔壁老王"
    }); 

Param.remove

参数名 | 参数类型 |参数说明 ----|----|---- name | String |必选。需要被删除的自定义预置采集数据名称。

示例：

    Kotrace.Param.remove("realName"); //获取预置采集数据"realName"对应的值

cookie.get

参数名 | 参数类型 |参数说明 ----|----|---- name | String |必选。cookie的key

示例：

    Kotrace.cookie.get("realName"); //获取cookie中"realName"对应的值

cookie.set

参数名 | 参数类型 |参数说明 ----|----|---- name | String |必选。cookie的key value |Number|String|必选。cookie的value time |Number|非必选。cookie的过期时间（精确到毫秒） cross_subdomain |Boolean|非必选。是否允许主域相同的域名可以共享 is_secure |Boolean|非必选。是否只允许cookie在https协议下才能上传到服务器

示例：

    Kotrace.cookie.set("realName","袋鼠宝宝",60*1000,true,false); //设置cookie中"realName"为"袋鼠宝宝"，domain为当前主域，secure为false

cookie.remove

参数名 | 参数类型 |参数说明 ----|----|---- name |String|必选。cookie的key cross_subdomain |Boolean|非必选。是否在domain为主域的cookie下删除

示例：

    Kotrace.cookie.remove("realName",true); //删除cookie中"realName"字段