ทำไมถึงต้องทำ Data tracking ?

ในปัจจุบันปัจจัยหนึ่งที่สำคัญต่อการพัฒนาเว็บแอปพลิเคชันให้ตอบโจทย์การใช้งานต่อ user และมีประสิทธิภาพ นั่นก็คือ การทำ Data tracking หรือการติดตามการใช้งานของ user นั่นเอง ซึ่งการติดตามข้อมูลการใช้งานบนเว็บแอปพลิเคชัน เป็นกระบวนการที่สำคัญเพื่อให้เราสามารถเข้าใจพฤติกรรมการใช้งานของ user และมีผลกับการพัฒนาและปรับปรุงเว็บแอปพลิเคชัน หรือ feature การใช้งานต่าง ๆ ให้ดียิ่งขึ้น

‍

เครื่องมือที่ใช้ในการติดตาม

เครื่องมือที่ใช้ในการทำ Data tracking นั้นมีหลากหลายมากมายในท้องตลาดให้เราได้เลือกใช้ ตั้งแต่การติดตาม event ต่าง ๆ ที่เกิดขึ้นบนหน้าเว็บ ไม่ว่าจะเป็นการโหลดหน้าเว็บไซต์, การ click, การ scroll หรือการดูระยะเวลาการใช้งานของ user ตัวอย่างของเครื่องมือที่ใช้ในการติดตาม Google Analytics, Amplitude, Mixpanel, Hotjar, Heap เป็นต้น สำหรับการเลือกใช้เครื่องมือขึ้นอยู่กับจุดประสงค์ของการเก็บข้อมูลและงบที่มีเลย แต่ในหลาย ๆ เครื่องมือก็มี free tier ให้เราได้ใช้กัน อย่างเช่น Google Analytics, Amplitude, Hotjar

‍

เครื่องมือที่จะพูดถึงคือ

• Google Tag Manager

คือเครื่องมือฟรี! ของ Google ที่ช่วยจัดการเรื่อง tag ต่าง ๆ ที่เราต้องการจะ track โดยที่เราไม่ต้องไปแก้ไข source code และเรายังสามารถส่งข้อมูลที่เราติดตามไปยัง platform อื่น ๆ ได้อย่างง่ายดายเพราะ GTM ได้มีเตรียม template ไว้ให้เราแล้วเพียงแค่เข้าไปกรอกข้อมูลเพิ่มเติมของ platform ปลายทางที่เราต้องการจะส่งไป

• Amplitude

คือเครื่องมือที่ใช้สำหรับวิเคราะห์พฤติกรรมของ user คล้าย ๆ กันกับ Google Analytics ซึ่งเราสามารถนำ event ต่าง ๆ ที่เกิดขึ้นบนเว็บแอปพลิเคชันของเรามาสร้างเป็น chart ต่าง ๆ เพื่อทำความเข้าใจการใช้งานของ user  หรือหา user insight

‍

‍

Tracking Design

ในขั้นตอนของการ track เราจะใช้ GTM ในการ track แล้วส่งข้อมูลไปที่ Amplitude เพื่อวิเคราะห์ สิ่งที่เราต้องรู้ก่อนคือเราต้องการจะ track event อะไรบ้างและแต่ละ event จะถูก trigger ด้วยอะไร หรือ metric ไหนบ้างที่เราอยากดู

การเชื่อมต่อระหว่าง GTM ไปยัง Amplitude สามารถทำได้โดยการสร้าง Tag ขึ้นมา จากนั้นเลือก Tag Type ที่เป็ย Amplitude Analytics Browser SDK ได้จาก template ที่ทาง GTM มีไว้ให้ได้เลย แล้วเราค่อยนำ API Key จาก project ใน Amplitude ที่เราได้สร้างไว้มาใส่

Metric ตัวอย่างที่มีการเก็บข้อมูล

