Angular angulartics2（google analytics）不会在路由更改时更新页面

Question

我用 Angular 8 和 Angular Universal 和 Angular Service Worker 创建了一个站点。我想添加 Google Analytics，我找到了 npm 模块 Angulartics2。我认为它在 Google 标签管理器中部分起作用，但它无法识别路由更改。我的意思是，如果我从 /index 页面开始，然后转到 /exercise 页面，在我的 Google Analytics 仪表板中，我仍然看到用户正在使用 /index 页面。

这是 AppModule：

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import { NgxWebstorageModule } from 'ngx-webstorage';
import { Angulartics2Module } from 'angulartics2';
import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';

import { MaterialModule } from './material/material.module';
import { MAT_DATE_LOCALE } from '@angular/material';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { IndexComponent } from './index/index.component';
import { GetSolutionComponent } from './get-solution/get-solution.component';
import { GetSolutionFormComponent } from './get-solution/get-solution-form/get-solution-form.component';
import { GetSolutionProgressComponent } from './get-solution/get-solution-progress/get-solution-progress.component';
import { GetSolutionSolutionComponent } from './get-solution/get-solution-solution/get-solution-solution.component';
import { GetSolutionToggleComponent } from './get-solution/get-solution-form/get-solution-toggle/get-solution-toggle.component';
import { GetSolutionNotesComponent } from './get-solution/get-solution-form/get-solution-notes/get-solution-notes.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent,
    IndexComponent,
    GetSolutionComponent,
    GetSolutionFormComponent,
    GetSolutionProgressComponent,
    GetSolutionSolutionComponent,
    GetSolutionToggleComponent,
    GetSolutionNotesComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'unitn-statistica' }),
    HttpClientModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    FlexLayoutModule,
    MaterialModule,
    NgxWebstorageModule.forRoot(),
    AppRoutingModule,
    Angulartics2Module.forRoot(),
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'it-IT' },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是 AppComponent 的一部分：

import { Angulartics2GoogleTagManager } from 'angulartics2/gtm';

import { AlertService, SnackType, SnackMessage } from './alert/alert.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor(
    angulartics2GoogleTagManager: Angulartics2GoogleTagManager
    ) {
      angulartics2GoogleTagManager.startTracking();
    }

}

这是index.html:


<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>title</title>
  <base href="/">

  <meta name="Description" content="Login">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="manifest" href="manifest.webmanifest">
  <meta name="theme-color" content="#1976d2">

  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'UA-XXXXXXXXXXXX');
  </script>
</head>

<body>
  <app-root></app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>

</html>

Answer 1

在index.html中这样添加

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX"></script>


<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
</script>

不添加 gtag('config', 'UA-XXXXXXXXXXXX') 在 index.html 中，在 app.component.ts 中使用它，如下所示

import { filter } from 'rxjs/operators';
import  { Router, NavigationEnd } from "@angular/router";
declare var gtag;

constructor(router: Router) {
const navEndEvent$ = router.events.pipe(
  filter(e => e instanceof NavigationEnd)
);
navEndEvent$.subscribe((e: NavigationEnd) => {
  gtag('config', 'UA-XXXXX', {'page_path':e.urlAfterRedirects}); //gtag added here
});

}

这将在每次路由更改时调用 google 分析代码。

你可以参考这个linkhttps://fluin.io/blog/google-analytics-with-tag-manager-and-angular

Angular angulartics2（google analytics）不会在路由更改时更新页面

Angular angulartics2 (google analytics) does not update page on route change

google-analytics

google-tag-manager

angular-universal

angulartics2

angular