ปุ่มเพิ่มเพื่อนกดได้ปกติ แต่ทำไม LINE Tag ถึงไม่ยิง Event สักครั้ง

ทีมการตลาดร้านหนึ่งสังเกตว่ายอดเพิ่มเพื่อนใน LINE OA เพิ่มขึ้นทุกสัปดาห์ตามที่ลูกค้าเล่าให้ฟัง แต่พอเปิด Dashboard ของระบบ Tracking กลับไม่เห็น Event 'เพิ่มเพื่อน' เข้ามาเลยแม้แต่รายการเดียวในช่วงสองสัปดาห์ที่ผ่านมา ทั้งที่ปุ่มบนเว็บไซต์กดได้ปกติและลูกค้าเพิ่มเพื่อนสำเร็จจริงทุกครั้ง

ความสับสนแบบนี้เกิดขึ้นบ่อยเพราะคนมักคิดว่าถ้าปุ่มใช้งานได้ แสดงว่าระบบ Tracking ที่ผูกอยู่กับปุ่มนั้นต้องทำงานตามไปด้วย แต่ในความเป็นจริง การกดปุ่มกับการยิง Event เป็นคนละกลไกกันโดยสิ้นเชิง ปุ่มอาจพาไปหน้า LINE ได้สำเร็จโดยที่ไม่มีโค้ดส่วนที่ยิง Event ทำงานเลยก็ได้

บทความนี้จะพาไล่ดูว่าทำไม LINE Tag ถึงไม่ยิงทั้งที่ปุ่มดูปกติ วิธีตรวจให้เจอจุดที่แท้จริงโดยไม่ต้องเดา และแนวทางป้องกันไม่ให้ปัญหานี้เงียบหายไปโดยไม่มีใครรู้ตัวอีก

ทำไมปุ่มใช้งานได้ปกติ แต่ Tag ไม่ยิง

ปุ่มเพิ่มเพื่อนบนเว็บไซต์มักเป็นแค่ลิงก์ธรรมดาที่พาไปยังหน้า LINE โดยตรง ส่วน Tag ที่ทำหน้าที่ยิง Event เป็นโค้ดแยกต่างหากที่ต้องถูกเรียกใช้งานเพิ่มเติม เช่น ผ่าน Event Listener ที่ดักจับการคลิกปุ่มนั้น ถ้า Event Listener นี้ไม่ถูกผูกไว้ถูกต้อง หรือถูกลบออกไปตอนแก้โค้ดส่วนอื่น ปุ่มจะยังคงพาไปหน้า LINE ได้ตามปกติ แต่ Tag จะไม่ถูกเรียกใช้งานเลย

อีกกรณีที่พบบ่อยคือทีมพัฒนาเปลี่ยน Class หรือ ID ของปุ่มตอนปรับดีไซน์เว็บไซต์ โดยไม่รู้ว่า Tag ผูกอยู่กับ Selector เดิม เมื่อ Selector เปลี่ยน Tag ก็หา Element ที่ควรดักจับไม่เจอ ทำให้ไม่มีอะไรมาสั่งให้ยิง Event ทั้งที่ตัวปุ่มเองยังทำงานได้ตามปกติทุกประการ

วิธีตรวจว่า Tag ยิงจริงหรือไม่ ด้วย Network Tab

วิธีที่เร็วและตรงที่สุดในการตรวจว่า Tag ยิงหรือไม่คือเปิด Developer Tools ของเบราว์เซอร์แล้วดูที่แท็บ Network ระหว่างที่กดปุ่มเพิ่มเพื่อนจริง ๆ ถ้ามี Request ที่ยิงออกไปยังโดเมนที่เกี่ยวข้องกับ LINE Tag ก็แปลว่า Tag ทำงาน แต่ถ้าไม่มี Request ใด ๆ เกิดขึ้นเลย นั่นคือหลักฐานชัดเจนว่า Tag ไม่ได้ถูกเรียกใช้งาน

1. เปิดหน้าเว็บที่มีปุ่มเพิ่มเพื่อน แล้วเปิด Developer Tools กดแท็บ Network
2. กรอง Request ด้วยคำที่เกี่ยวข้องกับ LINE Tag เพื่อให้เห็นเฉพาะ Request ที่สนใจ
3. คลิกปุ่มเพิ่มเพื่อนจริง แล้วสังเกตว่ามี Request ใหม่ปรากฏขึ้นในแท็บ Network หรือไม่
4. ถ้าไม่มี Request เกิดขึ้นเลย ให้ตรวจต่อที่ Console ว่ามี Error เกี่ยวกับ JavaScript ที่ขัดขวางการทำงานของ Tag หรือไม่

ตัวขัดขวางที่มองไม่เห็นด้วยตาเปล่า

