Melacak Tampilan Halaman Google Analytics dengan AngularJS

Saya menyiapkan aplikasi baru menggunakan AngularJS sebagai frontend. Segala sesuatu di sisi klien dilakukan dengan pushstate HTML5 dan saya ingin dapat melacak tampilan halaman saya di Google Analytics.

Jika Anda menggunakan ng-viewdi aplikasi Angular, Anda dapat mendengarkan $viewContentLoadedacara dan mendorong acara pelacakan ke Google Analytics.

Dengan asumsi Anda telah mengatur kode pelacakan di file index.html utama Anda dengan nama var _gaqdan MyCtrl adalah apa yang telah Anda tetapkan dalam ng-controllerarahan.

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

UPDATE: untuk versi baru google-analytics gunakan yang ini

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

Saat tampilan baru dimuat AngularJS, Google Analytics tidak menghitungnya sebagai memuat halaman baru. Untungnya ada cara untuk secara manual memberitahu GA untuk mencatat url sebagai tampilan halaman baru.

_gaq.push(['_trackPageview', '<url>']); akan melakukan pekerjaan itu, tetapi bagaimana cara mengikatnya dengan AngularJS?

Ini adalah layanan yang dapat Anda gunakan:

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

Saat Anda menentukan modul sudut Anda, sertakan modul analitik seperti:

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

PEMBARUAN :

Anda harus menggunakan kode pelacakan Universal Google Analytics baru dengan:

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

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

Tambahan cepat. Jika Anda menggunakan analytics.js baru, maka:

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

Selain itu salah satu tipnya adalah bahwa Google analytics tidak akan aktif di localhost. Jadi, jika Anda menguji pada localhost, gunakan yang berikut sebagai ganti dari pembuatan default ( dokumentasi lengkap )

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

Saya telah membuat layanan + filter yang dapat membantu Anda dengan ini, dan mungkin juga dengan beberapa penyedia lain jika Anda memilih untuk menambahkannya di masa mendatang.

Lihat https://github.com/mgonto/angularytics dan beri tahu saya cara kerjanya untuk Anda.

Menggabungkan jawaban oleh wynnwu dan dpineda adalah yang berhasil bagi saya.

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

Mengatur parameter ketiga sebagai objek (bukan hanya $ location.path ()) dan menggunakan $ routeChangeSuccess alih-alih $ stateChangeSuccess melakukan trik.

Semoga ini membantu.

Saya telah membuat contoh sederhana tentang github menggunakan pendekatan di atas.

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

Cara terbaik untuk melakukannya adalah menggunakan Google Pengelola Tag untuk memecat tag Google Analytics Anda berdasarkan pendengar riwayat. Ini dibangun ke antarmuka GTM dan dengan mudah memungkinkan pelacakan pada interaksi HTML5 sisi klien.

Aktifkan variabel Riwayat bawaan dan buat pemicu untuk menjalankan peristiwa berdasarkan perubahan riwayat.

Di Anda index.html, salin dan rekatkan cuplikan ga tetapi hapus barisga('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>

Saya ingin memberikannya file pabrik sendiri my-google-analytics.jsdengan injeksi sendiri:

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

Saya menemukan gtag()fungsi berfungsi, bukan ga()fungsi.

Di file index.html, di dalam <head>bagian:

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

Dalam kode AngularJS:

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

Ganti TrackingIddengan Id Pelacakan Anda sendiri.

Jika seseorang ingin menerapkan menggunakan arahan kemudian, mengidentifikasi (atau membuat) div di index.html (tepat di bawah tag tubuh, atau pada tingkat DOM yang sama)

<div class="google-analytics"/>

dan kemudian tambahkan kode berikut dalam arahan

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

Jika Anda menggunakan ui-router, Anda dapat berlangganan acara $ stateChangeSuccess seperti ini:

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

Untuk contoh kerja lengkap lihat posting blog ini

Gunakan 'set' GA untuk memastikan rute diambil untuk analisis waktu nyata Google. Kalau tidak, panggilan selanjutnya ke GA tidak akan ditampilkan di panel waktu nyata.

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

Google sangat menyarankan pendekatan ini secara umum alih-alih melewati param ke-3 dalam 'kirim'. https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

Bagi Anda yang menggunakan Router AngularUI alih-alih ngRoute dapat menggunakan kode berikut untuk melacak tampilan halaman.

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

Pengembang yang membuat Aplikasi Halaman Tunggal dapat menggunakan autotrack , yang mencakup plugin urlChangeTracker yang menangani semua pertimbangan penting yang tercantum dalam panduan ini untuk Anda. Lihat dokumentasi autotrack untuk petunjuk penggunaan dan pemasangan.

Saya menggunakan AngluarJS dalam mode HTML5. Saya menemukan solusi berikut sebagai yang paling dapat diandalkan:

Gunakan perpustakaan angular-google-analytics . Inisialisasi dengan sesuatu seperti:

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

Setelah itu, tambahkan pendengar di $ stateChangeSuccess 'dan kirim acara 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
            }
        });
    }
]);

