google-analytics code tag - Suivi des pages vues de Google Analytics avec AngularJS




10 Answers

Si vous utilisez ng-view dans votre application Angular, vous pouvez écouter l'événement $viewContentLoaded et $viewContentLoaded 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 de var _gaq et MyCtrl est ce que vous avez défini dans la directive ng-controller .

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

UPDATE: pour la nouvelle version de google-analytics, utilisez celui-ci

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

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.




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



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

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







La meilleure façon d'y parvenir est d'utiliser Google Tag Manager pour déclencher vos tags Google Analytics en fonction des auditeurs de l'historique. Ils 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.




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, consultez cet article de blog




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

Utilisez angular-google-analytics 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 listener 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
            }
        });
    }
]);

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

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



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



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 un tag dans mon lien d'index:

  <base href="/store/">

c'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 cherchez un contrôle total du nouveau code de suivi de Google Analytics, vous pouvez utiliser mon propre Angular-GA .

Il rend ga disponible par injection, il est donc facile à tester. Il ne fait pas de magie, à part mettre 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 ga qui 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>



Related