• Ad Blocker หรือส่วนขยายเบราว์เซอร์บางตัวบล็อก Request ที่มีรูปแบบคล้ายกับ Tracking Script โดยอัตโนมัติ ทำให้ Tag ไม่ยิงเฉพาะกับผู้ใช้บางคนเท่านั้น ไม่ใช่ทุกคน
• การตั้งค่า Consent หรือ Cookie Banner ที่บล็อก Script การตลาดจนกว่าผู้ใช้จะกดยอมรับ ถ้าผู้ใช้ปิดหน้าไปก่อนกดยอมรับ Tag ก็จะไม่ถูกโหลดเลยตั้งแต่ต้น
• การโหลดหน้าเว็บช้าเกินไปจนผู้ใช้กดปุ่มก่อนที่ Tag จะโหลดเสร็จสมบูรณ์ โดยเฉพาะบนอินเทอร์เน็ตมือถือที่สัญญาณไม่เสถียร

ตัวอย่างสมมติ ลองไล่ตัวเลขให้เห็นภาพ

สมมติเว็บไซต์หนึ่งมีผู้เข้าชมหน้าโปรโมชันเฉลี่ยวันละ 500 คน และเคยมี Event เพิ่มเพื่อนเข้ามาเฉลี่ยวันละ 60 รายการอย่างสม่ำเสมอ จนกระทั่งวันหนึ่งทีมพัฒนาปรับดีไซน์ปุ่มเพิ่มเพื่อนใหม่ให้สวยขึ้นแต่ไม่ได้แจ้งทีมการตลาด หลังจากวันนั้น Event ที่เข้ามาลดลงเหลือวันละ 3-5 รายการทันที ทั้งที่ยอดเพิ่มเพื่อนจริงที่ทีมแอดมินสังเกตจากฝั่ง LINE OA ยังคงใกล้เคียงเดิม

เมื่อไล่ตรวจด้วย Network Tab จึงพบว่า Tag ยังผูกอยู่กับ Class เดิมของปุ่ม แต่ดีไซน์ใหม่เปลี่ยน Class ไปแล้ว ทำให้ Event Listener หา Element ไม่เจอ Event ที่ยังเข้ามาบ้างเล็กน้อยคือจากผู้ใช้ที่ยังใช้แคชหน้าเว็บเวอร์ชันเก่าอยู่ในช่วงเปลี่ยนผ่าน

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

ป้องกันไม่ให้ Tag หลุดซ้ำทุกครั้งที่แก้เว็บไซต์

วิธีป้องกันที่ได้ผลที่สุดคือผูก Tag กับ Attribute ที่ออกแบบมาเฉพาะสำหรับ Tracking แทนการผูกกับ Class หรือ ID ที่ใช้ในงานดีไซน์ทั่วไป เพราะ Attribute เฉพาะทางจะไม่ถูกแก้โดยบังเอิญเวลาทีมออกแบบปรับหน้าตาเว็บไซต์ และควรตกลงกับทีมพัฒนาว่าทุกครั้งที่จะแก้ไขปุ่มที่เกี่ยวข้องกับ Tracking ต้องแจ้งทีมการตลาดล่วงหน้าเสมอ

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

ติดตั้งผ่าน GTM กับฝังโค้ดตรง ต่างกันตรงจุดตรวจ

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

ธุรกิจที่มีทีมพัฒนาเปลี่ยนคนบ่อยควรพิจารณาย้ายไปใช้ตัวจัดการแท็กแทนการฝังโค้ดตรง เพราะจะลดความเสี่ยงที่คนใหม่จะไม่รู้ว่ามี Tag ฝังอยู่ตรงไหนบ้างในโค้ดเดิม

ข้อดีอีกอย่างของตัวจัดการแท็กคือประวัติการเปลี่ยนแปลงถูกบันทึกไว้อัตโนมัติทุกครั้งที่มีการแก้ไข ทำให้เมื่อพบว่า Tag หยุดยิงกะทันหัน สามารถย้อนดูได้ทันทีว่ามีการเผยแพร่เวอร์ชันใหม่ในช่วงเวลาใกล้เคียงกับที่ปัญหาเริ่มเกิดหรือไม่ ต่างจากการฝังโค้ดตรงที่ต้องพึ่งพา Git Log หรือความจำของทีมพัฒนาเพียงอย่างเดียว ซึ่งมักไม่ครบถ้วนเท่าที่ควร

ตรวจแยกระหว่างมือถือกับเดสก์ท็อป อาการอาจไม่เหมือนกัน

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

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

วิธีตรวจที่ควรทำเป็นประจำคือเปิดเว็บไซต์ด้วยโหมดจำลองอุปกรณ์มือถือใน Developer Tools แล้วทำซ้ำขั้นตอนการตรวจ Network Tab เหมือนกับที่ทำบนเดสก์ท็อป เพื่อยืนยันว่า Tag ยิงในทั้งสองสภาพแวดล้อมจริง ๆ ไม่ใช่แค่สภาพแวดล้อมเดียว

