使用Angulartics2自定义提供程序测量Angular应用程序分析

Question

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

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

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

我找不到任何有关如何编写自定义提供程序的文档。如果有人有这方面的经验的话。

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

谢谢。

Answer 1

这里也有同样的问题。找到分享的解决方案：(第一个Stackoverflow贡献，找出表单问题的借口)

1. 查看现有提供程序

我看过this one，因为它很简单。

1. 将其重命名以满足您的需要，并移除奇怪的declare var _kmq: any;

inject own your Stuff

我已经从构造函数中删除了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：

导入：...Angulartics2Module.forRoot()，...

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

导出类AppComponent实现了构造函数{ OnInit (私有myCustomProvider: AngularticsProvider ){ myCustomProvider.startTracking()；} }

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