Mengukur data kolom Core Web Vitals dengan metrik Iklan

1. Sebelum memulai

Dalam codelab ini, Anda akan mempelajari cara mengukur Core Web Vitals dengan template tag Google Tag Manager (GTM) yang telah dibuat sebelumnya dan mengirimkan data ke properti Google Analytics 4 (GA4). Anda juga akan mempelajari cara menarik data dari Google Ad Manager dan Google AdSense ke GA4, untuk mengorelasikan data kolom Core Web Vitals dan metrik performa iklan dengan Dasbor Looker Studio bawaan.

Yang akan Anda lakukan

• Impor dan siapkan tag ke penampung Google Tag Manager.
• Ukur Data Web Inti halaman web di GA4.
• Siapkan tag peristiwa GA4 di Google Tag Manager.
• Jelajahi data web vitals di dataLayer dan di pelaporan GA4.
• Tautkan properti GA4 Anda ke Google Ad Manager dan Google AdSense.
• Korelasikan Data Web Inti dan pendapatan iklan melalui dasbor Looker Studio.

Yang Anda butuhkan

• Akun Google Analytics dan properti web GA4 dengan akses editor.
• Akun dan penampung web Google Tag Manager dengan hak penerbitan.
• Jaringan Google Ad Manager dan/atau akun Google AdSense dengan akses admin.
• Akun Looker Studio.

2. Tambahkan template tag dari GitHub ke GTM

Pengukuran Data Web Inti melalui template tag GTM didasarkan pada web-vitals library. Pertama, kita akan mendownload template tag GTM.

1. Buka file template.tpl
2. Download file di komputer Anda

Sekarang, buka akun Google Tag Manager Anda.

1. Buka penampung web Anda.
2. Buat ruang kerja baru dan masukkan nama (misalnya, "Pengukuran Data Web Inti").
3. Buka "Template".
4. Di bagian "Template Tag", klik tombol "Baru".

5. Klik menu Tindakan Lainnya, lalu pilih Impor.

6. Pilih file TPL yang sebelumnya didownload dari komputer Anda.
7. Klik tombol "Simpan".

Anda telah menambahkan template tag ke penampung Google Tag Manager.

3. Menyiapkan tag Web Vitals

1. Di ruang kerja Google Tag Manager, buka "Tag".
2. Tambahkan tag Web Vitals dengan mengklik "Baru", lalu "Konfigurasi Tag", dan pilih tag "Web Vitals" dari bagian "Kustom".
3. Langkah berikutnya adalah mengonfigurasi berbagai setelan. Semua setelan dijelaskan di repositori GitHub. Untuk codelab ini dan agar dasbor akhir berfungsi, setelan berikut sudah memadai.

4. Terapkan salah satu pemicu tayangan halaman, misalnya pemicu "Semua Halaman".
5. Tambahkan juga pengecualian pemicu jika diperlukan.
6. Beri nama tag sebagai "Core Web Vitals - All Pages" dan simpan.

4. Menjelajahi data Web Vitals di dataLayer

Untuk melihat tag yang sedang beroperasi, beralihlah ke mode pratinjau Google Tag Manager. Tag Assistant akan terbuka dan akan meminta URL untuk melihat pratinjau dan men-debug penyiapan Anda. Berikan URL ke halaman dengan penampung Google Tag Manager yang diterapkan, lalu klik "Hubungkan". Tab terpisah dengan URL yang diberikan akan terbuka.

1. Berinteraksi dengan halaman dengan men-scroll dan mengklik elemen atau ruang kosong.
2. Kemudian, beralih kembali ke tab dengan Tag Assistant dan mode pratinjau Google Tag Manager.
3. Di sebelah kiri, Anda akan melihat berbagai peristiwa yang dimasukkan ke dalam dataLayer.
4. Pertama, Anda harus memeriksa apakah tag Web Vitals diaktifkan pada pemicu tayangan halaman yang Anda pilih.

5. Anda juga akan melihat tiga peristiwa "web_vitals", yang masing-masing mewakili satu Core Web Vitals: LCP, INP, dan CLS.

