Bagaimana Melacak Perilaku Pengguna Dengan Google Analytics Events

() translation by (you can also view the original English article)

Singkat cerita; kamu telah mendesain ulang website, dan kamu telah menggunakan semua cara terbaik yang kamu sadari. Website berjalan dengan cepat, itu tentu saja tampak jauh lebih baik dengan tampilan baru.

Namun apakah kamu sudah mempertimbangkan bagaimana mengukur desain barumu? Bagaimana kamu akan tahu jika sebuah popup baru yang kamu tambahkan membawa konversi, atau membahayakan pengalaman? Seberapa popup ditampilkan dan seberapa banyak orang meninggalkannya? Seberapa banyak pengguna mengendalikan situs dari menu di luar kanvas yang juga baru kamu tambahkan? Berapa banyak orang melihat slider gambar pada homepage di atas slide pertama? Pertanyaan-pertanyaan ini ada banyak dan bervariasi.

Dalam tutorial ini, saya akan menunjukkanmu bagaimana memberdayakan Google Analytics Event Tracking API (sungguh nama yang panjang!) untuk menemukan jawabannya.

Memulai

Jika kamu belum menjadi pengguna Google Analytics, buat sebuah akun di ikuti instruksi yang tampil untuk membuat sebuah script pelacan ke dalam websitemu Secara umum, snippet yang diberikan kepadamu akan tampak seperti contoh di bawah UA-XXXXXX-X menjadi ID pelacak unik pada websitemu.

