2.0.1 • Published 5 years ago

bt-web-logger v2.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
5 years ago

WebLogger

Description

Support

  • 运行环境 : IE9+/Chrome65+/Firefox65+/Edge/Safri
  • 操作系统 : Windows/Ubuntu/Mac OS/Android/IOS
  • 项目要求 : WEB SPA（不支持动态路由）
  • 技术要求 : ECMAScript 2015+

Quick Start

Step1: 安装依赖包

npm install crypto-js --save
npm install xlsx --save

Step2：在项目的入口js中引入WebLogger SDK

  import { WebLogger } from 'web-logger';

Step3：运行WebLogger

   import proConf from '../.config/project.conf.json';

   const hasSendLog = true;
   const debug = true;

    let mode, secretkey, appKey;
    switch (proConf.mode) {
      case 'production':
        mode = 'production';
        secretkey = '76bff9b0700e3ddw2w1320b2be8f59435';
        appKey = '3480301w235';
        break;
      case 'preProduction':
        mode = 'preProduction';
        secretkey = '76bff9b0700e3ddw2w1320b2be8f59435';
        appKey = '3480301w235';
        break;
      case 'test':
        mode = 'test';
        secretkey = '76bff9b0700e3ddw2w1320b2be8f59435';
        appKey = '3480301w235';
        break;
      default:
        secretkey = '76bff9b0700e3ddb61320b12be8f59435';
        appKey = '34803www1835';
        break;
    }

  const service = location.host;

  const routeMap = {
    '/safeguardCar': {
      routeName: 'safeguardCar',
      description: '展车维护',
      module: 'car-management',
      module_text: '展车管理'
    },
    '/safeguardCarDetail': {
      routeName: 'safeguardCarDetail',
      description: '展车维护详情',
      module: 'car-management',
      module_text: '展车管理'
    } 
  };

   const { LoggerTrigger } = WebLogger({
    debug: debug,
    mode: mode,
    hasSendLog: hasSendLog,
    createDoc: false,
    project: 'bt-arale-management',
    service: service,
    topic: 4,
    channel: 4,
    userID: '1233455',
    secretkey: secretkey,
    appKey: appKey,
    routeMap: routeMap
  });

Step4: 将LoggerTrigger和LoggerLister函数挂载到Vue对象上

  Vue.prototype.LoggerTrigger = LoggerTrigger;

Step5: 在需要埋点的代码中调用LoggerTrigger函数

   this.LoggerTrigger("SEND_EVENT", {
      event: "click",
      prop: "btn-apply-car-save",
      proptext: "展车申请保存"
    });

FAQ

1.WebLogger SDK提供了哪些功能？

主要功能包括：自动监控页面用户行为、自动计算用户访问页面时长、自动获取用户设备信息、扩展用户自定义数据日志、自动生成业务埋点文档。

2.如何发送用户行为事件日志数据？

通过LoggerTrigger函数发送用户日志数据，LoggerTrigger的第一个参数代表发送消息的类型（值必须是SEND_EVENT），第二个参数代表发送的数据。
用法如下：
    this.LoggerTrigger("SEND_EVENT", {
      event: "click",
      prop: "btn-apply-car-save",
      proptext: "展车申请保存"
    });

3.如何增加自定义格式的数据？

通过LoggerTrigger函数发送用户日志数据，LoggerTrigger的第一个参数代表发送消息的类型（值必须是SEND_CUSTOM_DATA），第二个参数代表发送的自定义数据。
用法如下：
    this.LoggerTrigger("SEND_CUSTOM_DATA", {
      type: "用户自定义的业务名称",
      data: {
        //用户自定义的数据内容
      }
    });

4.如何更新发送日志时使用的用户ID？

通过LoggerTrigger函数发送用户日志数据，LoggerTrigger的第一个参数代表发送消息的类型（值必须是UPDATE_CONFIG），第二个参数代表发送的数据。仅适用于登录后更新用户ID的场景。
用法如下：
    this.LoggerTrigger("UPDATE_CONFIG", {
      user_id: '1234343434'
    });

5.如何自动生成埋点文档？

在初始化WebLogger时需要将参数createDoc设置为true即可开启在浏览器自动生成Excel文档的。需要开发者手动触发所有埋点事件，同时刷新浏览器即可将所有的业务埋点数据创建为埋点文档。
每次刷新浏览器就会重新初始化WebLogger函数，所以就会出现每次刷新浏览器自动下载文档的现象，建议在项目功能开发完成后在启用该功能。

