บทช่วยสอน Google Tag Manager 4: การส่งแบบฟอร์มการติดตาม – ขั้นสูง

ในส่วนที่ 3 ของบทแนะนำ Google Tag Manager ที่อัปเดต เราได้กล่าวถึง การติดตามแบบฟอร์มด้วยตัว ทริกเกอร์การส่งแบบฟอร์ม ซึ่งเป็นวิธีง่ายๆ ในการติดตามแบบฟอร์มการติดต่อที่เชี่ยวชาญ อย่างไรก็ตาม อาจใช้ไม่ได้ผลเสมอไป ทั้งนี้ขึ้นอยู่กับโค้ดของแบบฟอร์มและเทคโนโลยีของแบบฟอร์ม สิ่งนี้สามารถเชื่อมโยงกับปัญหา JavaScript ในสถานที่หรือการส่งแบบฟอร์มที่ GTM ไม่ได้รับ

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

Google Analytics ไม่ได้ติดตามกิจกรรมนี้โดยอัตโนมัติ แต่ Google Tag Manager (GTM) นำเสนอโซลูชันอัตโนมัติสำหรับการติดตามการส่งแบบฟอร์ม

ในบทช่วยสอนนี้ เราถือว่าคุณมีบัญชี Google Tag Manager อยู่แล้ว สร้างคอนเทนเนอร์ และติดตั้งบนเว็บไซต์ของคุณแล้ว คุณควรตั้งค่าบัญชี Google Analytics สำหรับเว็บไซต์ของคุณและเชื่อมโยงกับ GTM

อะไรทำให้การติดตามแบบฟอร์มทำได้ยาก

ให้เราย้อนกลับไปและให้ความกระจ่างว่าทำไมจึงมีเทคนิคต่างๆ มากมายสำหรับการติดตามแบบฟอร์ม มีรูปแบบหลายประเภทและไม่มีมาตรฐานระดับโลกเกี่ยวกับวิธีการพัฒนารูปแบบเหล่านี้ ซึ่งทำให้การติดตามรูปแบบดังกล่าวมีความท้าทาย นี่คือภาพรวมของสถานการณ์/เหตุการณ์ทั่วไปที่อาจเกิดขึ้นบนเว็บไซต์ของคุณหลังจากส่งแบบฟอร์ม:

• แบบฟอร์มจะเปลี่ยนเส้นทางผู้ใช้ไปยัง หน้า ขอบคุณ เยี่ยมมาก ข้อมูลนี้จะถูกติดตามโดยอัตโนมัติผ่าน Pageview
• แสดงให้เห็นว่ารูปแบบการแจ้งเตือนขอบคุณยูโย่หลังรูปแบบปุ่มส่งถูกคลิก: Great ถ้ามันจะส่งแบบฟอร์มส่งไป GTM อ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ในบทแนะนำการโพสต์บล็อกของเรา
• แบบฟอร์มจะรีเฟรชและแสดง ข้อความ ขอบคุณ : ท้าทายแต่ทำได้ด้วย ทริกเกอร์การมองเห็นองค์ประกอบ
• หน้าต่างป๊อปอัปจะ แจ้งให้ผู้ใช้ทราบเกี่ยวกับการส่งที่สำเร็จ: ท้าทายแต่ใช่ว่าจะเป็นไปไม่ได้ด้วย ทริกเกอร์การมองเห็นองค์ประกอบ

วิธีเริ่มต้นด้วยการติดตามแบบฟอร์ม

ในการเริ่มต้น เราขอแนะนำให้คุณเปิดใช้งาน ตัวแปรแบบฟอร์มที่มี อยู่แล้วภายในของ GTM และสร้าง ทริกเกอร์การส่งแบบฟอร์ม ที่รับฟังการส่งแบบฟอร์มทั้งหมด อ่านเพิ่มเติมเกี่ยวกับการตั้งค่าในบทช่วยสอนโพสต์บล็อกล่าสุดของเรา Form Auto-Event Listener จะตรวจจับเหตุการณ์ของเบราว์เซอร์ที่ส่งมาตรฐานทั้งหมด ทำการทดสอบสองสามแบบด้วยแบบฟอร์มของคุณ

หาก GTM ไม่บันทึกการ ส่งแบบฟอร์ม ในโหมดดูตัวอย่างและดีบัก วิธีการติดตามมาตรฐานจะไม่ทำงาน และคุณจะต้องใช้วิธีอื่นแทน ซึ่งเป็นเรื่องปกติธรรมดา นั่นคือเหตุผลที่เราจะทำงานกับทางเลือกที่ยอดเยี่ยม: The Element Visibility Trigger

ทริกเกอร์การมองเห็นองค์ประกอบอธิบาย

