@snacking/collector

介绍

该模块用来生成采集页面信息的脚本

支持dom事件、ajax请求的相关数据采集

支持对dom事件、ajax请求、命名空间里的方法、vue组件的方法设置埋点采集

支持个性化配置，分为编译前个性化和运行时个性化两种方案

安装

npm install @snacking/collector

或者...

yarn add @snacking/collector

初始化

npx sn-coll init

会生成以下4个文件：

• tsconfig.json

接口和类型在typeScript描述文件中体现，可以直接使用typeScript

• index.ts

入口文件

• appConfig.ts

个性化配置文件，用来做编译前个性化

• buildConfig.ts

编译用配置，就是输出的文件名，以及输出的变量名

编译

npx sn-coll build

会在dist目录下输出编译好的脚本文件

编译前个性化

在appConfig.ts文件中进行个性化配置，接口定义如下，也可以参见AppConfig接口

interface AppConfig {

    /****** sessionId、pageId、serviceUrl ******/
    sessionId?: (() => string) | string; // sessionId值，或者取得sessionId的方法，可空，默认"" [根据应用修改]
    pageId?: (() => string) | string;    // pageId值，或者生成pageId的方法，可空，默认为uuid [根据应用修改]
    serviceUrl?: string;                 // 接受数据的服务地址，可空，默认在控制台输出 [根据应用修改]
    
    /****** 数据补充方式 ******/
    points?: Points[] | null;            // 埋点
    supplement?: Supplement | null;      // 补充数据，支持全部数据都补充，或者按采集器补充
    
    /****** 采集器配置 ******/
    domEvents?: Keys<WindowEventMap>[];  // 需要采集的dom事件，支持所有window Event
    processors?: Processor[] | null;     // 数据处理器，允许个性化数据处理
    collector?: CollectorMapping;        // 给每个采集大类指定采集器
    
    /****** 归集提交报文用 ******/
    gather?: boolean;                    // 采集到的数据，是否归集到最上层页面后才发送，false为本页面直接发送
    messageFlag?: string;                // 消息标识，在message事件中识别消息用（使用message事件归集数据）
    targetOrigin?: string;               // 指定message事件中的域（使用message事件归集数据）
}

运行时个性化

将编译输出的脚本，在具体的页面上引用之后，可以通过变量调用api的方式进行运行时个性化，具体的变量名在buildConfig.ts文件中指定，默认为_clt

具体的个性化api定义如下，也可以参见monitor的定义

const monitor: {
    init(config?: AppConfig): void;                                              // 设置配置
    setServiceUrl(url: string): void;                                            // 设置服务地址
    setGather(gather: boolean): void;                                            // 设置数据是否归集到上层发送
    setSessionId(sessionId: string): void;                                       // 设置sessionId
    setPageId(pageId: string): void;                                             // 设置pageId
    addDomEvent(events: Keys<WindowEventMap> | Keys<WindowEventMap>[]): number;  // 增加要监听的dom事件
    addPoint(points: Points | Points[]): void;                                   // 增加埋点
    addProcessor(processor: Processor | Processor[]): void;                      // 增加消息处理器
    addCollector(mapping: CollectorMapping): void;                               // 增加采集器
};

编译用配置

在buildConfig.ts文件中进行编译用配置，接口定义如下，也可以参见BuildConfig接口

interface BuildConfig {
    fileName?: string; // 输出的文件名
    var?: string;      // 导出的变量名称
}