ฝึกตั้งค่า Trigger สำหรับ Form Submissionsครอบคลุมทั้ง 3 รูปแบบหลักบนเว็บไซต์จริง
ฝึกฝนการดักจับ Lead Generation จากฟอร์มทั้ง 3 รูปแบบ: แบบเปลี่ยนหน้า (Redirect Thank-You), แบบหน้าต่าง Popup Modal, และแบบแสดงข้อความสำเร็จในหน้าเดิม (Inline AJAX) พร้อมคู่มือ Step-by-Step Tutorial รองรับทั้ง Template Gallery และ Custom Tags
1. Form Redirect ไปยังหน้า Thank-You
เมื่อผู้ใช้ Submit ฟอร์มสำเร็จ เบราว์เซอร์จะเปลี่ยน URL ไปที่หน้า /thank-you เป็นวิธีที่ตั้งค่าง่ายและใช้งานได้ดี เมื่อหน้า Thank-you เข้าถึงได้เฉพาะหลังจากส่งฟอร์มสำเร็จ
ถ้าผู้ใช้สามารถเปิด /thank-you โดยตรง, reload หน้า, bookmark หรือกลับเข้าผ่าน browser history ได้ Page View เพียงอย่างเดียวอาจไม่เท่ากับ Lead ใหม่เสมอไป
ขั้นตอนการตั้งค่าใน GTM
1. สร้าง Trigger ชนิด Page View ดักจับหน้าปลายทาง:
- ไปที่เมนู Triggers > คลิก New
- เลือก Trigger Type: Page View (หรือ Window Loaded)
- เลือก This trigger fires on: Some Page Views
- ตั้งเงื่อนไข:
Page Pathcontains:
2. Popup Modal Form
ส่งข้อมูลผ่านหน้าต่าง Modal โดยหน้าเว็บยังอยู่ที่เดิม สามารถดักจับกล่องข้อความสำเร็จได้ด้วย Element Visibility
ขั้นตอนการตั้งค่าใน GTM
1. สร้าง Trigger ชนิด Element Visibility:
ก่อนจะเริ่มสร้าง Trigger แนะนำให้ลองทดสอบกรอกฟอร์มในกล่องด้านซ้ายดูก่อน เพื่อให้เห็นว่าเมื่อส่งข้อมูลสำเร็จแล้วเว็บไซต์จะแสดงผลลัพธ์แบบไหน และจะได้เข้าใจว่าเรากำลังตั้งค่าให้ GTM ดักจับอะไร
- เลือก Trigger Type: Element Visibility
- เลือก Selection Method: ID
- ใส่ Element ID:🔍 วิธีหา Element ID ในเว็บจริง:1. คลิกขวาที่กล่องข้อความสำเร็จ (หรือสิ่งที่ต้องการตรวจจับ) > เลือก Inspect (ตรวจสอบ)
2. ใน Elements panel หาแอตทริบิวต์id="..."ในแท็ก HTML
3. นำค่าในเครื่องหมายคำพูดมาใช้ (ไม่ต้องใส่ #)
- เลือก When to fire this trigger: Once per page
- ในส่วน Advanced: ติ๊กเลือก Observe DOM changes (จำเป็นมาก เพื่อให้ดักจับกล่องข้อความสำเร็จใน Modal ที่โผล่ขึ้นมาทีหลัง)
กรณีที่ Element ไม่มี ID ให้ระบุ สามารถใช้ Class Name หรือ CSS Selector อื่นแทนได้
- เลือก Trigger Type: Element Visibility
- เลือก Selection Method: CSS Selector
- ใส่ Element Selector (เช่น ใส่จุดนำหน้า class):🔍 วิธีหา CSS Selector ในเว็บจริง:1. คลิกขวาที่กล่องข้อความสำเร็จ (หรือสิ่งที่ต้องการตรวจจับ) > เลือก Inspect (ตรวจสอบ)
2. นำชื่อคลาสในclass="..."มาเติมจุดนำหน้า เช่น.popup-form-success-box
3. หรือใน Elements panel คลิกขวา > Copy selector
(หมายเหตุ: ถ้า Copy Selector แล้วได้#idก็สามารถใช้เป็น CSS Selector ได้เช่นกัน)
- เลือก When to fire this trigger: Once per page
- ในส่วน Advanced: ติ๊กเลือก Observe DOM changes
3. Success Element (แสดงข้อความสำเร็จในหน้าเดิม)
เมื่อ Submit สำเร็จ กล่องข้อความ Success จะปรากฏขึ้นในหน้าเดิม สามารถใช้ Element Visibility เพื่อดักจับข้อความนี้
ขั้นตอนการตั้งค่าใน GTM
1. สร้าง Trigger ชนิด Element Visibility:
ก่อนจะเริ่มสร้าง Trigger แนะนำให้ลองทดสอบกรอกฟอร์มในกล่องด้านซ้ายดูก่อน เพื่อให้เห็นว่าเมื่อส่งข้อมูลสำเร็จแล้วเว็บไซต์จะแสดงผลลัพธ์แบบไหน และจะได้เข้าใจว่าเรากำลังตั้งค่าให้ GTM ดักจับอะไร
- เลือก Trigger Type: Element Visibility
- เลือก Selection Method: ID
- ใส่ Element ID:🔍 วิธีหา Element ID ในเว็บจริง:1. คลิกขวาที่กล่องข้อความสำเร็จ (หรือสิ่งที่ต้องการตรวจจับ) > เลือก Inspect (ตรวจสอบ)
2. ใน Elements panel หาแอตทริบิวต์id="..."ในแท็ก HTML
3. นำค่าในเครื่องหมายคำพูดมาใช้ (ไม่ต้องใส่ #)
- เลือก When to fire this trigger: Once per page
- ในส่วน Advanced: ติ๊กเลือก Observe DOM changes (จำเป็นมาก เพื่อให้ดักจับกล่องข้อความ AJAX / React ที่ถูกแทรกเข้ามาในหน้าเดิม)
กรณีที่ Element ไม่มี ID ให้ระบุ สามารถใช้ Class Name หรือ CSS Selector อื่นแทนได้
- เลือก Trigger Type: Element Visibility
- เลือก Selection Method: CSS Selector
- ใส่ Element Selector (เช่น ใส่จุดนำหน้า class):🔍 วิธีหา CSS Selector ในเว็บจริง:1. คลิกขวาที่กล่องข้อความสำเร็จ (หรือสิ่งที่ต้องการตรวจจับ) > เลือก Inspect (ตรวจสอบ)
2. นำชื่อคลาสในclass="..."มาเติมจุดนำหน้า เช่น.inline-form-success-box
3. หรือใน Elements panel คลิกขวา > Copy selector
(หมายเหตุ: ถ้า Copy Selector แล้วได้#idก็สามารถใช้เป็น CSS Selector ได้เช่นกัน)
- เลือก When to fire this trigger: Once per page
- ในส่วน Advanced: ติ๊กเลือก Observe DOM changes