Kapan saja, ketika pengguna Anda sudah di-inisialisasi, Anda dapat menyuntikkan Analytics di sana dan menelepon:

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

Saya menggunakan ui-router dan kode saya terlihat seperti ini:

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

Dengan cara ini saya dapat melacak status yang berbeda. Mungkin seseorang akan merasakan manfaatnya.

Saya pribadi ingin menyiapkan analitik dengan URL templat alih-alih jalur saat ini. Ini terutama karena aplikasi saya memiliki banyak jalur khusus seperti message/:idatau profile/:id. Jika saya mengirim jalur ini, saya akan melihat begitu banyak halaman dalam analitik, akan terlalu sulit untuk memeriksa halaman mana yang paling banyak dikunjungi pengguna.

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

Saya sekarang mendapatkan tampilan halaman bersih dalam analitik saya seperti user-profile.htmldan message.htmlbukannya banyak halaman profile/1, profile/2dan profile/3. Saya sekarang dapat memproses laporan untuk melihat berapa banyak orang yang melihat profil pengguna.

Jika ada yang keberatan mengapa ini merupakan praktik buruk dalam analitik, saya akan sangat senang mendengarnya. Cukup baru menggunakan Google Analytics, jadi tidak terlalu yakin apakah ini pendekatan terbaik atau tidak.

Saya sarankan menggunakan perpustakaan analitik Segmen dan mengikuti panduan quickstart Angular kami . Anda akan dapat melacak kunjungan halaman dan melacak tindakan perilaku pengguna dengan satu API. Jika Anda memiliki SPA, Anda dapat mengizinkan RouterOutletkomponen menangani ketika halaman dirender dan digunakan ngOnInituntuk memanggil pagepanggilan. Contoh di bawah ini menunjukkan satu cara Anda bisa melakukan ini:

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

Saya adalah pengelola https://github.com/segmentio/analytics-angular . Dengan Segmen, Anda dapat mengaktifkan dan menonaktifkan tujuan yang berbeda dengan membalik saklar jika Anda tertarik untuk mencoba beberapa alat analitik (kami mendukung lebih dari 250 tujuan) tanpa harus menulis kode tambahan. 🙂

Menggabungkan lebih banyak lagi dengan jawaban Pedro Lopez,

Saya menambahkan ini ke modul ngGoogleAnalytis saya (yang saya gunakan kembali di banyak aplikasi):

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

dalam hal ini, saya memiliki tag di tautan indeks saya:

  <base href="/store/">

ini berguna saat menggunakan mode html5 pada angular.js v1.3

(hapus panggilan fungsi replace () jika tag dasar Anda tidak selesai dengan garis miring /)

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

Jika Anda mencari kontrol penuh atas kode pelacakan baru Google Analytics, Anda dapat menggunakan Angular-GA saya sendiri .

Ini gatersedia melalui injeksi, sehingga mudah untuk diuji. Itu tidak melakukan sihir apa pun, selain mengatur jalan di setiap routeChange. Anda masih harus mengirim tampilan halaman seperti di sini.

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

Selain itu ada arahan gayang memungkinkan untuk mengikat beberapa fungsi analitik ke acara, seperti ini:

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