ทริกเกอร์การมองเห็นองค์ประกอบ (EVB) จะ ติดตามเมื่อองค์ประกอบเฉพาะปรากฏขึ้นบนหน้าจอ (เนื่องจากการคลิก การเลื่อน หรือการโต้ตอบอื่นๆ) และด้วยเหตุนี้จึงมีกรณีการใช้งานที่หลากหลาย เทคนิคนี้สามารถนำไปใช้กับแบบฟอร์มเมื่อมีข้อความ ขอบคุณ ปรากฏขึ้นหลังจากที่ส่งแบบฟอร์มเรียบร้อยแล้ว นี่อาจเป็นการแจ้งเตือน ขอบคุณ ในหน้าแบบฟอร์มเดียวกัน แบนเนอร์ ขอบคุณ เมื่อหน้าแบบฟอร์มโหลดซ้ำ หรือหน้าต่างป๊อปอัป สำหรับตัวอย่างเชิงปฏิบัติเพิ่มเติม คลิกที่นี่

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

สำหรับวิธีการเลือก เพื่อกำหนดองค์ประกอบที่คุณต้องการกำหนดเป้าหมาย คุณมีสองตัวเลือกให้เลือก:

• รหัสองค์ประกอบ : ตรงกับองค์ประกอบแรกในหน้าที่มีรหัสที่ระบุ วิธีนี้ใช้ได้ผลดีหากคุณมีองค์ประกอบเดียวให้ติดตาม
• ตัวเลือก CSS : สิ่งนี้ตรงกับองค์ประกอบหรือกลุ่มขององค์ประกอบบนหน้าที่ตรงกับตัวเลือกของคุณและเหมาะสำหรับการติดตามองค์ประกอบหลายรายการที่สามารถปรากฏบนหน้า

ขั้นตอนที่ 1: ค้นหาตัวระบุที่ไม่ซ้ำ

เริ่มต้นด้วยการตรวจสอบข้อความแสดงความสำเร็จของแบบฟอร์มที่แสดง

โดยคลิกขวาเพื่อเข้าถึงเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ ตัวอย่างเช่น ใน Chrome ให้คลิกขวาที่องค์ประกอบที่คุณต้องการตรวจสอบ แล้วเลือก ตรวจสอบองค์ประกอบ ซึ่งจะแสดงข้อมูลต่างๆ แก่คุณ เช่น เนื้อหาของข้อความ คลาส CSS ID และองค์ประกอบอื่นๆ ในตัวอย่างของเราด้านล่าง ข้อความมี ID ที่ ส่ง - ข้อความ ที่ไม่ซ้ำกันและสามารถใช้เป็นเงื่อนไขใน EVB Trigger

ขั้นตอนที่ 2: สร้างทริกเกอร์การมองเห็นองค์ประกอบ

ทริกเกอร์กำหนดสิ่งที่เราต้องการติดตามที่มองเห็นได้ในวิวพอร์ตของผู้ใช้ ในกรณีนี้ จะเป็นการตรวจสอบเพื่อดูว่าข้อความ ขอบคุณ ปรากฏขึ้นหรือไม่

สำหรับการตั้งค่าทริกเกอร์ ให้ทำตามขั้นตอนเหล่านี้:

• ไปที่ ทริกเกอร์ ในแถบด้านข้างทางซ้ายแล้วสร้างใหม่
• แทนที่ Untitled Trigger ด้วยชื่อที่สื่อความหมาย เช่น EVB – Contact – Form Submitted
• เลือกประเภททริกเกอร์: การมองเห็นองค์ประกอบ

สำหรับการกำหนดค่าทริกเกอร์ คุณจะต้องตั้งค่า:

• วิธีการเลือก : เลือก ID จากดรอปดาวน์
• Element ID : ส่ง-ข้อความ
  • สิ่งนี้ใช้ ID เฉพาะที่คุณระบุในขั้นตอนที่ 1 เพื่อระบุว่าคุณต้องการติดตามข้อความ ขอบคุณ ใด
• เมื่อใดควรเริ่มทริกเกอร์นี้ : หนึ่งครั้งต่อหน้า
  • ซึ่งหมายความว่าจะเริ่มทำงานเพียงครั้งเดียวในหน้าปัจจุบันเมื่อผู้ดูมองเห็นองค์ประกอบที่ตรงกับ ID
  • อีกสองตัวเลือกจะมีประโยชน์เมื่อมีการติดตามองค์ประกอบมากกว่าหนึ่งรายการในหน้าด้วย ตัวเลือก CSS
