Enhance Scrolls Event – GA4

Enhance Scrolls Event ใน GA4 เพื่อเพิ่มความสามารถให้แทร็คเมื่อผู้ใช้เลื่อนหน้าจอ 25% , 50% , 75% เพื่อให้เข้าใจผู้ใช้ เป็นแนวทางในการปรับปรุงเนื้อหาต่อไป

ใน GA4 เวอร์ชันใหม่ล่าสุดนั้นมีฟีเจอร์ใหม่อย่าง Enhanced measurement ซึ่งถือว่าเป็นการวัดเหตุการณ์ที่มีการปรับปรุงมาแล้วอย่างดี วันนี้เราจะมาโฟกัสกันสำหรับเหตุการณ์ “การเลื่อน” หน้าจอ หรือการ Scrolls เมาส์ ซึ่ง GA4 จะมีค่าเริ่มต้นมาให้คือ จะบันทึกเหตุการณ์เมื่อผู้ใช้เลื่อนหน้าจอไปถึง 90%

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

ซึ่ง Event ของการเลื่อนหน้าจอหรือ Scrolls ที่เราจะทำการเก็บข้อมูลเพิ่มเติมคือ เมื่อผู้ใช้เลื่อนหน้าจอไปถึง

  • 25% –> 50% –> 75% –> 90% (Default)

เพราะฉะนั้น เราจะต้องมาทำการตั้งค่าเหตุการณ์เพิ่มสำหรับกรณีที่เพิ่มมาคือ 25% , 50% และ 75%

Measurement scroll event : the first time a user reaches the bottom of each page (i.e., when a 90% vertical depth becomes visible)

https://support.google.com/analytics/answer/9216061?hl=en&utm_id=ad
รายการเหตุการ การวัดที่ปรับปรุงแล้วใน GA4

เพิ่ม Event GA4 เพื่อส่ง Event เมื่อเลื่อนหน้าจอไปถึง 25% , 50% และ 75% ด้วย Google Tagmanager (GTM)

สำหรับการเพิ่มความสามารถให้กับ Event scroll ใน GA4 เราจะตั้งค่าทุกอย่างใน GTM ทั้งหมด ไม่ได้แตะ GA4 หรือมีการแก้ไขโค้ดใด ๆ ในเว็บไซต์เลย โดยภาพรวมและคอนเซปต์ของการตั้งค่าคือ

  • ทำการเปิดใช้งานตัวแปรแบบบิวท์อิน (ซึ่ง GTM / GA4 มีมาให้อยู่แล้ว ตัวแปรนั้นคือ Scroll Depth Threshold ซึ่งทำหน้าที่ส่งค่าเปอร์เซ็นที่ผู้ใช้เลื่อนหน้าจอ)
  • สร้าง Trigger เมื่อตัวแปร Scroll Depth Threshold มีค่า 25 , 50 , 75 เปอร์เซ็นตามลำดับ
  • สร้างแท็กเพื่อส่งค่า Scroll Depth Threshold เข้าไปในพารามิเตอร์เหตุการณ์ของการ scroll

เปิดใช้งานตัวแปรบิวท์อิน Scroll Depth Threshold

เข้าไปที่ Tagmanager > ตัวแปร > กำหนดค่า > ติ๊กเลือก Scroll Depth Threshold เพื่อเปิดใช้งานตัวแปรแบบบิวท์อิน

เปิดใช้งานตัวแปรแบบบิวท์อิน Scroll Depth Threshold

สร้าง Trigger เพื่อกำหนดค่าให้แท็กทำงานตามเงื่อนไขที่กำหนด

ไปที่เมนู Trigger เพื่อสร้างทริกเกอร์ใหม่ กำหนดประเภทของทริกเกอร์เป็น “ความลึกในการเลื่อน” การนั้นติ๊กเลือกเงื่อนไขความลึกในการเลื่อนแนวตั้งเป็นเปอร์เซ็นต์ ใส่ค่าเป็น 25,50,75 (คั่นด้วยเครื่องหมายคอมมา หากต้องการกำหนดให้ละเอียดกว่านี้ก็แล้วแต่การใช้งานของเราเลยครับ) จากนั้นก็ทำการบันทึกทริกเกอร์ของเราเอาไว้

สร้างทริกเกอร์ กำหนดให้ทริกเกอร์ทำงานเมื่อ scroll 25 , 50 , 75 เปอร์เซ็นต์

สร้าง Tag เพื่อส่งข้อมูลเข้า Event scroll

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

  • เลือกแท็กที่เราต้องการกำหนดค่า
  • 1 – กำหนดชื่อเหตุการณ์เป็น : scroll (จะต้องเป็นชื่อนี้เท่านั้น เพราะถ้าเป็นชื่ออื่นจะกลายเป็น Custom Event อื่น ไม่ตรงกับที่ GA4 มี)
  • 2 – ใส่ชื่อพารามิเตอร์เป็น percent_scrolled (จะต้องเป็นชื่อนี้เท่านั้น เพราะ GA4 กำหนดมาแบบนี้)
    ในช่องค่า หรือ Value ใส่ตัวแปรแบบบิวท์อินที่เราเปิดใช้เอาไว้ในขั้นตอนแรกลงไป {{Scroll Depth Threshold}}
  • 3 – เลือกทริกเกอร์เป็น ทริกเกอร์ที่เราได้สร้างไว้ในขั้นตอนก่อนหน้านี้ (ชื่อทริกเกอร์อาจจะตั้งไม่เหมือนกันกับรูปภาพประกอบ เราจะตั้งชื่อเป็นอะไรก็ได้ของให้สื่อกับสิ่งที่เราใช้งาน)
สร้าง Tag สำหรับส่งพารามิเตอร์ เข้าไปใน Event scroll

ตรวจสอบการทำงานของแท็ก

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

ตรวจสอบการทำงานของแท็ก

และภาพตัวอย่างอีกภาพ ขอแถมให้คือภาพรีพอร์ทของ scroll event หลังจากที่ผมติดไปได้หลายวัน เราก็จะเป็นข้อมูลเข้ามา ลองมาดูกันว่าเราจะเห็นอะไร และจะได้อะไรจากการเพิ่ม Event นี้

ตัวอย่างรีพอร์ทเหตุการณ์ scroll ใน GA4

จากตัวอย่างรีพอร์ทการ scroll ใน GA4 ถ้าเป็นของเดิมเราก็จะเห็น event นี้แค่ 86 ครั้ง เพราะมีแค่ 86 ครั้งที่ผู้ใช้เลื่อนไปถึง 90%
แต่หลังจากที่เราเพิ่มความสามารถของ Event เข้าไปเราก็จะเห็นได้ว่ามีกี่คนที่เลื่อนหน้าจอไปถึง 25% กี่คนเลื่อนไปถึง 50% และอีกกี่คนที่เลื่อนไปถึง 75%
เราก็สามารถกรองข้อมูลจากข้อมูลเหล่านี้ได้ต่อ สมมติเช่นว่า หน้าไหนบ้างหละที่เลื่อนไปถึง 75% แต่ไม่ถึง 90% เพื่อจะได้แยกข้อมูลแต่ละกลุ่มเพื่อนำไปวิเคราะห์เพื่อหาแนวทางในการปรับปรุงต่อไป เป็นต้น

Default image
pongpat

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

Articles: 95

Leave a Reply

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น