วัดข้อมูลภาคสนามของ Core Web Vitals ด้วยเมตริกโฆษณา

1. ก่อนเริ่มต้น

ใน Codelab นี้ คุณจะได้เรียนรู้วิธีวัด Core Web Vitals ด้วยเทมเพลตแท็ก Google Tag Manager (GTM) ที่สร้างไว้ล่วงหน้าและการส่งข้อมูลไปยังพร็อพเพอร์ตี้ Google Analytics 4 (GA4) คุณจะได้เรียนรู้วิธีดึงข้อมูลจาก Google Ad Manager และ Google AdSense ไปยัง GA4 เพื่อเชื่อมโยงข้อมูลฟิลด์ Core Web Vitals และเมตริกประสิทธิภาพโฆษณากับแดชบอร์ด Looker Studio ที่สร้างไว้ล่วงหน้า

สิ่งที่คุณต้องทำ

• นำเข้าและตั้งค่าแท็กในคอนเทนเนอร์ Google Tag Manager
• วัด Core Web Vitals ของหน้าเว็บใน GA4
• ตั้งค่าแท็กเหตุการณ์ GA4 ใน Google Tag Manager
• สำรวจข้อมูล Web Vitals ในการรายงานของ dataLayer และในการรายงาน GA4
• ลิงก์พร็อพเพอร์ตี้ GA4 กับ Google Ad Manager และ Google AdSense
• เชื่อมโยง Core Web Vitals กับรายได้จากโฆษณาผ่านแดชบอร์ด Looker Studio

สิ่งที่ต้องมี

• บัญชี Google Analytics และเว็บพร็อพเพอร์ตี้ GA4 ที่มีสิทธิ์เข้าถึงระดับผู้แก้ไข
• บัญชี Google Tag Manager และคอนเทนเนอร์เว็บที่มีสิทธิ์การเผยแพร่
• เครือข่าย Google Ad Manager และ/หรือบัญชี Google AdSense ที่มีสิทธิ์เข้าถึงระดับผู้ดูแลระบบ
• บัญชี Looker Studio

2. เพิ่มเทมเพลตแท็กจาก GitHub ไปยัง GTM

การวัด Core Web Vitals ผ่านเทมเพลตแท็ก GTM จะอิงตามไลบรารี web-vitals เราจะดาวน์โหลดเทมเพลตแท็ก GTM ก่อน

1. เปิดไฟล์ template.tpl
2. ดาวน์โหลดไฟล์ลงในคอมพิวเตอร์

ตอนนี้ ให้ไปที่บัญชี Google Tag Manager

1. เปิดคอนเทนเนอร์เว็บ
2. สร้างพื้นที่ทำงานใหม่ แล้วป้อนชื่อ (เช่น "การวัด Core Web Vitals")
3. ไปที่ "เทมเพลต"
4. ใน "เทมเพลตแท็ก" ให้คลิกส่วน "ใหม่"

5. คลิกเมนู การทำงานเพิ่มเติม และเลือก นำเข้า

6. เลือกไฟล์ TPL ที่ดาวน์โหลดไว้ก่อนหน้านี้จากคอมพิวเตอร์ของคุณ
7. คลิกปุ่ม "บันทึก"

คุณได้เพิ่มเทมเพลตแท็กในคอนเทนเนอร์ Google Tag Manager

3. ตั้งค่าแท็ก Web Vitals

1. ไปที่ "แท็ก" ในพื้นที่ทํางานของ Google Tag Manager
2. เพิ่มแท็ก Web Vitals โดยคลิก "ใหม่" แล้วคลิก "การกําหนดค่าแท็ก" แล้วเลือก "Web Vitals" จากแท็บ "กำหนดเอง"
3. ขั้นตอนถัดไปคือ กำหนดการตั้งค่าต่างๆ ดูคำอธิบายการตั้งค่าทั้งหมดได้ในที่เก็บของ GitHub เพื่อให้ Codelab นี้และแดชบอร์ดสุดท้ายทำงานการตั้งค่าต่อไปนี้ถือว่าเพียงพอแล้ว

4. ใช้ทริกเกอร์การดูหน้าเว็บรายการใดรายการหนึ่ง เช่น "ทุกหน้า" ทริกเกอร์
5. หากจำเป็น ให้เพิ่มข้อยกเว้นทริกเกอร์ด้วย
6. ตั้งชื่อแท็กเป็น "Core Web Vitals - ทุกหน้า" และบันทึกไว้

