ทำ Heatmap ด้วย Crazy Egg
ในบทความนี้ เราจะมาพูดถึงเรื่อง การทำ heatmap กันนะครับ บางท่านอาจจะสงสัยว่า heatmap คืออะไร? ทำไปเพื่ออะไร? เดี๋ยวผมจะเริ่มอธิบายให้นะครับ
เริ่มจาก heatmap คืออะไร?
heatmap คือการแสดงภาพของข้อมูล โดยจะแสดงออกมาในรูปแบบของ “ สี ” ซึ่งแต่ละสีจะบ่งบอกถึงระดับความถี่ บ่อย ของพฤติกรรม ที่ user ใช้งานเว็บเรา
แล้ว ทำไปเพื่ออะไร?
เราทำ heatmap มาเพื่อ แสดงให้เห็นชัดเจนว่า user ใช้งานส่วนไหนของเว็บเราบ้าง ซึ่งสามารถนำมาวิเคราะห์ เพื่อประเมินว่า user เขาสนใจอะไรบ้าง ในเว็บของเรา
จากการอธิบายขั้นต้น อาจจะยัง งง ๆ หรือ ไม่เข้าใจว่ามันคืออะไร เดี๋ยวเรามาดูขั้นตอนการทำ heatmap ด้วย crazyegg แล้วมาดูกันว่า ผลลัพธ์ จะออกมาหน้าตาเป็นยังไงนะครับ
ก่อนอื่นก็ต้อง login เข้า crazyegg.com ก่อนนะครับ หากใครยังไม่มีบัญชีผู้ใช้ ก็สมัครให้เสร็จเรียบร้อยนะครับ ^ — ^
งั้นเรามาเริ่มกันเลย !!
ขั้นตอนแรก เราต้องสร้าง snapshots กันก่อน โดยเลือกที่ปุ่ม + Add new และเลือก Snapshot ตามรูปนะครับ
เมื่อเลือก Snapshot แล้ว จะต้องเลือกว่า จะทำแบบ multi snapshot หรือ แบบ one snapshot . ในที่นี้ผมจะยกตัวอย่างแบบ one snapshot นะครับ
หลังจากนั้นก็ใส่เว็บที่เราต้องการทำ heatmap แล้วกำหนดชื่อของ snapshot นะครับ
ต่อมาก็เลือกว่าเราสนใจทำ heatmap ของ view ไหนนะครับ
เมื่อเลือก view เสร็จแล้วเราก็มากำหนดวันเริ่ม และสิ้นสุดของ snapshot นะครับ โดยการสิ้นสุดของ snapshot เรา จะมีอยู่ 2 แบบนะครับ คือ ครบตามระยะเวลาที่กำหนด หรือ ครบตามจำนวนเข้าชม
หรือจะใช้ค่าพื้นฐานที่ crazyegg กำหนดให้ก็ได้นะครับ
เสร็จแล้วก็ กดปุ่ม Next จะไปหน้าที่บอกรายละเอียดของ snapshot ให้กดปุ่ม Create Snapshot เพื่อเป็นการเสร็จสิ้นการสร้าง snapshot นะครับ
เมื่อสร้างเสร็จแล้ว snapshot จะมีสถานะ pending เพื่อเช็คกับเว็บไซต์ว่ามี script ของ crazyegg บนเว็บเราไหม หากมีแล้วมันก็จะเริ่มเก็บข้อมูลการเข้าชมเว็บไซต์นะครับ
แล้ว Snapshot ที่สร้าง จะได้ออกมาเป็นหน้าตาแบบไหนละ?
Snapshot ที่สร้างมาจะได้ข้อมูล 5 แบบ ที่ได้ข้อมูลแตกต่างกันคือ Heatmap Scrollmap, Confetti, Overlay และ List
Heatmap
จะเห็นว่าจุดไหนที่ถูกคลิกบ่อย ๆ จะเป็นสีสว่าง ๆ ยิ่งถูกคลิกบ่อยจะยิ่งสว่างนะครับ
Scrollmap
ส่วนไหนที่ถูกเปิดเยอะ หรือเลื่อนดูบ่อย ก็จะเป็นสีโทนสว่าง
Confetti
เป็นการแสดงจุดให้เห็นว่า คลิกตรงไหนบ้างนะครับ และเรายังสามารถ filter ข้อมูลตามที่สนใจได้ เช่น Referrer, New vs Returning, Search Engine, OS เป็นต้น
Overlay
จะแสดงเฉพาะบาง elements ที่ถูกคลิกบ่อย ๆ ซึ่งจะมีเครื่องหมาย + กำกับอยู่ และจะมีสีแตกต่างกันไปตามจำนวนคลิก
List
จะแสดง elements ที่ถูกคลิกออกมาเป็นรูปแบบตารางให้เห็นนะครับ พร้อมทั้งบอก ประเภท จำนวนคลิก และ เปอร์เซ็นที่ถูกคลิก ของ elements นั้น ๆ
การทำ heatmap ด้วย crazyegg แบบเบื้องต้นก็เสร็จสิ้นไปแล้วนะครับ หวังว่าจะพอเป็นแนวทางให้กับผู้ที่สนใจได้ไม่มากก็น้อยนะครับผม
