Soru AngularJS ile Google Analytics Sayfa Görüntülemelerini İzleme


Önyüz olarak AngularJS kullanarak yeni bir uygulama kuruyorum. İstemci tarafında her şey HTML5 pushstate ile yapılır ve Google Analytics'teki sayfa görünümlerimi takip edebilmeyi isterim.


219
2018-05-23 05:01


Menşei


Angulartics'i dene luisfarzati.github.io/angulartics - David Anderton
Angulartics kullanımdan kaldırılmıştır. kullanım açısal hakkında-analiz - webdev5
@ webdev5 Angulartics'in yeni bir sürümü çıktı. Bunu deneyin: angulartics.github.io - Devner


Cevaplar:


Kullanıyorsanız ng-view senin Açısal uygulamasında dinleyebilirsiniz $viewContentLoaded etkinliği izleyin ve bir izleme etkinliğini Google Analytics’e itin.

İzleme kodunuzu ana index.html dosyanızda bir adla ayarladığınızı varsayalım. var _gaq ve MyCtrl, tanımladığınız şeydir ng-controller direktif.

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

GÜNCELLEŞTİRME:  google-analytics'in yeni sürümü için bunu kullanın

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

237
2018-05-23 05:01



FWIW olmalı _trackPageview ve yok _trackPageView ... 10 dakika kafa çizerek geçirdi :) - sajal
Kullanmak istiyorum $rootScope.$on('$routeChangeSuccess', ...) - bearfriend
@DavidRivers Hm, bir süredir, ama sadece bu cevap ve yorumuma baktığımda, $rootScope başka bir etkinlik veya DOM değişikliği tarafından kaldırılmayacağını ve routeChangeSuccess Görünüm çubuğu şablonunuzu her zaman değiştirdiğinizde, konum çubuğu değiştiğinde her zaman tetiklenir. bu mantıklı mı? - bearfriend
@ dg988 $ routeChangeSuccess olayı sırasında, sayfanın başlığını (örneğin, bir RESTful hizmetinden verileri işledikten sonra bir denetleyicide ayarlanabilen) önceden bilmeyebilirsiniz. Bu şekilde, sayfanın URL'siyle tek başına Google Analytics, bir önceki sayfanın başlığını izleyecektir. - Konstantin Tarkus
GA yeni komut dosyasını kullanıyorsanız, $window.ga('send', 'pageview', { page: $location.path() }); onun yerine $window._gaq... Bölüm. Ayrıca, kaldırmak isteyebilirsiniz ga('send', 'pageview'); Bir sayfaya ilk indiğinizde kopyaları önlemek için orijinal GA kodunuzdan. - CWSpear


Yeni bir görünüm yüklendiğinde AngularJS, Google Analytics bunu yeni sayfa yükü olarak saymıyor. Neyse ki, GA'yı bir URL'yi yeni sayfa görüntüleme olarak günlüğe kaydetmesini manuel olarak söylemenin bir yolu vardır.

_gaq.push(['_trackPageview', '<url>']); işi yapardı, ama AngularJS ile nasıl bağlanır?

Kullanabileceğiniz bir hizmet:

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

Açısal modülünüzü tanımladığınızda, analiz modülünü şu şekilde ekleyin:

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

GÜNCELLEŞTİRME:

Yeni Evrensel Google Analytics izleme kodunu şu şekilde kullanmalısınız:

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

57
2017-09-04 11:44



