Sto configurando una nuova app usando AngularJS come frontend. Tutto sul lato client è fatto con pushstate HTML5 e mi piacerebbe essere in grado di monitorare le visualizzazioni della mia pagina in Google Analytics.
Sto configurando una nuova app usando AngularJS come frontend. Tutto sul lato client è fatto con pushstate HTML5 e mi piacerebbe essere in grado di monitorare le visualizzazioni della mia pagina in Google Analytics.
Risposte:
Se stai utilizzando ng-view
l'app Angular, puoi ascoltare l' $viewContentLoaded
evento e inviare un evento di tracciamento a Google Analytics.
Supponendo che tu abbia impostato il tuo codice di monitoraggio nel tuo file index.html principale con un nome var _gaq
e MyCtrl è ciò che hai definito nella ng-controller
direttiva.
function MyCtrl($scope, $location, $window) {
$scope.$on('$viewContentLoaded', function(event) {
$window._gaq.push(['_trackPageView', $location.url()]);
});
}
AGGIORNAMENTO: per la nuova versione di Google Analytics utilizzare questo
function MyCtrl($scope, $location, $window) {
$scope.$on('$viewContentLoaded', function(event) {
$window.ga('send', 'pageview', { page: $location.url() });
});
}
_trackPageview
e non _trackPageView
... trascorso 10 minuti di grattarsi la testa :)
$rootScope.$on('$routeChangeSuccess', ...)
$rootScope
garantire che non verrà rimosso da qualche altro evento o modifica del DOM, e l'utilizzo routeChangeSuccess
verrà attivato ogni volta che la barra della posizione cambia, invece di cambiare sempre il modello di origine della vista. Ha senso?
$window.ga('send', 'pageview', { page: $location.path() });
invece della $window._gaq...
parte. Inoltre, potresti voler rimuovere ga('send', 'pageview');
dal tuo codice GA originale per evitare duplicati quando atterri per la prima volta su una pagina.
Quando viene caricata una nuova vista AngularJS
, Google Analytics non la conteggia come un nuovo caricamento della pagina. Fortunatamente c'è un modo per dire manualmente a GA di registrare un URL come una nuova visualizzazione di pagina.
_gaq.push(['_trackPageview', '<url>']);
farebbe il lavoro, ma come legarlo con AngularJS?
Ecco un servizio che potresti usare:
(function(angular) {
angular.module('analytics', ['ng']).service('analytics', [
'$rootScope', '$window', '$location', function($rootScope, $window, $location) {
var track = function() {
$window._gaq.push(['_trackPageview', $location.path()]);
};
$rootScope.$on('$viewContentLoaded', track);
}
]);
}(window.angular));
Quando si definisce il modulo angolare, includere il modulo di analisi in questo modo:
angular.module('myappname', ['analytics']);
AGGIORNAMENTO :
Devi utilizzare il nuovo codice di monitoraggio universale di Google Analytics con:
$window.ga('send', 'pageview', {page: $location.url()});
this.track = function($window.ga('send', 'pageview', {page: $location.url()});
Questo vi permetterà di utilizzare googleAnalytics.track();
all'interno del tuo app.run () funzione
app.run(function ($rootScope, $location) {
$rootScope.$on('$routeChangeSuccess', function(){
ga('send', 'pageview', $location.path());
});
});
app.run(["$rootScope", "$location", function(...
Solo una rapida aggiunta. Se stai usando il nuovo analytics.js, allora:
var track = function() {
ga('send', 'pageview', {'page': $location.path()});
};
Inoltre, un suggerimento è che Google Analytics non si attiverà su localhost. Pertanto, se si esegue il test su localhost, utilizzare quanto segue anziché la creazione predefinita ( documentazione completa )
ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});
$window
per accedere alla finestra ( ga
molto probabilmente solo all'interno di Angular undefined
). Inoltre, potresti voler rimuovere ga('send', 'pageview');
dal tuo codice GA originale per evitare duplicati quando atterri per la prima volta su una pagina.
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { ga('send', 'pageview', { 'page': $location.path(), 'title': toState.name }); });
$location.url()
Ho creato un servizio + filtro che potrebbe aiutarti in questo, e forse anche con altri provider se scegli di aggiungerli in futuro.
Dai un'occhiata a https://github.com/mgonto/angularytics e fammi sapere come funziona per te.
Unire le risposte di Wynnwu e Dpineda è stato ciò che ha funzionato per me.
angular.module('app', [])
.run(['$rootScope', '$location', '$window',
function($rootScope, $location, $window) {
$rootScope.$on('$routeChangeSuccess',
function(event) {
if (!$window.ga) {
return;
}
$window.ga('send', 'pageview', {
page: $location.path()
});
});
}
]);
L'impostazione del terzo parametro come oggetto (anziché solo $ location.path ()) e l'utilizzo di $ routeChangeSuccess invece di $ stateChangeSuccess hanno funzionato.
Spero che questo ti aiuti.
Ho creato un semplice esempio su github usando l'approccio sopra.
/account/:accountId
aka percorso è http://somesite.com/account/123
ora riporterà il percorso come/account?accountId=123
Il modo migliore per farlo è utilizzare Google Tag Manager per attivare i tag di Google Analytics in base ai listener della cronologia. Questi sono integrati nell'interfaccia GTM e consentono facilmente il tracciamento delle interazioni HTML5 lato client.
Abilita le variabili Cronologia integrate e crea un trigger per generare un evento in base alle modifiche della cronologia.
Nel tuo index.html
, copia e incolla lo snippet ga ma rimuovi la lineaga('send', 'pageview');
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(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');
ga('create', 'UA-XXXXXXXX-X');
</script>
Mi piace dargli il suo file di fabbrica my-google-analytics.js
con l'autoiniezione:
angular.module('myApp')
.factory('myGoogleAnalytics', [
'$rootScope', '$window', '$location',
function ($rootScope, $window, $location) {
var myGoogleAnalytics = {};
/**
* Set the page to the current location path
* and then send a pageview to log path change.
*/
myGoogleAnalytics.sendPageview = function() {
if ($window.ga) {
$window.ga('set', 'page', $location.path());
$window.ga('send', 'pageview');
}
}
// subscribe to events
$rootScope.$on('$viewContentLoaded', myGoogleAnalytics.sendPageview);
return myGoogleAnalytics;
}
])
.run([
'myGoogleAnalytics',
function(myGoogleAnalytics) {
// inject self
}
]);
page
con il percorso corrente e quindi inviarlo come pageview
? Qual è la differenza nel farlo in questo modo invece che solo $window.ga('send', 'pageview', {page: $location.url()});
?
Ho trovato la gtag()
funzione funzionante, invece della ga()
funzione.
Nel file index.html, all'interno della <head>
sezione:
<script async src="https://www.googletagmanager.com/gtag/js?id=TrackingId"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TrackingId');
</script>
Nel codice AngularJS:
app.run(function ($rootScope, $location) {
$rootScope.$on('$routeChangeSuccess', function() {
gtag('config', 'TrackingId', {'page_path': $location.path()});
});
});
Sostituisci TrackingId
con il tuo ID di monitoraggio.
Se qualcuno vuole implementare usando le direttive, identifica (o crea) un div in index.html (appena sotto il tag body o allo stesso livello DOM)
<div class="google-analytics"/>
e quindi aggiungere il seguente codice nella direttiva
myApp.directive('googleAnalytics', function ( $location, $window ) {
return {
scope: true,
link: function (scope) {
scope.$on( '$routeChangeSuccess', function () {
$window._gaq.push(['_trackPageview', $location.path()]);
});
}
};
});
Se usi ui-router puoi iscriverti all'evento $ stateChangeSuccess in questo modo:
$rootScope.$on('$stateChangeSuccess', function (event) {
$window.ga('send', 'pageview', $location.path());
});
Per un esempio di lavoro completo vedi questo post sul blog
Utilizza GA 'set' per assicurarti che i percorsi vengano raccolti per Google Analytics in tempo reale. In caso contrario, le chiamate successive a GA non verranno visualizzate nel pannello in tempo reale.
$scope.$on('$routeChangeSuccess', function() {
$window.ga('set', 'page', $location.url());
$window.ga('send', 'pageview');
});
Google consiglia vivamente questo approccio in generale invece di passare un terzo parametro in "invia". https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications
Per quelli di voi che usano AngularUI Router invece di ngRoute è possibile utilizzare il seguente codice per tenere traccia delle visualizzazioni di pagina.
app.run(function ($rootScope) {
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
ga('set', 'page', toState.url);
ga('send', 'pageview');
});
});
Gli sviluppatori che creano applicazioni a pagina singola possono utilizzare l' autotrack , che include un plug-in urlChangeTracker che gestisce per te tutte le considerazioni importanti elencate in questa guida. Consultare la documentazione di autotrack per le istruzioni di utilizzo e installazione.
Sto usando AngluarJS in modalità HTML5. Ho trovato la seguente soluzione come la più affidabile:
Usa la libreria angular-google-analytics . Inizializzalo con qualcosa del tipo:
//Do this in module that is always initialized on your webapp
angular.module('core').config(["AnalyticsProvider",
function (AnalyticsProvider) {
AnalyticsProvider.setAccount(YOUR_GOOGLE_ANALYTICS_TRACKING_CODE);
//Ignoring first page load because of HTML5 route mode to ensure that page view is called only when you explicitly call for pageview event
AnalyticsProvider.ignoreFirstPageLoad(true);
}
]);
Successivamente, aggiungi listener su $ stateChangeSuccess 'e invia l'evento trackPage.
angular.module('core').run(['$rootScope', '$location', 'Analytics',
function($rootScope, $location, Analytics) {
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams, options) {
try {
Analytics.trackPage($location.url());
}
catch(err) {
//user browser is disabling tracking
}
});
}
]);
In qualsiasi momento, quando il tuo utente è iniziato, puoi iniettare Analytics lì ed effettuare chiamate:
Analytics.set('&uid', user.id);
Sto usando ui-router e il mio codice è simile al seguente:
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams){
/* Google analytics */
var path = toState.url;
for(var i in toParams){
path = path.replace(':' + i, toParams[i]);
}
/* global ga */
ga('send', 'pageview', path);
});
In questo modo posso monitorare diversi stati. Forse qualcuno lo troverà utile.
Personalmente mi piace impostare la mia analisi con l'URL del modello anziché il percorso corrente. Questo principalmente perché la mia applicazione ha molti percorsi personalizzati come message/:id
o profile/:id
. Se dovessi inviare questi percorsi, avrei avuto così tante pagine visualizzate nell'analisi, sarebbe troppo difficile controllare quale pagina gli utenti visitano di più.
$rootScope.$on('$viewContentLoaded', function(event) {
$window.ga('send', 'pageview', {
page: $route.current.templateUrl.replace("views", "")
});
});
Io ora ottenere puliti pagine viste nel mio analisi quali user-profile.html
e message.html
invece di molte pagine che sono profile/1
, profile/2
eprofile/3
. Ora posso elaborare i report per vedere quante persone stanno visualizzando i profili utente.
Se qualcuno ha obiezioni sul perché questa è una cattiva pratica nell'ambito dell'analisi, sarei più che felice di sentirne parlare. Abbastanza nuovo nell'uso di Google Analytics, quindi non sono troppo sicuro se questo è l'approccio migliore o meno.
Suggerisco di utilizzare la libreria di analisi dei segmenti e di seguire la nostra guida di avvio rapido angolare . Sarai in grado di tracciare le visite alle pagine e le azioni di comportamento degli utenti con una singola API. Se si dispone di una SPA, è possibile consentire al RouterOutlet
componente di gestire il rendering della pagina e utilizzarlo ngOnInit
per richiamare le page
chiamate. L'esempio seguente mostra un modo per farlo:
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
ngOnInit() {
window.analytics.page('Home');
}
}
Sono il manutentore di https://github.com/segmentio/analytics-angular . Con il segmento, sarai in grado di attivare e disattivare diverse destinazioni con il semplice cambio di un interruttore se sei interessato a provare più strumenti di analisi (supportiamo oltre 250+ destinazioni) senza dover scrivere alcun codice aggiuntivo. 🙂
Unendosi ancora di più con la risposta di Pedro Lopez,
Ho aggiunto questo al mio modulo ngGoogleAnalytis (che riutilizzo in molte app):
var base = $('base').attr('href').replace(/\/$/, "");
in questo caso, ho un tag nel mio link indice:
<base href="/store/">
è utile quando si utilizza la modalità html5 su angular.js v1.3
(rimuovi la funzione di sostituzione () se il tag di base non termina con una barra /)
angular.module("ngGoogleAnalytics", []).run(['$rootScope', '$location', '$window',
function($rootScope, $location, $window) {
$rootScope.$on('$routeChangeSuccess',
function(event) {
if (!$window.ga) { return; }
var base = $('base').attr('href').replace(/\/$/, "");
$window.ga('send', 'pageview', {
page: base + $location.path()
});
}
);
}
]);
Se stai cercando il pieno controllo del nuovo codice di monitoraggio di Google Analytics, puoi utilizzare il mio Angular-GA personale .
Rende ga
disponibile tramite iniezione, quindi è facile da testare. Non fa alcuna magia, a parte impostare il percorso su ogni rottaCambia. Devi ancora inviare la visualizzazione di pagina come qui.
app.run(function ($rootScope, $location, ga) {
$rootScope.$on('$routeChangeSuccess', function(){
ga('send', 'pageview');
});
});
Inoltre esiste una direttiva ga
che consente di associare più funzioni di analisi agli eventi, come questo:
<a href="#" ga="[['set', 'metric1', 10], ['send', 'event', 'player', 'play', video.id]]"></a>