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.
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.
Jawaban:
Jika Anda menggunakan
ng-view
di aplikasi Angular, Anda dapat mendengarkan$viewContentLoaded
acara dan mendorong acara pelacakan ke Google Analytics.Dengan asumsi Anda telah mengatur kode pelacakan di file index.html utama Anda dengan nama
var _gaq
dan MyCtrl adalah apa yang telah Anda tetapkan dalamng-controller
arahan.UPDATE: untuk versi baru google-analytics gunakan yang ini
sumber
_trackPageview
dan tidak_trackPageView
... menghabiskan 10 menit menggaruk-garuk kepala :)$rootScope.$on('$routeChangeSuccess', ...)
$rootScope
menjamin bahwa itu tidak akan dihapus oleh beberapa acara lain atau perubahan DOM, dan menggunakanrouteChangeSuccess
akan menyala setiap kali bilah lokasi berubah, alih-alih setiap kali Anda mengubah templat sumber tampilan Anda. Apakah itu masuk akal?$window.ga('send', 'pageview', { page: $location.path() });
bukan$window._gaq...
bagian. Selain itu, Anda mungkin ingin menghapusga('send', 'pageview');
dari kode GA asli Anda untuk mencegah duplikat saat pertama kali mendarat di sebuah halaman.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:
Saat Anda menentukan modul sudut Anda, sertakan modul analitik seperti:
PEMBARUAN :
Anda harus menggunakan kode pelacakan Universal Google Analytics baru dengan:
sumber
this.track = function($window.ga('send', 'pageview', {page: $location.url()});
Ini akan memungkinkan Anda untuk menggunakangoogleAnalytics.track();
dalam fungsi app.run () Andasumber
app.run(["$rootScope", "$location", function(...
Tambahan cepat. Jika Anda menggunakan analytics.js baru, maka:
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 )
sumber
$window
untuk mengakses jendela (ga
sendirian di dalam Angular sangat mungkin terjadiundefined
). Selain itu, Anda mungkin ingin menghapusga('send', 'pageview');
dari kode GA asli Anda untuk mencegah duplikat saat pertama kali mendarat di sebuah halaman.$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { ga('send', 'pageview', { 'page': $location.path(), 'title': toState.name }); });
$location.url()
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.
sumber
Menggabungkan jawaban oleh wynnwu dan dpineda adalah yang berhasil bagi saya.
Mengatur parameter ketiga sebagai objek (bukan hanya $ location.path ()) dan menggunakan $ routeChangeSuccess alih-alih $ stateChangeSuccess melakukan trik.
Semoga ini membantu.
sumber
Saya telah membuat contoh sederhana tentang github menggunakan pendekatan di atas.
https://github.com/isamuelson/angularjs-googleanalytics
sumber
/account/:accountId
alias jalanhttp://somesite.com/account/123
itu sekarang akan melaporkan jalan sebagai/account?accountId=123
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.
sumber
Di Anda
index.html
, salin dan rekatkan cuplikan ga tetapi hapus barisga('send', 'pageview');
Saya ingin memberikannya file pabrik sendiri
my-google-analytics.js
dengan injeksi sendiri:sumber
page
dengan jalur saat ini, dan kemudian mengirimkannya sebagaipageview
? Apa bedanya melakukannya bukan hanya$window.ga('send', 'pageview', {page: $location.url()});
?Saya menemukan
gtag()
fungsi berfungsi, bukanga()
fungsi.Di file index.html, di dalam
<head>
bagian:Dalam kode AngularJS:
Ganti
TrackingId
dengan Id Pelacakan Anda sendiri.sumber
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)
dan kemudian tambahkan kode berikut dalam arahan
sumber
Jika Anda menggunakan ui-router, Anda dapat berlangganan acara $ stateChangeSuccess seperti ini:
Untuk contoh kerja lengkap lihat posting blog ini
sumber
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.
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
sumber
Bagi Anda yang menggunakan Router AngularUI alih-alih ngRoute dapat menggunakan kode berikut untuk melacak tampilan halaman.
sumber
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.
sumber
Saya menggunakan AngluarJS dalam mode HTML5. Saya menemukan solusi berikut sebagai yang paling dapat diandalkan:
Gunakan perpustakaan angular-google-analytics . Inisialisasi dengan sesuatu seperti:
Setelah itu, tambahkan pendengar di $ stateChangeSuccess 'dan kirim acara trackPage.
Kapan saja, ketika pengguna Anda sudah di-inisialisasi, Anda dapat menyuntikkan Analytics di sana dan menelepon:
sumber
Saya menggunakan ui-router dan kode saya terlihat seperti ini:
Dengan cara ini saya dapat melacak status yang berbeda. Mungkin seseorang akan merasakan manfaatnya.
sumber
Saya pribadi ingin menyiapkan analitik dengan URL templat alih-alih jalur saat ini. Ini terutama karena aplikasi saya memiliki banyak jalur khusus seperti
message/:id
atauprofile/: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.Saya sekarang mendapatkan tampilan halaman bersih dalam analitik saya seperti
user-profile.html
danmessage.html
bukannya banyak halamanprofile/1
,profile/2
danprofile/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.
sumber
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
RouterOutlet
komponen menangani ketika halaman dirender dan digunakanngOnInit
untuk memanggilpage
panggilan. Contoh di bawah ini menunjukkan satu cara Anda bisa melakukan ini: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. 🙂
sumber
Menggabungkan lebih banyak lagi dengan jawaban Pedro Lopez,
Saya menambahkan ini ke modul ngGoogleAnalytis saya (yang saya gunakan kembali di banyak aplikasi):
dalam hal ini, saya memiliki tag di tautan indeks saya:
ini berguna saat menggunakan mode html5 pada angular.js v1.3
(hapus panggilan fungsi replace () jika tag dasar Anda tidak selesai dengan garis miring /)
sumber
Jika Anda mencari kontrol penuh atas kode pelacakan baru Google Analytics, Anda dapat menggunakan Angular-GA saya sendiri .
Ini
ga
tersedia 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.Selain itu ada arahan
ga
yang memungkinkan untuk mengikat beberapa fungsi analitik ke acara, seperti ini:sumber