Suivi des vues de page Google Analytics avec AngularJS

J'installe une nouvelle application utilisant AngularJS comme interface. Tout côté client se fait avec pushstate HTML5 et j'aimerais pouvoir suivre mes pages vues dans Google Analytics.

Si vous utilisez ng-viewdans votre application Angular, vous pouvez écouter l' $viewContentLoadedévénement et envoyer un événement de suivi à Google Analytics.

En supposant que vous avez configuré votre code de suivi dans votre fichier index.html principal avec un nom var _gaqet MyCtrl est ce que vous avez défini dans la ng-controllerdirective.

function MyCtrl($scope, $location, $window) {
  $scope.$on('$viewContentLoaded', function(event) {
    $window._gaq.push(['_trackPageView', $location.url()]);
  });
}

MISE À JOUR: pour une nouvelle version de google-analytics, utilisez celle-ci

function MyCtrl($scope, $location, $window) {
  $scope.$on('$viewContentLoaded', function(event) {
    $window.ga('send', 'pageview', { page: $location.url() });
  });
}

Lorsqu'une nouvelle vue est chargée AngularJS, Google Analytics ne la considère pas comme un nouveau chargement de page. Heureusement, il existe un moyen de dire manuellement à GA d'enregistrer 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 d'analyse comme suit:

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

MISE À JOUR :

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

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

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

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

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

De plus, une astuce est que google analytics ne se déclenchera pas sur localhost. Donc, si vous testez sur localhost, utilisez ce qui suit au lieu de la création par défaut ( documentation complète )

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

J'ai créé un service + filtre qui pourrait vous aider, et peut-être aussi avec d'autres fournisseurs si vous choisissez de les ajouter à l'avenir.

Consultez https://github.com/mgonto/angularytics et faites-moi savoir comment cela fonctionne pour vous.

La fusion des réponses de wynnwu et dpineda a été 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 en tant qu'objet (au lieu de simplement $ location.path ()) et utiliser $ routeChangeSuccess au lieu de $ stateChangeSuccess a fait l'affaire.

J'espère que cela t'aides.

J'ai créé un exemple simple sur github en utilisant l'approche ci-dessus.

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

La meilleure façon de procéder consiste à utiliser Google Tag Manager pour déclencher vos balises Google Analytics en fonction des écouteurs d'historique. Ceux-ci sont intégrés à l'interface GTM et permettent facilement le suivi des interactions HTML5 côté client.

Activez les variables d' historique intégrées et créez un déclencheur pour déclencher un événement en fonction des modifications de l'historique.

Dans votre index.html, copiez et collez l'extrait ga mais supprimez la lignega('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.jsavec 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
    }
  ]);

J'ai trouvé que la gtag()fonction fonctionnait, au lieu de la ga()fonction.

Dans le fichier index.html, dans la <head>section:

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

Dans le code AngularJS:

app.run(function ($rootScope, $location) {
  $rootScope.$on('$routeChangeSuccess', function() {
    gtag('config', 'TrackingId', {'page_path': $location.path()});
  });
});

Remplacez-le TrackingIdpar votre propre identifiant de suivi.

Si quelqu'un veut implémenter à l'aide de directives, identifiez (ou créez) un div dans le 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()]);
      });
    }
  };
});

Si vous utilisez ui-router, vous pouvez vous abonner à l'événement $ stateChangeSuccess comme ceci:

$rootScope.$on('$stateChangeSuccess', function (event) {
    $window.ga('send', 'pageview', $location.path());
});

Pour un exemple de travail complet, voir cet article de blog

Utilisez GA «set» pour vous assurer que les itinéraires sont récupérés pour les analyses Google en temps réel. Sinon, les appels ultérieurs à GA n'apparaîtront 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 au lieu de passer un 3ème paramètre dans "envoyer". https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

Pour ceux d'entre vous qui utilisent AngularUI Router au lieu de ngRoute, vous pouvez utiliser le code suivant pour suivre les pages vues.

app.run(function ($rootScope) {
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
        ga('set', 'page', toState.url);
        ga('send', 'pageview');
    });
});

Les développeurs qui créent des applications à page unique peuvent utiliser le suivi automatique , qui comprend un plugin urlChangeTracker qui gère pour vous toutes les considérations importantes répertoriées dans ce guide. Consultez la documentation autotrack pour les instructions d'utilisation et d'installation.

J'utilise AngluarJS en mode html5. J'ai trouvé la solution suivante comme la plus fiable:

Utilisez la bibliothèque angular-google-analytics . Initialisez-le avec quelque chose comme:

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

Après cela, ajoutez l'écouteur sur $ stateChangeSuccess 'et envoyez l'événement 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
            }
        });
    }
]);

À tout moment, lorsque votre utilisateur est initalisé, vous pouvez y injecter Analytics et appeler:

Analytics.set('&uid', user.id);

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. Ceci est principalement dû au fait que mon application possède de nombreux chemins personnalisés tels que message/:idou profile/:id. Si je devais envoyer ces chemins, j'aurais tellement de pages visualisées dans Analytics, il serait trop difficile de vérifier quelle page les utilisateurs visitent le plus.

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

J'obtiens désormais des pages propres dans mes analyses, telles que user-profile.htmlet message.htmlau lieu de nombreuses pages profile/1, profile/2et profile/3. Je peux maintenant traiter des rapports pour voir combien de personnes consultent les profils utilisateur.

Si quelqu'un s'oppose à la raison pour laquelle il s'agit d'une mauvaise pratique en matière d'analyse, je serais plus qu'heureux d'en entendre parler. Tout nouveau dans l'utilisation de Google Analytics, donc pas trop sûr si c'est la meilleure approche ou non.

Je suggère d'utiliser la bibliothèque d'analyse de segment et de suivre notre guide de démarrage rapide angulaire . Vous pourrez suivre les visites de pages et suivre les actions du comportement des utilisateurs avec une seule API. Si vous avez un SPA, vous pouvez autoriser le RouterOutletcomposant à gérer le rendu de la page et à l'utiliser ngOnInitpour appeler des pageappels. L'exemple ci-dessous montre une façon de procéder:

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  ngOnInit() {
    window.analytics.page('Home');
  }
}

Je suis le responsable de https://github.com/segmentio/analytics-angular . Avec Segment, vous pourrez activer et désactiver différentes destinations en appuyant sur un commutateur si vous souhaitez essayer plusieurs outils d'analyse (nous prenons en charge plus de 250+ destinations) sans avoir à écrire de code supplémentaire. 🙂

Fusionner encore plus avec la réponse de Pedro Lopez,

J'ai ajouté ceci à mon module ngGoogleAnalytis (que je réutilise dans de nombreuses applications):

var base = $('base').attr('href').replace(/\/$/, "");

dans ce cas, j'ai une balise dans mon lien d'index:

  <base href="/store/">

il est utile lors de l'utilisation du mode html5 sur angular.js v1.3

(supprimez l'appel de la fonction replace () si votre balise de base ne se termine pas par une barre oblique /)

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

Si vous recherchez le contrôle total du nouveau code de suivi de Google Analytics, vous pouvez utiliser mon propre Angular-GA .

Il est gadisponible par injection, il est donc facile à tester. Cela ne fait aucune magie, à part définir le chemin sur chaque routeChange. Vous devez toujours envoyer la page vue comme ici.

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

De plus, il existe une directive gaqui permet de lier plusieurs fonctions d'analyse à des événements, comme ceci:

<a href="#" ga="[['set', 'metric1', 10], ['send', 'event', 'player', 'play', video.id]]"></a>