วัดผลการกรอกฟอร์ม (Form Submission) แบบแม่นยำ 100%

สำหรับธุรกิจสาย B2B หรือ Service-based การได้ "Lead" หรือรายชื่อลูกค้าจากการกรอกฟอร์ม (Contact Form) คือหัวใจสำคัญที่สุดครับ

แต่ปัญหาที่คนส่วนใหญ่เจอคือ:

1. ใช้ Trigger "Form Submission" ของ GTM แล้วมันนับมั่ว (กรอกผิดก็ดันนับ)
2. ฟอร์มเป็นแบบ AJAX (กดส่งแล้วหน้าไม่รีโหลด) ทำให้จับ Page View ไม่ได้
3. Data ไม่ตรงกับหลังบ้าน

วันนี้ผมจะพาไปดู 3 วิธีการวัดผลฟอร์ม เรียงลำดับจาก "ง่ายสุด" ไปหา "แม่นยำสุด" ครับ

วิธีที่ 1: Thank You Page (ท่าไม้ตายสุดคลาสสิก)

วิธีนี้ง่ายและชัวร์ที่สุดครับ ถ้าเว็บของเพื่อน ๆ ถูกออกแบบมาว่า "เมื่อกรอกเสร็จ ให้เด้งไปหน้าขอบคุณ" (Redirect to /thank-you)

วิธีตั้งค่า:

1. สร้าง Trigger ประเภท Page View
2. เลือก Some Page Views
3. ตั้งเงื่อนไข: Page Path -> contains -> /thank-you (หรือ URL ที่เว็บเพื่อน ๆ ใช้)
4. จบครับ! เอา Trigger นี้ไปผูกกับ Tag ได้เลย

ข้อดี: ง่ายมาก ไม่ต้องพึ่ง Dev
ข้อเสีย: เว็บสมัยใหม่ไม่ค่อยทำหน้า Thank You แยกแล้ว (ชอบโชว์เป็นข้อความเด้งขึ้นมาแทน)

วิธีที่ 2: Element Visibility (จับตาดูข้อความแจ้งเตือน)

สำหรับเว็บที่กดส่งแล้วมีข้อความเด้งขึ้นมาว่า "ส่งข้อมูลสำเร็จเรียบร้อย" โดยที่หน้าเว็บไม่เปลี่ยน เราจะใช้วิธีจับตาดู (Listen) การปรากฏตัวของข้อความนั้นครับ

วิธีตั้งค่า:

1. หา ID หรือ CSS Class ของกล่องข้อความนั้น (คลิกขวา -> Inspect ดูเหมือนเดิม)
2. สร้าง Trigger ประเภท Element Visibility
3. Selection Method: เลือก ID หรือ CSS Selector ตามที่หาได้
4. Element Selector: ใส่ชื่อ ID (เช่น success-message)
5. When to fire: เลือก Once per page (กันการนับซ้ำ)
6. กด Save

ข้อดี: ไม่ต้องแก้ Code เว็บ ใช้กับ AJAX Form ได้
ข้อเสีย: ต้องหา Selector ให้แม่น ถ้า Dev เปลี่ยนชื่อ Class ทีหลัง Trigger ก็จะหลุด

วิธีที่ 3: Data Layer Event (The Gold Standard แม่นยำ 100%)

นี่คือวิธีที่ผมแนะนำที่สุดในฐานะ Web Dev ครับ เป็นการนำความรู้จาก Ep. 8 มาใช้จริง

หลักการคือ: ให้ Dev เขียน Code สั่งให้ฟอร์มส่งสัญญาณบอก GTM "เฉพาะตอนที่ส่งสำเร็จจริง ๆ เท่านั้น" (Validation ผ่านแล้ว, ข้อมูลลง Database แล้ว)

ขั้นตอนการทำ (Step-by-Step):

Step 1: วาง Code ที่ตัวฟอร์ม (งาน Dev)
ให้แปะ Code นี้ลงไปในฟังก์ชัน onSuccess ของฟอร์มครับ:

window.dataLayer.push({
 'event': 'form_submit_success',
 'form_id': 'contact_us_main'
});

Step 2: สร้าง Trigger ใน GTM (งานเรา)

1. ไปที่ Triggers -> New
2. เลือกประเภท Custom Event
3. Event Name: ใส่ชื่อให้ตรงกับ Code คือ form_submit_success
4. ตั้งชื่อ Trigger ว่า Custom Event - Form Success

Step 3: สร้าง Tag ส่งข้อมูล

1. ไปที่ Tags -> New
2. เลือก Google Analytics: GA4 Event
3. Event Name: generate_lead (ชื่อมาตรฐานของ Google)
4. Triggering: เลือก Trigger ที่เราสร้างเมื่อกี้
5. กด Save และ Submit ได้เลย

ทำไมต้องทำให้ยาก? (ใช้ Trigger ธรรมดาไม่ได้เหรอ?)

Trigger ประเภท "Form Submission" ที่ GTM มีมาให้ ข้อเสียคือมันมักจะทำงาน "ทันทีที่กดปุ่ม" โดยไม่สนว่ากรอกข้อมูลครบไหม หรืออีเมลถูกต้องหรือเปล่า ทำให้เราได้ Data ขยะเยอะมากครับ

ดังนั้น ถ้าเพื่อน ๆ อยากได้ Data ที่เอาไปยิงแอดแล้วคุ้มค่าที่สุด วิธี Data Layer (วิธีที่ 3) คือคำตอบสุดท้ายครับ

สรุปบทเรียน

การวัดผลฟอร์มไม่มีสูตรตายตัวครับ ขึ้นอยู่กับโครงสร้างเว็บของเพื่อน ๆ:

• มีหน้าขอบคุณ -> ใช้ Page View
• มีข้อความเด้ง -> ใช้ Element Visibility
• อยากได้ความเป๊ะ -> ใช้ Data Layer

ในบทถัดไป (Ep. 10) เราจะมาเอาใจสาย Dev กันต่อกับเรื่อง "Custom JavaScript Variable" ที่จะช่วยให้เราเขียน Code สั้น ๆ เพื่อดึงข้อมูลยาก ๆ (เช่น ราคาสินค้าที่ไม่มี ID) ออกมาใช้งานได้แบบ Hacker ครับ!

Tip: หากใช้ Contact Form 7 ใน WordPress เพื่อน ๆ ไม่ต้องเขียน Code เองนะครับ ใช้ Plugin "GTM4WP" มันมีฟีเจอร์ "Integration" ที่ติ๊กถูกปุ๊บ มันจะยิง Data Layer Event ให้เราอัตโนมัติเลย สะดวกมาก! — Son, webmastery.dev