Question

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

我们需要将收集的数据收到我们自己的服务器，而不是收件人之一（例如Google Analytics）。

似乎Angulartics2支持许多提供商，并且还具有编写自定义提供程序的能力。当他们在他们的网站上写道：＆＃34;如果您的分析供应商没有选择Angulartics2插件，请随时写下您的＃34;。

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

或建议使用另一个与Angular配合使用的分析库，并将数据发送到自定义网址。

感谢。

Answer 1

此处有相同问题...找到了要共享的解决方案：（第一个Stackoverflow贡献，借口形式问题）

查看现有的提供商

我看过this one的原因很简单。

重命名以满足您的需求
删除奇怪的declare var _kmq: any;并注入您自己的ApiService。
跟踪您的资料

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

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

到目前为止，我的Google Analytics（分析）操作：

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();
      }
  }

其余应为默认值...

使用Angulartics2自定义提供程序进行角度应用程序分析测量

1 个答案: