Pengantar ga.js (Lama)

ga.js adalah library JavaScript untuk mengukur cara pengguna berinteraksi dengan situs Anda. Ini adalah library lama. Jika Anda memulai Google Analytics, Anda harus menggunakan library pelacakan terbaru, analytics.js.

Panduan Memulai Kode Pelacakan

Cuplikan Analytics adalah potongan kecil kode JavaScript yang Anda tempelkan ke halaman. Tag Assistant mengaktifkan pelacakan Google Analytics dengan menyisipkan ga.js ke dalam halaman. Untuk menggunakannya di halaman Anda, salin cuplikan kode di bawah, dengan mengganti UA-XXXXX-X dengan ID properti web Anda. Tempelkan cuplikan ini ke halaman template situs Anda agar muncul sebelum tag </head> penutup.

Jika Anda perlu melakukan lebih dari sekadar pelacakan halaman dasar, lihat referensi pelacakan untuk mengetahui daftar metode yang tersedia di API, dan lihat Panduan Penggunaan untuk mengetahui detail penggunaan sintaksis asinkron. Untuk petunjuk langkah demi langkah tentang cara menyiapkan pelacakan, lihat artikel Pusat Bantuan tentang menyiapkan pelacakan.

<script type="text/javascript">

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

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

</script>

Cuplikan di atas mewakili konfigurasi minimum yang diperlukan untuk melacak halaman secara asinkron. Metode ini menggunakan _setAccount untuk menetapkan ID properti web halaman, lalu memanggil _trackPageview untuk mengirim data pelacakan kembali ke server Google Analytics.

Penting: Jika Anda memperbarui halaman dari cuplikan tradisional ke versi asinkron terbaru, Anda harus menghapus cuplikan pelacakan yang ada terlebih dahulu. Sebaiknya jangan gunakan kedua cuplikan secara bersamaan di halaman yang sama. Untuk petunjuk migrasi, lihat Bermigrasi ke Asinkron.

Cara Kerja Sintaksis Asinkron

Objek _gaq adalah yang memungkinkan sintaksis asinkron. Hal ini berfungsi sebagai antrean, yang merupakan struktur data pertama yang masuk,keluar pertama yang mengumpulkan panggilan API hingga ga.js siap untuk menjalankannya. Untuk menambahkan sesuatu ke antrean, gunakan metode _gaq.push.

Untuk mendorong panggilan API ke antrean, Anda harus mengonversinya dari sintaksis JavaScript tradisional menjadi array perintah. Array perintah hanyalah array JavaScript yang sesuai dengan format tertentu. Elemen pertama dalam array perintah adalah nama metode objek pelacak yang ingin Anda panggil. Harus berupa string. Elemen lainnya adalah argumen yang ingin Anda teruskan ke metode objek pelacak. Ini dapat berupa nilai JavaScript apa pun.

Kode berikut memanggil _trackPageview() menggunakan sintaksis tradisional:

var pageTracker = _gat._getTracker('UA-XXXXX-X');
pageTracker._trackPageview();

Kode setara dalam sintaksis asinkron memerlukan dua panggilan ke _gaq.push.

_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);

Dalam sintaksis asinkron, pembuatan objek pelacak bersifat tersirat, tetapi kita masih memerlukan cara untuk menetapkan ID properti web untuk pelacak. Metode _setAccount telah ditambahkan untuk menyediakan kemampuan ini. Semua metode objek pelacak lainnya sama dalam pelacakan asinkron dan tradisional. Hanya sintaksisnya yang berbeda.

Untuk informasi selengkapnya tentang sintaksis asinkron, lihat Referensi Pelacakan untuk metode _gaq.push.

Kembali ke Atas

Pelacakan dengan Pengendali Peristiwa HTML

Sintaksis pelacakan asinkron juga harus digunakan dari dalam pengendali peristiwa DOM. Misalnya, tombol berikut menghasilkan peristiwa saat diklik.

<button onclick="_gaq.push(['_trackEvent', 'button3', 'clicked'])"></button>

Meskipun tombol ini diklik sebelum browser selesai memuat ga.js, peristiwa akan diambil dan akhirnya dieksekusi. Dengan pelacakan tradisional, browser mungkin menampilkan pengecualian dalam situasi ini.

Kembali ke Atas

Mendorong Fungsi ke Antrean

Selain array perintah, Anda juga dapat mengirim objek fungsi ke antrean _gaq. Fungsi dapat berisi JavaScript arbitrer apa pun dan seperti array perintah, fungsi tersebut dijalankan sesuai urutan pengirimannya ke _gaq. Teknik ini berguna untuk memanggil API pelacakan yang menampilkan nilai. Misalnya, kode berikut membuat URL penaut dan menetapkan properti href untuk link dengan hasilnya.

