ติดตั้ง pixel หกตัวบนเว็บเดียว แล้วครึ่งหนึ่งหยุดทำงานเงียบ ๆ: audit ความขัดแย้งของสคริปต์บุคคลที่สาม
สรุปสั้น ๆ
เว็บไซต์ที่ติดตั้ง pixel และสคริปต์ติดตามจากหลายแพลตฟอร์มพร้อมกันมีความเสี่ยงที่สคริปต์เหล่านั้นจะชนกัน เช่น ตัวแปร JavaScript ชื่อซ้ำกันจนเขียนทับกัน หรือสคริปต์ตัวหนึ่งโหลดช้าจนบล็อกสคริปต์อื่นที่มาทีหลัง การ audit ต้องไล่ทดสอบทีละสคริปต์แยกกันเพื่อหาว่าตัวไหนชนกับตัวไหน
ร้านขายเครื่องประดับสมมติชื่อ 'จิวเวลบ็อกซ์' ติดตั้งสคริปต์ติดตามของ Meta, TikTok, Google และอีกสองแพลตฟอร์มพร้อมกันบนหน้าเว็บเดียวกัน เพื่อให้ยิงโฆษณาได้ครบทุกช่องทาง แต่หลังติดตั้งได้ไม่นาน ทีมงานสังเกตว่า event การซื้อของ TikTok แทบไม่มีข้อมูลเข้ามาเลย ทั้งที่ทดสอบตอนติดตั้งแรกแล้วทำงานปกติดี
พอไล่เช็กจริงถึงพบว่าสคริปต์ของแพลตฟอร์มหนึ่งที่โหลดหนักและช้ากว่าตัวอื่น ดันไปโหลดก่อนและใช้เวลานานจนสคริปต์ของ TikTok ที่ควรโหลดตามมาไม่ทันภายในเวลาที่ผู้ใช้อยู่บนหน้านั้น โดยเฉพาะบนมือถือที่เน็ตช้ากว่าคอมพิวเตอร์ทั่วไป ผลคือ pixel ของ TikTok แทบไม่มีโอกาสได้ทำงานเลยในสัดส่วนผู้ใช้จำนวนมาก
ความขัดแย้งของสคริปต์บุคคลที่สามแบบนี้ไม่แสดง error ที่มองเห็นง่าย เพราะแต่ละสคริปต์ยังทำงานได้ตามปกติของตัวเอง เพียงแต่ไม่ได้ทำงานพร้อมกันอย่างที่ควรจะเป็น
ทำไมสคริปต์หลายตัวถึงชนกันได้ทั้งที่แต่ละตัวเขียนถูกต้อง
สาเหตุหลักมีสองแบบ แบบแรกคือปัญหาเรื่องลำดับการโหลด (loading order) สคริปต์บางตัวมีขนาดใหญ่และใช้เวลาประมวลผลนาน ถ้าวางไว้ก่อนสคริปต์อื่นในหน้าเว็บ มันจะกินเวลาของเบราว์เซอร์จนสคริปต์ถัดไปโหลดช้าหรือไม่ทันภายในเวลาที่ผู้ใช้อยู่บนหน้านั้น
แบบที่สองคือปัญหาเรื่องตัวแปร JavaScript ชื่อซ้ำกัน (namespace collision) ถ้าสองแพลตฟอร์มบังเอิญใช้ชื่อตัวแปรระดับ global เหมือนกัน สคริปต์ที่โหลดทีหลังอาจเขียนทับค่าของตัวแรกโดยไม่ตั้งใจ ทำให้ตัวแรกทำงานผิดเพี้ยนไปโดยไม่มีใครสังเกตจนกว่าจะไล่ debug ลึกจริง ๆ
วิธีทดสอบแยกสคริปต์ทีละตัวเพื่อหาตัวที่ชนกัน
- เปิด Network tab ในเครื่องมือนักพัฒนา แล้วดูลำดับเวลาที่แต่ละสคริปต์บุคคลที่สามเริ่มโหลดและโหลดเสร็จ สังเกตว่ามีตัวไหนใช้เวลานานผิดปกติจนอาจบล็อกตัวอื่น
- ลองปิดการทำงานของสคริปต์ทีละตัวผ่านส่วนขยายบล็อกสคริปต์ในเบราว์เซอร์ แล้วดูว่าสคริปต์ที่เหลือทำงานสมบูรณ์ขึ้นหรือไม่ วิธีนี้ช่วยระบุตัวการที่แท้จริงได้ชัดกว่าการเดา
- เปิด Console แล้วดูว่ามี error หรือ warning เกี่ยวกับตัวแปรซ้ำกันหรือฟังก์ชันถูกเขียนทับหรือไม่ บางครั้งเบราว์เซอร์จะแจ้งเตือนไว้แต่ไม่มีใครเปิดดู
- ทดสอบซ้ำบนอุปกรณ์ที่จำลองเน็ตช้า เพราะปัญหาการบล็อกกันมักไม่แสดงผลชัดบนเน็ตแรงของออฟฟิศ แต่ชัดมากบนมือถือที่ใช้เน็ต 4G ทั่วไป
แนวทางแก้ไขที่ใช้ได้จริงโดยไม่ต้องถอดสคริปต์ตัวใดออก
วิธีแรกคือใช้ tag manager เป็นตัวกลางจัดการลำดับการโหลด แทนที่จะฝังสคริปต์ตรง ๆ ในโค้ดหน้าเว็บ เพราะการจัดการผ่าน containerช่วยควบคุมลำดับความสำคัญและเวลาการโหลดของแต่ละ tag ได้ดีกว่าการฝังโค้ดกระจัดกระจาย
วิธีที่สองคือพิจารณาย้ายบางสคริปต์ไปทำงานฝั่งเซิร์ฟเวอร์แทนฝั่งเบราว์เซอร์ ผ่านการติดตามแบบ server-side ซึ่งไม่ต้องพึ่งพาการโหลดสคริปต์บนเบราว์เซอร์ของผู้ใช้เลย จึงตัดปัญหาการชนกันของสคริปต์บนหน้าเว็บออกไปได้ทั้งหมด
ก่อนติดตั้งสคริปต์ใหม่ทุกครั้ง ควรมีขั้นตอนตรวจสอบก่อน
โดยเฉพาะสคริปต์จากปลั๊กอินหรือแชทบอทของบุคคลที่สามที่ไม่ใช่แพลตฟอร์มโฆษณาหลัก ควรมีขั้นตอนตรวจสอบความปลอดภัยและผลกระทบก่อนติดตั้งเสมอ เพราะสคริปต์เหล่านี้บางตัวโหลดหนักมากหรือมีพฤติกรรมที่ไม่คาดคิด และอาจเป็นตัวการที่ไปบล็อกสคริปต์ติดตามหลักของธุรกิจโดยไม่รู้ตัว
ตารางอาการที่บ่งชี้ว่าอาจมีสคริปต์ชนกัน
| อาการที่สังเกตเห็น | สาเหตุที่เป็นไปได้ | จุดที่ควรเช็กก่อน |
|---|---|---|
| Event ของแพลตฟอร์มหนึ่งหายไปเฉพาะบนมือถือ | ลำดับการโหลดช้าเกินเวลาที่ผู้ใช้อยู่บนหน้า | Network tab ดูเวลาโหลดของแต่ละสคริปต์ |
| ค่าตัวแปรของ pixel หนึ่งเปลี่ยนไปโดยไม่มีเหตุผล | ตัวแปร JavaScript ชื่อซ้ำกัน | Console ดู warning เรื่องตัวแปรซ้ำ |
| หน้าเว็บโหลดช้าลงหลังเพิ่มสคริปต์ใหม่ | สคริปต์ใหม่หนักเกินไปหรือบล็อกการแสดงผล | เปรียบเทียบความเร็วก่อน-หลังติดตั้ง |
สรุป
ความขัดแย้งของสคริปต์บุคคลที่สามเป็นปัญหาที่ซ่อนอยู่หลังหน้าเว็บที่ดูปกติสนิท ไม่มี error แดงเตือน ไม่มีใครบ่น มีแค่ตัวเลข event ที่ค่อย ๆ น้อยลงในบางแพลตฟอร์มโดยไม่มีคำอธิบายชัดเจน
การไล่ทดสอบแยกทีละสคริปต์ผ่าน Network tab และ Console คือวิธีเดียวที่จะเห็นปัญหานี้ได้ตรงจุด ไม่ใช่การเดาจากรายงานปลายทางที่ไม่บอกสาเหตุ
- ดูลำดับเวลาการโหลดสคริปต์ผ่าน Network tab เพื่อหาตัวที่บล็อกตัวอื่น
- เช็ก Console หา warning เรื่องตัวแปร JavaScript ชื่อซ้ำกัน
- พิจารณาย้ายบางส่วนไปทำงานฝั่งเซิร์ฟเวอร์เพื่อตัดปัญหาการชนกันบนเบราว์เซอร์
คำถามที่พบบ่อย
ควรติดตั้ง pixel กี่ตัวถึงเรียกว่าเยอะเกินไป
ไม่มีจำนวนตายตัว ขึ้นอยู่กับว่าแต่ละตัวจำเป็นกับกลยุทธ์โฆษณาจริงหรือไม่ แต่ถ้ามีมากกว่าสี่ห้าตัวบนหน้าเดียว ควรเริ่มตรวจสอบผลกระทบต่อความเร็วเว็บและความขัดแย้งระหว่างสคริปต์อย่างจริงจัง
ทำไมปัญหานี้ถึงเห็นชัดบนมือถือมากกว่าคอมพิวเตอร์
เพราะมือถือส่วนใหญ่มีความเร็วเน็ตและประสิทธิภาพประมวลผลต่ำกว่าคอมพิวเตอร์ในออฟฟิศ ทำให้เวลาที่สคริปต์ใช้โหลดกินสัดส่วนเวลาที่ผู้ใช้อยู่บนหน้านั้นมากกว่า จึงเห็นผลกระทบชัดกว่า
ย้ายไปใช้ server-side tracking ทั้งหมดแก้ปัญหานี้ได้เลยไหม
ช่วยลดปัญหาได้มาก เพราะไม่ต้องพึ่งพาการโหลดสคริปต์บนเบราว์เซอร์ แต่บางแพลตฟอร์มยังต้องมี pixel ฝั่งเบราว์เซอร์ควบคู่ไปด้วยเพื่อเก็บข้อมูล cookie สำหรับ retargeting จึงไม่สามารถตัดออกได้ทั้งหมดเสมอไป
จะรู้ได้ยังไงว่าสคริปต์ไหนเป็นตัวที่โหลดหนักที่สุด
เปิด Network tab แล้วเรียงลำดับตามขนาดไฟล์หรือเวลาที่ใช้โหลด สคริปต์ที่ใช้เวลานานผิดปกติเมื่อเทียบกับตัวอื่นมักเป็นตัวที่ควรตรวจสอบก่อน
ควรทดสอบผลกระทบก่อนติดตั้งสคริปต์ใหม่ทุกครั้งไหม
ควรทำเป็นขั้นตอนมาตรฐาน โดยเฉพาะเมื่อเป็นสคริปต์จากบุคคลที่สามที่ไม่ใช่แพลตฟอร์มโฆษณาหลักที่คุ้นเคย เพราะผลกระทบมักมองไม่เห็นจนกว่าจะใช้งานไปสักระยะ
มีวิธีลดผลกระทบโดยไม่ต้องถอดสคริปต์ตัวไหนออกเลยไหม
การจัดลำดับความสำคัญผ่าน tag manager และพิจารณาย้ายบางส่วนไปทำงานฝั่งเซิร์ฟเวอร์เป็นแนวทางที่ช่วยลดผลกระทบได้โดยไม่ต้องตัดสคริปต์ใดออกจากแผนการตลาด
บทความที่เกี่ยวข้อง
