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) bawaan dan mengirim data ke properti Google Analytics 4 (GA4). Anda juga akan mempelajari cara mengambil data dari Google Ad Manager dan Google AdSense ke GA4, untuk menghubungkan 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 Anda.
• Mengukur Core Web Vitals halaman web di GA4.
• Siapkan tag peristiwa GA4 di Google Tag Manager.
• Pelajari data web vitals di dataLayer dan pelaporan GA4.
• Tautkan properti GA4 Anda dengan Google Ad Manager dan Google AdSense.
• Menghubungkan Core Web Vitals dan pendapatan iklan melalui dasbor Looker Studio.

Yang Anda butuhkan

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

2. Menambahkan template tag dari GitHub ke GTM

Mengukur Core Web Vitals melalui template tag GTM didasarkan pada library web-vitals. 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, lalu masukkan nama (mis. "Pengukuran Core Web Vitals").
3. Buka "Templates".
4. Di "Template Tag" klik tombol "Baru" tombol.

5. Klik menu Tindakan Lainnya dan pilih Impor.

6. Pilih file TPL yang telah didownload sebelumnya 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 memilih "Data Web" dari kotak "Kustom" bagian.
3. Langkah selanjutnya adalah mengkonfigurasi pengaturan yang berbeda. Semua setelan akan dijelaskan di repositori GitHub. Agar codelab ini dan dasbor akhir berfungsi, setelan berikut sudah cukup.

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

4. Menjelajahi data Web Vitals di dataLayer

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

1. Berinteraksilah dengan halaman dengan men-scroll dan mengklik elemen atau spasi putih.
2. Kemudian, beralihlah kembali ke tab dengan Tag Assistant dan mode pratinjau Google Tag Manager.
3. Di sebelah kiri, Anda akan melihat berbagai peristiwa didorong ke dataLayer.
4. Pertama, Anda harus memeriksa apakah tag Web Vitals diaktifkan pada pemicu kunjungan halaman yang Anda pilih.

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

6. Klik link pertama, lalu di sebelah kanan, buka "Panggilan API" , tempat Anda akan melihat data yang dikirim dari template tag ke dataLayer.

7. Periksa juga entri lain dari {i>web_vitals<i} peristiwa. Gunakan dokumentasi web-vitals.js sebagai referensi untuk berbagai jenis data.

5. Mengirim data Web Vitals ke GA4

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

• Membuat pemicu untuk tag GA4
• Buat variabel untuk mengambil data dari dataLayer
• Membuat tag peristiwa GA4

Membuat 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 daftar "Lainnya" bagian.
3. Tetapkan "web_vitals" di kolom Nama peristiwa, beri nama pemicu dan simpan.

Membuat variabel dataLayer

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

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

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

6. Buat "webVitalsData.rating".

7. Buat "webVitalsData.delta".

8. Anda akan memiliki variabel dataLayer buatan pengguna berikut:

Membuat 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 "Peristiwa Google Analytics: GA4" dari kolom "Google Analytics" bagian.
3. Masukkan ID Pengukuran di kolom yang sesuai.

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

5. Tambahkan variabel dataLayer lainnya sebagai parameter peristiwa seperti yang ditampilkan di screenshot. Pastikan juga untuk menambahkan parameter "event_category" dengan nilai seperti "Data Web" 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 "web_vitals" peristiwa kustom sebagai pemicu untuk tag GA4.
9. Tambahkan juga pengecualian pemicu jika diperlukan.

6. Memeriksa data di GA4

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

1. Berinteraksilah dengan halaman dengan men-scroll dan mengklik elemen atau spasi putih.
2. Kemudian, beralihlah kembali ke tab dengan Tag Assistant dan mode pratinjau Google Tag Manager.
3. Di sebelah kiri, klik masing-masing "web_vitals" dan memastikan tag Core Web Vitals GA4 diaktifkan.

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

5. Sekarang beralih ke properti GA4 Anda dan buka laporan Real-Time.
6. Di bagian "Jumlah peristiwa menurut nama peristiwa" Anda dapat memvalidasi jika peristiwa Core Web Vitals Anda berhasil dikumpulkan.

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

7. Publikasikan penyiapan Anda

Setelah berhasil menguji penyiapan, saatnya untuk memublikasikan ruang kerja Anda.

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

8. Menghubungkan GA4 dengan Google Ad Manager atau Google AdSense

Setelah mengumpulkan data Core Web Vitals di GA4, metrik terkait iklan juga harus tersedia di GA4 agar dasbor dapat berfungsi. Hubungkan Google Ad Manager dan Google AdSense dengan GA4 atau hanya salah satu solusi iklan berikut. Perhatikan bahwa Anda harus memiliki izin editor (atau yang 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 "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 "Penautan properti Google Analytics 4 baru".
8. Cari dan pilih properti GA4 yang ingin ditautkan.
9. Klik Simpan dan selesai.

Menghubungkan GA4 dengan Google AdSense

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

4. Cari dan pilih properti GA4 yang ingin ditautkan.
5. Klik "Buat tautan".

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 menghubungkan Core Web Vitals 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, agar Dasbor berfungsi dan menampilkan data dengan benar, data tersebut bergantung pada sintaksis dan konvensi penamaan dari codelab ini.

Halaman satu dasbor akan memberi Anda tampilan historis performa Core Web Vitals Anda:

Di halaman kedua, Anda dapat menghubungkan 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

• Memuat iklan secara efektif tanpa memengaruhi kecepatan halaman
• Mengoptimalkan Largest Contentful Paint (LCP)
• Mengoptimalkan Pergeseran Tata Letak Kumulatif
• Mengoptimalkan Interaksi ke Next Paint