6. Klik yang pertama, lalu buka tab "API Call" di sebelah kanan. Di sana, Anda akan melihat data yang dikirim dari template tag ke dataLayer.

7. Periksa juga entri lain dari peristiwa "web_vitals". Gunakan dokumentasi web-vitals.js sebagai referensi untuk berbagai jenis data.

5. Mengirim data Data Web ke GA4

Untuk menarik data Core Web Vitals dari dataLayer dan mengirimkannya ke GA4, Anda harus:

• Buat pemicu untuk tag GA4
• Buat variabel untuk menarik data dari dataLayer
• Buat tag peristiwa GA4

Buat pemicu

1. Di ruang kerja Google Tag Manager, buka "Pemicu".
2. Tambahkan pemicu baru dengan mengklik "Baru", lalu "Konfigurasi Pemicu", dan pilih "Peristiwa Kustom" dari bagian "Lainnya".
3. Tetapkan "web_vitals" di kolom Nama peristiwa, beri nama pemicu, lalu simpan.

Membuat variabel dataLayer

1. Di ruang kerja Google Tag Manager, buka "Variabel".
2. Buat variabel buatan pengguna baru dari jenis "Variabel Lapisan Data".
3. Tetapkan "webVitalsData.name" di kolom nama variabel Lapisan Data, beri nama variabel (misalnya, "DLV - webVitalsData.name"), lalu simpan.

4. Ulangi langkah-langkah ini untuk empat variabel lapisan data wajib lainnya. Buat "webVitalsData.value".

5. Buat variabel lain dengan kolom nama "webVitalsData.id".

6. Buat "webVitalsData.rating".

7. Buat "webVitalsData.delta".

8. Anda akan mendapatkan variabel dataLayer buatan pengguna berikut:

Buat tag peristiwa GA4

Sebelum membuat tag peristiwa GA4, pastikan tag Google Anda sudah disiapkan.

1. Di ruang kerja Google Tag Manager, buka "Tag".
2. Tambahkan tag peristiwa GA4 dengan mengklik "Baru", lalu "Konfigurasi Tag", dan pilih tag "Google Analytics: Peristiwa GA4" dari bagian "Google Analytics".
3. Masukkan ID Pengukuran Anda di kolom yang sesuai.

4. Untuk kolom input "Nama Peristiwa", pilih variabel dataLayer "DLV - webVitalsData.name" dari langkah yang dibuat sebelumnya.

5. Tambahkan variabel dataLayer lainnya sebagai parameter peristiwa seperti yang ditunjukkan pada screenshot. Pastikan juga untuk menambahkan parameter "event_category" dengan nilai seperti "Web Vitals" untuk mengelompokkan peristiwa Core Web Vitals.

6. Daftarkan parameter peristiwa ini sebagai dimensi kustom di UI GA4.
7. Terapkan setelan tambahan berdasarkan persyaratan penyiapan GA4 Anda.
8. Tetapkan peristiwa kustom "web_vitals" sebagai pemicu untuk tag GA4.
9. Tambahkan juga pengecualian pemicu jika diperlukan.

6. Memeriksa data di GA4

Untuk memvalidasi aliran data ke GA4, beralihlah lagi ke mode pratinjau Google Tag Manager. Berikan URL ke Tag Assistant, lalu klik "Hubungkan".

1. Berinteraksi dengan halaman dengan men-scroll dan mengklik elemen atau ruang kosong.
2. Kemudian, beralih kembali ke tab dengan Tag Assistant dan mode pratinjau Google Tag Manager.
3. Di sebelah kiri, klik setiap entri "web_vitals" dan konfirmasi bahwa tag Data Web Inti GA4 diaktifkan.

4. Buka tag GA4 dengan mengklik kartu untuk memvalidasi bahwa data ditarik dengan benar dari dataLayer. Pastikan untuk menampilkan variabel sebagai nilai.

5. Sekarang, beralihlah ke properti GA4 Anda dan buka laporan Real-Time.
6. Di kartu "Jumlah peristiwa menurut nama peristiwa", Anda dapat memvalidasi apakah peristiwa Core Web Vitals Anda berhasil dikumpulkan.

