Ich richte eine neue App mit AngularJS als Frontend ein. Alles auf der Clientseite wird mit HTML5 Pushstate erledigt und ich möchte meine Seitenaufrufe in Google Analytics verfolgen können.
221
Ich richte eine neue App mit AngularJS als Frontend ein. Alles auf der Clientseite wird mit HTML5 Pushstate erledigt und ich möchte meine Seitenaufrufe in Google Analytics verfolgen können.
Antworten:
Wenn Sie
ng-view
in Ihrer Angular-App verwenden, können Sie auf das$viewContentLoaded
Ereignis warten und ein Tracking-Ereignis an Google Analytics senden.Angenommen, Sie haben Ihren Tracking-Code in Ihrer Hauptdatei index.html mit dem Namen
var _gaq
und MyCtrl eingerichtet, wie Sie es in derng-controller
Direktive definiert haben .UPDATE: Verwenden Sie für eine neue Version von Google Analytics diese
quelle
_trackPageview
und nicht_trackPageView
... verbrachte 10 Minuten am Kopf kratzen :)$rootScope.$on('$routeChangeSuccess', ...)
$rootScope
würde die Anwendung auf garantieren, dass sie nicht durch ein anderes Ereignis oder eine andere DOM-Änderung entfernt wird, und die VerwendungrouteChangeSuccess
wird jedes Mal ausgelöst, wenn die Die Positionsleiste ändert sich, anstatt immer Ihre Quellquelle zu ändern. Ist das sinnvoll?$window.ga('send', 'pageview', { page: $location.path() });
anstelle des$window._gaq...
Teils. Möglicherweise möchten Sie auchga('send', 'pageview');
aus Ihrem ursprünglichen GA-Code entfernen , um Duplikate zu vermeiden, wenn Sie zum ersten Mal auf einer Seite landen.Wenn eine neue Ansicht geladen wird
AngularJS
, zählt Google Analytics sie nicht als neue Seitenladung. Glücklicherweise gibt es eine Möglichkeit, GA manuell anzuweisen, eine URL als neuen Seitenaufruf zu protokollieren._gaq.push(['_trackPageview', '<url>']);
würde den Job machen, aber wie kann man das mit AngularJS binden?Hier ist ein Dienst, den Sie nutzen können:
Wenn Sie Ihr Winkelmodul definieren, fügen Sie das Analysemodul folgendermaßen hinzu:
UPDATE :
Sie sollten den neuen Universal Google Analytics-Tracking-Code verwenden mit:
quelle
this.track = function($window.ga('send', 'pageview', {page: $location.url()});
Dies ermöglicht es Ihnen,googleAnalytics.track();
innerhalb Ihrer app.run () Funktion zu verwendenquelle
app.run(["$rootScope", "$location", function(...
Nur eine kurze Ergänzung. Wenn Sie die neue Datei analyse.js verwenden, gilt Folgendes:
Ein Tipp ist außerdem, dass Google Analytics nicht auf localhost ausgelöst wird. Wenn Sie also auf localhost testen, verwenden Sie anstelle der Standarderstellung Folgendes ( vollständige Dokumentation ).
quelle
$window
für den Zugriff auf das Fenster verwenden (ga
allein in Angular ist dies sehr wahrscheinlichundefined
). Möglicherweise möchten Sie auchga('send', 'pageview');
aus Ihrem ursprünglichen GA-Code entfernen , um Duplikate zu vermeiden, wenn Sie zum ersten Mal auf einer Seite landen.$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { ga('send', 'pageview', { 'page': $location.path(), 'title': toState.name }); });
$location.url()
Ich habe einen Service + Filter erstellt, der Ihnen dabei helfen kann, und vielleicht auch bei einigen anderen Anbietern, wenn Sie diese in Zukunft hinzufügen möchten.
Schauen Sie sich https://github.com/mgonto/angularytics an und lassen Sie mich wissen, wie dies für Sie funktioniert.
quelle
Das Zusammenführen der Antworten von Wynnwu und Dpineda hat für mich funktioniert.
Das Festlegen des dritten Parameters als Objekt (anstelle von nur $ location.path ()) und die Verwendung von $ routeChangeSuccess anstelle von $ stateChangeSuccess haben den Trick ausgeführt.
Hoffe das hilft.
quelle
Ich habe ein einfaches Beispiel für Github mit dem obigen Ansatz erstellt.
https://github.com/isamuelson/angularjs-googleanalytics
quelle
/account/:accountId
aka aka pathhttp://somesite.com/account/123
haben, wird der Pfad jetzt als/account?accountId=123
Der beste Weg, dies zu tun, ist die Verwendung von Google Tag Manager, um Ihre Google Analytics-Tags basierend auf Verlaufs-Listenern auszulösen. Diese sind in die GTM-Oberfläche integriert und ermöglichen auf einfache Weise die Verfolgung clientseitiger HTML5-Interaktionen.
Aktivieren Sie die integrierte History Variablen und erstellen Sie einen Trigger ein Ereignis ausgelöst , basierend auf der Geschichte ändert.
quelle
index.html
Kopieren Sie das ga-Snippet und fügen Sie es ein , aber entfernen Sie die Liniega('send', 'pageview');
Ich gebe ihm gerne eine eigene Factory-Datei
my-google-analytics.js
mit Selbstinjektion:quelle
page
mit dem aktuellen Pfad und reichen ihn dann als einpageview
? Was ist der Unterschied, wenn man es so macht, anstatt nur$window.ga('send', 'pageview', {page: $location.url()});
?Ich fand die
gtag()
Funktion funktioniert, anstelle derga()
Funktion.In der Datei index.html im
<head>
Abschnitt:Im AngularJS-Code:
Ersetzen Sie
TrackingId
durch Ihre eigene Tracking-ID.quelle
Wenn jemand mithilfe von Anweisungen implementieren möchte, identifizieren (oder erstellen) Sie ein div in der index.html (direkt unter dem Body-Tag oder auf derselben DOM-Ebene).
und fügen Sie dann den folgenden Code in die Direktive ein
quelle
Wenn Sie einen UI-Router verwenden, können Sie das Ereignis $ stateChangeSuccess wie folgt abonnieren:
Ein vollständiges Arbeitsbeispiel finden Sie in diesem Blogbeitrag
quelle
Verwenden Sie GA 'set', um sicherzustellen, dass Routen für Google-Echtzeitanalysen erfasst werden. Andernfalls werden nachfolgende Anrufe bei GA nicht im Echtzeitfenster angezeigt.
Google empfiehlt diesen Ansatz generell dringend, anstatt einen dritten Parameter in "Senden" zu übergeben. https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications
quelle
Wenn Sie AngularUI Router anstelle von ngRoute verwenden, können Sie den folgenden Code verwenden, um Seitenaufrufe zu verfolgen.
quelle
Entwickler , die Einzelseitenanwendungen erstellen, können Autotrack verwenden , das ein urlChangeTracker- Plugin enthält, das alle in diesem Handbuch aufgeführten wichtigen Überlegungen für Sie behandelt. Anweisungen zur Verwendung und Installation finden Sie in der Autotrack-Dokumentation .
quelle
Ich benutze AngluarJS im HTML5-Modus. Ich fand folgende Lösung als am zuverlässigsten:
Verwenden Sie die Angular-Google-Analytics- Bibliothek. Initialisieren Sie es mit etwas wie:
Fügen Sie danach den Listener für $ stateChangeSuccess 'hinzu und senden Sie das trackPage-Ereignis.
Wenn Sie Ihren Benutzer initialisiert haben, können Sie jederzeit Analytics dort injizieren und einen Anruf tätigen:
quelle
Ich benutze UI-Router und mein Code sieht folgendermaßen aus:
Auf diese Weise kann ich verschiedene Zustände verfolgen. Vielleicht findet es jemand nützlich.
quelle
Ich persönlich möchte meine Analyse mit der Vorlagen-URL anstelle des aktuellen Pfads einrichten. Dies liegt hauptsächlich daran, dass meine Anwendung viele benutzerdefinierte Pfade wie
message/:id
oder hatprofile/:id
. Wenn ich diese Pfade senden würde, würden so viele Seiten in Analytics angezeigt, dass es zu schwierig wäre, zu überprüfen, welche Seite Benutzer am häufigsten besuchen.Ich erhalte jetzt saubere Seitenaufrufe in meinen Analysen, z. B.
user-profile.html
undmessage.html
statt vieler Seitenprofile/1
,profile/2
undprofile/3
. Ich kann jetzt Berichte verarbeiten, um zu sehen, wie viele Personen Benutzerprofile anzeigen.Wenn jemand Einwände dagegen hat, warum dies eine schlechte Praxis in der Analytik ist, würde ich mich sehr freuen, davon zu hören. Ganz neu in der Verwendung von Google Analytics, daher nicht sicher, ob dies der beste Ansatz ist oder nicht.
quelle
Ich empfehle, die Segmentanalysebibliothek zu verwenden und unserer Angular-Kurzanleitung zu folgen . Mit einer einzigen API können Sie Seitenbesuche und Benutzerverhaltensaktionen verfolgen. Wenn Sie eine SPA haben, können Sie die erlauben
RouterOutlet
Komponente Griff , wenn die Seite macht und die NutzungngOnInit
aufzurufenpage
Anrufe. Das folgende Beispiel zeigt eine Möglichkeit, wie Sie dies tun können:Ich bin der Betreuer von https://github.com/segmentio/analytics-angular . Mit Segment können Sie verschiedene Ziele durch Umlegen eines Schalters ein- und ausschalten, wenn Sie mehrere Analysetools ausprobieren möchten (wir unterstützen über 250 Ziele), ohne zusätzlichen Code schreiben zu müssen. 🙂
quelle
Noch mehr mit Pedro Lopez 'Antwort verschmelzen,
Ich habe dies meinem ngGoogleAnalytis-Modul hinzugefügt (das ich in vielen Apps wiederverwenden kann):
In diesem Fall habe ich ein Tag in meinem Indexlink:
Dies ist nützlich, wenn Sie den HTML5-Modus für angle.js v1.3 verwenden
(Entfernen Sie den Funktionsaufruf replace (), wenn Ihr Basis-Tag nicht mit einem Schrägstrich / endet.)
quelle
Wenn Sie die vollständige Kontrolle über den neuen Tracking-Code von Google Analytics suchen, können Sie meinen eigenen Angular-GA verwenden .
Es wird
ga
durch Injektion verfügbar gemacht und ist daher leicht zu testen. Es macht keine Magie, außer den Pfad auf jeder routeChange festzulegen. Sie müssen den Seitenaufruf noch wie hier senden.Zusätzlich gibt es eine Direktive,
ga
die es ermöglicht, mehrere Analysefunktionen an Ereignisse wie diese zu binden:quelle