หลังจากที่เราสร้าง Tags, Triggers และ Variables กันไปแล้วในบทที่ผ่านมา สิ่งสำคัญที่สุดก่อนที่เราจะกด Publish หรือใช้งานจริง คือการ "ตรวจสอบ" ครับ เพราะในโลกของ Tracking ถ้าเราติดพลาด ข้อมูลที่ได้มาก็จะผิดเพี้ยนไปหมด บทนี้ผมจะพาเพื่อน ๆ ไปใช้เครื่องมือที่ชื่อว่า Tag Assistant เพื่อ Debug งานของเราให้เป๊ะเหมือนมือโปรครับ
ทำไมต้อง Debug ทุกครั้งก่อนใช้งาน?
การ Tracking มีโอกาสพลาดได้หลายจุดครับ เช่น สะกดชื่อปุ่มผิด, เลือก Trigger ผิดประเภท หรือใส่เลข ID ของ GA4 ไม่ครบ การใช้ Preview Mode จะช่วยให้เราเห็น "ความจริง" ว่า:
- Tag ไหนทำงานบ้าง (Tags Fired)
- Tag ไหนไม่ทำงาน (Tags Not Fired) และ "ทำไม" ถึงไม่ทำงาน
- ข้อมูลใน Data Layer มีอะไรให้เราหยิบมาใช้บ้าง
ขั้นตอนการใช้งาน Preview Mode (Step-by-Step)
- กดปุ่ม Preview: ที่มุมขวาบนของหน้าจอ GTM (ข้างๆ ปุ่ม Submit)
คลิกที่ปุ่ม Preview เพื่อเริ่มใช้งาน Tag Assistant
- ใส่ URL: ระบบจะเปิดหน้าต่างใหม่ ให้เราใส่ URL ของเว็บไซต์ที่ต้องการทดสอบ แล้วกด Connect
- ตรวจสอบสถานะ: หน้าเว็บของคุณจะเปิดขึ้นมา พร้อมมีหน้าต่างเล็กๆ มุมล่างเขียนว่า
Tag Assistant Connectedแปลว่าเชื่อมต่อสำเร็จแล้วครับ
หน้าจอแสดงสถานะการเชื่อมต่อ Preview Mode เพื่อเริ่ม Debug
แต่ถ้ากด Connect แล้วเชื่อมต่อไม่สำเร็จ หน้าต่าง Tag Assistant จะแจ้งเตือนว่า "Not Connected" หรือ "Timeout" แบบนี้ครับ
สาเหตุหลักที่พบบ่อย:
* AdBlocker: เช็คดูว่าเปิดตัวบล็อกโฆษณาไว้ไหม ถ้าเปิดให้ปิดก่อนครับ (เจอบ่อยสุด)
* No GTM Code: ลืมติดตั้งโค้ด GTM บนหน้าเว็บ หรือติดตั้งผิด Container ID
* Slow Network: อินเทอร์เน็ตช้าเกินไปจนระบบตัดการเชื่อมต่อ
หน้าจอแสดงสถานะเมื่อเชื่อมต่อ Preview Mode ไม่สำเร็จ (Not Connected)
วิธีอ่านค่าในหน้า Tag Assistant
หน้าต่างนี้แหละครับคือ "หัวใจ" ของการ Debug ให้เพื่อน ๆ สังเกตเมนูด้านซ้ายและข้อมูลตรงกลางดังนี้ครับ:
1. แถบเหตุการณ์ (Summary / Events)
ด้านซ้ายมือจะแสดง Timeline ทุกอย่างที่เกิดขึ้นบนหน้าเว็บ เช่น:
Container Loaded: เมื่อ GTM โหลดเสร็จ (Tag พวก Pageview ควรจะทำงานตรงนี้)Click: เมื่อมีการคลิกที่ส่วนใดส่วนหนึ่งScroll: เมื่อมีการเลื่อนหน้าจอ
2. Tags Fired vs Not Fired
- Tags Fired: คือ Tag ที่ทำงานสำเร็จและส่งข้อมูลออกไปแล้ว (เช่น GA4 Config)
- Tags Not Fired: คือ Tag ที่เราตั้งค่าไว้แต่เงื่อนไขยังไม่ครบ (Trigger ยังไม่ทำงาน)
Pro Tip: ถ้า Tag ของเพื่อน ๆ ไปค้างอยู่ที่ "Not Fired" ทั้งที่คลิกปุ่มไปแล้ว ให้ลองคลิกเข้าไปดูใน Tag นั้นครับ GTM จะบอกเป็นเครื่องหมาย
Xสีแดงว่าเงื่อนไขข้อไหนที่ไม่ผ่าน — Son, webmastery.dev
การเช็คค่า Variables และ Data Layer (เจาะลึก)
สำหรับสาย Web Dev ที่ต้องการความชัวร์ หรืออยากรู้ว่าค่าที่ GTM จับได้ในขณะนั้นคืออะไร เราสามารถเช็คได้ดังนี้ครับ:
- Tab Variables: จะโชว์ค่าทั้งหมดที่ GTM จับได้ใน Event นั้นๆ เช่น
Click Classes,Page URL,Click Text - Tab Data Layer: จะโชว์โครงสร้าง JSON ของข้อมูลที่ถูกผลักเข้ามา (มีประโยชน์มากเวลาทำ E-commerce Tracking)
ตัวอย่างการตรวจสอบผ่าน Code (Console)
หากเพื่อน ๆ อยากเช็คผ่าน Browser Console ก็สามารถพิมพ์คำสั่งนี้เพื่อดูสถานะเบื้องต้นได้ครับ:
// พิมพ์ใน Console เพื่อดูว่ามีข้อมูลอะไรใน dataLayer บ้าง
console.table(window.dataLayer);
เมื่อเพื่อน ๆ พิมพ์คำสั่งด้านบนในหน้า Inspect (Console) ของ Browser สิ่งที่เห็นคือตารางที่แจกแจงทุก Event ที่เกิดขึ้นบนหน้าเว็บครับ โดยให้สังเกต 2 ช่องหลักคือ:
- Event: ชื่อของเหตุการณ์ (เช่น
gtm.click,gtm.js) - Value: ข้อมูล Object ที่ถูกส่งมาในขณะนั้น
วิธีดู: หากเพื่อน ๆ คลิกปุ่มแล้วไม่มี Event ใหม่โผล่ขึ้นมาในตารางนี้ หรือในหน้า Tag Assistant ไม่ขยับเลย ให้สันนิษฐานไว้ก่อนว่า ตัวแปร (Variables) ที่เกี่ยวข้องกับการคลิกอาจจะยังไม่ได้ถูก "เปิดใช้งาน" (Enable) ใน GTM ครับ (เดี๋ยวเราจะไปเปิดกันในบทถัดไป)
Checklist: 3 สิ่งที่ต้องเช็คก่อนกด Publish
เพื่อให้มั่นใจว่าข้อมูลจะไม่พลาด ผมแนะนำให้เช็คตามตารางนี้ทุกครั้งครับ:
| จุดที่ต้องเช็ค | วิธีตรวจสอบ | ผลลัพธ์ที่ควรจะเป็น |
|---|---|---|
| Tags Fired | ดูในหน้า Summary หลังทำ Action | Tag ต้องย้ายจาก Not Fired ขึ้นมาเป็น Fired |
| Variables Value | คลิกที่ Event แล้วดูแถบ Variables | ค่าต่างๆ เช่น Click URL หรือ Click Text ต้องตรงกับความเป็นจริง |
| Data Layer Structure | ดูแถบ Data Layer | โครงสร้าง JSON ต้องถูกต้อง ไม่มีค่าเป็น undefined |
สรุปบทเรียน
การ Debugging ไม่ใช่เรื่องเสียเวลา แต่มันคือการ "ประกันคุณภาพ" ของข้อมูลครับ เพราะถ้าเราติด Tracking ผิดตั้งแต่แรก การเอาข้อมูลไปวิเคราะห์ต่อใน GA4 หรือ Looker Studio ก็จะป่วยตามไปด้วย
เมื่อเพื่อน ๆ มั่นใจแล้วว่าทุกอย่างทำงานถูกต้อง ขั้นตอนสุดท้ายคือการกลับไปที่หน้าหลักของ GTM แล้วทำตามขั้นตอนนี้:
- กดปุ่ม "Submit" มุมขวาบน
- ตั้งชื่อ Version (เช่น "Added GA4 Config") เพื่อให้เรารู้ว่าเราแก้อะไรไป
- กด "Publish" เพื่อให้การตั้งค่าทั้งหมดมีผลใช้งานจริงบนหน้าเว็บครับ!
ในบทถัดไป (Ep. 5) เราจะเริ่มทำ Workshop จริงจังชิ้นแรกกันครับ นั่นคือการ "วัดผลการคลิกปุ่ม (Button Click Tracking)" ซึ่งเป็นพื้นฐานสำคัญที่สุดของการเปลี่ยน Traffic ให้กลายเป็น Conversion ครับ!
Pro Tip: หากเพื่อน ๆ เจอเคสที่ Tag Assistant ไม่เชื่อมต่อ (Not Connected) ให้ลองเช็คดูว่ามี AdBlocker เปิดทิ้งไว้หรือเปล่า หรือมีการวาง Code GTM ซ้ำซ้อนกันไหม เพราะสิ่งเหล่านี้คือศัตรูตัวฉกาจของการ Debug เลยเน้อ! — Son, webmastery.dev