KNOWLEDGE

คลังข้อมูล รวบรวมบทความที่เป็นประโยชน์ และคำถามที่พบบ่อย

Question บันทึกการกระทำของผู้ใช้บนหน้าเว็บ

ด้วย Event-Tracking

นอกจากเครื่องมือที่ดี และการออกแบบที่โดดเด่นของเว็บไซต์แล้ว สิ่งนึงที่ขาดไม่ได้เลยของโลกเทคโนโลยีทุกวันนี้คือการ track หรือบันทึกการกระทำต่างๆ ที่ผู้ใช้เข้ามาสู่หน้าเว็บไซต์ของเรา ยิ่งถ้าเว็บไซต์ไหนที่เป็น online service, e-commerce หรือ product ในรูปแบบ startup แล้ว เรื่อง measurement เนี่ยเป็นประโยชน์ที่จะทำให้ได้ตามจุดประสงค์ของผู้ก่อตั้ง หรือทั้งทีมเลยด้วย

แล้วเครื่องมืออะไรบ้างที่จะช่วยให้เรารับรู้ได้ว่าผู้ใช้เข้ามาเว็บไซต์ของเรา แล้วเขาทำอะไรบ้าง?

by event-tracking.com
event-tracking.com

ดังที่เคยเขียนแนะนำเครื่องมือหมวด measurement ไปในบทความเรื่อง เว็บไซต์ฉันเจ๋ง.. ใช้อะไรเป็นตัววัด? นั่นแหละครับ เครื่องมือพวกนั้นสามารถช่วยให้เราบรรลุ goal ที่เราตั้งไว้ แล้วก็ยังช่วยทำให้รู้ถึงจุดบกพร่องที่เราควรจะแก้ไขได้ด้วย แต่การที่เราจะได้เครื่องมือเหล่านั้นมาใช้ ก็ย่อมแลกด้วยค่าใช้จ่ายกับความยุ่งยากในเรื่องของการติดตั้ง, ทำความเข้าใจ ประกอบกับบางคนไม่มีความรู้เรื่องการแก้ไข code หรือไม่ได้มาตามสายที่เน้นไปเรื่องของเทคโนโลยีมากนัก และเรื่องที่สำคัญไม่แพ้กันอีกเรื่องเลยคือ ทุกครั้งที่เรานำ tracking code เหล่านั้นมาติดบนเว็บไซต์ จะส่งผลต่อความเร็วในการโหลดหน้าเว็บไซต์ด้วย ยิ่งใช้เยอะ ติดเยอะ ก็ยิ่งโหลดนานขึ้น

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

คำตอบคือ Event-Tracking ที่กำลังจะเขียนนี้ครับ

ผมคิดว่าทุกวันนี้เว็บไซต์ทั้งหมดกว่า 80% ที่เราผ่านตากันมา หรือต้อง develop ก่อนส่งให้ลูกค้านั้น ส่วนใหญ่จะติด Google Analytics กันอยู่แล้ว และด้วยความสามารถพื้นฐานที่เรารู้กันอยู่ของ Google Analytics นี้เองที่ช่วยให้เราสามารถวิเคราะห์ข้อมูลต่างๆ ได้เยอะพอสมควร แล้วก็ยังสามารถบันทึกการกระทำ(event) ที่เกิดขึ้นภายในหน้าเว็บไซต์ได้อีกด้วย อย่างเช่นผมมีหน้าเว็บไซต์ขายของโชว์รายละเอียดอยู่หน้านึง มีปุ่มอยู่ 1 ปุ่ม พร้อมกับ tab ให้ข้อมูล 3 อย่างคือ รายละเอียดสินค้า, สเปคสินค้า และความคิดเห็นของสมาชิก

Simple Ecommerce Mockup

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

Event-Tracking ช่วยให้เรารับรู้สิ่งต่างๆ เหล่านี้ได้ง่ายขึ้น โดยไม่ต้องเจอปัญหาอย่างที่บอกไปในตอนแรกครับ แค่เพียงมี Google Analytics อยู่บนหน้าเว็บไซต์ของเรา เขียน Javascript ใส่ปุ่ม หรือวัตถุที่ต้องการจะบันทึกเล็กน้อย เพียงเท่านี้เวลามีคนอยู่ที่หน้าเว็บของเรา แล้วกดปุ่มใดๆก็ตามที่เราบันทึกไว้ ก็จะไปแสดงให้ดูที่ dashboard ของ Google Analytics ด้วยเช่นกัน ยกตัวอย่างจากเว็บไซต์ Event-Tracking มาจะได้โค้ดดังนี้

ga ('send', 'event', 'category', 'action');

สองค่าแรกไม่ต้องเปลี่ยนครับ ส่วนค่าของ category นั้นเราสามารถตั้งเป็นอะไรก็ได้เพื่อจัดหมวดหมู่ของ event ที่เกิดขึ้น เช่น button clicked, scroll, hover อะไรทำนองนี้ ส่วน action นั้นเราก็สามารถตั้งชื่อได้เองเช่นกันเพื่อบอกว่าการกระทำไหนที่เกิดขึ้นมา  เพื่อให้เห็นภาพมากขึ้น ผมยกตัวอย่างว่า ผมมีปุ่ม Add to Cart โดยมี id ชื่อว่า ‘add-to-cart-button‘ หากต้องการเขียนโค้ดเพื่อ track ปุ่มดังกล่าวก็เขียนได้ประมาณ

$('#add-to-cart-button').on('click', function(){
  ga('send', 'event', 'Button Clicked', 'Add to Cart');
});

หมายเหตุ: โค้ดตัวอย่างใช้งานร่วมกับ jQuery

อธิบายได้ว่า เมื่อกดปุ่มที่มี id ชื่อ ‘add-to-cart-button‘ ทุกครั้งให้บันทึก event ไว้ภายใน category ชื่อ ‘Button Clicked‘ และมีค่า action ชื่อว่า ‘Add to Cart‘ และเมื่อทุกครั้งที่มีคนคลิกที่ปุ่มนี้ event จะถูกบันทึกเก็บไว้ ซึ่งเราสามารถเข้าไปดูได้ผ่านบัญชี Google Analytics ของเราเอง

– หากต้องการทดสอบ หรือดู event แบบทันที(real-time) ให้เลือกเมนู Real-Time แล้วคลิกที่เมนูย่อย Events

real time event tracking

– หากต้องการทำเป็น report หรือดู event ทั้งหมดแบบย้อนหลัง, เป็นรายวัน เดือน ปี สามารถเข้าไปดูที่เมนู Behavior แล้วคลิกที่เมนูย่อย Events เลือก Overview

event tracking - behavior

เพียงเท่านี้เราก็สามารถบันทึกการกระทำของผู้ใช้เบื้องต้นผ่าน Google Analytics อย่างเดียวโดยไม่จำเป็นต้องไปหาเครื่องมือตัวอื่นอีกแล้วล่ะครับ

บันทึกการกระทำของผู้ใช้บนหน้าเว็บ
Black Ribbon