0.0.2 • Published 2 years ago

@tanbo/track-angular v0.0.2

Weekly downloads
3
License
-
Repository
-
Last release
2 years ago

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

安装框架

npm install @tanbo/track-angular

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

import { TrackAngularModule, listen } from '@tanbo/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>
0.0.2

2 years ago

0.0.1

2 years ago