ดีบักแท็กบนมือถือเครื่องจริง เมื่อโหมดพรีวิวบนคอมไม่เจอปัญหา

คุณเปิด GTM Preview บนโน้ตบุ๊ก เห็น GA4 event ยิงครบ Meta Lead ยิงครบ ส่งงานให้ลูกค้า ผ่านไปสามวัน ลูกค้ากลับมาถามว่าทำไม GA4 เห็นคนจาก Instagram น้อยกว่า Ads Manager มาก ผู้ใช้ส่วนใหญ่ของแคมเปญนี้เปิดจากแอป Instagram บน iPhone ซึ่งเป็นสภาพแวดล้อมที่คุณไม่เคยทดสอบเลย

การทดสอบบนคอมตอบได้ว่าแท็กตั้งค่าถูกในเบราว์เซอร์ของคอม ไม่ได้ตอบว่าลูกค้าส่วนใหญ่เห็นสิ่งเดียวกัน สิ่งที่ต้องมีคือชุดวิธีตรวจบนเครื่องจริงที่ทำซ้ำได้ ซึ่งไล่ไว้ด้านล่าง

สี่เหตุที่พรีวิวบนคอมมองไม่เห็นปัญหาของมือถือ

พรีวิวของ GTM พิสูจน์ได้เพียงว่า container ทำงานในเบราว์เซอร์ที่เปิดพรีวิวอยู่ ส่วนที่ต่างจากมือถือจริงมีอย่างน้อยสี่เรื่อง

• เอนจินเบราว์เซอร์ต่างกัน บน iPhone ทุกเบราว์เซอร์ใช้ WebKit และ Safari จำกัดอายุคุกกี้ที่สคริปต์ฝั่งเบราว์เซอร์เขียนเอง ผลคือ client id หมดอายุเร็วกว่าที่เห็นบน Chrome ของคอม
• เบราว์เซอร์ในแอป เช่น ของ Instagram Facebook หรือ LINE มีที่เก็บคุกกี้แยกจากเบราว์เซอร์หลักของเครื่อง คนที่กลับมาซื้อทีหลังในเบราว์เซอร์หลักจะถูกนับเป็นคนใหม่
• หน้าเว็บบนมือถือมักมีปุ่มคนละตัวกับเดสก์ท็อป เช่น ปุ่ม LINE แบบติดขอบล่างหรือเมนูแฮมเบอร์เกอร์ ถ้า Trigger ตั้งไว้กับ CSS class ของปุ่มบนเดสก์ท็อป การคลิกบนมือถือจะไม่ถูกจับ
• เครือข่ายช้าและแบนเนอร์ consent ที่ขึ้นเต็มจอเล็ก ผู้ใช้อาจเปลี่ยนหน้าก่อนแท็กยิง หรือปิดแบนเนอร์ไม่ได้เพราะปุ่มตกขอบจอ

เปิด debug_mode ด้วยพารามิเตอร์ใน URL แล้วดู DebugView

วิธีนี้ไม่ต้องต่อสายและใช้ได้กับเบราว์เซอร์ในแอปด้วย เพราะหน้าที่ต้องเปิดคือ URL ธรรมดาที่ส่งเข้าแชทหรือพิมพ์ในแอป ขั้นตอนดู DebugView เพิ่มเติมอยู่ใน การใช้ DebugView ตรวจ event ของ LINE

1. ใน GTM สร้างตัวแปรชนิด URL query ชื่อ dbg อ่านพารามิเตอร์ dbg จาก URL ที่เปิด
2. สร้างตัวแปรชนิด Lookup Table ชื่อ Debug flag ให้คืนค่า true เมื่อ dbg เท่ากับ 1 และตั้งค่าตั้งต้นเป็นว่างเพื่อไม่ให้ผู้ใช้ทั่วไปติดโหมดดีบัก
3. ใน Google tag เพิ่ม field ชื่อ debug_mode ให้ใช้ค่าจากตัวแปร Debug flag แล้วเผยแพร่ใน workspace ทดสอบ
4. เปิดหน้าเว็บบนมือถือด้วย URL ที่ต่อท้ายด้วย ?dbg=1 จากนั้นบนคอมเปิด Admin แล้วเข้า DebugView เลือกอุปกรณ์ที่ขึ้นในรายการ จะเห็น event ที่มือถือส่งแบบเกือบทันที
5. พารามิเตอร์หายเมื่อไปหน้าถัดไป จึงให้ GTM เก็บค่าไว้ในคุกกี้อายุสั้นหรือ sessionStorage แล้วให้ตัวแปร Debug flag อ่านจากที่นั่นต่อ ไม่เช่นนั้นจะเห็นแค่หน้าแรก

ต่อสายตรวจ Network ของเบราว์เซอร์บนมือถือ

เมื่อ DebugView ไม่แสดงอะไรเลย คุณต้องรู้ว่า request ออกจากเครื่องจริงไหม ซึ่งดูได้ด้วยเครื่องมือตรวจของเบราว์เซอร์เอง เทียบวิธีตามชนิดเครื่องได้ในตารางด้านล่าง

ตรวจ request ที่ออกจากมือถือด้วย proxy บนคอม