ใครควรเป็นเจ้าภาพดูแล Tag ในทีม

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

แนวทางที่ชัดเจนกว่าคือให้ทีมการตลาดเป็นเจ้าภาพหลักในการตรวจสอบว่า Tag ยังยิงอยู่หรือไม่ เพราะเป็นฝ่ายที่ใช้ข้อมูลนี้โดยตรงและจะรู้เร็วที่สุดถ้าตัวเลขผิดปกติ ส่วนทีมพัฒนาทำหน้าที่แก้ไขเมื่อพบปัญหาทางเทคนิค การแบ่งบทบาทแบบนี้ทำให้มีคนตรวจอย่างสม่ำเสมอ แทนที่จะรอให้ปัญหาสะสมจนเห็นได้ชัดในรายงานรายเดือน

ในทีมขนาดเล็กที่ไม่มีคนแยกตำแหน่งชัดเจน อาจกำหนดให้เป็นงานประจำสัปดาห์ของใครสักคนแทน โดยไม่จำเป็นต้องเป็นคนที่เก่งเทคนิคที่สุด ขอเพียงรู้ขั้นตอนตรวจ Network Tab พื้นฐานและรู้ว่าเมื่อพบปัญหาแล้วควรแจ้งใครต่อ วิธีนี้ช่วยให้ธุรกิจขนาดเล็กก็มีระบบตรวจสอบที่สม่ำเสมอได้โดยไม่ต้องจ้างทีมเทคนิคเพิ่ม

ทำแบบนี้แล้วพัง เพราะ… บทเรียนจากทีมที่เจอปัญหาซ้ำ

• เชื่อว่า Tag ทำงานอยู่เพราะเคยติดตั้งไปแล้วครั้งหนึ่งตอนเปิดเว็บไซต์ครั้งแรก โดยไม่เคยตรวจซ้ำอีกเลย — พังเพราะเว็บไซต์มีการอัปเดตหลายรอบระหว่างทาง และไม่มีใครรับประกันว่า Tag จะยังผูกอยู่กับ Element เดิมตลอดไป
• แก้ปัญหาด้วยการติดตั้ง Tag ซ้ำอีกชุดโดยไม่ลบชุดเดิมที่สงสัยว่าเสีย — พังเพราะกลายเป็นยิง Event ซ้ำสองครั้งในบางเบราว์เซอร์ที่ Tag เดิมยังทำงานได้บางส่วน
• ปิดการแจ้งเตือนของ Ad Blocker แล้วสรุปว่า Tag ทำงานปกติสำหรับผู้ใช้ทุกคน — พังเพราะทดสอบจากเครื่องตัวเองที่ปิด Ad Blocker แล้ว ไม่ได้สะท้อนพฤติกรรมของผู้ใช้จริงที่ยังเปิด Ad Blocker อยู่
• ตรวจ Tag แค่บนเดสก์ท็อปแล้วสรุปว่าทุกอุปกรณ์ทำงานเหมือนกัน — พังเพราะลูกค้าส่วนใหญ่เข้าผ่านมือถือ และ Tag เวอร์ชันมือถืออาจผูก Element คนละตัวกับเดสก์ท็อปโดยไม่มีใครรู้ตัว

สรุป

LINE Tag ไม่ยิง Event ทั้งที่ปุ่มใช้งานได้ปกติ เป็นปัญหาที่พบบ่อยเพราะปุ่มกับ Tag เป็นกลไกคนละส่วนกัน การเปลี่ยนดีไซน์เล็กน้อยก็ทำให้ Tag หลุดหายได้โดยไม่มีสัญญาณเตือนใด ๆ

การตรวจด้วย Network Tab เป็นวิธีที่เร็วและตรงที่สุดในการยืนยันว่า Tag ทำงานจริงหรือไม่ และการผูก Tag กับ Attribute เฉพาะทางแทน Class ทั่วไปจะช่วยลดโอกาสที่ปัญหานี้จะเกิดซ้ำในอนาคต

• ตรวจ Network Tab ทุกครั้งที่สงสัยว่า Tag ไม่ยิง
• ผูก Tag กับ Attribute เฉพาะทาง ไม่ใช่ Class หรือ ID ทั่วไป
• แจ้งทีม Tracking ทุกครั้งที่มีการแก้ไขปุ่มที่เกี่ยวข้อง
• ตรวจโค้ดพื้นฐานก่อนว่าติดถูกจุดไหม ดูได้ที่โครงสร้างโค้ดพื้นฐานของ LINE Tag
• ถ้าใช้ผ่าน GTM ควรเช็ก Trigger ตามการตั้งค่า LINE Tag ผ่าน GTM ให้ยิงถูกจังหวะ
• ปุ่มที่มีหลายจุดบนหน้าเว็บควรตรวจด้วยการตั้ง Trigger ให้ครอบคลุมปุ่ม LINE หลายจุดพร้อมกัน

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