❤
npm
Sign UpSign In

ko-trace

1.0.3 • Public • Published

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="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

参数名 参数类型 参数说明
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
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"字段

Readme

Keywords

Package Sidebar

Install

npm i ko-trace

Repository

github.com/xbrave/ko-trace

Homepage

github.com/xbrave/ko-trace

Weekly Downloads

2

Version

1.0.3

License

MIT

Unpacked Size

99.5 kB

Total Files

28

Last publish

Collaborators

  • xbrave
  • charlesyang
Try on RunKit
Report malware