6.routeMap参数格式说明 routeMap数组元素中的key必须是实际路由的路径，value是以下JSON格式的数据： routeName: 'safeguardCarDetail',//路由名称， description: '展车维护详情',//路由所在页面的中文名称 module: 'car-management',//路由所属的菜单级模块英文名称，根据实际项目模块填写 module_text: '展车管理'//路由所属的菜单级模块的中文名称，根据实际项目模块填写

7.需要申请不同环境的secretkey、appKey

建议编写不同环境判读的逻辑,可以按照以下例子编写（示例中的secretkey、appKey仅供参考，请不要直接使用示例中的值）：

  let mode, secretkey, appKey;
  switch (env) {
    case 'production':
      mode = 'production';
      secretkey = '76bff9b0700e3ddw2w1320b2be8f59435';
      appKey = '3480301w235';
      break;
    case 'preProduction':
      mode = 'preProduction';
      secretkey = '76bff9b0700e3ddw2w1320b2be8f59435';
      appKey = '3480301w235';
      break;
    case 'test':
      mode = 'test';
      secretkey = '76bff9b0700e3ddw2w1320b2be8f59435';
      appKey = '3480301w235';
      break;
    default:
      secretkey = '76bff9b0700e3ddb61320b12be8f59435';
      appKey = '34803www1835';
      break;
  }

API

WebLogger(param: JSON): Function

功能: 初始化logger监听器并运行
参数:
    param: 基础参数，具体属性值如下：
      debug: 可选参数，布尔值，需要打印日志时改参数值为true。
      mode: 必选参数，字符串值，参数值分别是"development"、"test"、"preProduction"、"production",分别对应开发环境、测试环境、预生产环境、生成环境。
      hasSendLog: 必选参数，布尔值，参数值分别是"true"和"false",默认值false。建议在调试状态下设置该值为false，避免不断发送数据到服务端。
      topic: 必选参数，数值，业务数据埋点的主题,默认值0，根据实际项目填写。
      channel: 必选参数，数值，业务数据埋点的通道,默认值0，根据实际项目填写。
      secretkey: 必选参数，字符串值，网关验签服务下发的secretkey。
      appKey: 必选参数，字符串值，网关验签服务下发的appKey。
      project: 必选参数，字符串值，代表项目名称，通常是gitlab仓库中的名称。
      service: 必选参数，字符串值，代表部署服务的域名。建议通过location.host获取。
      userID: 必选参数，字符串值，用户ID。
      routeMap: 必选参数，JSON对象，路由path和路由对应的埋点页面字段的映射关系；key对应页面路由对象的path值，routeName也是页面路由对象的path值，description是对应页面的标题。
返回值: Function
  返回函数“LoggerTrigger”，用于业务端发送消息到SDK

LoggerTrigger(type: String, data: JSON): void

功能: 发送消息到WebLogger SDK
参数：
  type：消息类型，目前仅支持"SEND_EVENT"、"UPDATE_CONFIG"、"SEND_CUSTOM_DATA"，具体用法参考FAQ。   
  data: JSON数据
返回值: 无返回值

Update History

v2.0.0

增加功能：
    1.用户自定义数据扩展。
    2.更新用户ID支持。
    3.自动生成埋点文档功能。
优化功能：
    1.更改业务埋点使用方式：由HTML元素加标记方式转换为调用JS API方式。
    2.其他产品需求参数修改。

v1.0.6

增加功能：
    1.按需埋点：只在可以执行操作的元素上埋点。
    2.支持的行为事件：点击、输入、选择、拖动事件。
    3.页面访问时长自动计算。
    4.仅支持hash模式的路由。
优化功能：
    删除页面异常事件的监控功能。

v1.1.0

增加功能：
    1.加入对history模式路由的支持。
    2.加入对弹窗打开和关闭事件的支持及弹窗访问时长计算。
优化功能：
    1.矫正对页面访问时长的计算误差。
    2.统一加入路由计算器处理路由跳转事件。

Feedback

开发者：尹志刚

开发者邮箱：@ zhigang.yin@beantechs.com

License

MIT

收集客户端日志
crypto-jsxlsx
2.0.1

5 years ago