我使用 Angular 8、Angular Universal 和 Angular Service Worker 制作了一个网站。我想添加 Google Analytics，我找到了 npm 模块 Angulartics2。我认为它可以部分地与 Google 跟踪代码管理器配合使用，但它无法识别路线更改。我的意思是，如果我从/index 页面开始，然后转到/exercise 页面，在我的 Google Analytics 仪表板中，我仍然看到用户正在使用/index 页面。
这是应用程序模块:
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>
最佳答案
在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
});
}
每次路线发生变化时，这都会调用谷歌分析代码。
您可以引用此链接https://fluin.io/blog/google-analytics-with-tag-manager-and-angular
关于Angular angulartics2(谷歌分析)不会更新路线更改页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56675776/