Aiwen-logger NPM

爱问日志插件

概要：目前整合了神策日志埋点

神策 sdk 版本：1.16.1

使用

1、安装:

npm i -S aiwen-logger

更新安装包

 npm i -S aiwen-logger@指定版本号

2、引用方式

2.1、作为插件全局注入:

import logger from "aiwen-logger";
//开启debug模式，不会上送数据至神策，但是会在控制台输出采集的日志数据，适用于开发接入阶段。
logger.env="debug";
/**设置公共属性 */
logger.setPublicProperty({
  platformType:"javaScript",//根据产品给定的名称设置
  appName:"爱问医生(新浪健康社区医生版)",//根据产品给定的名称设置
  isLogin:function(){
    return !!store.state.token;
  },
  partName:"医生端" //根据产品给定的名称设置
});
//设置神策具体的配置，此处logger内部做了单页面默认配置。日志上送地址，测试环境地址：https://sensors.wenwo.com/sa?project=default
//生产环境的地址：https://sensors.wenwo.com/sa?project=production。setConfig方法内部会做与extend相同的操作，传入的配置，会覆盖掉内部的默认配置。
logger.setConfig({
  server_url: "XXXt",//日志数据上送地址
  show_log: true,//控制台日志输出开关
  is_track_single_page: false,//是否是单页面，如果多页面为false,如果是单页面，为true，会开始自动采集$PageView事件
});

/**所有设置配置完毕开启日志采集 ，不要随便开启，以免污染测试环境的数据*/
logger.start();

//用户关联，把登陆前的匿名id和登录后的用户id关联起来。
logger.login(用户id);
/** 全局注入 */
Vue.use(logger);

2.2、以 script 标签引入

（1）配置 webpack 的 externals 属性

  externals: {
    "sa-sdk-javascript": "sensorsDataAnalytic201505",
    "aiwen-logger": "$logger",
  };


（2）在引入页面加入script标签，打包的压缩脚本位于本项目工程的/dist/vue下。参考example工程的webpack配置和public下的html模板设置

（3）oss地址：
vue项目地址：
  测试：https://wenwo-static-test.oss-cn-beijing.aliyuncs.com/common/logger.vue.0.0.23.js
  生产：https://static.wenwo.com/common/logger.vue.0.0.23.js
jsp项目地址：
  测试：https://wenwo-static-test.oss-cn-beijing.aliyuncs.com/common/logger.jsp.0.0.23.js
  生产：https://static.wenwo.com/common/logger.jsp.0.0.23.js
 (4) 禁止html页面被缓存
  <meta http-equiv="pragma" content="no-cache" />
  <meta http-equiv="Cache-Control" content="no-store, must-revalidate" />
  <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
  <meta http-equiv="expires" content="0" />
(5)禁止脚本被缓存：
  该方法如果后面有脚本引用动态添加的脚本里的内容，该方法不可行
  在body标签里添加一个script标签，添加到body的第一个标签
   <script>

    //引用js
    (function () {
      var url = "https://static.wenwo.com/common/logger.vue.0.0.23.js";
      var node = document.createElement("script");
      node.type = "text/javascript";
      node.src =url+"?timeStamp=" + new Date().getTime();
      var child = document.getElementsByTagName("script")[0];
      child.parentNode.insertBefore(node, child);
    })();
  </script>

3、使用：

3.1 vue 项目

<template>
  <div class="home">
    <button v-logger.click="{eventName:'signUp',collect:getLogData,callBack:callBack,context:this}">利用指令点击发送日志数据collect属性值可以是对象也可以是方法，方法在点击事件发生时执行，需返回一个对象</button>
    <br>
    <button @click="emitLogData">点击通过代码发送日志数据</button>
  </div>
</template>

<script>
export default {
  name: "Home",
  data(){
    return {
      logData:"",
    }
  },
  created(){
    let self = this;
    setTimeout(function(){
      self.logData = "1111";
    },10000);
    //获取预置属性相关的数据
    console.log("预置属性Data:",this.$logger.getPresetData());
    //获取匿名id
    console.log("匿名id:",this.$logger.getAnonymousId());
  },
  methods:{
    //仅支持同步方法，不支持异步方法。要采集的数据从这个方法中return 出去，必须return 出一个对象
   getLogData(){
     return {data:this.logData};
   },
   emitLogData(){
     //发送数据，第一个参数为事件名，第二个参数必须为对象类型，是上传的日志数据。
     this.$logger.emit("signUp",{data:this.logData});
   }
 }
};
</script>

3.2 非 vue 项目，引用 jsp 下的包的项目

