Kc-log NPM | npm.io

基础业务打点组件

本文档的作用在于说明基础业务打点组件使用方式及注意事项，任何人都可以维护此文档，但请确保文档内容正确合理性
打点组件使用js实现，其本质是jssdk，提供多种打点方式，建议所有FE打点需求均采用本组件（SDK）实现。

1.安装

直接`<script>`标签引入

直接下载并引入打点组件的脚本，会自动根据当前采用的模块加载方式引入打点，如没有采用模块化加载工具，则打点组件将注册到全局变量window下。

NPM

本组件已维护在npm官方库中，使用者可以通过npm相关命令进行安装，支持被符合UMD（AMD ，CMD 或 CommonJS 的 require）规范的模块化加载工具所调用。

 # 最新稳定版  
 $ npm install kc-log

2.使用

组件提供3种打点调用方式，分别是send方法、模版展示标记、超链接点击标记。

pagename参数是页面唯一标示，请开发者尤其注意，不同页面的pagename不能重复。除了业务数据以外，一般情况下，还需要使用者提供‘category’（日志类型）和‘name’（事件名称）参数；及个别情况下，还需要使用者提供‘firstrefer’（最早流量入口）。以上具体细节说明，参见相关Wiki文档。

（1）send方法

send方法为组件最基础的打点api，使用者只需在想要进行打点的位置/时机调用此方法传递对应附带参数（数据）即可。

var kcLog = require('kc-log');

kcLog.send({
   category: 'webClick', // 必传值，如果pm没有给则需让pm补充给出
   name: 'bannerClick',  // 必传值，如果pm没有给则需让pm补充给出
   firstrefer: {
     keel: true,
     value: 'banner'
   }
});

事实上，其他三种打点方式，最终也会调用该方法进行打点。

（2）模版展示标记

考虑到模版展示打点（也就是pv）几乎覆盖所有流程页面，因此提供一种在特定模版节点添加标记到方式来进行打点，所有页面展示点必须（MUSTBE）通过该方式打点，具体使用方式如下：

所有页面展示点必须（MUST BE）使用该方式进行打点的原因是组件内部对页面展示点做了特殊处理，实际上绝大部分情况下（非第一次访问的页面），每个页面展示点都会进行两次打点，分别是当前页面进和上一页面出。

<html>
  <head></head>
  <body kc-log-page-show="courseId=1&payId=1"></body>
</html>

首先如果一个模版需要打展示点，则先为其<body>标签添加kc-log-page-show属性，再添加属性值代表打点参数（数据）即可，不过需要注意的kc-log-page-show的值需为（MUST BE）url query格式的字符串（即每组键值对间用‘&’分隔，键和值用‘=’分隔），且千万确保(MUST BE)模版已经引入打点组件脚本，否则本次模版展示点将无法获取。

（3）超链接点击标记

提供这种打点方式的原因是目前项目中存在一些没有JavaScript脚本逻辑的静态页面，且页面上会有一些用超链接控制的跳转逻辑，而如果单单为了打点而为这些页面补充脚本逻辑，未免有些画蛇添足，那么，具体使用方式如下：

<a href="https://www.kaochong.com" kc-log-ele-click="courseId=1&price=1"></a>

具体含义参加模版展示标记

考虫打点组件

babel-plugin-transform-runtime

@everything-registry/sub-chunk-2008 @zalastax/nolb-kc @infinitebrahmanuniverse/nolb-kc

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

基础业务打点组件

1.安装

直接<script>标签引入

NPM

2.使用

（1）send方法

（2）模版展示标记

（3）超链接点击标记

直接`<script>`标签引入