Tracciamento delle visualizzazioni di pagina di Google Analytics con AngularJS


221

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.



2
angulartics è deprecato. Usa
angular

5
@ webdev5 È disponibile una nuova versione di angulartics. Provalo su: angulartics.github.io
Devner,

Risposte:


240

Se stai utilizzando ng-viewl'app Angular, puoi ascoltare l' $viewContentLoadedevento 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 _gaqe MyCtrl è ciò che hai definito nella ng-controllerdirettiva.

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

12
FWIW dovrebbe essere _trackPageviewe non _trackPageView... trascorso 10 minuti di grattarsi la testa :)
sajal

123
Vorrei usare $rootScope.$on('$routeChangeSuccess', ...)
1313

5
@DavidRivers Hm, è passato un po 'di tempo, ma solo dal dare un'occhiata a questa risposta e al mio commento, sembrerebbe che applicarlo per $rootScopegarantire che non verrà rimosso da qualche altro evento o modifica del DOM, e l'utilizzo routeChangeSuccessverrà attivato ogni volta che la barra della posizione cambia, invece di cambiare sempre il modello di origine della vista. Ha senso?
1313

5
@ dg988 durante un evento $ routeChangeSuccess, potresti NON conoscere anticipatamente il titolo della pagina (che, ad esempio, potrebbe essere impostato all'interno di un controller dopo aver terminato l'elaborazione dei dati da un servizio RESTful). In questo modo da solo con l'URL della pagina Google Analytics seguirà un titolo della pagina precedente.
Konstantin Tarkus,

43
Se stai usando il nuovo script GA, è $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.
CWSpear

57

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

6
L'altra cosa da notare qui è che è necessario includere il servizio di "analisi" da qualche parte. Ho fatto il mio in app.run.
Nix,

Questo dovrebbe includere in ogni modulo o solo l'app iniziale?
designermonkey,

2
@Designermonkey Dovrebbe funzionare se includi solo nel modulo dell'app principale. Se hai un modulo totalmente indipendente che non richiede il tuo modulo principale, potresti doverlo includere di nuovo. Saluti!
Haralan Dobrev,

Se stai usando un servizio, dovresti definire le tue funzioni con la parola chiave "this": source . Ad esempio, nell'ambito del servizio sarebbe this.track = function($window.ga('send', 'pageview', {page: $location.url()});Questo vi permetterà di utilizzare googleAnalytics.track();all'interno del tuo app.run () funzione
zcoon

48
app.run(function ($rootScope, $location) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview', $location.path());
    });
});

8
Nota: se si utilizza la minimizzazione / compilazione è necessario specificare i nomi dei parametri:app.run(["$rootScope", "$location", function(...
dplass

Questa soluzione è eccellente se non si desidera includere il codice GA in tutti i controller.
Breez,

1
Non eccezionale se hai un codice asincrono che cambia dinamicamente il tuo titolo, altrimenti è fantastico.
Johan,

40

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

Oh amico, grazie. Stavo ricevendo strani errori e ho notato che il mio frammento non conteneva nemmeno _gaq, hehe. Google sciocco: aggiornare il loro codice e tutto il resto! Haha.
CWSpear

3
Assicurati di usare $windowper accedere alla finestra ( gamolto 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.
CWSpear

6
Usando ui-router puoi inviare visualizzazioni di pagina in questo modo:$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { ga('send', 'pageview', { 'page': $location.path(), 'title': toState.name }); });
pherris

2
Per aggiungere: Se stai utilizzando i parametri di ricerca nella tua app, puoi tenerne traccia usando$location.url()
Ade,

2
Ho votato a favore di questa risposta poiché l'uso di .path () è migliore di .url () perché normalmente si desidera escludere i parametri della stringa di query. Vedi: Errore di configurazione n. 2 di Google Analytics: variabili della stringa di query
frodo2975


10

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.


7

Ho creato un semplice esempio su github usando l'approccio sopra.

https://github.com/isamuelson/angularjs-googleanalytics


Ho aggiunto una correzione per segnalare meglio il percorso. quindi ora se hai il percorso di /account/:accountId aka percorso è http://somesite.com/account/123ora riporterà il percorso come/account?accountId=123
IBootstrap

@IBootstrap qual è il vantaggio di mettere i parametri di route nella stringa di query?
Pavel Nikolov il

@IBootstrap Ho la stessa domanda, qual è il vantaggio di mettere i parametri di route nella stringa di query?
Dzung Nguyen il

1
Non tutti i percorsi sono pagine diverse e GA tratta ogni percorso come pagina diversa. Convertendo il percorso in una stringa di query, hai la possibilità di ignorare parti della stringa di query.
IBootstrap,

5

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.


5

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.jscon 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
    }
  ]);

Mi piace quella roba di auto-selezione :) Su
Sam Vloeberghs,

Solo per curiosità, perché impostare il pagecon 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()});?
Fizzix,

1
Non riesco a ricordare TBH ma guardandolo direi che lascia flessibilità per altre azioni o registra altro materiale altrove, e potrebbe essere più preciso raccontando esplicitamente ga della pagina corrente, quindi ga può continuare a funzionare in modo accurato, piuttosto che SOLO registrando una visualizzazione di pagina per qualche URL di pagina "arbitrario".
ilovett,

Se vuoi che le analisi in tempo reale funzionino su Google, dovresti "impostare". Per questo motivo, consultare la documentazione di riferimento: developers.google.com/analytics/devguides/collection/…
fuzzysearch,

'set' è raccomandato in modo che ogni singolo hit inviato sulla stessa pagina (come GA Event per tenere traccia delle interazioni dell'utente) venga inviato con lo stesso valore del percorso della pagina. Niente a che vedere con l'analisi in tempo reale. vedi developers.google.com/analytics/devguides/collection/…
Apri SEO il

5

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 TrackingIdcon il tuo ID di monitoraggio.


4

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

3

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


3

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


3

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


3

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

2

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.


1

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/:ido 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.htmle message.htmlinvece di molte pagine che sono profile/1, profile/2eprofile/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.


1

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 RouterOutletcomponente di gestire il rendering della pagina e utilizzarlo ngOnInitper richiamare le pagechiamate. 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. 🙂


0

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

-3

Se stai cercando il pieno controllo del nuovo codice di monitoraggio di Google Analytics, puoi utilizzare il mio Angular-GA personale .

Rende gadisponibile 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 gache consente di associare più funzioni di analisi agli eventi, come questo:

<a href="#" ga="[['set', 'metric1', 10], ['send', 'event', 'player', 'play', video.id]]"></a>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.