ko-trace v1.0.3

Kotrace JS SDK

预置采集数据

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

使用说明

安装

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

示例：

    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

示例：

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

示例：

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="jane.doe@example.com">
        </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

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

示例：

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

Param.set

示例：

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

Param.remove

示例：

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

cookie.get

示例：

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

cookie.set

示例：

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

cookie.remove

示例：

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