_gaq.push(function() {
  var pageTracker = _gat._getTracker('UA-XXXXX-X');
  var link = document.getElementById('my-link-id');
  link.href = pageTracker._getLinkerUrl('http://example.com/');
});

Contoh di atas menggunakan _gat untuk membuat objek pelacak, tetapi karena ditetapkan ke variabel lokal, kode di luar fungsi tidak dapat menggunakannya. Meskipun hal ini dapat diterima, Anda dapat menggunakan metode _gat._createTracker untuk membuat objek permanen yang dapat diakses secara global. Kode berikut menunjukkan cara kerjanya.

_gaq.push(function() {
  var pageTracker = _gat._createTracker('UA-XXXXX-X', 'myTracker');
  var link = document.getElementById('my-link-id');
  link.href = pageTracker._getLinkerUrl('http://example.com/');
});

_gaq.push(['myTracker._trackPageview']);

Contoh di atas membuat pelacak asinkron dalam fungsi, kemudian mereferensikannya nanti berdasarkan nama dalam array perintah.

Kasus penggunaan sebaliknya juga mungkin terjadi. Misalnya, jika Anda perlu menggunakan objek pelacak asinkron yang dibuat melalui array perintah yang dikirim sebelumnya, gunakan metode _gat._getTrackerByName. Kode berikut menunjukkan cara kerjanya.

_gaq.push(['myTracker._setAccount', 'UA-XXXXX-X']);

_gaq.push(function() {
  var pageTracker = _gat._getTrackerByName('myTracker');
  var link = document.getElementById('my-link-id');
  link.href = pageTracker._getLinkerUrl('http://example.com/');
});

Kembali ke Atas

Satu Dorongan, Beberapa Perintah

Alih-alih mengetik _gaq.push(...) untuk setiap panggilan, Anda dapat mengirim semua perintah sekaligus. Kode berikut menunjukkan teknik ini.

_gaq.push(
  ['_setAccount', 'UA-XXXXX-X'],
  ['_setDomainName', 'example.com'],
  ['_setCustomVar', 1, 'Section', 'Life & Style', 3],
  ['_trackPageview']
);

Hal ini berfungsi karena metode _gaq.push meniru metode Array.push, yang memungkinkan pengiriman beberapa item dengan satu pemanggilan.

Kembali ke Atas

Memisahkan Cuplikan

Jika memilih untuk menempatkan cuplikan Analytics di bagian bawah halaman, Anda harus memahami bahwa Anda tidak perlu menempatkan seluruh cuplikan di bagian bawah. Anda tetap dapat mempertahankan sebagian besar manfaat pemuatan asinkron dengan memisahkan cuplikan menjadi dua—pertahankan paruh pertama di bagian atas halaman dan pindahkan sisanya ke bawah. Karena bagian pertama cuplikan pelacakan memiliki sedikit pengaruh atau tidak berpengaruh pada rendering halaman, Anda dapat membiarkan bagian tersebut di atas dan menempatkan bagian cuplikan yang menyisipkan ga.js di bagian bawah.

Halaman dengan cuplikan asinkron yang dipecah menjadi dua mungkin terlihat seperti ini:

<html>

<head>
  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXX-X']);
    _gaq.push(['_trackPageview']);
  </script>
</head>

<body>
  <p>Page Content</p>

  <script src="some_random_script.js"></script>

  <p>Page Content</p>

  <script type="text/javascript">  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script> </body> </html>

Kedua bagian kode harus digabungkan dalam tag skripnya sendiri, tetapi hanya enam baris terakhir dari cuplikan asinkron asli yang perlu dipindahkan ke bagian bawah. Semua baris yang mengirim metode ke _gaq bisa tetap berada di atas.

Kembali ke Atas

Menghindari Kesalahan Umum

Saat menggunakan sintaksis asinkron atau tradisional, ingat hal berikut:

  • Nama metode peka huruf besar/kecil.
    Jika Anda menggunakan nama metode tanpa casing yang tepat, panggilan metode tersebut tidak akan berfungsi. Contoh:
    _gaq.push(['_trackpageview']);   // bad
    _gaq.push(['_trackPageview']);   // good
  • Gunakan nama metode yang benar.
    Jika pelacakan tidak berfungsi dengan benar, pastikan Anda menggunakan nama yang benar untuk metode ini. Contoh:
    _gaq.push(['_setDomain', 'example.com']);       // bad
    _gaq.push(['_setDomainName', 'example.com']);   // good
    
  • Hanya string yang harus diteruskan dengan tanda kutip. Semua jenis lainnya tidak boleh menggunakan tanda kutip.
    Nilai apa pun yang bukan string, seperti boolean, literal objek, fungsi, atau array, harus diteruskan tanpa tanda kutip. Hanya gunakan tanda kutip saat Anda meneruskan sesuatu yang dimaksudkan untuk ditafsirkan sebagai string. Jika Anda bermigrasi dari sintaksis tradisional, setiap parameter fungsi yang diteruskan tanpa tanda kutip harus tetap tidak dikutip dalam sintaksis asinkron. Contoh:
    _gaq.push(['_setAllowLinker', 'false']);    // bad
    _gaq.push(['_setAllowLinker', false]);      // good
    
  • Pastikan string tidak berisi spasi kosong di awal atau di akhir.
    Contoh:
    _gaq.push(['_setAccount', ' UA-65432-1']);    // bad
    _gaq.push(['_setAccount', 'UA-65432-1']);     // good
    

