云宝宝前端埋点框架 Angular 版本

安装框架

npm install @cloudbae-frontend/track-angular

在根模块中导入埋点框架模块并初始化相关参数

import { TrackAngularModule, listen } from '@cloudbae-frontend/track-angular';
import { Router } from '@angular/router';
import { Url } from 'url';

@NgModule({
  imports: [
    TrackAngularModule // 这里一定要放在第一个
    /* 其它模块 */
  ]
})
export class AppModule {
  constructor(router: Router) {
    const codeMap = {
      '/home': '01',
      '/test': '02',
    };

    const urlCodeMap = new Map();

    Object.keys(codeMap).reduce((newObj: any, currentKey) => {
      urlCodeMap.set(currentKey, codeMap[currentKey]);
    }, {});
    const config = {
      form: {
        action: 'http://www.example.com',
        name: 'name',
        method: 'POST',
      },
      userInfo: {
        userID: 'userID', // 也可以传入一个函数，返回 userID
        sessionID: 'sessionID' // 也可传入一个函数，返回 sessionID
      },
      pageCodeProvider(url: Url) {
        return urlCodeMap.get(url.pathname);
      },
      appID: 'appID',
      autoListen: true, // 默认为 true，自动监听页面点击事件，并发送数据
      attributeName: 'data-track', // 默认为 data-track，用于在 dom 元素上配置数据
      // 如果有提供 uploader 函数，则会覆盖默认的 form 表单上传
      // uploader(data: TrackDataParams) {
      //   /** 自定义上传 */
      // }
    };
    
    listen(config, router, true);
  }
}

在需要埋点的元素上配置相关数据

<!-- 区块编码设置 -->
<div data-track='{"blockCode": "blockCode"}'>
  <!-- 点位编码设置 -->
  <button type="button" data-track='{"placeCode": "placeCode"}'>button</button>
</div>