Tutorial: Google Analytics

Tutorial ini menunjukkan penggunaan Google Analytics untuk melacak penggunaan ekstensi Anda. Jika Anda mengembangkan aplikasi platform, lihat Analytics untuk Aplikasi karena aplikasi memiliki batasan yang berbeda dengan ekstensi.

Persyaratan

Tutorial ini mengharapkan Anda memiliki beberapa ekstensi penulisan yang sudah dikenal untuk Google Chrome. Jika Anda memerlukan informasi tentang cara menulis ekstensi, baca Tutorial Memulai.

Anda juga harus menyiapkan akun Google Analytics untuk melacak ekstensi Anda. Perhatikan bahwa saat menyiapkan akun, Anda dapat menggunakan nilai apa pun di kolom URL Situs, karena ekstensi Anda tidak akan memiliki URL-nya sendiri.

Penyiapan analisis dengan info untuk ekstensi Chrome yang telah diisi

Menginstal kode pelacakan

Cuplikan kode pelacakan Google Analytics standar mengambil file bernama ga.js dari URL yang dilindungi SSL jika halaman saat ini dimuat menggunakan protokol https://. Ekstensi dan aplikasi Chrome hanya boleh menggunakan versi ga.js yang dilindungi SSL. Pemuatan ga.js melalui HTTP yang tidak aman tidak diizinkan oleh Kebijakan Keamanan Konten default Chrome. Hal ini, ditambah fakta bahwa ekstensi Chrome dihosting berdasarkan skema chrome-extension://, memerlukan sedikit modifikasi pada cuplikan pelacakan biasa untuk menarik ga.js langsung dari https://ssl.google-analytics.com/ga.js, bukan lokasi default.

Di bawah ini adalah cuplikan yang dimodifikasi untuk API pelacakan asinkron (baris yang diubah dicetak tebal):

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Anda juga harus memastikan bahwa ekstensi Anda memiliki akses untuk memuat resource dengan melonggarkan kebijakan keamanan konten default. Definisi kebijakan di manifest.json Anda mungkin terlihat seperti ini:

{
  ...,
  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
  ...
}

Berikut adalah halaman pop-up (popup.html) yang memuat kode pelacakan asinkron melalui file JavaScript eksternal (popup.js) dan melacak satu kunjungan halaman:

<!DOCTYPE html>
<html>
 <head>
   ...
  <script src="popup.js"></script>
 </head>
 <body>
   ...
 </body>
</html>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'https://ssl.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Perhatikan bahwa string UA-XXXXXXXX-X harus diganti dengan nomor akun Google Analytics Anda.

Melacak kunjungan halaman

Kode _gaq.push(['_trackPageview']); akan melacak satu kunjungan halaman. Kode ini dapat digunakan di halaman mana pun di ekstensi Anda. Ketika ditempatkan di halaman latar belakang, tampilan akan mendaftarkan tampilan sekali per sesi browser. Saat ditempatkan di pop-up, pop-up akan mendaftarkan tampilan setiap kali pop-up dibuka.

Dengan melihat data penayangan halaman untuk setiap halaman di ekstensi, Anda bisa mendapatkan gambaran tentang frekuensi pengguna berinteraksi dengan ekstensi per sesi browser:

Tampilan Analytics konten populer untuk situs

Memantau permintaan analisis

Untuk memastikan data pelacakan dari ekstensi Anda dikirim ke Google Analytics, Anda dapat memeriksa halaman ekstensi di jendela Developer Tools (lihat tutorial proses debug untuk informasi selengkapnya). Seperti yang ditampilkan pada gambar berikut, Anda akan melihat permintaan untuk file bernama __utm.gif jika semuanya telah disiapkan dengan benar.

Jendela Developer Tools yang menampilkan permintaan __utm.gif

Peristiwa pelacakan

Dengan mengonfigurasi pelacakan peristiwa, Anda dapat menentukan bagian mana dari ekstensi yang memiliki interaksi paling banyak dengan pengguna. Misalnya, jika Anda memiliki tiga tombol, pengguna dapat mengeklik:

<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>

Tulis fungsi yang mengirim peristiwa klik ke Google Analytics:

function trackButton(e) {
  _gaq.push(['_trackEvent', e.target.id, 'clicked']);
};

Dan gunakan sebagai pengendali peristiwa untuk setiap klik tombol:

var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', trackButtonClick);
}

Halaman ringkasan pelacakan peristiwa Google Analytics akan memberi Anda metrik terkait berapa kali setiap tombol diklik:

Tampilan Analytics dari data pelacakan peristiwa untuk suatu situs

Dengan pendekatan ini, Anda dapat melihat bagian mana dari ekstensi yang digunakan secara berlebihan atau kurang. Informasi ini dapat membantu memandu keputusan tentang desain ulang UI atau fungsi tambahan yang dapat diterapkan.

Untuk informasi selengkapnya tentang penggunaan pelacakan peristiwa, lihat dokumentasi developer Google Analytics.

Kode contoh

Contoh ekstensi yang menggunakan teknik ini tersedia di repositori contoh.