Google Analytics in eine Angular App einbinden

Um Google Analytics in eine Angular App einzubinden muss man genau zwei Dinge tun:

  • Den Google Analytics Code im body-Bereich der index.html Datei einbinden UND die Zeile ga(’send‘, ‚pageview‘); herauslöschen (diese muss manuell gesendet werden)
  • In der root-Komponente auf Änderungen im Router lauschen um dann entsprechend ga(’send‘, ‚pageview‘); aufzurufen

Lauschen auf Änderungen im Router:

    ngOnInit() {
        this.routerEventSubscriber = this.router.events.subscribe((event) => {
            if (!(event instanceof NavigationEnd)) {
                return;
            }

            // Inform Google Analytics
            ga('set', 'page', event.urlAfterRedirects);
            ga('send', 'pageview');
        });
    }

    ngOnDestroy() {
        this.routerEventSubscriber.unsubscribe();
    }

[Update]
Wenn man die Analytics-Daten nur in der Produktiv-Umgebung abfeuern möchte, kann man das am besten über die environment-Variable machen:

if( environment.production === true ) {
// Inform Google Analytics
ga('set', 'page', event.urlAfterRedirects);
ga('send', 'pageview');
}
[/Update]

Cookie-Banner Komponente

Ab Mai 2018 wird ein Cookie-Banner Pflicht. Wer diesen jetzt schon bei sich anzeigen möchte, kann auf die Cookie-Law Komponente für Angular 2+ zurückgreifen. Damit kann extrem einfach ein Cookie-Banner erzeugt, gestaltet und angezeigt werden. Wer noch den passenden Text (und weitere Hintergrundinfos) benötigt, kann sich bei e-recht24.de schlau machen.

An den Anfang der Seite/Komponente springen

Das Laden von Komponenten in SPAs hat sehr viele Vorteile. Einer der wenigen Nachteile ist allerdings, dass man standardmässig nicht mehr an den Anfang der Seite springt, wenn man einen Link anklickt.

Mit einem einfachen Event-Subscriber direkt auf der Root-Komponente kann man dem allerdings entgegenwirken:

export class AppComponent implements OnInit, OnDestroy{
    private routerEventSubscriber: Subscription;

    constructor(private router: Router) {}

    ngOnInit() {
        this.routerEventSubscriber = this.router.events.subscribe((evt) => {
            if (!(evt instanceof NavigationEnd)) {
                return;
            }
            window.scrollTo(0, 0)
        });
    }

    ngOnDestroy() {
        this.routerEventSubscriber.unsubscribe();
    }

}