7. Jika sejumlah besar data diproses dalam laporan real-time, peristiwa mungkin tidak mudah diidentifikasi. Dalam hal ini, gunakan laporan debugview, yang memungkinkan Anda melihat data untuk perangkat tertentu.

7. Memublikasikan penyiapan Anda

Setelah berhasil menguji penyiapan, saatnya memublikasikan ruang kerja.

1. Buka ruang kerja Google Tag Manager Anda.
2. Di kanan atas dalam UI, klik "Kirim".
3. Berikan nama versi dan deskripsi versi, lalu aktifkan penyiapan Anda dengan mengklik "Publikasikan".

8. Menghubungkan GA4 dengan Google Ad Manager atau Google AdSense

Setelah mengumpulkan data Data Web Inti di GA4, metrik terkait iklan juga harus tersedia di GA4 agar dasbor berfungsi. Hubungkan Google Ad Manager dan Google AdSense dengan GA4 atau hanya salah satu solusi iklan ini. Perhatikan bahwa Anda harus memiliki izin editor (atau lebih tinggi) di GA4 dan izin administrator di Google Ad Manager dan Google AdSense untuk penautan.

Menghubungkan GA4 dengan Google Ad Manager

1. Buka jaringan Google Ad Manager Anda.
2. Klik "Admin" -> "Setelan global" -> "Setelan jaringan".
3. Di bagian "Setelan laporan", aktifkan "Laporan properti Google Analytics 4 di pelaporan Ad Manager".

4. Tinjau persyaratan dan ketentuan, lalu klik "Konfirmasi".
5. Simpan pembaruan.
6. Buka "Admin" -> "Akun tertaut" -> "Google Analytics 4".
7. Klik "Link properti Google Analytics 4 baru".
8. Temukan dan pilih properti GA4 yang ingin Anda tautkan.
9. Klik Simpan untuk menyelesaikannya.

Menghubungkan GA4 dengan Google AdSense

1. Buka akun Google AdSense Anda.
2. Klik "Akun" -> "Akses dan otorisasi" -> "Integrasi Google Analytics".
3. Klik "+Link baru".

4. Temukan dan pilih properti GA4 yang ingin Anda tautkan.
5. Klik "Buat link".

9. Memvisualisasikan data dengan Looker Studio

Untuk presentasi visual data Core Web Vitals bersama dengan metrik iklan, langkah ini melibatkan penyiapan Dasbor Looker Studio. Ikuti langkah-langkah berikut untuk mengorelasikan Data Web Inti dan pendapatan iklan.

1. Buka Template Dasbor Looker Studio ini
2. Salin dasbor.
3. Perbarui sumber data dengan memilih properti GA4 Anda dari daftar dropdown.
4. Selesai

Perlu diperhatikan bahwa agar Dasbor berfungsi dan menampilkan data dengan benar, data mengandalkan sintaksis dan konvensi penamaan dari codelab ini.

Halaman pertama dasbor akan memberi Anda tampilan historis performa Data Web Inti Anda:

Di halaman kedua, Anda dapat mengorelasikan Core Web Vitals dengan pendapatan iklan dari Google Ad Manager dan/atau Google AdSense:

Halaman ketiga memberi Anda kemampuan untuk menganalisis performa Core Web Vitals di tingkat jalur halaman bersama dengan metrik terkait iklan:

10. Kesimpulan

Selamat! Anda telah mempelajari cara mengukur dan melaporkan Core Web Vitals dengan GA4 dan metrik performa iklan dari Google Ad Manager dan Google AdSense.

Pelajari lebih lanjut

• Mengorelasikan Data Web Inti dan pendapatan iklan dengan alat Google
• Memuat iklan secara efektif tanpa memengaruhi kecepatan halaman
• Mengoptimalkan Largest Contentful Paint (LCP)
• Mengoptimalkan Pergeseran Tata Letak Kumulatif (CLS)
• Mengoptimalkan Interaction to Next Paint