Melacak Tampilan Halaman Google Analytics dengan AngularJS

221

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.

dj2
sumber
Coba angulartics luisfarzati.github.io/angulartics
David
2
angulartika sudah usang. Gunakan angular-google-analytics
webdev5
5
@ webdev5 Versi baru angulartics keluar. Cobalah di: angulartics.github.io
Devner

Jawaban:

240

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() });
  });
}
dj2
sumber
12
FWIW seharusnya _trackPageviewdan tidak _trackPageView... menghabiskan 10 menit menggaruk-garuk kepala :)
sajal
123
Saya akan menggunakan $rootScope.$on('$routeChangeSuccess', ...)
bearfriend
5
@ Davidvidivers Hm, sudah lama, tetapi hanya dari melihat jawaban ini dan komentar saya, tampaknya menerapkannya untuk $rootScopemenjamin bahwa itu tidak akan dihapus oleh beberapa acara lain atau perubahan DOM, dan menggunakan routeChangeSuccessakan menyala setiap kali bilah lokasi berubah, alih-alih setiap kali Anda mengubah templat sumber tampilan Anda. Apakah itu masuk akal?
bearfriend
5
@ dg988 selama acara $ routeChangeSuccess, Anda mungkin TIDAK tahu muka judul halaman (yang, misalnya, dapat diatur di dalam controller setelah selesai memproses data dari layanan RESTful). Dengan cara ini saja dengan URL halaman Google Analytics akan melacak judul halaman sebelumnya.
Konstantin Tarkus
43
Jika Anda menggunakan skrip GA baru, itu $window.ga('send', 'pageview', { page: $location.path() });bukan $window._gaq...bagian. Selain itu, Anda mungkin ingin menghapus ga('send', 'pageview');dari kode GA asli Anda untuk mencegah duplikat saat pertama kali mendarat di sebuah halaman.
CWSpear
57

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()});
Haralan Dobrev
sumber
6
Hal lain yang perlu diperhatikan di sini adalah Anda harus menyertakan layanan "analytics" di suatu tempat. Saya melakukan milik saya di app.run.
Nix
Apakah ini perlu termasuk dalam setiap modul, atau hanya aplikasi awal?
designermonkey
2
@Designermonkey Seharusnya berfungsi jika Anda memasukkan hanya dalam modul aplikasi utama Anda. Jika Anda memiliki modul yang sepenuhnya independen yang tidak memerlukan modul utama Anda, Anda mungkin perlu memasukkannya lagi. Bersulang!
Haralan Dobrev
Jika Anda menggunakan layanan, Anda harus mendefinisikan fungsi Anda dengan kata kunci "ini": sumber . Misalnya, dalam layanan ini akan menjadi this.track = function($window.ga('send', 'pageview', {page: $location.url()});Ini akan memungkinkan Anda untuk menggunakan googleAnalytics.track();dalam fungsi app.run () Anda
zcoon
48
app.run(function ($rootScope, $location) {
    $rootScope.$on('$routeChangeSuccess', function(){
        ga('send', 'pageview', $location.path());
    });
});
dpineda
sumber
8
Catatan: Jika Anda menggunakan minimalisasi / kompilasi, Anda perlu menentukan nama parameter:app.run(["$rootScope", "$location", function(...
dplass
Solusi ini sangat baik jika Anda tidak ingin memasukkan kode GA di setiap pengontrol.
semilir
1
Tidak terlalu bagus jika Anda memiliki kode async yang secara dinamis mengubah judul Anda, kalau tidak bagus.
Johan
40

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'});
wynnwu
sumber
Astaga, terima kasih. Saya mendapatkan kesalahan aneh, dan memperhatikan bahwa cuplikan saya bahkan tidak memiliki _gaq di dalamnya, hehe. Google konyol: memperbarui kode mereka dan semua itu! Ha ha.
CWSpear
3
Pastikan Anda menggunakan $windowuntuk mengakses jendela ( gasendirian di dalam Angular sangat mungkin terjadi undefined). Selain itu, Anda mungkin ingin menghapus ga('send', 'pageview');dari kode GA asli Anda untuk mencegah duplikat saat pertama kali mendarat di sebuah halaman.
CWSpear
6
Menggunakan ui-router Anda dapat mengirim tampilan halaman seperti ini:$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { ga('send', 'pageview', { 'page': $location.path(), 'title': toState.name }); });
pherris
2
Untuk menambahkan: Jika Anda menggunakan parameter pencarian di aplikasi Anda, Anda dapat melacak yang menggunakan$location.url()
Ade
2
Saya memutakhirkan jawaban ini karena menggunakan .path () lebih baik daripada .url () karena Anda biasanya ingin mengecualikan parameter string kueri. Lihat: Kesalahan Konfigurasi Google Analytics # 2: Variabel String Kueri
frodo2975
11

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.

mgonto
sumber
10

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.

Pedro Lopez
sumber
7

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

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

IBootstrap
sumber
Saya menambahkan perbaikan untuk melaporkan jalur dengan lebih baik. jadi sekarang jika Anda memiliki rute /account/:accountId alias jalan http://somesite.com/account/123itu sekarang akan melaporkan jalan sebagai/account?accountId=123
IBootstrap
@IBootstrap apa manfaat dari menempatkan params rute ke string kueri?
Pavel Nikolov
@IBootstrap Saya punya pertanyaan yang sama, apa manfaat dari menempatkan params rute ke string kueri?
Dzung Nguyen
1
Tidak semua rute adalah halaman yang berbeda dan GA memperlakukan setiap rute sebagai halaman yang berbeda. Dengan mengonversi rute ke string kueri, Anda memiliki opsi untuk mengabaikan bagian-bagian dari string kueri.
IBootstrap
5

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.

pengguna2236721
sumber
5

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
    }
  ]);
ilovett
sumber
Saya suka itu selfinjection :) Up
Sam Vloeberghs
Hanya ingin tahu, mengapa Anda mengatur pagedengan jalur saat ini, dan kemudian mengirimkannya sebagai pageview? Apa bedanya melakukannya bukan hanya $window.ga('send', 'pageview', {page: $location.url()});?
Fizzix
1
Saya tidak dapat mengingat TBH tetapi dengan melihatnya saya akan mengatakan itu memberikan fleksibilitas untuk tindakan lain atau mencatat hal-hal tambahan di tempat lain, dan mungkin lebih akurat dengan secara eksplisit memberi tahu ga halaman saat ini, sehingga ga dapat terus berfungsi secara akurat, daripada HANYA mencatat tampilan halaman untuk beberapa url halaman "sewenang-wenang".
ilovett
Jika Anda ingin analitik waktu nyata bekerja di Google, Anda harus melakukan "set". Untuk alasannya lihat referensi dokumentasi: developers.google.com/analytics/devguides/collection/…
fuzzysearch
'set' direkomendasikan sehingga setiap klik yang dikirim pada halaman yang sama (seperti GA Event untuk melacak interaksi pengguna) dikirim dengan nilai jalur Halaman yang sama. Tidak ada hubungannya dengan analitik Realtime. lihat developers.google.com/analytics/devguides/collection/…
Buka SEO
5

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.

Brent Washburne
sumber
4

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

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

Jason
sumber
3

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

pencarian fuzz
sumber
3

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');
    });
});
Kevin M.
sumber
3

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.

Abou-Emish
sumber
3

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);
maleta
sumber
2

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.

Miha Eržen
sumber
1

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.

Fizzix
sumber
1

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

William
sumber
0

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()
          });
        }
      );
    }
  ]);
Felipe Sousa Iketani
sumber
-3

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>
Rafał Lindemann
sumber