• Sessionคือช่วงระยะเวลา ๆ หนึ่งที่ทาง user ได้มีการเปิดหน้าเว็บแอปพลิเคชันของเราขึ้นมาใช้งาน
  ‍
• User Segmentationคือการแบ่งกลุ่มของ user ว่าเป็นคนประเทศไหน หรือเข้ามาใช้งานแอปพลิเคชันด้วยอุปกรณ์หรือ ระบบปฏิบัติการอะไร เป็นต้น

Tag ตัวอย่างที่จะ track

• Page Viewเราสามารถสร้าง tag ใน GTM สำหรับดูว่ามีหน้าไหนบ้างที่ user ได้เข้าไปดู โดยที่ event นี้จะถูก trigger ด้วย event type ที่ชื่อว่า Page View
  ‍
• ClickTag นี้คือการติดตามการคลิกปุ่มต่าง ๆ หรือ Element ใด ๆ บนหน้าเว็บแอปพลิเคชัน เพื่อดูวิธีการใช้งานหรือ จะดูจำนวนการใช้งาน Feature ที่พึ่งปล่อยไปก็ได้ โดยจะถูก Trigger ด้วย Event Type ที่ชื่อว่า Click - All Elements

Tips for tracking design

จากตัวอย่าง Tag เกี่ยวกับการ click โดยปกติถ้าเราอยากรู้การว่า user คลิกปุ่มไหนกี่ครั้งบ้าง เราก็อาจจะทำการสร้าง Tag สำหรับการ click มาติดให้กับทุก ๆ ปุ่มที่อยาก track มี 10 ปุ่มก็ต้องสร้าง 10 Tag ซึ่งยากต่อการจัดการ แต่เราสามารถจัดการสิ่งนี้ได้ด้วยการขอความร่วมมือกับทีม Dev เพื่อแก้ปัญหาสิ่งนี้ ใน GTM เราสามารถตั้งเงื่อนไขของการ trigger เมื่อมีการคลิกได้ โดยที่เราต้องเพิ่ม attribute เพื่อระบุว่าปุ่มนี้คือปุ่มที่เราต้องการจะ track พอมีการคลิกที่ปุ่มนี้ซึ่งมีการกำหนด attribute สำหรับการ track Tag นี้ก็จะทำงานทันที ในทางกลับกันถ้า user กดปุ่มที่ไม่มี attribute ดังกล่าว ก็จะไม่เกิดอะไรขึ้น และอีกสิ่งหนึ่งคือ เมื่อมีการระบุแล้วว่าปุ่มไหนบ้างที่เราต้องการจะ track แต่เราไม่รู้ว่า user กดปุ่มอะไร เราก็ต้องตั้งชื่อให้กับปุ่มนั้นด้วย และส่งชื่อนั้นผ่านเข้าไปใน properties ของ Tag นั้น ในส่วนของการตั้งชื่อก็ขึ้นอยู่กับการออกแบบเลยว่าจะทำยังไงให้รู้ว่าปุ่มนี้คือปุ่มไหนบนหน้าเว็บ องค์ประกอบของชื่อปุ่มอาจจะต้องมีการระบุว่าปุ่มนี้อยู่ที่ไหน อยู่ใน feature อะไร มีหน้าที่อะไร เป็นต้น

ตัวอย่างของการตั้งเงื่อนไขในการ trigger และการเพิ่ม attribute ให้กับปุ่มที่ต้องการจะ trackเตรียม attribute ที่จะเพิ่มให้กับปุ่ม

• data-tracking=”true” ใช้สำหรับบอกว่านี่คือปุ่มที่เราจะ track
  ‍
• data-id=”button-name” ใช้สำหรับระบุว่าปุ่มนี้มีชื่ออะไร

ในภาพนี้คือการสั่งให้ trigger เมื่อกดปุ่มที่มี attribute: data-tracking=”true”

