[Google-Analytics] Suivi des pages vues de Google Analytics avec AngularJS


Answers

Lorsqu'une nouvelle vue est chargée dans AngularJS , Google Analytics ne la considère pas comme un nouveau chargement de page. Heureusement, il existe un moyen de demander à GA de consigner manuellement une URL en tant que nouvelle page vue.

_gaq.push(['_trackPageview', '<url>']); ferait le travail, mais comment lier cela avec AngularJS?

Voici un service que vous pourriez utiliser:

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

Lorsque vous définissez votre module angulaire, incluez le module analytique comme suit:

angular.module('myappname', ['analytics']);

MISE À JOUR :

Vous devez utiliser le nouveau code de suivi Universal Google Analytics avec:

$window.ga('send', 'pageview', {page: $location.url()});
Question

Je suis en train de configurer une nouvelle application en utilisant AngularJS comme interface. Du côté client, tout est fait avec pushstate HTML5 et j'aimerais pouvoir suivre mes pages vues dans Google Analytics.




Si quelqu'un veut implémenter des directives, alors identifiez (ou créez) un div dans le fichier index.html (juste sous la balise body, ou au même niveau DOM)

<div class="google-analytics"/>

puis ajoutez le code suivant dans la directive

myApp.directive('googleAnalytics', function ( $location, $window ) {
  return {
    scope: true,
    link: function (scope) {
      scope.$on( '$routeChangeSuccess', function () {
        $window._gaq.push(['_trackPageview', $location.path()]);
      });
    }
  };
});



Dans votre index.html , copiez et collez l'extrait ga mais supprimez la ligne ga('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>

J'aime lui donner son propre fichier d'usine my-google-analytics.js avec auto-injection:

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



Les développeurs qui créent des applications d'une seule page peuvent utiliser autotrack , qui inclut un plugin urlChangeTracker qui gère pour vous toutes les considérations importantes répertoriées dans ce guide. Voir la autotrack de l' autotrack pour les instructions d'utilisation et d'installation.




Fusionner les réponses par wynnwu et dpineda était ce qui a fonctionné pour moi.

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

Définir le troisième paramètre comme un objet (au lieu de seulement $ location.path ()) et utiliser $ routeChangeSuccess au lieu de $ stateChangeSuccess a fait l'affaire.

J'espère que cela t'aides.




J'utilise ui-router et mon code ressemble à ceci:

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

De cette façon, je peux suivre différents états. Peut-être que quelqu'un le trouvera utile.




Personnellement, j'aime configurer mes analyses avec l'URL du modèle au lieu du chemin actuel. C'est principalement parce que mon application a de nombreux chemins personnalisés tels que message/:id ou profile/:id . Si je devais envoyer ces chemins, j'aurais tellement de pages consultées dans les analyses, il serait trop difficile de vérifier quelle page visitent le plus les utilisateurs.

$rootScope.$on('$viewContentLoaded', function(event) {
    $window.ga('send', 'pageview', {
        page: $route.current.templateUrl.replace("views", "")
    });
});

Je reçois maintenant des pages vues propres dans mes analyses, comme user-profile.html et message.html au lieu de nombreuses pages étant profile/1 , profile/2 et profile/3 . Je peux maintenant traiter les rapports pour voir combien de personnes regardent les profils d'utilisateurs.

Si quelqu'un a des objections à ce que ce soit une mauvaise pratique dans l'analyse, je serais plus qu'heureux d'en entendre parler. Tout nouveau à l'utilisation de Google Analytics, donc pas trop sûr si c'est la meilleure approche ou non.




Juste un ajout rapide. Si vous utilisez le nouveau analytics.js, alors:

var track = function() {     
 ga('send', 'pageview', {'page': $location.path()});                
};

En outre, un conseil est que google analytics ne se déclenchera pas sur localhost. Donc, si vous testez sur localhost, utilisez ce qui suit à la place de la valeur par défaut create ( documentation complète )

ga('create', 'UA-XXXX-Y', {'cookieDomain': 'none'});



Utilisez GA 'set' pour vous assurer que les itinéraires sont sélectionnés pour les analyses Google en temps réel. Sinon, les appels suivants à GA ne s'afficheront pas dans le panneau en temps réel.

$scope.$on('$routeChangeSuccess', function() {
    $window.ga('set', 'page', $location.url());
    $window.ga('send', 'pageview');
});

Google conseille fortement cette approche généralement au lieu de passer un 3ème paramètre dans 'envoyer'. https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications




Links