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]

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

}

Angular 4 kommt im März

Ab März 2017 steht Angular 4 zur Verfügung. Allerdings wird es dann offiziell nur noch als „Angular“ bezeichnet. Die Versionsnummer werden dann, wie es von anderen Sprachen bereits bekannt ist, nach dem System der semantischen Versionierung (SEMVER) vergeben. Das bedeutet, dass zukünftig Major-, Minor- und Patch-Versionen bzw. Releases geben wird. Bei Major-Version kann es dann z.B. auch zu fehlender Abwärtskompatibilität kommen. Minor- und Patch-Releases sollten davon ausgeschlossen sein.

Warum offiziell Angular 4 ab März? angularjs.de gibt dazu folgende Antwort:
Alle Angular Pakete befinden sich in einem Git-Repository. Alle Core-Pakete sind in der Major Version 2, nur der Router ist in Version 3. Um dies zu beheben wird der nächste Breaking Change alle Versionen auf Major Version 4 ziehen, damit werden alle Pakete innerhalb von Angular ab diesem Zeitpunkt einheitlich nach SEMVER behandelt.
Quelle: angularjs.de