หลังจากนั้นให้เราสร้าง variable มา 1 ตัวที่เป็น Type: Custom JavaScript เพื่อใช้สำหรับรอรับชื่อของปุ่มนั้น โดยชื่อของปุ่มนั้นคือ attribute: data-id=”button-name” จากตัวอย่างใน code จะเป็นการวนลูปไล่หา attribute: data-id="button-name" ขึ้นไปในแต่ละ layer ของ element โดยมีการกำหนดให้ลูปสูงสุด 10 ชั้น แต่เมื่อไหร่ที่มันเจอ attribute นี้แล้วให้ออกจากลูปนี้และส่งชื่อของปุ่มนี้ออกมา การที่ทำแบบนี้เพราะในบางครั้งทีมที่พัฒนาหน้าเว็บได้มีการสร้างปุ่ม ๆ หนึ่งขึ้นมา แต่ในปุ่มนั้นมันมี element อยู่หลาย layer และ attribute ที่กำหนดชื่อนั้นถูกตั้งไว้ที่ parent element เราจึงจำเป็นต้องใช้วิธีการวนลูปไล่ขึ้นไปหา parent element เพื่อหาชื่อของปุ่ม จากนั้นให้เราไปสร้าง Tag ที่จะใช้เก็บข้อมูลสำหรับการ click ของ user แล้วให้เลือก trigger ที่เราได้สร้างขึ้นมาและแนบ property ที่เป็นชื่อปุ่มเข้าไปด้วย

เพียงเท่านี้เราก็สามารถ track การคลิกปุ่มต่าง ๆ ได้ด้วย Tag เดียวทำให้ง่ายต่อการจัดการขึ้นมาก

Visualization

เมื่อมีข้อมูลที่เกิดขึ้นจากการ track แล้วจาก event ต่าง ๆ เราก็สามารถนำข้อมูลเหล่านี้มาวิเคราะห์หา insight หรือ ดูจำนวนการใช้งานใน feature ต่าง ๆ เราก็สามารถนำมาสร้างเป็น chart ได้ตัวอย่างขอ chart ที่นำมาดูข้อมูล

• User journey
  ‍ดูรูปแบบการใช้งานของ User ว่าไปหน้าไหนแล้วมี action อะไรบ้างกดปุ่มไหนแล้วไปหน้าไหนต่อ ทำให้เห็น pattern การใช้งานของ User ได้

• Funnel
  ‍สามารถนำมาใช้ดูอัตราการ drop off rate หรือ success rate ของ feature หนึ่งได้ว่า user คนแต่ละคนใช้งานใน feature นั้นได้สมบูรณ์ไหม

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

บทสรุป

การทำ Data tracking เป็นอีกหนึ่งขั้นตอนสำคัญที่จะช่วยให้เราสามารถพัฒนาและปรับปรุงเว็บแอปพลิเคชันให้มีประสิทธิภาพ และสามารถตอบสนอง user ที่เข้ามาใช้งานได้มากยิ่งขึ้น ด้วยการเก็บข้อมูลการใช้งานของ user เพื่อทำเข้าใจวิธีการใช้งานของ user แล้วนำข้อมูลเหล่านี้มาวิเคราะห์ แล้วนำไปปรับปรุงหรือพัฒนาเว็บแอปพลิเคชันของเรา ส่วนเครื่องมือที่ใช้ทำสิ่งนี้ ก็มีหลากหลายเครื่องมือในท้องตลาดให้เราได้เลือกใช้ ตั้งใช้งานฟรีไปจนถึงเสียเงินขึ้นอยู่กับขนาดของข้อมูลหรือ feature ต่าง ๆ ที่เราจะนำมาใช้ เมื่อเราได้เครื่องมือที่จะใช้แล้วก็มาออกแบบกันต่อว่าจะ track อย่างไรให้ได้ประสิทธิภาพและสามารถจัดการได้ง่าย และนำไปแสดงผลวิเคราะห์ได้อย่างเหมาะสม

‍