(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 = true;
	a.src = g;
	m.parentNode.insertBefore(a, m);
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga( 'create', 'UA-XXXXXX-X', 'auto' );
ga( 'send', 'pageview' );

Untuk latihan ini kamu juga akan memerluban sebuah ekstsensi, Google Analytics Debugger, untuk melakukan debug pada script Google Analytics pada webstie pada situs kita untuk digunakan nantinya.

Setelah semuanya diatur, kita dapat memulai dengan contoh pertama kita.

Melacak Sebuah Klik

Bayangkan kita memiliki beberapa tombol (atau tautan anchor yang dibentuk sebagai sebuah tombol). Kita menambahkan tombol pertama di atas lipatan yang disebut area "hero", dan tombol kedua tepat sebelum footer. Seperti yang dapat kamu lihat di bawah, tiap tombol diarahkan pada halaman yang sama, memiliki class styling yang berbeda, dan sebuah ID unik. Dalam hal ini, kita dapat memanfaatkan "Event Tracking API" untuk menemukan tombol mana yang menerima lebih banyak klik.

<!-- The buy now button that appear above the fold -->
<a href="./purchase.html" class="btn btn--buy-now" id="buy-now-above">Buy Now</a>

<!-- The buy now button that appear below the fold -->
<a href="./purchase.html" class="btn btn--buy-now" id="buy-now-below">Buy Now</a>

Menggunakan Events Tracking relatif mudah, karena itu tidak membutuhkan secara ketat konvensi dalam istilah menjelaskan event. Pertama kita perlu mengikat tombol dengan event click.

var buttons = document.querySelectorAll('.btn');
buttons.forEach( function( btn ) {
   btn.addEventListener('click', function(event) {

   });
} );

Kemudian kita menambahkan ga() yang merupakan sebuah function terekspos dari script Google Analytics yang kita tambahkan sebelumnya, dimana ini merupakan function yang sama yang kita gunakan untuk merekam sebuah "pageview". Dengan cara serupa, kita melacak sebuah event menggunakan perintah send dengan event diatur sebagai argument hitType bersamaan dengan sejumlah parameter yang diperlukan, yaitu:

eventAction: menjelaskan interaksi pengguna atau keadaan tampilan pengguna misalnya click, play, pause, dll.
eventCategory: menjelaskan Obyek untuk dilacak misalnya Videos, Buttons, Pop-ups, dll.
eventLabel: sebuah label atau ID event yang unik. Kita menambahkan variabel ini untuk membuat kategori berbagai contoh pada obyek yang sama.

Seperti yang disebutkan, Google tidak mengatur aturan ketat; kamu dapat menerapkan ini dalam cara apapun yang kamu rasa cocok untuk situsmu. Dalam kasus kita, kita mengatur variabel ini sebagai berikut:

var buttons = document.querySelectorAll('.btn');
buttons.forEach( function( btn ) {
   btn.addEventListener('click', function(event) {
      ga('send', 'event', {
         eventAction: 'click',
         eventCategory: 'Buy Now Buttons',
         eventLabel: event.target.id // buy-now-above || buy-now-below
      });
   });
} );

Dengan ekstensi Google Analytics Debugger yang aktif, kita dapat mengklik salah satu tombol kita dan memeriksa DevTools Console untuk melihat apakah pelacak berfungsi:

Google Analytics Log in DevTools Console — Tracker mengirim data ke Google Analytics

Dan setelah Google Analytics menerima data, itu akan direkam di bawah Real-time > Events and Behaviour > Events.

Event Record in Google Analytics — Dari screenshot ini, kita menemukan bahwa tombol "Buy Now" di bawah lipatan menerima lebih banyak klik daripada yang berada di atas.

Melacak Sebuah Carousel

Contoh kedua akan meliputi sebuah Image Slider, atau Carousel. Kamu mungkin akan menemui argument yang menerima dan melawan penggunaan carousel pada website; "orang tidak benar-benar berinteraksi dengan carousel" atau "orang hanya berinteraksi dengan slide pertama". Namun apakah argument berikut diterapkan pada websitemu? Tanpa data yang sesuai, susah untuk diketahui.

Mari memadukan Google Analytics Events ke dalam carousel, yang telah kita buat menggunakan Slick.js. Plugin jQuery ini menyediakan custom jQuery Events yang berguna yang hanya apa yang ketika butuhkan untuk menjalankan Google Analytics Event Tracking. Silahkan lanjutkan ke dokumentasi Slick untuk detail pada bagaimana membangun carousel.

Carousel kita dibuat sederhana untuk tujuan demo ini.

Carousel kita terdiri dari lima slide. Sama halnya dengan contoh pertama, kita juga telah menambahkan ID unik untuk tiap slide (misalnya slide-1, slide-2, slide-3, dll.) yang akan kita lewati pada parameter eventLabel. Goal di sini adalah untuk menemukan:

apakah pengguna melihat carousel di atas slide pertama
dan mengumpulkan jumlah dilihat pada tiap slide.

Untuk melakukan ini kita dapat memanfaatkan Slick.js events swipe dan afterChange.

Swipe

event swipe, seperti yang disebutkan namanya, dipicu ketika pengguna mengarahkan carousel menggunakan gerakan usap. Dalam kasus ini, kita menentukan parameter eventAction ke swipe.

$('.carousel').on('swipe', function(event, slick, direction) {
   ga('send', 'event', {
      eventCategory: 'Carousel',
      eventAction: 'swipe',
      eventLabel: $( this ).find( '.slick-active' ).attr('id') // slide-1, slide-2, slide-3, etc.
   });
});

afterChanges

afterChanges adalah event yang dipicu ketika slide diganti; dengan kata lain, ketika pengguna melihat slide sebelum atau sesudahnya dalam carousel. Dalam kasus ini, kita mengatur eventAction ke view untuk "melihat slide baru".

$('.carousel').on('afterChange', function(event, slick, direction) {
   ga('send', 'event', {
      eventCategory: 'Carousel',
      eventAction: 'view',
      eventLabel: $( this ).find( '.slick-active' ).attr('id') // slide-1, slide-2, slide-3, etc.
   });
});

Setelah Google Analytics mengumpulkan data, kita akan segera menemukan seberapa banyak pengguna berinteraksi dengan carousel, jumlah dilihat yang diterima tiap slide, dan seberapa banyak pengguna menggunakan gerakan usap kita menggunakan carousel.

Seperti yang dapat kita lihat di atas, carousel kita menerima total 19 kali dilihat, 14 diantaranya dilakukan melalui gerakan swipe.

Apa Berikutnya?

Kita telah melihat dua contoh memadukan Google Analytics Events Tracking ke dalam halaman web untuk mengumpulkan data interaksi pengguna. Angka-angka ini memberikan kita acuan yang solid untuk memutuskan apakah desain baru memiliki kinerja yang lebih baik dibandingkan dengan desain lama, yang akhirnya membantu kita meningkatkan UX untuk website kita.

Saya mendorongmu untuk memeriksa dokumen untuk memperluas penggunaan Google Analytics Events Tracking API.