Menambahkan analytics.js ke Situs

Library analytics.js (juga dikenal sebagai "tag Google Analytics") adalah library JavaScript untuk mengukur cara pengguna berinteraksi dengan situs Anda. Dokumen ini menjelaskan cara menambahkan tag Google Analytics ke situs Anda.

Tag Google Analytics

Tag Google Analytics harus ditambahkan di dekat bagian atas tag <head> dan sebelum tag CSS atau skrip lainnya, serta menambahkan ID properti properti Google Analytics yang Anda ingin gunakan.

<!-- Google Analytics -->
<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','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Kode di atas melakukan empat hal utama:

Membuat elemen <script> yang mulai mendownload library JavaScript analytics.js secara asinkron dari https://www.google-analytics.com/analytics.js
Menginisialisasi fungsi ga global (disebut antrean perintah ga()) yang memungkinkan Anda menjadwalkan perintah yang akan dijalankan setelah library analytics.js dimuat dan siap digunakan.
Menambahkan perintah ke antrean perintah ga() untuk membuat objek pelacak baru untuk properti yang ditentukan melalui parameter 'GA_MEASUREMENT_ID'.
Menambahkan perintah lain ke antrean perintah ga() untuk mengirim kunjungan halaman ke Google Analytics untuk halaman saat ini.

Penerapan kustom mungkin memerlukan modifikasi pada dua baris terakhir tag Google Analytics (perintah create dan send) atau menambahkan kode tambahan untuk menangkap lebih banyak interaksi. Namun, Anda tidak boleh mengubah kode yang memuat library analytics.js atau melakukan inisialisasi fungsi antrean perintah ga().

Tag asinkron alternatif

Meskipun tag Google Analytics yang dijelaskan di atas memastikan skrip akan dimuat dan dieksekusi secara asinkron di semua browser, tag tersebut memiliki kelemahan karena tidak mengizinkan browser modern melakukan pramuat skrip.

Tag asinkron alternatif di bawah menambahkan dukungan untuk pramuat, yang akan memberikan sedikit peningkatan performa pada browser modern, tetapi dapat menurunkan performa pemuatan dan eksekusi sinkron pada IE 9 dan browser seluler lama yang tidak mengenali atribut skrip async. Hanya gunakan konfigurasi tag ini jika pengunjung Anda mengutamakan penggunaan browser modern untuk mengakses situs Anda.

<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

Data apa yang diambil oleh tag Google Analytics?

Saat menambahkan salah satu tag ini ke situs, Anda mengirim kunjungan halaman untuk setiap halaman yang dikunjungi pengguna. Google Analytics memproses data ini dan dapat menyimpulkan banyak informasi termasuk:

Total waktu yang dihabiskan pengguna di situs Anda.
Waktu yang dihabiskan pengguna di setiap halaman dan urutan kunjungannya.
Link internal apa yang diklik (berdasarkan URL kunjungan halaman berikutnya).

Selain itu: Alamat IP, string agen pengguna, dan pemeriksaan halaman awal yang dilakukan analytics.js saat membuat objek pelacak baru digunakan untuk menentukan hal-hal seperti:

Lokasi geografis pengguna.
Browser dan sistem operasi yang digunakan.
Ukuran layar dan apakah Flash atau Java diinstal.
Situs perujuk.

Langkah berikutnya

Untuk kebutuhan pelaporan dasar, data yang dikumpulkan melalui tag Google Analytics sudah cukup, tetapi dalam banyak kasus ada pertanyaan tambahan yang ingin Anda jawab tentang pengguna Anda.

Panduan di situs ini menjelaskan cara mengukur interaksi yang Anda minati dengan analytics.js, tetapi sebelum menerapkan fitur tertentu, sebaiknya Anda membaca panduan yang tercantum di bagian Dasar-Dasar di navigasi sebelah kiri. Panduan ini akan memberi Anda ringkasan umum tentang library analytics.js dan membantu Anda lebih memahami contoh kode yang digunakan di seluruh situs.

Panduan berikutnya dalam seri ini menjelaskan cara kerja analytics.js.