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.
• Ukur Data Web Inti 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 "Template".
4. Di bagian "Template Tag", klik tombol "Baru".

5. Klik menu Tindakan Lainnya, lalu pilih Impor.

6. Pilih file TPL yang 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 berikutnya adalah mengonfigurasi berbagai setelan. Semua setelan 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 "Data Web Inti - Semua Halaman" dan simpan.

4. Menjelajahi data Data Web 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, beralih 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 Data Web diaktifkan pada pemicu kunjungan 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 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
• Membuat 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 bagian "Lainnya".
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 (misalnya, "DLV - webVitalsData.name"), lalu 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 mendapatkan 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 tag "Google Analytics: Peristiwa GA4" dari bagian "Google Analytics".
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 ditunjukkan pada 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 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 kembali 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 pastikan tag Data Web Inti 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 data dalam jumlah besar 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. Publikasikan penyiapan Anda

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

1. Buka ruang kerja Google Tag Manager.
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 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" -&gt; "Setelan global" -&gt; "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. Temukan dan pilih properti GA4 yang ingin ditautkan.
9. Klik Simpan untuk menyelesaikannya.

Menghubungkan GA4 dengan Google AdSense

1. Buka akun Google AdSense Anda.
2. Klik "Akun" -&gt; "Akses dan otorisasi" -&gt; "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 Data Web Inti beserta 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 pertama dasbor akan memberi Anda tampilan historis performa Data Web Inti:

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

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

10. Kesimpulan

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

Pelajari lebih lanjut

• Mengaitkan Core Web Vitals 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