Burada dikkat edilmesi gereken diğer bir şey de, "analiz" hizmetini bir yere eklemeniz gerekiyor. Benim app.run'da yaptım. - Nix
Her modülde mi yoksa sadece ilk uygulamada mı olmalı? - designermonkey
@Designermonkey Sadece ana uygulama modülünüze dahil ederseniz çalışmalısınız. Ana modülünüzü gerektirmeyen, tamamen bağımsız bir modülünüz varsa, bunu tekrar eklemeniz gerekebilir. Şerefe! - Haralan Dobrev
Bir hizmet kullanıyorsanız, işlevlerinizi "bu" anahtar kelimeyle tanımlamalısınız: kaynak. Örneğin, hizmet içinde olurdu this.track = function($window.ga('send', 'pageview', {page: $location.url()}); Bu kullanmanıza izin verecek googleAnalytics.track(); senin içinde app.run () fonksiyon - zcoon


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

48
2017-10-17 03:41



Not: Minimzasyon / derleme kullanıyorsanız, parametre isimlerini belirtmeniz gerekir: app.run(["$rootScope", "$location", function(... - dplass
Her kontrol ünitesine GA kodu eklemek istemiyorsanız bu çözüm mükemmeldir. - breez
Başlığınızı dinamik olarak değiştiren uyumsuz kodunuz varsa o kadar da iyi değil, harika. - Johan


Sadece hızlı bir ekleme. Yeni analytics.js'yi kullanıyorsanız, o zaman:

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

Ek olarak bir ipucu, google analitiğinin localhost'ta tetiklenmeyeceğidir. Yani localhost üzerinde test ediyorsanız, varsayılan oluşturma yerine aşağıdakileri kullanın.tam dokümantasyon)

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

40
2017-08-12 22:28



Ah adam, teşekkürler. Garip hatalar alıyordum ve snippet'imin içinde bir _gaq bile yoktu, fark ettim. Aptal Google: kodlarını ve hepsini günceller! Haha. - CWSpear
Kullandığınızdan emin olun $window pencereye erişmek için (ga tek başına içinde Angular çok olması muhtemeldir undefined). Ayrıca, kaldırmak isteyebilirsiniz ga('send', 'pageview'); Bir sayfaya ilk indiğinizde kopyaları önlemek için orijinal GA kodunuzdan. - CWSpear
UI yönlendiriciyi kullanarak sayfa görüntülerini şu şekilde gönderebilirsiniz: $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { ga('send', 'pageview', { 'page': $location.path(), 'title': toState.name }); }); - pherris
Eklemek için: Uygulamanızda arama parametresi kullanıyorsanız, bunları kullanarak izleyebilirsiniz. $location.url() - Ade
Normalde sorgu dizisi paramlarını hariç tutmak istediğiniz için .path () .url () yönteminden daha iyi kullanıldığından bu yanıttan vazgeçtim. Görmek: Google Analytics Yapılandırma Hatası # 2: Sorgu Dizesi Değişkenleri - frodo2975


Bu konuda size yardımcı olabilecek bir hizmet + filtresi oluşturdum ve gelecekte de eklemeyi seçerseniz diğer bazı sağlayıcılarla da olabilir.

Çıkış yapmak https://github.com/mgonto/angularytics ve bunun sizin için nasıl çalıştığını bana bildirin.


11
2018-06-04 05:11





Wynnwu ve dpineda'nın cevaplarını birleştirmek benim için işe yarayan şeydi.

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

Üçüncü parametreyi bir nesne olarak ayarlama ($ location.path () yerine $ $) ve $ stateChangeSuccess yerine $ routeChangeSuccess kullanarak hile yaptı.

Bu yardımcı olur umarım.


10
2017-08-13 15:58





Yukarıdaki yaklaşımı kullanarak github hakkında basit bir örnek oluşturdum.

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


7
2017-12-27 19:23



Yolu daha iyi bildirmek için bir düzeltme ekledim. Yani şimdi rotanız varsa /account/:accountId  aka yolu http://somesite.com/account/123 şimdi yolu olarak rapor edecek /account?accountId=123 - IBootstrap
@IBootstrap sorgu dizgisinde rota paramları koymanın yararı nedir? - Pavel Nikolov
@IBootstrap Aynı soru var, sorgu dizesinde rota paramları koyarak yararı nedir? - nXqd
Tüm rotalar farklı sayfalar değildir ve GA, her rotayı farklı sayfa olarak ele alır. Rotayı sorgu dizesine dönüştürerek, sorgu dizesinin bölümlerini yok sayma seçeneğiniz vardır. - IBootstrap


Eğer birisi direktifleri kullanarak uygulamak istiyorsa, index.html'de bir div (veya body etiketinin altında veya aynı DOM seviyesinde) tanımlayın (veya oluşturun).

<div class="google-analytics"/>

ve sonra aşağıdaki kodu direktifte ekleyin

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

4
2018-06-26 22:27





Bunu yapmanın en iyi yolu, Google Analytics etiketlerinizi tarih dinleyicileri temelinde tetiklemek için Google Etiket Yöneticisi'ni kullanmaktır. Bunlar, GTM arayüzünde yerleşiktir ve istemci tarafı HTML5 etkileşimlerinde kolayca izlenmeye izin verir.

Yerleşik girişi etkinleştir Tarihçe değişkenler ve geçmiş değişikliklerine dayanarak bir olayı tetiklemek için bir tetikleyici oluşturun.


4
2018-03-30 16:42





Senin içinde index.html, ga snippet'i kopyalayıp yapıştırın, ancak satırı kaldırın 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>

Kendi fabrika dosyasını vermeyi seviyorum my-google-analytics.js kendi kendine enjeksiyon ile:

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

3
2017-10-20 18:39



Ben bu selfinjection şeyleri seviyorum :) - Sam Vloeberghs
Sadece meraktan dolayı, neden sen page mevcut yolla ve ardından pageview? Sadece bunun yerine bu şekilde yapmanın farkı nedir? $window.ga('send', 'pageview', {page: $location.url()});? - Fizzix
TBH'yi hatırlayamıyorum ama ona bakarak diğer eylemler için esneklik sağladığını ya da başka yerlerde başka şeyler kaydettirdiğini söyleyebilirim ve mevcut sayfanın açık bir şekilde anlatılmasından daha doğru olabilir. SADECE "rasgele" sayfa URL'si için sayfa görüntüleme girişi. - ilovett
Google'da çalışmak için gerçek zamanlı analizleri istiyorsanız "ayar" yapmalısınız. Neden döküman referansına bakınız? developers.google.com/analytics/devguides/collection/... - fuzzysearch