该库会全局暴露出一个$logger对象，它具有的api与vue项目里的this.$logger 具有的 api 一样。另外提供了一个类似指令的一个快捷绑定 log 的标签属性识别机制。只要在一个 html 标签上增加一个 aiwen-log 属性，属性的值为一个 json 格式的字符串，它的数据结构如下：

{
  type:"dom事件名"//如："click","mouseup","mousedown","dblclick",目前仅支持click,如果监听的事件是click事件该字段可省略
  eventName:"发送的事件名",
  data:{id:123},//发送的log数据必须是一个对象
}

如：

 <div aiwen-log="{'eventName':'test','data':{'id':123}}">test-log-attribute</div>

3.3 默认采集规则

collect_element: function (node) {
  let allowTags = ["button", "input", "textarea", "img"];
  let textNodeType = 3;
  /**允许的节点 */
  if (allowTags.includes(node.tagName.toLocaleLowerCase())) {
    return true;
  }
  /**富文本编辑器 */
  if (node.contenteditable) {
    return true;
  }
  if (domUtil.hasAttribute(node, "data-aiwen-collect")) {
    return true;
  }
  if (
    node.tagName.toLocaleLowerCase() == "a" &&
    domUtil.getAttribute(node, "href")
  ) {
    return true;
  }
  let tempNode = node;
  while (tempNode.tagName.toLocaleLowerCase() != "html") {
    tempNode = tempNode.parentNode;
    if (domUtil.hasAttribute(tempNode, "data-aiwen-collect-batch")) {
      return true;
    }
  }
  /**没有任何子节点的节点不采集 */
  if (!node.hasChildNodes()) {
    return false;
  }
  /**子节点里只要有文本节点就采集 */
  let children = node.childNodes;
  let len = children.length;
  let capture = false;
  let childNode = null;
  for (let i = 0; i < len; i++) {
    childNode = children[i];
    if (childNode) {
      if (childNode.nodeType == textNodeType) {
        capture = true;
        break;
      }
    }
  }
  if (capture) {
    return true;
  } else {
    return false;
  }
},
  /**
  手动增加埋点采集属性：在标签上增加以下两个属性，即可增加节点的采集。
  data-aiwen-collect：采集具有改属性的标签
  data-aiwen-collect-batch：采集具有该标签数据的所有子标签（不包含当前标签）
  */

3.4 获取神策 sdk 提供的预置属性和匿名 id

console.log("预置属性Data(只有调用过开启了日志采集才有值即：logger.env的值为'production'(默认值),且调用start方法算开启):",this.$logger.getPresetProperties());
console.log("匿名id(只有调用过开启了日志采集才有值):",this.$logger.getAnonymousId());

3.5 关于手动扩展全埋点的日志采集

在标签上增加以下两个属性中的一个，即可增加节点的采集。

 data-aiwen-collect：采集具有改属性的标签
 data-aiwen-collect-batch：采集具有该标签数据的所有子标签（不包含当前标签）

3.6 关于页面上的滚动条监听--深度阅读监听

默认监听document的滚动，如果要改变这个监听的节点，可以通过logger.setScrollNode(node);/node为dom节点,改变节点的滚动节点

logger.start();
this.$logger.on("pageunload",(data)=>{
    this.$logger.emit("test-deepRead",data);
    });//监听页面跳转时，发出的事件,data的数据结构为
    /**{
      maxY: Number,//用户观看的页面长度的像素数,视区底部距离页面顶部的距离
      duration: Number,//页面停留的秒数
      scrollPercentY: this.scrollPercentY,//用户观看的页面占整个页面的比例，
      viewWidth: Number,//浏览器宽度
      viewHeight: Number,//浏览器高度
    };*/
this.$logger.startPageReadListen();只有在调用了startPageReadListen方法才开始记时监听，开始的时点仅是记录开始的时间戳
logger.stopPageReadListen();停止页面深度监听,该方法内部会默认取消所有的pageunload事件监听的回调，如果要改变这一默认行为可传入一个boolean的参数true，来取消该行为，
如果想单独移除某个监听回调，可以用this.$logger.off("pageunload",calllBack)

3.7 logger内部与事件模型相关的方法

/**
绑定事件处理函数
  eventName:事件名
  handler:事件处理函数
  times:监听的次数，不设置该项意味着永久监听，需要手动移除监听函数
*/
 logger.on(eventName,handler,times);//

 /**
 移除事件处理函数
  eventName:事件名
  handler:事件处理函数,不传入该项会移除对应事件名的所有处理函数
*/
 logger.off(eventName,handler)//
 /**
   绑定一次性的事件处理函数
  eventName:事件名
  handler:事件处理函数
*/
 logger.once(eventName,handler)//