javascript - gtag - Verfolgen der Google Analytics-Seitenansichten in Angular2




gtag js angular 2 (2)

Erweitern Sie Ians Antwort. Mit den integrierten Funktionen von Rx können Sie die Unterscheidung zwischen aktuellen und neuen Routen vornehmen.

import { NavigationEnd, Router } from '@angular/router';

declare var ga: any;

export class AppComponent {
        constructor(public router: Router) {
            router.events.distinctUntilChanged((previous: any, current: any) => {
                if(current instanceof NavigationEnd) {
                    return previous.url === current.url;
                }
                return true;
            }).subscribe((x: any) => {
                console.log('router.change', x);
                ga('send', 'pageview', x.url);
            });
        }
    }

Wir verwenden den distinctUntilChanged-Operator, damit der Beobachter nur Elemente vom Typ NavigationEnd ausgibt und nicht dieselbe Route wie das zuvor ausgegebene Element hat.

Ich habe eine neue Website mit Angular 2 als Front-End erstellt. Da alles über den Push-Status erfolgt, gibt es keine Seitenladevorgänge, die den Google Analytics-Code auslösen, um eine Seitenansicht an die Google-Server zu senden.

Wie kann ich Seitenansichtsereignisse manuell an Google senden, damit ich verfolgen kann, welche Nutzer meiner Website angezeigt werden?


Es gelang mir, dies zu erreichen, indem ich Änderungen auf dem Router abonnierte, die tatsächliche Route änderte (ich bekam manchmal mehrere Ereignisse auf einigen Routen) und schickte den neuen Pfad dann an Google.

app.component.ts

import { ... } from '...';

// Declare ga function as ambient
declare var ga:Function;

@Component({ ... })

export class AppComponent {
    private currentRoute:string;

    constructor(_router:Router) {
        // Using Rx's built in `distinctUntilChanged ` feature to handle url change c/o @dloomb's answer
        router.events.distinctUntilChanged((previous: any, current: any) => {
            // Subscribe to any `NavigationEnd` events where the url has changed
            if(current instanceof NavigationEnd) {
                return previous.url === current.url;
            }
            return true;
        }).subscribe((x: any) => {
            ga('set', 'page', x.url);
            ga('send', 'pageview')
        });
      }
    }
}

Sie müssen auch den Google Analytics-Code in Ihre Hauptindexdatei einfügen, bevor Sie Ihre angular2-App laden, damit das globale ga Objekt existiert, aber Sie möchten die ursprüngliche Ansicht nicht zweimal senden. Entfernen Sie dazu die folgende Zeile aus dem GA-Skript

index.html

<script>
  (function(i,s,o,g,r,a,m){...})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-X', 'auto');
  // Remove this line to avoid sending the first page view twice.
  //ga('send', 'pageview');

</script>
<!-- 
    Load your ng2 app after ga. 
    This style of deferred script loading doesn't guarantee this will happen
    but you can use Promise's or what works for your particular project. 
-->
<script defer type="text/javascript" src="/app.js"></script>

Verwenden einer Drittanbieter-Bibliothek

Als Alternative zur GA-Implementierung ist die Bibliothek Angulartics2 auch ein beliebtes Werkzeug zur Implementierung von GA-Tracking und kann auch mit anderen Analytics-Anbietern integriert werden.





angular