Acompanhamento de exibições de página do Google Analytics com o AngularJS

Estou configurando um novo aplicativo usando o AngularJS como frontend. Tudo no lado do cliente é feito com pushstate HTML5 e gostaria de acompanhar minhas visualizações de página no Google Analytics.

Se você estiver usando ng-view no seu aplicativo Angular, poderá ouvir o evento $viewContentLoaded e enviar um evento de rastreamento ao Google Analytics.

Supondo que você tenha configurado seu código de acompanhamento em seu arquivo index.html principal com um nome var _gaq e MyCtrl, é o que você definiu na diretiva ng-controller .

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

UPDATE: para a nova versão do google-analytics use este

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

Quando uma nova visualização é carregada no AngularJS , o Google Analytics não a conta como um novo carregamento de página. Felizmente, existe uma maneira de informar manualmente ao GA para registrar uma URL como uma nova visualização de página.

_gaq.push(['_trackPageview', '']); faria o trabalho, mas como ligar isso com o AngularJS?

Aqui está um serviço que você poderia usar:

 (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 você define seu módulo angular, inclua o módulo de análise da seguinte forma:

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

ATUALIZAÇÃO :

Você deve usar o novo código de acompanhamento do Universal Google Analytics com:

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

Apenas uma adição rápida. Se você estiver usando o novo analytics.js, então:

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

Além disso, uma dica é que o Google Analytics não será triggersdo no host local. Então, se você está testando em localhost, use o seguinte em vez do padrão create ( documentação completa )

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

Eu criei um filtro de serviço + que poderia ajudar vocês com isso, e talvez também com alguns outros provedores se você optar por adicioná-los no futuro.

Confira https://github.com/mgonto/angularytics e deixe-me saber como isso funciona para você.

Mesclar as respostas por wynnwu e dpineda foi o que funcionou para mim.

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

Definir o terceiro parâmetro como um object (em vez de apenas $ location.path ()) e usar $ routeChangeSuccess em vez de $ stateChangeSuccess fez o truque.

Espero que isto ajude.

Eu criei um exemplo simples no github usando a abordagem acima.

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

Se alguém quiser implementar usando diretivas, identifique (ou crie) um div no index.html (logo abaixo da tag body ou no mesmo nível do DOM)

 

e, em seguida, adicione o seguinte código na diretiva

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

A melhor maneira de fazer isso é usar o Gerenciador de tags do Google para triggersr suas tags do Google Analytics com base nos ouvintes do histórico. Eles são integrados à interface do GTM e permitem facilmente o rastreamento de interações HTML5 do lado do cliente.

Ative as variables ​​do Histórico incorporadas e crie um acionador para triggersr um evento com base nas alterações do histórico.

Em seu index.html , copie e cole o snippet de ga, mas remova a linha ga('send', 'pageview');

   

Eu gosto de dar a ele o seu próprio arquivo de fábrica my-google-analytics.js com self 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 } ]); 

Se você estiver usando o roteador-ui, você pode se inscrever no evento $ stateChangeSuccess como este:

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

Para um exemplo de trabalho completo, veja esta postagem no blog

Use o “conjunto” do GA para garantir que as rotas sejam selecionadas para a análise em tempo real do Google. Caso contrário, as chamadas subsequentes para o GA não serão exibidas no painel em tempo real.

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

O Google recomenda esta abordagem geralmente em vez de passar um terceiro parâmetro em “enviar”. https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

Eu estou usando o AngluarJS no modo html5. Eu encontrei a seguinte solução como mais confiável:

Use a biblioteca angular do google analytics . Inicialize com algo como:

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

Depois disso, adicione listener no $ stateChangeSuccess ‘e envie o 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 } }); } ]); 

A qualquer momento, quando você tiver seu usuário iniciado, você poderá inserir o Analytics lá e fazer uma chamada:

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

Eu estou usando o roteador-ui e meu código é assim:

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

Dessa forma, posso rastrear diferentes estados. Talvez alguém ache útil.

Para aqueles que estão usando o AngularUI Router, em vez de ngRoute, você pode usar o seguinte código para rastrear as visualizações das páginas.

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

Os desenvolvedores que criam aplicativos de página única podem usar o autotrack , que inclui um plug- in urlChangeTracker que lida com todas as considerações importantes listadas neste guia para você. Consulte a documentação do autotrack para obter instruções de uso e instalação.

Eu encontrei a function gtag() trabalhada, em vez da function ga() .

No arquivo index.html, dentro da seção :

   

No código AngularJS:

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

Substitua TrackingId pelo seu próprio ID de acompanhamento.

Fundindo-se ainda mais com a resposta de Pedro Lopez,

Eu adicionei isso ao meu módulo ngGoogleAnalytis (que eu reutilizo em muitos aplicativos):

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

Neste caso, eu tenho uma tag no meu link de índice:

   

é útil ao usar o modo html5 no angular.js v1.3

(remova a chamada de function replace () se sua tag base não terminar com uma 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() }); } ); } ]); 

Pessoalmente, gosto de configurar minha análise com o URL do modelo em vez do caminho atual. Isso ocorre principalmente porque meu aplicativo tem muitos caminhos personalizados, como message/:id ou profile/:id . Se eu enviasse esses caminhos, teria tantas páginas sendo visualizadas em análises, seria muito difícil verificar qual página os usuários estão visitando mais.

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

Agora recebo visualizações de página limpas em minhas análises, como user-profile.html e message.html vez de muitas páginas serem profile/1 , profile/2 e profile/3 . Agora posso processar relatórios para ver quantas pessoas visualizam perfis de usuário.

Se alguém tem alguma objeção a por que isso é uma má prática dentro da análise, eu ficaria mais do que feliz em ouvir sobre isso. Muito novo para usar o Google Analytics, então não tenho certeza se essa é a melhor abordagem ou não.

Se você estiver procurando pelo controle total do novo código de acompanhamento do Google Analytics, poderá usar o meu próprio Angular-GA .

Isso torna o ga disponível por meio de injeção, por isso é fácil testá-lo. Não faz mágica, além de definir o caminho em cada rota. Você ainda precisa enviar a exibição de página como aqui.

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

Além disso, há uma diretiva ga que permite vincular várias funções de análise a events, da seguinte forma: