ใน 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
เพิ่ม 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 เพื่อเปิดใช้งานตัวแปรแบบบิวท์อิน
สร้าง Trigger เพื่อกำหนดค่าให้แท็กทำงานตามเงื่อนไขที่กำหนด
ไปที่เมนู Trigger เพื่อสร้างทริกเกอร์ใหม่ กำหนดประเภทของทริกเกอร์เป็น “ความลึกในการเลื่อน” การนั้นติ๊กเลือกเงื่อนไขความลึกในการเลื่อนแนวตั้งเป็นเปอร์เซ็นต์ ใส่ค่าเป็น 25,50,75 (คั่นด้วยเครื่องหมายคอมมา หากต้องการกำหนดให้ละเอียดกว่านี้ก็แล้วแต่การใช้งานของเราเลยครับ) จากนั้นก็ทำการบันทึกทริกเกอร์ของเราเอาไว้
สร้าง Tag เพื่อส่งข้อมูลเข้า Event scroll
ขั้นตอนสุดท้าย เมื่อเราทำการเปิดใช้งานตัวแปร และกำหนดค่าการทำงานของทริกเกอร์เสร็จเรียบร้อยแล้ว ทำการสร้างแท็ก ซึ่งประเภทแท็กกำหนดเป็น เหตุการณ์ GA4
- เลือกแท็กที่เราต้องการกำหนดค่า
- 1 – กำหนดชื่อเหตุการณ์เป็น : scroll (จะต้องเป็นชื่อนี้เท่านั้น เพราะถ้าเป็นชื่ออื่นจะกลายเป็น Custom Event อื่น ไม่ตรงกับที่ GA4 มี)
- 2 – ใส่ชื่อพารามิเตอร์เป็น percent_scrolled (จะต้องเป็นชื่อนี้เท่านั้น เพราะ GA4 กำหนดมาแบบนี้)
ในช่องค่า หรือ Value ใส่ตัวแปรแบบบิวท์อินที่เราเปิดใช้เอาไว้ในขั้นตอนแรกลงไป {{Scroll Depth Threshold}} - 3 – เลือกทริกเกอร์เป็น ทริกเกอร์ที่เราได้สร้างไว้ในขั้นตอนก่อนหน้านี้ (ชื่อทริกเกอร์อาจจะตั้งไม่เหมือนกันกับรูปภาพประกอบ เราจะตั้งชื่อเป็นอะไรก็ได้ของให้สื่อกับสิ่งที่เราใช้งาน)
ตรวจสอบการทำงานของแท็ก
เมื่อตั้งค่าทุกอย่างเสร็จเรียบร้อยแล้ว ก่อนที่จะเปิดแท็กใช้งานเราก็มาตรวจสอบการทำงานของแท็กกันก่อน ทำการกดพรีวิวดู จากนั้นก็ลองเลื่อนหน้าจอของเว็บไซต์เพื่อให้ทริกเกอร์ทำงาน จากนั้นตรวจสอบว่าทริกเกอร์ทำงานหรือไม่ และส่งค่าถูกต้องตามที่เราตั้งค่าเอาไว้หรือไม่ จากภาพประกอบ ผมลองเลื่อนหน้าจอเว็บให้ไปถึง 25% จากนั้นก็ตรวจสอบค่าต่าง ๆ ที่แท็กส่งค่าออกมา
และภาพตัวอย่างอีกภาพ ขอแถมให้คือภาพรีพอร์ทของ scroll event หลังจากที่ผมติดไปได้หลายวัน เราก็จะเป็นข้อมูลเข้ามา ลองมาดูกันว่าเราจะเห็นอะไร และจะได้อะไรจากการเพิ่ม Event นี้
จากตัวอย่างรีพอร์ทการ scroll ใน GA4 ถ้าเป็นของเดิมเราก็จะเห็น event นี้แค่ 86 ครั้ง เพราะมีแค่ 86 ครั้งที่ผู้ใช้เลื่อนไปถึง 90%
แต่หลังจากที่เราเพิ่มความสามารถของ Event เข้าไปเราก็จะเห็นได้ว่ามีกี่คนที่เลื่อนหน้าจอไปถึง 25% กี่คนเลื่อนไปถึง 50% และอีกกี่คนที่เลื่อนไปถึง 75%
เราก็สามารถกรองข้อมูลจากข้อมูลเหล่านี้ได้ต่อ สมมติเช่นว่า หน้าไหนบ้างหละที่เลื่อนไปถึง 75% แต่ไม่ถึง 90% เพื่อจะได้แยกข้อมูลแต่ละกลุ่มเพื่อนำไปวิเคราะห์เพื่อหาแนวทางในการปรับปรุงต่อไป เป็นต้น
