Google Analytics Sayfa Görünümlerini AngularJS ile İzleme

Ön uç olarak AngularJS kullanarak yeni bir uygulama kuruyorum. İstemci tarafındaki her şey HTML5 pushstate ile yapılır ve Google Analytics'teki sayfa görünümlerimi takip etmek istiyorum.

ng-viewAçısal uygulamanızda kullanıyorsanız , $viewContentLoadedetkinliği dinleyebilir ve bir izleme etkinliğini Google Analytics'e iletebilirsiniz.

İzleme kodunuzu ana index.html dosyanızda bir adla oluşturduğunuzu var _gaqve yönergede tanımladığınız şey MyCtrl olduğunu varsayarsak ng-controller.

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

GÜNCELLEME: 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() });
  });
}

Yeni bir görünüm yüklendiğinde AngularJS, Google Analytics bu görünümü yeni bir sayfa yüklemesi olarak saymaz. Neyse ki, GA'ya manuel olarak bir URL'yi yeni bir sayfa görüntüleme olarak kaydetmesini söylemenin bir yolu vardır.

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

İşte 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ımlarken, analitik modülünü şu şekilde ekleyin:

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

GÜNCELLEME :

Yeni Universal Google Analytics izleme kodunu aşağıdakilerle kullanmalısınız:

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

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

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

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

Ayrıca bir ipucu, google analytics'in localhost üzerinde tetiklenmeyeceğidir. Bu nedenle localhost üzerinde test yapıyorsanız, varsayılan oluşturma yerine aşağıdakileri kullanın ( tam belgeler )

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

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

Https://github.com/mgonto/angularytics adresine göz atın ve bunun sizin için nasıl çalıştığını bana bildirin.

Cevapları wynnwu ve dpineda ile 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 ayarlamak (sadece $ location.path () yerine) ve $ stateChangeSuccess yerine $ routeChangeSuccess kullanmak hile yaptı.

Bu yardımcı olur umarım.

Yukarıdaki yaklaşımı kullanarak github üzerinde basit bir örnek oluşturdum.

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

Bunu yapmanın en iyi yolu, Google Analytics etiketlerinizi geçmiş dinleyicilere göre tetiklemek için Google Etiket Yöneticisi'ni kullanmaktır. Bunlar, GTM arayüzünde yerleşiktir ve istemci tarafı HTML5 etkileşimlerini kolayca izlemeye izin verir.

Yerleşik Geçmiş değişkenlerini etkinleştirin ve geçmiş değişikliklerine göre bir etkinliği tetiklemek için bir tetikleyici oluşturun.

Gözlerinde farklı index.htmlkopyalayıp ga snippet'ini ama çizgiyi kaldırmakga('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>

my-google-analytics.jsKendi enjeksiyonlu kendi fabrika dosyasını vermeyi seviyorum :

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

gtag()Fonksiyon yerine fonksiyonun işe yaradığını gördüm ga().

İndex.html dosyasında, <head>bölüm içinde :

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

AngularJS kodunda:

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

TrackingIdKendi İzleme Kimliğinizle değiştirin .

Birisi yönergeleri kullanarak uygulamak istiyorsa, index.html dosyasında (gövde etiketinin hemen altında veya aynı DOM düzeyinde) bir div tanımlayın (veya oluşturun).

<div class="google-analytics"/>

ve sonra yönergeye aşağıdaki kodu ekleyin

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

Ui-router kullanıyorsanız $ stateChangeSuccess olayına şu şekilde abone olabilirsiniz:

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

Tam bir çalışma örneği için bu blog yayınına bakın

Google'ın gerçek zamanlı analitiği için rotaların seçildiğinden emin olmak için GA 'ayarını' kullanın. Aksi takdirde, GA'ya yapılan sonraki çağrılar gerçek zamanlı panelde gösterilmez.

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

Google bu yaklaşımı genellikle 'gönder' teriminde 3. bir terim geçirmek yerine şiddetle tavsiye eder. https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

NgRoute yerine AngularUI Router kullananlarınız için sayfa görüntülemelerini izlemek üzere aşağıdaki kodu kullanabilirsiniz.

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

