Wie implementiert man Google Analytics in Angular2?

Question

Ich habe Probleme beim Versuch, Google Analytics in angular2 zu implementieren. Nach Informationen, die ich gefunden habe und als Beispiel, in this post scheint es ziemlich einfach. Aber bis jetzt habe ich kein Beispiel gefunden, wie man es nicht von .html sondern von .ts stattdessen macht.

Ich versuche, eine private Methode mit Google Analytics zu machen und dann im Konstruktor aufzurufen. So ähnlich.

constructor() { 
    this.initializeAnalytics(); 
} 

private initializeAnalytics() { 
    (function (i, s, o, g, r, a, m) { 
     i['GoogleAnalyticsObject'] = r; 
     i[r] = i[r] || function() { 
      (i[r].q = i[r].q || []).push(arguments) 
     }, i[r].l = 1 * new Date(); 
     a = s.createElement(o), 
       m = s.getElementsByTagName(o)[0]; 
     a.async = 1; 
     a.src = g; 
     m.parentNode.insertBefore(a, m) 
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); 

    ... 
    ... 
} 

Aber nur Platzierung Google Analytics-Code funktioniert nicht (Fehler: supplied parameters do not match any signature of call target). Ich mache es wahrscheinlich falsch.

Wie kann ich das erreichen?

Answer 1

So habe ich es gemacht.

Sie müssen den GA-Code in Ihre index.html setzen. (nicht vergessen, die folgende Zeile zu kommentieren: // ga ('send', 'pageview');)

Dann müssen Sie die GA-Funktion in Ihre app.component.ts-Datei deklarieren, nach den Importen:

import { ... } ...; 

declare var ga:Function; 

@component(...) 

Dann könnte man auf die Route ändern Ereignis in Ihrem app.component.ts anmelden und die ga Daten wie folgt an:

this.router.events.subscribe((event:Event) => { 
    // Send GA tracking on NavigationEnd event. You may wish to add other 
    // logic here too or change which event to work with 
    if (event instanceof NavigationEnd) { 
     // When the route is '/', location.path actually returns ''. 
     let newRoute = this.location.path() || '/'; 
     // If the route has changed, send the new route to analytics. 
     if (this.currentRoute != newRoute) { 
      ga('send', 'pageview', newRoute); 
      //console.log('would send to ga: ' + newRoute); 
      this.currentRoute = newRoute; 
     } 
    } 
}); 

Answer 2

Sie müssen den Code konvertieren Typoskript. Derzeit ist es Javascript. Die Funktion bei

function (i, s, o, g, r, a, m) 

hat 7 nicht optionale Parameter jedoch nur Sie 5 in dieser Zeile liefern:

(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga') 

Sie müssen die übrigen Parameter optional wie so machen:

function (i, s, o, g, r, a?, m?) 

}, i[r].l = 1 * new Date(); 

:

Sie aus, dann müssen auch eine andere Linie ändern 210

zu

}, i[r].l = 1 * <any>new Date(); 

Der endgültige Code könnte wie folgt aussehen:

(function (i, s, o, g, r, a?, m?) { 
    i['GoogleAnalyticsObject'] = r; 
    i[r] = i[r] || function() { 
      (i[r].q = i[r].q || []).push(arguments) 
     }, i[r].l = 1 * <any>new Date(); 
    a = s.createElement(o), 
     m = s.getElementsByTagName(o)[0]; 
    a.async = 1; 
    a.src = g; 
    m.parentNode.insertBefore(a, m) 
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');