4. สำรวจข้อมูล Web Vitals ในชั้นข้อมูล

หากต้องการดูการทำงานของแท็ก ให้เปลี่ยนเป็นโหมดแสดงตัวอย่างของ Google Tag Manager ผู้ช่วยแท็กจะเปิดขึ้นและจะขอ URL เพื่อแสดงตัวอย่างและแก้ไขข้อบกพร่องของการตั้งค่า ระบุ URL ไปยังหน้าที่ใช้งานคอนเทนเนอร์ Google Tag Manager แล้วคลิก "เชื่อมต่อ" แท็บแยกต่างหากที่มี URL ที่ระบุจะเปิดขึ้น

1. โต้ตอบกับหน้าเว็บโดยการเลื่อนและคลิกองค์ประกอบหรือการเว้นวรรค
2. จากนั้นสลับกลับไปที่แท็บที่มีผู้ช่วยแท็กและโหมดแสดงตัวอย่างของ Google Tag Manager
3. ทางด้านซ้ายคุณจะเห็นเหตุการณ์ต่างๆ ที่พุชเข้าไปใน dataLayer
4. ก่อนอื่น คุณควรตรวจสอบว่าแท็ก Web Vitals เริ่มทำงานในทริกเกอร์การดูหน้าเว็บที่คุณเลือกหรือไม่

5. คุณจะเห็น "web_vitals" 3 สีด้วย โดยแต่ละรายการเป็นตัวแทนของ Core Web Vitals 1 รายการ ได้แก่ LCP, INP และ CLS

6. คลิกรายการแรกและทางด้านขวาจะเปิด "การเรียก API" ซึ่งคุณจะเห็นข้อมูลที่พุชจากเทมเพลตแท็กไปยัง dataLayer

7. รวมถึงรายการอื่นๆ ของ "web_vitals" กิจกรรม ใช้เอกสารประกอบ web-vitals.js เป็นข้อมูลอ้างอิงสำหรับข้อมูลประเภทต่างๆ

5. ส่งข้อมูล Web Vitals ไปยัง GA4

หากต้องการดึงข้อมูล Core Web Vitals จาก dataLayer และส่งไปยัง GA4 คุณต้องมีคุณสมบัติดังนี้

• สร้างทริกเกอร์สําหรับแท็ก GA4
• สร้างตัวแปรเพื่อดึงข้อมูลจาก dataLayer
• สร้างแท็กเหตุการณ์ GA4

สร้างทริกเกอร์

1. ไปที่ "ทริกเกอร์" ในพื้นที่ทํางานของ Google Tag Manager
2. เพิ่มทริกเกอร์ใหม่โดยคลิก "ใหม่" แล้วคลิก "การกําหนดค่าทริกเกอร์" และเลือก "เหตุการณ์ที่กำหนดเอง" จากรายการ "อื่นๆ"
3. ตั้งค่า "web_vitals" ในฟิลด์ชื่อเหตุการณ์ ให้ตั้งชื่อทริกเกอร์และบันทึก

สร้างตัวแปร dataLayer

1. ไปที่ "ตัวแปร" ในพื้นที่ทํางานของ Google Tag Manager
2. สร้างตัวแปรที่กำหนดโดยผู้ใช้ใหม่จากประเภท "ตัวแปรชั้นข้อมูล"
3. ตั้งค่า "webVitalsData.name" ในฟิลด์ชื่อตัวแปรชั้นข้อมูล ให้ตั้งชื่อตัวแปร (เช่น "DLV - webVitalsData.name") แล้วบันทึก

4. ทำขั้นตอนเหล่านี้ซ้ำกับตัวแปรชั้นข้อมูลอีก 4 รายการที่จำเป็น สร้าง "webVitalsData.value"

5. สร้างตัวแปรอื่นด้วยช่องชื่อ "webVitalsData.id"

6. สร้าง "webVitalsData.rating"

7. สร้าง "webVitalsData.delta"

8. คุณควรได้ตัวแปร dataLayer ที่กำหนดโดยผู้ใช้ต่อไปนี้

สร้างแท็กเหตุการณ์ GA4

ก่อนสร้างแท็กเหตุการณ์ GA4 โปรดตรวจสอบว่าตั้งค่าแท็ก Google แล้ว

