วัดข้อมูลภาคสนามของ 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 และคอนเทนเนอร์ฝั่งเว็บที่มีสิทธิ์เผยแพร่
• เครือข่าย Ad Manager ของ Google และ/หรือบัญชี 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 ใน dataLayer

หากต้องการดูแท็กทํางาน ให้เปลี่ยนไปใช้โหมดแสดงตัวอย่างของ 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" ในช่องชื่อเหตุการณ์ ตั้งชื่อทริกเกอร์ และบันทึก

สร้างตัวแปรชั้นข้อมูล

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" แต่ละรายการ และยืนยันว่าแท็ก Core Web Vitals ของ GA4 ทํางาน

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

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

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

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. ไปที่เครือข่าย Ad Manager ของ Google
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

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

• การเชื่อมโยง Core Web Vitals และรายได้จากโฆษณากับเครื่องมือของ Google
• การโหลดโฆษณาอย่างมีประสิทธิภาพโดยไม่ส่งผลต่อความเร็วของหน้าเว็บ
• เพิ่มประสิทธิภาพ Largest Contentful Paint
• เพิ่มประสิทธิภาพ Cumulative Layout Shift
• เพิ่มประสิทธิภาพ Interaction to Next Paint