Tek Sayfa Uygulamaları oluşturan geliştiriciler kullanabilirsiniz AutoTrack bir içermektedir, urlChangeTracker o kulpları sizin için bu kılavuzda belirtilen önemli hususlar tüm eklenti. Kullanım ve kurulum talimatları için otomatik takip belgelerine bakın .

Html5 modunda AngluarJS kullanıyorum. Aşağıdaki çözümü en güvenilir olarak buldum:

Açısal-google-analytics kitaplığını kullanın . Aşağıdaki gibi bir şeyle başlatın:

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

Bundan sonra, $ stateChangeSuccess'e dinleyici ekleyin ve trackPage olayını gönderin.

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

Herhangi bir anda, kullanıcınızı inaktif hale getirdiğinizde, oraya Analytics enjekte edebilir ve arama yapabilirsiniz:

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

Ui-yönlendirici kullanıyorum ve kodum şöyle görünüyor:

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

Bu şekilde farklı durumları takip edebilirim. Belki birisi bunu yararlı bulur.

Kişisel olarak, analizlerimi mevcut yol yerine şablon URL'si ile ayarlamak istiyorum. Bunun nedeni, uygulamamın message/:idveya gibi birçok özel yol içermesidir profile/:id. Bu yolları gönderecek olsaydım, analizlerde görüntülenen çok fazla sayfam olurdu, kullanıcıların en çok hangi sayfayı ziyaret ettiğini kontrol etmek çok zor olurdu.

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

Şimdi örneğin benim analitik içinde temiz sayfa izlenimi olsun user-profile.htmlve message.htmlyerine olmanın birçok sayfadan profile/1, profile/2veprofile/3 . Artık kullanıcı profillerini kaç kişinin görüntülediğini görmek için raporları işleyebilirim.

Herhangi birinin bunun analitik içinde neden kötü uygulama olduğuna dair herhangi bir itirazı varsa, bunu duymaktan mutluluk duyarım. Google Analytics'i kullanmak için oldukça yeni, bu yüzden bunun en iyi yaklaşım olup olmadığından emin değilim.

Segment analitik kitaplığını kullanmanızı ve Açısal hızlı başlangıç ​​kılavuzumuzu izlemenizi öneririm . Tek bir API ile sayfa ziyaretlerini ve kullanıcı davranışı işlemlerini takip edebilirsiniz. Bir RouterOutletSPA'nız varsa, sayfa oluşturulduğunda bileşenin işlemesine izin verebilir ve çağrıları ngOnInitçağırmak için pagekullanabilirsiniz. Aşağıdaki örnek bunu yapmanın bir yolunu gösterir:

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

Ben https://github.com/segmentio/analytics-angular ' ın koruyucusuyum . Segment ile, herhangi bir ek kod yazmak zorunda kalmadan birden fazla analiz aracını (250'den fazla hedefi destekliyoruz) denemek istiyorsanız, farklı hedefleri bir anahtar çevirerek açıp kapatabilirsiniz. 🙂

Pedro Lopez'in cevabı ile daha da birleşerek,

Bunu ngGoogleAnalytis modülüme ekledim (birçok uygulamada yeniden kullanıyorum):

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

bu durumda, dizin bağlantımda bir etiket var:

  <base href="/store/">

angular.js v1.3 üzerinde html5 modunu kullanırken yararlıdır

(temel etiketiniz eğik çizgi ile bitmezse replace () işlev çağrısını kaldırın /)

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

Google Analytics'in yeni izleme kodunun tam kontrolünü arıyorsanız, kendi Angular-GA'mı kullanabilirsiniz .

gaEnjeksiyon yoluyla kullanılabilir hale getirir , bu nedenle test edilmesi kolaydır. Her routeChange üzerinde yolu ayarlamak dışında hiçbir sihir yapmaz. Sayfa görüntülemeyi hala burada olduğu gibi göndermelisiniz.

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

Ek olarak, gabirden fazla analiz işlevinin aşağıdaki gibi etkinliklere bağlanmasına izin veren bir yönerge vardır:

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