Mengukur aplikasi web satu halaman

Dokumen ini ditujukan bagi developer yang ingin mengukur tayangan halaman di aplikasi halaman tunggal 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 mencatat informasi pelanggan. * Layar kedua tempat pelanggan menunjukkan minat pada layanan tertentu. * Halaman ketiga untuk mendaftar ke webinar yang terkait dengan minat pelanggan.

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

Sebelum memulai

Halaman ini mengasumsikan bahwa Anda sudah memiliki:

• Akun dan properti Google Analytics untuk situs Anda. Pelajari cara Menyiapkan Google Analytics.

• Tag Google yang diterapkan di situs Anda yang diaktifkan saat halaman dimuat pertama kali. Pelajari cara Menyiapkan tag Google.

Menerapkan pengukuran aplikasi web satu halaman

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

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

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

Penerapan histori browser Penerapan peristiwa kustom

Penerapan 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 browser.

Poin Penting: Jika Anda mengonfigurasi tag menggunakan Google Tag Manager, jangan aktifkan pelacakan histori otomatis di GA4, karena hal ini dapat menyebabkan penghitungan ganda tayangan halaman. Sebagai gantinya, lihat tutorial Mengukur aplikasi web satu halaman dengan Google Tag Manager.

Mengaktifkan pengukuran yang ditingkatkan di Google Analytics

Untuk mengukur page_views secara otomatis berdasarkan histori browser:

1. Buka Google Analytics

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

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

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

   

5. Simpan perubahan.

Memverifikasi konfigurasi pengukuran Anda

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

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

2. Klik aplikasi halaman tunggal Anda. Saat 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 diperbarui dengan benar.

Pertimbangan tambahan untuk SPA

Selain mengirim peristiwa page_view, pertimbangkan aspek tambahan berikut untuk integrasi SPA yang andal 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. Hal ini dapat berarti pengguna tidak melihat bagian atas halaman virtual baru, dan 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 di 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 pada fitur browser seperti penelusuran di halaman (Ctrl+F) yang tidak berfungsi setelah pemuatan halaman virtual, hal ini mungkin menunjukkan cara SPA Anda memperbarui DOM.

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

Dampak pada peristiwa otomatis

Jika Anda menerapkan pengukuran tayangan laman virtual dengan benar di SPA, maka Google Analytics akan menangani peristiwa otomatis lainnya dengan tepat. Jika tayangan laman virtual tidak direkam untuk perubahan layar, Google Analytics memperlakukan SPA sebagai satu halaman, sehingga menghasilkan metrik yang tidak akurat.

Misalnya, peristiwa user_engagement mengukur waktu yang dihabiskan pengguna secara aktif di halaman. Tanpa tayangan halaman virtual, semua waktu engagement diatribusikan ke pemuatan halaman awal, sehingga tidak mungkin menganalisis waktu yang dihabiskan di setiap layar.

Jika pengukuran tayangan halaman virtual diterapkan dengan benar:

• Peristiwa user_engagement dikirim saat pengguna membuka 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 lain, seperti klik atau scroll, dikaitkan dengan page_location halaman virtual yang sedang dilihat pengguna.

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