@fishx/page-point v0.0.6

@fishx/page-point

fishx 埋点工具

Install

npm install @fishx/page-point

Usage

初始化 pagePointTracker 实例

import { PagePointTracker } from '@fishx/page-point';

const pagePointTracker = new PagePointTracker();

初始化配置

pagePointTracker.init({
    url: 'http://localhost:3000/api/v1/point',
    sendExcludeParams: ['className', 'id', 'name', 'tagname', 'type', 'value', 'OSType'],
});

init 参数

interface PagePoint {

  /**
   * 监听组件标识.
   * 默认 regKey='data-reg-id'
   */
  regKey?: string;

  /**
   * 采集组件attr. 可根据配置采集组件Attribute
   * 默认 [], 为 'all' 默认采集所有'data-'开头的attr
   */
  regAttrs?: string[] | 'all';

  /**
   * 是否需要查找 parent 的 regKey，如果存在也采集
   * 默认 true
   */
  findParentsRegKey?: boolean;

  /**
   * attr 是否使用小驼峰命名
   * 默认 false
   */
  useLowerCamelCase?: boolean;


  /**
   * 埋点数据后台url,可为字符串也可为一个返回url的函数
   * 默认 url=''
   */
  url?: string | (() => string);

   /**
   * 服务方法 
   * 默认 GET 使用 Image， POST 用 sendBeacon
   */
  serverMethod?: 'GET' | 'POST'

  /**
   * 是否开启埋点
   * 默认 false 调用 init 方法就会设置为 true
   */
  enable?: boolean;

  /**
   * 控制台输出,仅在未配置url的情况下
   * 默认 true
   */
  consoleLog?: boolean;

  /**
   * 用户扩展数据
   * 默认 {}
   */
  extData?: object;

  /**
   * 埋点发送信息之前调用的方法，可用来判断是否发送此次埋点信息，返回true或者object发送，false反之。
   * 另外支持扩展发送数据和更换事件对象target，返回数据格式{data:xxx,element:xxx}
   * 默认情况下会根据是否包含regKey决定发送与否，当 eventList 包含 click 事件时，额外会根据clickIncludeTagNames 判断是否发送
   */
  beforeSend?: (target: object, type?: string) => any;

  /**
   * 监听事件列表 
   * 默认 ['click']
   */
  eventList: EventType[];

  /**
   * click 事件触发的元素，支持的元素tagName  
   * 默认 ['BUTTON', 'A']
   */
  clickIncludeTagNames: ClickIncludeTagNames[];

  /**
   * 过滤发送信息
   * 支持的参数 'id' | 'eventType' | 'tagname' | 'className' | 'value' | 'type' | 'name' | 'innerText' | 'aria-label' | 'browser' | 'url' | 'evtTime' | 'browserType' | 'OSType';
   * 默认 []
   */
  sendExcludeParams?: SendParam[];

  /**
   * 发送防抖延迟时间
   * 默认300ms
   */
  sendDelay: number;
}

扩展属性

pagePointTracker.extendExtData({ menuname: name2 });