1. ไปที่ "แท็ก" ในพื้นที่ทํางานของ Google Tag Manager
2. เพิ่มแท็กเหตุการณ์ GA4 โดยคลิก "ใหม่" แล้วคลิก "การกําหนดค่าแท็ก" แล้วเลือก "Google Analytics: เหตุการณ์ GA4" จากแท็ก "Google Analytics"
3. ป้อนรหัสการวัดในช่องที่เกี่ยวข้อง

4. สำหรับ "ชื่อกิจกรรม" ช่องป้อนข้อมูล ให้เลือกตัวแปร dataLayer "DLV - webVitalsData.name" จากขั้นตอนที่สร้างไว้ก่อนหน้านี้

5. เพิ่มตัวแปร dataLayer อื่นๆ เป็นพารามิเตอร์เหตุการณ์ดังที่แสดงในภาพหน้าจอ นอกจากนี้ อย่าลืมเพิ่มพารามิเตอร์ "event_category" ที่มีค่าอย่างเช่น "Web Vitals" เพื่อจัดกลุ่มเหตุการณ์ Core Web Vitals

6. บันทึกพารามิเตอร์เหตุการณ์เหล่านี้เป็นมิติข้อมูลที่กําหนดเองใน UI ของ GA4
7. ใช้การตั้งค่าเพิ่มเติมตามข้อกำหนดการตั้งค่า GA4
8. ตั้งค่า "web_vitals" เป็นทริกเกอร์สําหรับแท็ก GA4
9. หากจำเป็น ให้เพิ่มข้อยกเว้นทริกเกอร์ด้วย

6. ตรวจสอบข้อมูลใน GA4

หากต้องการตรวจสอบโฟลว์ข้อมูลไปยัง GA4 ให้เปลี่ยนเป็นโหมดแสดงตัวอย่างของ Google Tag Manager อีกครั้ง ระบุ URL ให้ผู้ช่วยแท็ก แล้วคลิก "เชื่อมต่อ"

1. โต้ตอบกับหน้าเว็บโดยการเลื่อนและคลิกองค์ประกอบหรือการเว้นวรรค
2. จากนั้นสลับกลับไปที่แท็บที่มีผู้ช่วยแท็กและโหมดแสดงตัวอย่างของ Google Tag Manager
3. ทางด้านซ้าย ให้คลิก "web_vitals" แต่ละรายการ และยืนยันว่าแท็ก GA4 Core Web Vitals เริ่มทำงานแล้ว

4. เปิดแท็ก GA4 โดยคลิกที่การ์ดเพื่อตรวจสอบความถูกต้อง ว่าได้ดึงข้อมูลจาก dataLayer อย่างถูกต้อง อย่าลืมแสดงตัวแปรเป็นค่า

5. ต่อไปให้เปลี่ยนไปใช้พร็อพเพอร์ตี้ GA4 แล้วเปิดรายงานแบบเรียลไทม์
6. ใน "จํานวนเหตุการณ์ตามชื่อเหตุการณ์" คุณจะตรวจสอบได้ว่ารวบรวมเหตุการณ์ Core Web Vitals ได้สำเร็จหรือไม่

7. หากมีการประมวลผลข้อมูลจำนวนมากในรายงานแบบเรียลไทม์ อาจเป็นไปได้ว่าเหตุการณ์นั้นไม่สามารถระบุได้ง่ายนัก ในกรณีดังกล่าว ให้ใช้รายงานมุมมองการแก้ไขข้อบกพร่องซึ่งจะช่วยให้คุณเห็นข้อมูลของอุปกรณ์ที่ต้องการ

7. เผยแพร่การตั้งค่า

เมื่อทดสอบการตั้งค่าเรียบร้อยแล้ว ก็ถึงเวลาเผยแพร่พื้นที่ทำงาน

1. เปิดพื้นที่ทํางานของ Google Tag Manager
2. ที่ด้านขวาบนใน UI ให้คลิก "ส่ง"
3. ระบุชื่อเวอร์ชันและคำอธิบายเวอร์ชัน แล้วนำการตั้งค่าของคุณไปใช้จริงโดยคลิก "นำไปใช้จริง"

8. เชื่อมต่อ GA4 กับ Google Ad Manager หรือ Google AdSense

