Mengukur aplikasi web satu halaman dengan Google Tag Manager

Tutorial ini menunjukkan cara menyiapkan pengukuran Google Analytics untuk aplikasi halaman tunggal (SPA) menggunakan Google Tag Manager. Anda akan mempelajari cara mengonfigurasi properti Google Analytics, mengaktifkan variabel GTM yang diperlukan, dan membuat tag yang dipicu saat histori berubah.

Sebelum memulai

Tutorial ini mengasumsikan bahwa Anda telah:

• Akun dan properti Google Analytics.
• Penampung Google Tag Manager yang diinstal di SPA Anda.
• Peran Editor (atau yang lebih tinggi) untuk Google Analytics dan Google Tag Manager.

Langkah 1: Siapkan aliran data GA4

Untuk melacak peristiwa page_view secara manual di SPA, Anda harus menonaktifkan tayangan halaman berbasis histori otomatis di GA4 terlebih dahulu untuk menghindari penghitungan ganda.

1. Buka Google Analytics.
2. Di Admin, klik Aliran data pada bagian Pengumpulan dan perubahan data.
3. Pilih aliran data web Anda.
4. Di bagian Pengukuran yang ditingkatkan, klik ikon setelan .
5. Di bagian Tayangan halaman > Tampilkan setelan lanjutan, hapus Perubahan halaman berdasarkan peristiwa histori browser.
6. Klik Simpan.

Langkah 2: Aktifkan variabel Histori bawaan di Tag Manager

Untuk menggunakan pemicu atau variabel berbasis histori di GTM, Anda harus mengaktifkan variabel Histori bawaan terlebih dahulu.

1. Buka Google Tag Manager.
2. Di ruang kerja Anda, buka Variabel.
3. Di bagian Variabel Built-In, klik Konfigurasikan.
4. Di bagian History, aktifkan variabel berikut:
   • History New URL Fragment
   • History Old URL Fragment
   • History New State
   • History Old State
   • History Source
5. Tutup panel konfigurasi.

Catatan: Variabel ini tidak benar-benar diperlukan untuk penyiapan tayangan halaman dasar. Parameter ini hanya digunakan jika Anda ingin memfilter pemicu atau menerapkan logika kustom, seperti logika halaman sebelumnya yang disebutkan dalam catatan akhir halaman ini.

Catatan: Beberapa dokumentasi lama mungkin merujuk ke Old History URL atau New History URL. Ini bukan variabel bawaan standar. Gunakan variabel yang tercantum saja.

Langkah 3: Buat pemicu Perubahan Histori

Selanjutnya, buat pemicu yang diaktifkan setiap kali peristiwa perubahan histori (seperti pushState atau replaceState) terjadi di SPA Anda.

1. Di ruang kerja Tag Manager Anda, buka menu Pemicu.
2. Klik Baru.
3. Di Konfigurasi Pemicu, pilih pemicu Perubahan Histori.
4. (Opsional) Jika Anda hanya ingin melacak perubahan layar tertentu, perbarui pemicu agar diaktifkan pada Beberapa Perubahan Histori.
5. Beri nama pemicu (misalnya, "Perubahan Histori") lalu klik Simpan.

Langkah 4: Buat tag Google

Sekarang, buat tag Google yang memperbarui parameter page_location setiap kali perubahan histori terjadi.

1. Di menu Tag, klik Baru.
2. Di Konfigurasi Tag, pilih Tag Google.
3. Masukkan ID Tag Anda (ID yang sama dengan yang digunakan untuk tag Google awal Anda).

4. Di bagian Setelan konfigurasi, tambahkan parameter berikut:

   • page_location: {{Page URL}}
   • page_title: {{Page Title}}
   • update: true
   Catatan: Parameter update menggabungkan nilai konfigurasi ke dalam konfigurasi tag yang ada dan menekan peristiwa page_view duplikat langsung. page_referrer tidak disertakan di sini karena Google Analytics otomatis melacak perujuk eksternal asli pada pemuatan halaman awal, dan menghilangkannya memungkinkan Google Analytics otomatis mengisi URL halaman virtual sebelumnya sebagai perujuk untuk jalur navigasi dalam laporan Anda.

5. Beri nama tag (misalnya, "Tag Google - Pembaruan SPA") lalu klik Simpan.

   Catatan: Jangan tambahkan pemicu di bagian Pemicuan untuk tag Google ini. Tag ini dipicu sebagai tag penyiapan menggunakan pengurutan tag di Langkah 5.

Langkah 5: Kirim peristiwa page_view virtual

Terakhir, buat tag Peristiwa GA4 untuk mengirim peristiwa page_view yang sebenarnya untuk setiap pemuatan halaman virtual.

1. Klik Baru di menu Tag.
2. Di Konfigurasi Tag, pilih Google Analytics: Peristiwa GA4.
3. Masukkan ID Pengukuran Anda.
4. Tetapkan Nama Peristiwa ke page_view.
5. Di bagian Setelan Lanjutan > Pengurutan Tag, pilih Aktifkan tag sebelum Peristiwa GA4 - Kunjungan Halaman Virtual diaktifkan, lalu pilih tag Tag Google - Pembaruan SPA yang Anda buat di Langkah 4.
6. Di bagian Pemicuan, pilih pemicu Perubahan Histori yang Anda buat di Langkah 3.
7. Beri nama tag (misalnya, "Peristiwa GA4 - Page View Virtual") dan klik Simpan.

Langkah 6: Verifikasi penyiapan Anda

Untuk memastikan tayangan halaman virtual Anda dicatat dengan benar:

1. Di Tag Manager, klik Pratinjau untuk masuk ke mode Pratinjau.
2. Menjelajahi SPA Anda.
3. Di DebugView Google Analytics, verifikasi bahwa peristiwa page_view baru muncul untuk setiap perubahan layar.
4. Periksa apakah nilai page_location sesuai dengan harapan Anda.

Catatan: Menggunakan {{Referrer}} standar akan merekam sumber awal yang mengarahkan pengguna ke situs Anda. Untuk melacak halaman virtual sebelumnya dalam SPA sebagai perujuk, Anda harus menerapkan variabel GTM kustom untuk menyimpan lokasi halaman sebelumnya.