Mengukur aplikasi web satu halaman

Dokumen ini ditujukan bagi developer yang ingin mengukur kunjungan halaman di aplikasi web satu halaman menggunakan Google Analytics.

Aplikasi web satu halaman (SPA) adalah situs yang memuat dokumen HTML satu kali dan mengambil konten tambahan menggunakan JavaScript API.

Contoh: Misalkan Anda memiliki formulir untuk mendapatkan beberapa prospek. Formulir ini memiliki tiga layar: > * Layar pertama untuk mendapatkan informasi pelanggan. * Layar kedua tempat pelanggan menunjukkan minat pada layanan tertentu. * Halaman layar ketiga untuk mendaftar webinar yang terkait dengan minat pelanggan.

Kunci untuk mengukur kunjungan halaman dari SPA dengan benar adalah menghitung kunjungan halaman untuk setiap layar yang berinteraksi dengan pengguna dan mendapatkan perujuk halaman yang tepat, sehingga Anda dapat melacak perjalanan pengguna dengan benar.

Sebelum memulai

Halaman ini mengasumsikan bahwa Anda sudah memiliki:

Mengimplementasikan pengukuran aplikasi web satu halaman

Untuk mengimplementasikan pengukuran SPA yang akurat, gunakan salah satu metode berikut untuk memicu kunjungan halaman virtual baru:

  • Perubahan histori browser (direkomendasikan): Jika SPA Anda menggunakan History API, khususnya metode pushState() dan replaceState() untuk mengupdate layar, gunakan opsi ini.

  • Peristiwa kustom: Jika situs Anda menggunakan objek DocumentFragment untuk merender layar yang berbeda, gunakan opsi ini.

Implementasi perubahan histori browser

Jika SPA Anda menggunakan History API, Anda dapat mengaktifkan pengukuran yang ditingkatkan di Google Analytics untuk melacak tayangan halaman secara otomatis berdasarkan peristiwa histori penjelajahan.

Mengaktifkan pengukuran yang ditingkatkan di Google Analytics

Untuk mengukur page_views secara otomatis berdasarkan histori penjelajahan:

  1. Buka Google Analytics

  2. Di Admin, pada bagian Pengumpulan dan perubahan data, klik Aliran Data > Web.

  3. Di bagian Pengukuran yang ditingkatkan, geser tombol ke posisi Aktif untuk mengaktifkan semua opsi.

  4. Klik untuk mengedit masing-masing opsi. Di bagian Kunjungan Halaman, klik Tampilkan setelan lanjutan. Pastikan untuk mengaktifkan Pemuatan halaman dan Perubahan halaman berdasarkan peristiwa histori penjelajahan browser.

    Gambar yang menampilkan setelan tayangan halaman

  5. Simpan perubahan.

Memverifikasi konfigurasi pengukuran Anda

Untuk memverifikasi bahwa aplikasi web satu halaman Anda mengukur kunjungan halaman dengan benar:

  1. Aktifkan mode debug untuk setiap tag dalam konfigurasi pengukuran SPA Anda. Pelajari cara Memantau peristiwa di DebugView.

  2. Klik aplikasi web satu halaman Anda. Saat Anda mengklik layar virtual baru, Anda akan melihat peristiwa page_view baru di DebugView. Bandingkan parameter peristiwa page_view dengan peristiwa page_view sebelumnya untuk memeriksa apakah perujuk halaman dan lokasi halaman telah diupdate dengan benar.

Pertimbangan tambahan untuk SPA

Selain mengirim peristiwa page_view, pertimbangkan aspek tambahan berikut untuk integrasi SPA yang kuat dengan Google Analytics dan pengalaman pengguna yang lebih baik:

Mengelola posisi scroll

Saat pengguna berpindah antar-tampilan di SPA, browser biasanya mempertahankan posisi scroll saat ini. Artinya, pengguna mungkin tidak melihat bagian atas halaman virtual baru, dan hal ini dapat memengaruhi pelacakan kedalaman scroll.

Rekomendasi: Reset posisi scroll secara terprogram ke bagian atas halaman atau penampung konten utama setelah setiap transisi halaman virtual.

// Example: Reset window scroll position on a route change in your SPA
window.scrollTo(0, 0);

// Or, if your content is within a specific element:
// document.getElementById('main-content').scrollTo(0, 0);

Dengan perubahan ini, pengguna akan memulai dari bagian atas konten baru, yang memungkinkan pelacakan scroll Google Analytics mengukur engagement di halaman virtual baru secara akurat.

Memastikan aksesibilitas konten untuk fitur browser

Jika pengguna melaporkan masalah dengan fitur browser seperti penelusuran di halaman (Ctrl+F) yang tidak berfungsi setelah pemuatan halaman virtual, hal ini mungkin menunjukkan cara SPA Anda mengupdate DOM.

Rekomendasi: Pastikan framework SPA dan logika perutean Anda mengupdate bagian DOM yang relevan sepenuhnya dan secara sinkron dengan konten halaman baru. Rendering yang tertunda atau konten yang disembunyikan dari hierarki DOM utama mungkin tidak dapat langsung diindeks oleh fungsi penelusuran browser. Uji penelusuran di halaman setelah navigasi virtual untuk mengonfirmasi aksesibilitas konten.

Dampak pada peristiwa otomatis

Jika Anda mengimplementasikan pengukuran kunjungan halaman virtual dengan benar di SPA, Google Analytics akan menangani peristiwa otomatis lainnya dengan tepat. Jika kunjungan halaman virtual tidak direkam untuk perubahan layar, Google Analytics akan memperlakukan SPA sebagai satu halaman, sehingga menyebabkan metrik yang tidak akurat.

Misalnya, peristiwa user_engagement mengukur waktu yang dihabiskan pengguna secara aktif di halaman. Tanpa kunjungan halaman virtual, semua waktu engagement akan dikaitkan dengan pemuatan halaman awal, sehingga tidak memungkinkan untuk menganalisis waktu yang dihabiskan di setiap layar.

Jika pengukuran kunjungan halaman virtual diimplementasikan dengan benar:

  • Peristiwa user_engagement dikirim saat pengguna berpindah dari satu halaman virtual ke halaman virtual lainnya.
  • Waktu engagement untuk halaman virtual sebelumnya dihitung dan dikirim bersama dengan peristiwa user_engagement, biasanya tepat sebelum peristiwa page_view untuk halaman virtual baru diproses.
  • Peristiwa lainnya, seperti klik atau scroll, dikaitkan dengan page_location halaman virtual yang saat ini dilihat pengguna.

Hal ini memungkinkan Anda menganalisis engagement pengguna dan metrik lainnya untuk setiap layar atau bagian dalam SPA, sehingga memberikan pemahaman yang lebih akurat tentang perjalanan pengguna.