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 tersebut memiliki tiga layar:

• Layar pertama untuk mendapatkan informasi pelanggan.
• Layar kedua tempat pelanggan menunjukkan minat pada layanan tertentu.
• Halaman layar ketiga untuk mendaftar webinar terkait minat pelanggan.

Kunci untuk mengukur kunjungan halaman dari SPA dengan benar adalah menghitung kunjungan halaman untuk setiap layar yang digunakan pengguna dan mendapatkan perujuk halaman yang tepat, 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 kunjungan halaman secara otomatis berdasarkan peristiwa histori browser.

Mengaktifkan pengukuran yang ditingkatkan di GA4

Untuk mengukur page_views secara otomatis berdasarkan histori browser:

1. Buka Google Analytics

2. Di Admin, pada bagian Pengumpulan dan modifikasi 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 browser.

   

5. Simpan perubahan.

Catatan: Jika Pengukuran yang Ditingkatkan diaktifkan untuk "Perubahan halaman berdasarkan peristiwa histori browser", Google Analytics akan otomatis memproses peristiwa histori (seperti yang digunakan di SPA) dan mengirim peristiwa page_view. Anda tidak perlu mengonfigurasi variabel atau pemicu histori tertentu di Google Tag Manager untuk tujuan mengirim kunjungan halaman ke GA4.

Menggunakan pemicu Google Tag Manager untuk peristiwa histori

Jika Anda perlu mengaktifkan jenis tag lain di Google Tag Manager berdasarkan perubahan histori browser, seperti untuk mengirim data ke platform pemasaran lain, Anda dapat menggunakan jenis pemicu "Perubahan Histori".

Saat mengonfigurasi tag atau variabel agar berfungsi dengan pemicu Perubahan Histori, pastikan Anda menggunakan Variabel Bawaan yang benar yang disediakan oleh Google Tag Manager:

• History New URL Fragment: Fragmen URL setelah peristiwa histori.
• History Old URL Fragment: Fragmen URL sebelum peristiwa histori.
• History New State: Objek status histori baru.
• History Old State: Objek status histori lama.
• History Source: Sumber peristiwa histori (seperti popstate, pushState, replaceState).

Variabel Bawaan ini mungkin perlu diaktifkan terlebih dahulu di Google Tag Manager di bagian Variabel > Konfigurasi.

Penting: Hindari penggunaan nama variabel yang tidak ditentukan. Misalnya, New History URL bukan variabel GTM standar dan akan menyebabkan error saat dipublikasikan. Selalu pilih dari Variabel Bawaan yang tersedia atau variabel yang Anda tentukan sendiri.

Untuk mengetahui detail selengkapnya tentang pemicu ini, lihat Pemicu perubahan histori.

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 diperbarui 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. 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 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 memperbarui DOM.

Rekomendasi: Pastikan framework SPA dan logika perutean Anda memperbarui bagian DOM yang relevan dengan konten halaman baru secara lengkap dan sinkron. 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 menerapkan pengukuran tayangan halaman virtual dengan benar di SPA, Google Analytics akan menangani peristiwa otomatis lainnya dengan tepat. Jika kunjungan halaman virtual tidak dicatat 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 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 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 lain, 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.