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