Angular angulartics2 (Google Analytics) не обновляет страницу при изменении маршрута - PullRequest
Новая
       44

Angular angulartics2 (Google Analytics) не обновляет страницу при изменении маршрута

0 голосов
/ 20 июня 2019

Я сделал сайт с Angular 8 и Angular Universal и Angular Worker.Я хотел добавить Google Analytics и нашел модуль npm Angulartics2.Я думаю, что это частично работает, с Google Tag Manager, но он не распознает изменение маршрута.Я имею в виду, что если я начну со страницы / index, а затем перейду на страницу / exerc, на панели инструментов 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>
...