โปรแกรมอย่าง Charles Proxyman หรือ mitmproxy ให้มือถือส่งทราฟฟิกผ่านคอมของคุณ ตั้ง proxy ที่ Wi-Fi ของมือถือให้ชี้เลข IP ของคอมและพอร์ตของโปรแกรม ติดตั้งใบรับรองของโปรแกรมบนมือถือแล้วเปิดให้เชื่อถือ จึงจะอ่านเนื้อหาของ request แบบ HTTPS ได้ เบราว์เซอร์ในแอปส่วนใหญ่ใช้ proxy ของระบบ จึงเห็นได้แม้ตรวจด้วยสายไม่ได้

สิ่งที่ต้องหาคือ request ไปที่ g/collect ของ GA4 ที่ facebook.com/tr ของ Meta และ analytics.tiktok.com ของ TikTok เปิดดูชื่อ event ที่ส่ง URL ของหน้า และพารามิเตอร์ utm ที่ติดมา ถ้าเห็นว่ามีแต่ page_view แล้วไม่มี event ของปุ่ม แปลว่า Trigger บนมือถือจับปุ่มไม่ได้ ซึ่งตรงกับอาการที่อธิบายไว้ใน เรื่องคลิก LINE ไม่ขึ้นใน GA4 ใช้ proxy กับเครื่องของทีมเท่านั้น ถอดใบรับรองออกเมื่อเสร็จงาน และอย่าเก็บ log ที่มีข้อมูลส่วนตัวของลูกค้า

คอนโซลบนหน้าเว็บสำหรับกรณีที่ต่อสายไม่ได้

เบราว์เซอร์ในแอปบน iPhone ต่อ inspector ไม่ได้ ทางออกคือใส่คอนโซลเข้าไปในหน้าเว็บเอง เครื่องมืออย่าง Eruda ซึ่งเป็นคอนโซลโอเพนซอร์สสำหรับมือถือ แสดงแถบ Console และ Network ซ้อนบนหน้า ให้โหลดผ่านแท็ก Custom HTML ใน GTM โดยมีเงื่อนไขว่าธง Debug flag ต้องเป็น true เท่านั้น ระบุเวอร์ชันของสคริปต์ให้ตายตัวและถอดแท็กออกหลังตรวจเสร็จ ห้ามทิ้งไว้ให้โหลดกับผู้ใช้ทั่วไป และถ้าหน้ามี Content Security Policy ต้องอนุญาตโดเมนที่โหลดสคริปต์นั้นด้วย

ชุดทดสอบขั้นต่ำก่อนส่งงานให้ลูกค้า

รวมเครื่องที่ทดสอบให้ตรงกับที่ลูกค้าเข้าจริง ดูสัดส่วนจากรายงานอุปกรณ์และเบราว์เซอร์ของ GA4 แล้วเลือกที่ติดอันดับต้น ๆ ไม่ต้องครอบคลุมทุกรุ่น การอ่านผลข้ามอุปกรณ์เพิ่มเติมดูที่ การตรวจ conversion ข้ามอุปกรณ์และเบราว์เซอร์ และขั้นตอนพรีวิวฝั่งคอมอยู่ที่ การดีบักด้วย GTM Preview

1. เปิดหน้าด้วย utm ทดสอบบน iPhone ผ่านแอป Instagram แล้วตรวจว่า page_view ติด utm ครบ
2. เปิดหน้าเดียวกันบน iPhone ผ่าน Safari และบน Android ผ่าน Chrome เทียบผลกับข้อแรก
3. กดปุ่ม LINE ทั้งตัวที่อยู่ในหน้าและตัวที่ติดขอบล่าง ตรวจว่ามี event ขึ้นทั้งสองแบบ
4. ส่งฟอร์มหนึ่งรอบ ตรวจว่า Lead ขึ้นใน GA4 Test Events ของ Meta และ TikTok
5. จำกัดเครือข่ายให้ช้า เช่นใช้ตัวเลือกจำลองเครือข่ายของโปรแกรม proxy แล้วทำข้อสามซ้ำ ดูว่า event ยังขึ้นก่อนหน้าเปลี่ยน

สรุป

กำหนดชุดเครื่องทดสอบประจำของทีม อย่างน้อยหนึ่งเครื่อง iPhone และหนึ่งเครื่อง Android และทำตามเมทริกซ์ข้างบนทุกครั้งก่อนส่งงาน แล้วบันทึกผลสั้น ๆ ไว้ในเอกสารส่งมอบ

ถ้ารายงานของแคมเปญมีผู้ใช้จากเบราว์เซอร์ในแอปจำนวนมาก ให้ถือว่าชุดทดสอบนี้เป็นงานบังคับ ไม่ใช่งานเสริมที่ทำเมื่อมีเวลา

• พรีวิวบนคอมตอบได้เฉพาะเบราว์เซอร์ของคอม ไม่ครอบคลุม WebKit และเบราว์เซอร์ในแอป
• debug_mode ผ่านพารามิเตอร์ใน URL ใช้ได้กับทุกเครื่อง และต้องเก็บค่าข้ามหน้า
• ตรวจ request จริงด้วย chrome://inspect Web Inspector หรือ proxy ตามชนิดเครื่อง
• ใช้เครื่องของทีมเท่านั้นเมื่อใช้ proxy และถอดใบรับรองหลังเสร็จงาน

คำถามที่พบบ่อย