หลังจากรวบรวมข้อมูล Core Web Vitals ใน GA4 แล้ว เมตริกที่เกี่ยวข้องกับโฆษณาจะต้องพร้อมใช้งานใน GA4 เพื่อให้แดชบอร์ดทำงานได้ เชื่อมต่อ Google Ad Manager และ Google AdSense กับ GA4 หรือเพียงโซลูชันใดโซลูชันหนึ่งเหล่านี้ โปรดทราบว่าคุณต้องมีสิทธิ์ผู้แก้ไข (หรือสูงกว่า) ใน GA4 และมีสิทธิ์ระดับผู้ดูแลระบบใน Google Ad Manager และ Google AdSense สําหรับการลิงก์

เชื่อมต่อ GA4 กับ Google Ad Manager

1. ไปที่เครือข่าย Google Ad Manager ของคุณ
2. คลิก "ผู้ดูแลระบบ" -> "การตั้งค่าส่วนกลาง" -> "การตั้งค่าเครือข่าย"
3. ใน "การตั้งค่ารายงาน" เปิดใช้ "รายงานพร็อพเพอร์ตี้ Google Analytics 4 ในการรายงานของ Ad Manager"

4. อ่านข้อกำหนดและเงื่อนไข แล้วคลิก "ยืนยัน"
5. บันทึกการอัปเดต
6. ไปที่ "ผู้ดูแลระบบ" -> "บัญชีที่ลิงก์" -> "Google Analytics 4"
7. คลิก "ลิงก์พร็อพเพอร์ตี้ Google Analytics 4 ใหม่"
8. ค้นหาและเลือกพร็อพเพอร์ตี้ GA4 ที่ต้องการลิงก์
9. คลิก บันทึก เท่านี้ก็เรียบร้อย

เชื่อมต่อ GA4 กับ Google AdSense

1. ไปที่บัญชี Google AdSense
2. คลิก "บัญชี" -> "การเข้าถึงและการให้สิทธิ์" -> "การผสานรวม Google Analytics"
3. คลิก "+ลิงก์ใหม่"

4. ค้นหาและเลือกพร็อพเพอร์ตี้ GA4 ที่ต้องการลิงก์
5. คลิก "สร้างลิงก์"

9. แสดงข้อมูลออกมาเป็นภาพด้วย Looker Studio

หากต้องการนำเสนอภาพของข้อมูล Core Web Vitals ร่วมกับเมตริกโฆษณา ขั้นตอนนี้จะเกี่ยวข้องกับการตั้งค่าแดชบอร์ด Looker Studio โปรดทำตามขั้นตอนเหล่านี้เพื่อเชื่อมโยง Core Web Vitals กับรายได้จากโฆษณา

1. เปิดเทมเพลตแดชบอร์ด Looker Studio นี้
2. คัดลอกหน้าแดชบอร์ด
3. อัปเดตแหล่งข้อมูลโดยเลือกพร็อพเพอร์ตี้ GA4 จากรายการแบบเลื่อนลง
4. เสร็จสิ้น

โปรดทราบว่าเพื่อให้หน้าแดชบอร์ดทำงานและแสดงข้อมูลได้อย่างถูกต้อง ข้อมูลดังกล่าวจะต้องใช้ไวยากรณ์และแบบแผนการตั้งชื่อจาก Codelab นี้

หน้าใดหน้าหนึ่งของแดชบอร์ดจะแสดงมุมมองที่ผ่านมาเกี่ยวกับประสิทธิภาพของ Core Web Vitals

ในหน้าที่ 2 คุณจะเชื่อมโยง Core Web Vitals กับรายได้จากโฆษณาจาก Google Ad Manager และ/หรือ Google AdSense ได้โดยทำดังนี้

หน้าที่ 3 จะให้คุณวิเคราะห์ประสิทธิภาพของ Core Web Vitals ในระดับเส้นทางหน้าเว็บร่วมกับเมตริกที่เกี่ยวข้องกับโฆษณาได้ ดังนี้

10. บทสรุป

ยินดีด้วย คุณได้เรียนรู้วิธีวัดและรายงาน Core Web Vitals ด้วย GA4 และเมตริกประสิทธิภาพโฆษณาจาก Google Ad Manager และ Google AdSense

ดูข้อมูลเพิ่มเติม

• การโหลดโฆษณาอย่างมีประสิทธิภาพโดยไม่ส่งผลกระทบต่อความเร็วหน้าเว็บ
• เพิ่มประสิทธิภาพ Largest Contentful Paint
• เพิ่มประสิทธิภาพ Cumulative Layout Shift
• เพิ่มประสิทธิภาพการโต้ตอบกับ Next Paint