tsp-component/lib/event-tracking/index.ts

提供多端和react版本的UI组件

/// <reference path="./definition.d.ts" />

import { getDefaultValue } from '../util/date';
import assign from 'object-assign';
import Exception from '../exception';
import { userAgent } from '../util/device';

class EventTracking {
  constructor() {
    this.setRecordEventTracking = this.setRecordEventTracking.bind(this);
  }
  /**
   * 所有行为记录
   */
  private static history: string[] = [];
  /**
   * 发送的接口配置
   */
  public static api: ApiCreateParams;
  /**
   * 接口主机地址
   */
  public static host: string;
  /**
   * 关闭页面时发送的数据
   */
  public static sendBeaconData: object;
  /**
   * 发送请求函数
   */
  public static request: (params: object) => void;
  /**
   * 是否记录了行为统计
   */
  public isRecordEventTracking: boolean;
  /**
   * 是否记录了行为统计,全局的，用于本页面的isRecordEventTracking无法传达的情况下
   */
  public static isRecordEventTracking: boolean;
  /**
   * 当前的页面行为
   */
  private currentPageTrack: object = {};

  public static exParams: {
    [key: string]: any;
  } = {};

  /**
   * 监听unload事件
   */
  public static onUnload(): void {
    if (navigator && navigator.sendBeacon) {
      window.removeEventListener('unload', () => {
        const url = EventTracking.host + EventTracking.api.api;
        navigator.sendBeacon(url, JSON.stringify({ dataStr: JSON.stringify(EventTracking.sendBeaconData) }));
      });
    }
  }

  /**
   * 获取上一个页面
   */
  public static getPrevPage(): string {
    return EventTracking.history[EventTracking.history.length - 1];
  }

  /**
   * 设置isRecordEventTracking的值
   */
  public setRecordEventTracking(value: boolean): void {
    this.isRecordEventTracking = value;
  }

  /**
   * 监听要记录的行为
   */
  public listen(params: TspComponentEventTrackingListenParams, common?: TspComponentEventTrackingListenCommon): void {
    params.forEach((value) => {
      this.currentPageTrack[value.key] = {
        actionName: value.actionName,
        buildingProjectId: common ? common.buildingProjectId : undefined,
        houseId: common ? common.houseId : undefined,
        terminal_id: common.terminal_id,
        time: new Date().getTime(),
        data: []
      };
    });
  }

  /**
   * 事件触发
   */
  public trigger(key: string, params?: TspComponentEventTrackingTriggerParams): void {
    const currentLog = this.currentPageTrack[key];
    const time = new Date().getTime();

    try {
      this.currentPageTrack[key].data.push({
        buildingProjectId: currentLog.buildingProjectId,
        houseId: currentLog.houseId,
        terminal_id: currentLog.terminal_id,
        topModule: currentLog.topModule,
        secondaryModule: currentLog.secondaryModule,
        actionName: params && params.actionName || currentLog.actionName,
        behaviorName: currentLog.behaviorName,
        mainType: currentLog.mainType,
        subType: currentLog.subType,
        createTime: getDefaultValue(time, 'string'),
        detailedData: params ? JSON.stringify(params) : undefined,
        parentPage: EventTracking.getPrevPage(),
        stopSeconds: time - currentLog.time,
        userAgent
      });
      this.currentPageTrack[key].time = time;
      console.log('行为记录触发，动作名称:' + currentLog.actionName + ', 当前记录数据');
      console.log(this.currentPageTrack);
    } catch (e) {
      Exception.catchSend(e);
    }
  }

  /**
   * 结束监听
   */
  public disconnect(pageName: string): void {
    const data = {};
    Object.keys(this.currentPageTrack).map((key) => {
      if (this.currentPageTrack[key].data) {
        data[key] = this.currentPageTrack[key].data;
      }
    });
    EventTracking.request(assign({},  EventTracking.api, { params: assign({}, EventTracking.exParams, {
      dataStr: JSON.stringify(data)
    })}));
    console.log('结束监听，当前上传的数据：');
    console.log(data);
    EventTracking.sendBeaconData = data;
    if (pageName) {
      EventTracking.history.push(pageName);
    }
  }

  /**
   * 卸载组件时触发
   */
  public onUnmount(key: string, value: object, actionName: string): void {
    if (key) {
      this.trigger(key, { ...value });
    }
    if (this.isRecordEventTracking || EventTracking.isRecordEventTracking) {
      this.disconnect(actionName);
    } else {
      this.disconnect(`${actionName}-返回按钮`);
    }
    EventTracking.isRecordEventTracking = false;
  }
}

export default EventTracking;