Angular 中浏览器显示和 Google Analytics 的动态页面标题

我目前的解决方案

我使用了 Github 上的两个不错的片段：

• 首先允许在路由器配置中集中定义页面标题，仅用于视觉目的，
• 第二个提供了一种解决方案，用于将导航事件发送到 Google Analytics，同时在单页应用程序中 - 以自动集中方式或手动方式。它收到了amarnathm评论的鼓舞人心的票。

那么，这两个中提出的想法，包括对向后者报告的问题的讨论，可以通过这种方式进行整合：

app.routing-module.ts：

const routes: Routes = [ 
  { path: 'site/contact', component: ContactComponent, data: {title: 'Contact'}},
  ...
  // other paths
];

app.module.ts：

import {BrowserModule} from '@angular/platform-browser';
import {TitleService} from "./title.service";
import {GtagModule} from "angular-gtag";
// ...
providers: [
    // ...
    TitleService,
    GtagModule.forRoot({ trackingId: 'MY-UA-CODE', trackPageviews: false })        
    // ...   
  ]
// ...

trackPageviews: false，正如amarnathm所提议的，很重要，因为我们将每页手动跟踪。Jeff 的标准示例代码默认为true

标题.service.ts :

import { Injectable } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { Title } from '@angular/platform-browser';
import { filter, map, switchMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class TitleService {
  default_title = 'My App';

  constructor(
    private router: Router,
    private activeRoute: ActivatedRoute,
    private title: Title,
    private gtag: Gtag,
    private env: Environment
  ) { }

  boot() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      map(() => this.activeRoute),
      map(route => route.firstChild),
      switchMap(route => route.data),
      map((data) => {

        //here goes the GA reporting code            

        this.gtag.pageview({
          page_title: data && data.title ? data.title : this.default_title,
          page_path: this.router.url,
          page_location: this.env.host + this.router.url
        });

        return data && data.title ? `${data.title} • ${this.default_title}` : this.default_title;
      })
    ).subscribe((current_title) => this.title.setTitle(current_title));
  }
}

app.component.ts :

import { Component, OnInit } from '@angular/core';
import { TitleService } from './title.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styles: [],
})
export class AppComponent implements OnInit {

  constructor(private titleService: TitleService) { }

  ngOnInit() {
    this.titleService.boot();
  }
}

删除index.html文件中可能包含的任何 GA/Gtag 代码。这允许自定义订阅 GA 服务，而无需依赖我们不会使用的自动跟踪。在 SPAindex.html中通常加载一次并且没有页面跟踪设置是无用的。

增强建议：

我没有答案：

如何使用ActivatedRoute参数并将它们映射到随后在 Analytics 中使用的详细标题，以及可选 - 用于在浏览器中显示每个参数的标题。