Kembali ke Atas

Menonaktifkan Pelacakan

Dalam beberapa kasus, Anda mungkin perlu menonaktifkan kode pelacakan Google Analytics di halaman tanpa harus menghapus cuplikan kodenya. Misalnya, Anda dapat melakukannya jika kebijakan privasi situs Anda menyertakan kemampuan pengunjung untuk memilih tidak ikut dalam pelacakan Google Analytics.

Cuplikan pelacakan ga.js kini menyertakan properti jendela yang, jika ditetapkan ke true, akan menonaktifkan cuplikan pelacakan agar tidak mengirim data ke Google Analytics. Saat Google Analytics mencoba menetapkan cookie atau mengirim data kembali ke server Google Analytics, Google Analytics akan memeriksa apakah properti ini ditetapkan ke true. Jika didukung, plugin akan memiliki efek yang sama seolah-olah pengunjung telah menginstal Plugin Browser Opt-out Google Analytics.

Untuk menonaktifkan pelacakan, tetapkan properti jendela berikut ke true:

window['ga-disable-UA-XXXXXX-Y'] = true;

Dengan nilai UA-XXXXXX-Y sesuai dengan ID properti web tempat Anda ingin menonaktifkan pelacakan.

Properti jendela ini harus ditetapkan sebelum kode pelacakan dipanggil. Properti ini harus ditetapkan di setiap halaman tempat Anda ingin menonaktifkan pelacakan Google Analytics. Jika properti tidak disetel atau disetel ke salah (false), pelacakan akan berfungsi seperti biasa.

Jadi, misalnya, jika kode pelacakan Google Analytics Anda di halaman menyertakan:

_gaq.push['_setAccount', 'UA-123456-1']

Dan Anda ingin menonaktifkan kode pelacakan tersebut agar tidak menetapkan cookie atau mengirim data kembali ke Google Analytics, selanjutnya Anda menggunakan kode berikut sebelum kode pelacakan dipanggil:

window['ga-disable-UA-123456-1'] = true;

Jika menggunakan beberapa pelacak di halaman dengan beberapa ID properti web, Anda harus menetapkan variabel window['ga-disable-UA-XXXXXX-Y'] yang setara ke true untuk setiap properti web agar dapat sepenuhnya menonaktifkan pelacakan Google Analytics di halaman tersebut.

Contoh

Berikut ini contoh sederhana beberapa kode yang dapat Anda gunakan untuk menyediakan fungsi pilihan tidak ikut bagi pengguna.

Pertama, tambahkan link HTML baru ke situs Anda untuk menjalankan logika ketidakikutsertaan:

<a href="javascript:gaOptout()">Click here to opt-out of Google Analytics</a>

Lalu, tambahkan cuplikan kode berikut sebelum cuplikan kode ga.js. Pastikan untuk mengganti nilai gaProperty dari UA-XXXX-Y ke properti yang digunakan di situs Anda. Ini adalah nilai yang sama dengan yang Anda teruskan ke perintah _setAccount.

<script>
// Set to the same value as the web property used on the site
var gaProperty = 'UA-XXXX-Y';

// Disable tracking if the opt-out cookie exists.
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
  window[disableStr] = true;
}

// Opt-out function
function gaOptout() {
  document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
  window[disableStr] = true;
}
</script>

Saat pengguna mengklik link HTML pilihan tidak ikut, fungsi gaOptout kustom akan dijalankan. Tindakan ini akan menetapkan cookie untuk waktu yang lama di masa mendatang dan menonaktifkan pengumpulan data analytics.js. Saat pengguna kembali ke situs ini, skrip di atas akan memeriksa apakah cookie ketidakikutsertaan telah ditetapkan. Jika ya, pengumpulan data analytics.js juga akan dinonaktifkan.

Memaksa SSL (HTTPS)

Untuk memaksa Google Analytics agar selalu mengirim data menggunakan SSL, bahkan dari halaman yang tidak aman (HTTP), gunakan metode _gat._forceSSL, seperti dalam contoh ini:

_gaq.push(['_setAccount', 'UA-12345-1']);
_gaq.push(['_gat._forceSSL']);       // Send all hits using SSL, even from insecure (HTTP) pages.
_gaq.push(['_trackPageview']);

Kembali ke Atas