• เปอร์เซ็นต์ขั้นต่ำที่มองเห็นได้ : 50
  • ที่นี่ คุณสามารถระบุค่าเป็นเปอร์เซ็นต์ ซึ่งเป็นจำนวนองค์ประกอบที่ต้องมองเห็นได้ในวิวพอร์ตเพื่อให้ทริกเกอร์เริ่มทำงาน ดังนั้น หากคุณตั้งค่าเป็น "50" จะต้องมองเห็นองค์ประกอบที่ตรงกันอย่างน้อย 50%
  • โดยค่าเริ่มต้น องค์ประกอบจะต้องมองเห็นได้อย่างน้อย 50% บนหน้าจอเพื่อทริกเกอร์เหตุการณ์ นี่เพียงพอแล้วในกรณีของเรา
• สังเกตการเปลี่ยนแปลง DOM : เลือกช่องนี้เพื่อเปิดใช้งานทริกเกอร์เพื่อติดตามองค์ประกอบที่ตรงกันซึ่งปรากฏเป็นการเปลี่ยนแปลง DOM
  • การตั้งค่านี้ช่วยให้คุณติดตามการมองเห็นขององค์ประกอบที่อาจไม่มีอยู่ใน DOM (Document Object Model) เมื่อโหลดแบบฟอร์มการติดต่อครั้งแรก กล่าวอีกนัยหนึ่ง การดำเนินการนี้จะรอให้องค์ประกอบ HTML พร้อมข้อความ ขอบคุณ ปรากฏขึ้น
• เงื่อนไขเพิ่มเติมในการยิงทริกเกอร์:
  • เนื่องจากเราใช้ ID ซึ่งควรเป็นค่าเฉพาะสำหรับแบบฟอร์มนี้ เราจึงไม่จำเป็นต้องตั้งค่าเงื่อนไขเพิ่มเติมที่นี่
  • หาก ID นี้ใช้กับแบบฟอร์มอื่นด้วย ขอแนะนำให้กำหนด เส้นทางของหน้า ให้รวมหน้าที่แสดงแบบฟอร์มที่เกี่ยวข้อง

คลิก บันทึก เพื่อสิ้นสุดการตั้งค่าทริกเกอร์

ขั้นตอนที่ 3: สร้างแท็กกิจกรรมการส่งแบบฟอร์ม

ขั้นตอนสุดท้ายในการติดตามการส่งแบบฟอร์มคือการสร้างแท็กที่จะบันทึกเหตุการณ์ใน Google Analytics ด้วยข้อมูลที่คุณต้องการ เหตุการณ์จะเริ่มขึ้นเมื่อตรงตามเงื่อนไขของ ทริกเกอร์การมองเห็นองค์ประกอบ ที่คุณตั้งค่าไว้ในขั้นตอนก่อนหน้า ตอนนี้ สร้างแท็กตามที่ระบุในภาพหน้าจอต่อไปนี้:

ขั้นตอนที่ 4: บันทึกเวอร์ชัน ทดสอบ และเผยแพร่

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

ตรวจสอบให้แน่ใจว่าครอบคลุมสถานการณ์การทดสอบเหล่านี้สำหรับการติดตามแบบฟอร์มของคุณ:

• ส่งแบบฟอร์มติดต่อโดยไม่ต้องกรอก แท็กไม่ควรเริ่มทำงานในกรณีนี้
• กรอกแบบฟอร์มพร้อมรายละเอียดที่ถูกต้องแล้วคลิกส่ง แท็กควรเริ่มทำงานทันทีที่ข้อความ ขอบคุณ ปรากฏขึ้นบนหน้าจอของคุณ

รายงานเหตุการณ์แบบเรียลไทม์ของ Google Analytics ควรแสดง Hit เหตุการณ์ของคุณหากทุกอย่างทำงานอย่างถูกต้อง อ่านบล็อกโพสต์ของเราเกี่ยวกับ ปัญหาการทดสอบ Google Tag Manager และวิธีแก้ไข หากคุณพบปัญหาใดๆ

หากการทดสอบทั้งหมดของคุณสำเร็จ คุณสามารถคลิกปุ่ม ส่ง ใน GTM ตั้งชื่อที่สื่อความหมายให้กับเวอร์ชันที่เผยแพร่นี้ เช่น เหตุการณ์การส่งแบบฟอร์มติดต่อที่เพิ่ม แล้วคลิก เผยแพร่

บทสรุป

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

บทแนะนำ Google Tag Manager ของเราครอบคลุมการ ติดตามลิงก์ภายนอก (ขาออก) การ ติดตามลิงก์ดาวน์โหลด และการ ส่งแบบฟอร์มพื้นฐาน มีกิจกรรมประเภทอื่นที่คุณต้องการติดตามหรือไม่ คุณต้องการความช่วยเหลือเกี่ยวกับกรณีที่ซับซ้อนกว่านี้หรือไม่? อย่าลังเลที่จะติดต่อเรา - เรายินดีที่จะช่วยเหลือ! และสำหรับการอัปเดตที่น่าตื่นเต้น โปรด สมัครรับจดหมายข่าวของเรา