1

我们希望在 Angular (v5.1) 应用程序中跟踪 URL 更改和不同事件。

我们需要将收集到的数据接收到我们自己的服务器，而不是接收到受支持的提供商之一（如 Google Analytics）。

Angulartics2 似乎支持很多提供程序，并且还具有编写自定义提供程序的能力。正如他们在其网站上所写：“如果您选择的分析供应商没有 Angulartics2 插件，请随意编写您的”。

我没有找到任何关于如何编写自定义提供程序的文档。如果有人对此有任何经验。

或者对另一个与 Angular 一起使用并且可以将数据发送到自定义 URL 的分析库的任何建议。

谢谢。

4

1 回答 1

0

同样的问题在这里......找到分享的解决方案：（第一个 Stackoverflow 贡献，请原谅表格问题）

  1. 查看现有的提供者

我看过这个，因为它很简单。

  1. 重命名它以满足您的需求
  2. 删除奇怪declare var _kmq: any;并注入您自己的 ApiService 代替。
  3. 跟踪你的东西

我已经从构造函数中删除了this.angulartics2.setUsername和。this.angulartics2.setUserProperties因为我不知道它的用途......我的后端团队提供了一个等待以下数据结构的端点：

export interface AnalyticsDataInterface {
    id?: number;
    userId: number;
    action: AnalyticsAction|string;
    properties: string[];
    date: string;
}

到目前为止我的分析操作：

export enum AnalyticsAction {
    PAGE_VIEW = 'page_view',
    LOGIN = 'login_success',
}

那么这将是我的 ApiService：

@Injectable({
    providedIn: 'root'
})
export class AnalyticsService extends ApiService{

    public sendData(data: AnalyticsDataInterface){
        this.post<AnalyticsDataInterface>(Endpoint.ANALYTICS, data).subscribe();
    }
}

最后但并非最不重要的是我的 CustomProvider：

@Injectable({ providedIn: 'root' })
export class AngularticsProvider {

    constructor(
        private angulartics2: Angulartics2,
        private api: AnalyticsService,
        private userService: UserService
    ) {
        // this.angulartics2.setUsername
        //     .subscribe((x: string) => this.setUsername(x));
        // this.angulartics2.setUserProperties
        //     .subscribe((x) => this.setUserProperties(x));
    }

    startTracking(): void {
        this.angulartics2.pageTrack
            .pipe(this.angulartics2.filterDeveloperMode())
            .subscribe((x) => this.pageTrack(x.path));

        this.angulartics2.eventTrack
            .pipe(this.angulartics2.filterDeveloperMode())
            .subscribe((x) => this.eventTrack(x.action, x.properties));
    }

    pageTrack(path: string) {
        const requestData: AnalyticsDataInterface = {
            userId: this.userService.getUser().id,
            action: AnalyticsAction.PAGE_VIEW,
            properties: [path],
            date: new Date().toISOString()
        };

        this.api.sendData(requestData);
    }

    eventTrack(action: string, properties: string[]) {
        const requestData: AnalyticsDataInterface = {
            userId: this.userService.getUser().id,
            action,
            properties,
            date: new Date().toISOString()
        };
        this.api.sendData(requestData);
    }
}

然后只需按照正常的安装说明进行操作

  • 将 Angulartic2Module 导入 AppModule：

      imports: [
      ...
      Angulartics2Module.forRoot(),
      ...
  ]

  • 将您的自定义提供程序服务注入 AppComponent 并开始跟踪：

      export class AppComponent implements OnInit {

      constructor(
          private myCustomProvider: AngularticsProvider
      ) {
          myCustomProvider.startTracking();
      }
  }

其余的应该是默认的...

于 2020-09-11T12:52:29.270 回答