Динамическое название страницы как для браузера, так и для Google Analytics в Angular - PullRequest
Новая
       39

Динамическое название страницы как для браузера, так и для Google Analytics в Angular

0 голосов
/ 21 сентября 2019

Вопрос заключается в следующем:

Как динамически и централизованно настраивать заголовки страниц в Angular App только один раз для двух целей:

  • , чтобы заголовок в браузере отражал фактическийпросмотренная страница,
  • для отправки определенного названия в Google Analytics, избегая скучного, одиночного и бесполезного Angular App описания, примененного ко всем страницам приложения.

1 Ответ

0 голосов
/ 21 сентября 2019

Мое текущее решение

Я использовал два хороших фрагмента, найденных на Github:

  • first позволяет централизованно определять заголовок страницы в конфигурации маршрутизаторапросто для наглядности
  • секунда предоставляет решение для отправки событий навигации в 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 , важно, так как мы будем отслеживать каждую страницу вручную.Стандартный пример кода Джефф по умолчанию true

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

Избавьтесь от любого кода GA / Gtag, который вы можете иметь в файле index.html.Это позволяет настраивать подписку на сервисы GA, не полагаясь на автоматическое отслеживание, которое мы не будем использовать.В SPA index.html загружается обычно один раз и без отслеживания страниц, настройка на бесполезна.

Предложение по улучшению:

Мне не ответили:

Как использовать параметры ActivatedRoute и сопоставить их с подробными заголовками, используемыми затем в Google Analytics, и при необходимости - для отображения для параметра заголовков в браузере.

...