Tracciamento delle visualizzazioni di pagina di Google Analytics con AngularJS

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.

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

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

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

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

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.

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

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

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.

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/: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.

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. 🙂

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