angular埋点集成极光 Web SDK-极光社区

开发步骤

SDK引入，添加 webSdk 埋点的js https://web-stat.jiguang.cn/web-janalytics/scripts/janalytics-web.min.js
配置 appkey,用来在统计里面查看相应项目埋点情况

SDK初始化

initReport(environment.reportAppKey);
function initReport(appkey: string) {
   // 在 DOM 加载完以后调用初始化
   const JAnalyticsInterface = (window as any).JAnalyticsInterface;
   if (JAnalyticsInterface && JAnalyticsInterface.init) {
       JAnalyticsInterface.init({
           appkey, // 极光官网中创建应用后分配的 appkey，必填
           debugMode: false,// 设置是否开启 debug 模式。true 则会打印更多的日志信息。设置 false 则只会输出 w、e 级别的日志
           channel: "default-channel",// 渠道名称，默认值为:default-channel
           loc: true, //设置是否尝试获取位置信息上报，默认为 true
           singlePage: true //设置是否为单页面，默认为 false
       });
   }
}

定义埋点函数

 /**
 * 上报埋点数据
 * @param eventName 上传的事件名称
 * @param params 额外上传的参数
 */
 export function reportData(
     eventName: string,
     params: {[key: string]: string | boolean} = {}
 ) {
     const JAnalyticsInterface = (window as any).JAnalyticsInterface;
     if (JAnalyticsInterface && JAnalyticsInterface.Event) { // 如果不存在则不操作（url也可能加载失败，所以需要考虑）
         const CountEvent = JAnalyticsInterface.Event.CountEvent;
         const cEvent = new CountEvent(eventName);

         Object.keys(params).forEach(key => {
             const val = params[key];
             cEvent.addKeyValue(key, val)
         });
         JAnalyticsInterface.onEvent(cEvent);
     }
 }

定义指令，方便业务代码的使用

 import { Directive, Input, HostListener, OnChanges } from '@angular/core';
 import { reportData } from '../util/util';
 import { BaseInfoService } from '../services/base-info.service';

 @Directive({
     selector: '[reportData]',
 })
 export class ReportDataDirective implements OnChanges {

     @Input() reportData: string; // eventID
     @Input() syncParams; // 同步的参数
     @Input() asyncParams; // 异步的参数
     @Input() delayHref; // href如果不是 `路由跳转 || target="_blank"`,那么可以使用 delayHref，防止跳转中断埋点
     constructor(
         private baseInfo: BaseInfoService
     ) {

     }

     // 给异步埋点使用
     ngOnChanges(changes) {
         const asyncParams = changes.asyncParams;
         if (asyncParams && !asyncParams.firstChange && asyncParams.currentValue) {
         this.report();
         }
     }

     @HostListener('click')
     onclick() { // 如果添加该指令的dom也有click事件，该click执行顺序>dom.onclick顺序
         if (!this.asyncParams && this.reportData) { 
         this.report();

         // 进行延迟跳转，否则report会一直pending
         if (this.delayHref) {
             setTimeout(() => {
                 location.href = this.delayHref;
             }, 100);
         }
         }
     }

     report() {
         let reportParams = this.syncParams || this.asyncParams || {};
         reportParams.devid = this.baseInfo.getDevId();
         reportData(this.reportData, reportParams);
     }
 }

使用情况

js埋点：直接引入模块，然后使用即可
场景：无界面的埋点，比如pv（page view,页面浏览量)，在路由跳转时候添加就好
```js
Util.reportData('event_click_english', {
```
 login_status: this.user.isEmptyUser !== 1 // 参数
```
})
指令埋点：全局module中引入即可
场景：有界面的埋点，比如dom的点击
- 同步
  - 无参 <div reportData='xxxx'>click me</div>
  - 有参 <div reportData='xxxx' [syncParams]="{product:'research'}">click me</div>
- 异步(如果觉得变扭，也可以使用上面说的引入js模块，然后在异步回调上报)
```
<div reportData='xxxx' [asyncParams]="reportParams">click me</div>
```
```
reportParams = {}
setTimeout(function() {
    reportParams = {} // 因为改变了reportParams的指针，所以会触发上报指令的ngOnChanges生命周期
},1000)
```
- 埋点不被跳转中断 <div reportData='xxxx' [asyncParams]="reportParams" delayHref="http://baidu.com">click me</div>

如何查看结果

注册账号 => 登录极光 => 服务中心 => 开发者平台 => 统计 => 事件统计 => 自定义计数
如果没有数据，需要查看appkey是否选择正确

angular埋点集成极光 Web SDK

开发步骤

使用情况

如何查看结果

1条评论