ติดตั้ง Event Tracking บนเว็บไซต์ง่าย ๆ ด้วยตนเองผ่าน Google Tag Manager (ตอนที่ 1: Click Tracking)

จากบทความที่แล้ว ที่เราได้อธิบายเกี่ยวกับ Event Tracking เบื้องต้นไป ทำให้เราเข้าใจจุดประสงค์ในการทำ Event Tracking รวมถึงความหมาย, โครงสร้าง และหลักการตั้งชื่อ event บน Google Analytics

ซึ่งในวันนี้เราจะมาลงรายละเอียดถึงวิธีทำ Event Tracking เบื้องต้นผ่าน Tools Google Tag Manager เช่น การ Track ปุ่มต่างๆบนเว็บไซต์ รวมถึงการ Track Scrolling Tracking และ Element Visibility เพื่อดูว่าผู้ใช้อ่านเนื้อหาบนเว็บไซต์เราจบหรือไม่ เพื่อที่เราจะสามารถศึกษาพฤติกรรมของเขาตอนเข้ามาที่เว็บไซต์ของเรา รวมถึงสามารถนำไปประยุกต์ใช้กับการสร้างเป็น Goal ของเว็บไซต์ หรือสร้าง Segment และ Export เป็น Audience เพื่อนำไปทำ Remarketing นอกจากนั้นยังสามารถสร้าง Funnel analysis ที่สามารถใช้ในการวิเคราะห์ขั้นตอนที่สำคัญๆ ของ User Journey โดยการดูจำนวนของผู้ใช้ที่ Completed Goal หรือคนที่ Drop off ไปในแต่ละขั้นตอน กล่าวโดยสรุปคือ เราสามารถระบุพฤติกรรมของผู้ใช้ได้ละเอียดมากขึ้น จากเดิมที่สามารถทำได้แค่ในระดับ Page นั่นเองค่ะ

ที่จริงแล้วในการติด Event Tracking บนเว็บไซต์จะมีวิธีหลักๆ อยู่ทั้งหมด 2 วิธีด้วยกัน วิธีแรกจะต้องอาศัยการ Coding เพื่อส่งข้อมูล Data Layer มาจากหน้าเว็บไซต์ วิธีที่ 2 ที่เราจะมาสอนในวันนี้เป็นวิธีง่ายๆ โดยทุกท่านสามารถตั้งค่าได้ผ่าน GTM โดยไม่ต้อง Coding หรือให้ผู้พัฒนาเว็บไซต์มาช่วยเลยค่ะ

สิ่งที่ต้องทำก่อนจะทำ Event Tracking

1. ก่อนอื่นเราจะต้องมี Google Analytics และ Google Tag Manager ก่อน ถ้ายังไม่มีเราแนะนำให้ดูวิธีการสร้าง GA, GTM  และตั้งค่าเบื้องต้นได้ที่นี่เลยค่ะ
2. ถ้ามี GA และ GTM พร้อมแล้ว เราก็มาวางแผนว่าเราจะ Tracking Event อะไรบนเว็บไซต์บ้าง โดยปกติแล้วจะแนะนำให้ Tracking ปุ่มต่างๆบนเว็บไซต์ที่มองว่าเป็น Call To Action ที่สำคัญกับธุรกิจ เพื่อจะได้เข้าใจพฤติกรรมของผู้ใช้ได้อย่างละเอียดมากขึ้น
3. หลังจากที่วางแผนว่าจะติด Tracking ที่ปุ่มไหนบ้าง ต้องมาวางแผนว่า เราจะตั้งชื่อ Event Category, Action และ Label อย่างไร ซึ่งได้มีอธิบายเบื้องต้นไปในบทความที่แล้ว อย่างไรก็ตามควรตั้งชื่อให้มีความสอดคล้องกัน และแบ่งหมวดหมู่ตามเว็บไซต์ โดยปกติแล้วการตั้งชื่อไม่มีหลักการตายตัว ขึ้นอยู่กับโครงสร้างของแต่ละเว็บไซต์ หรืออธิบายง่ายๆเลยก็คือให้นึกถึงเวลาที่ดูรีพอร์ต ถ้าตั้งชื่อที่มีความชัดเจน เวลาดูก็จะทำให้รู้เลยว่า Event นั้นๆ คือส่วนไหนบนเว็บไซต์

วิธีการตั้งค่า Event Tracking บน Google Tag Manager

เราจะมาแนะนำวิธีการตั้งค่า Event Tracking 3 อย่างหลักๆ ที่ควรจะติดตั้งบนเว็บไซต์ ประกอบไปด้วย Click Tracking, Scroll Depth และ Element Visibility เพื่อเพิ่มประสิทธิภาพในการวิเคราะห์พฤติกรรมของผู้ใช้ โดยในตอนแรกเราจะเริ่มต้นที่ Click Tracking กันก่อนนะคะ

1. Click Tracking

ใช้ Tracking ปุ่ม Call To Action ต่างๆ บนเว็บ เช่น ปุ่ม Submit Form, ปุ่ม Next หรือ Back, ปุ่ม Download เอกสารต่างๆ, คลิกเพื่ออ่านเนื้อหาบนเว็บ หรือ Add Product To Cart เป็นต้น เราก็จะทราบจำนวนได้เลยว่าผู้ใช้คลิกปุ่มต่างๆบนเว็บเท่าไร เพื่อดู User Behavior หรือ Customer Journey ได้ละเอียดมากขึ้น นอกจากนั้นยังสามารถนำไปตั้งเป็นเงื่อนไขสำหรับ Goal ใน Google Analytics ได้ หรือประยุกต์โดยสร้างเป็น Segment และ Export เป็น Audience นำไปใช้กับ Google ads เพื่อให้ Ads มีความ Personalize กับลูกค้าแต่ละกลุ่มมากขึ้น

ยกตัวอย่างจากเว็บไซต์ Predictive.co.th เราต้องการจะ Track ปุ่มที่เป็น Call To Action ต่างๆในหน้าแรกของเว็บไซต์ เช่น ปุ่ม ‘Explore Our Services’, ‘Contact Sales’ หรือ ‘Contact Us’ ที่อยู่บริเวณด้านล่างของหน้าหลัก 

• 

ขั้นตอนการตั้งค่าบน GTM

1. ขั้นตอนแรกต้องไป Enable Built-In Variable ใน GTM ก่อน โดยเลือก ‘Variables’ จากนั้นคลิกที่ ‘Configure’

จากนั้นไปที่ส่วน Clicks แล้วติ๊ก Checkbox เพื่อ Enable Clicks Variables ซึ่งที่เราใช้ส่วนใหญ่ก็จะเป็น Click Element, Classes, ID, URL และ Text

2. ต่อไปเราจะมาสร้าง Tags กันค่ะ (ซึ่ง Tags จะทำหน้าที่ส่งข้อมูลไปหา GA) โดยตั้งค่าตามในรูปนี้เลย 

• เลือก Tag Type เป็น ‘Google Analytics: Universal Analytics’
• เลือก Track Type เป็น ‘Event’
• จากนั้น GTM ก็จะให้เราตั้งชื่อ Event Tracking Parameter ซึ่งประกอบไปด้วย Category, Action, Label และ Value ซึ่งส่วนนี้สามารถตั้งชื่อได้ตามความเหมาะสมเลยค่ะ จากในภาพสังเกตว่าในส่วนของ Category กับ Action จะเป็นตัวแปรที่เป็นค่าคงที่ แต่ใน Label ตัวแปรจะเป็น Dynamic ก็คือจะรับค่าตาม Value ที่ถูกส่งมา ในที่นี้ก็จะคือเป็น Text ของปุ่มนั้นๆ ทำให้เราสามารถจะ Tracking หลายๆ ปุ่มบนเว็บไซต์ โดยไม่ต้องสร้าง Tags ใหม่ตลอดนั่นเองค่ะ

3. จากนั้นก็เราก็ต้องกำหนดว่าจะให้ tags นี้ทำงานตอนไหน โดยการเพิ่ม Triggering ด้านล่างได้เลย

โดยเงื่อนไขที่ใช้สามารถเลือกได้ตามความเหมาะสมเลยค่ะ จากตัวอย่างเราจะใช้ Click Class เนื่องจากเราต้องการ Tracking หลายๆปุ่มใน Tags เดียวกัน และชื่อ Class ที่ตั้งไว้มีความ Unique ที่จะทำให้สามารถระบุได้ว่าผู้ใช้มีการกดปุ่ม Call To Action ต่างๆ ตามที่ระบุไปข้างต้น ไม่ใช้ส่วนของ Navigation หรือส่วนอื่นๆที่เราไม่ต้องการ หรือในบางกรณี เราอาจจะใช้ Click ID หรือ Page URL ก็ได้ ตามวัตถุประสงค์ และข้อจำกัดของแต่ละเว็บค่ะ 

How to test

หลังจากที่เราตั้งค่าใน GTM เสร็จแล้ว เราจะมาทดสอบกันว่า Tags ของเราทำงานได้ถูกต้องหรือไม่ โดยมีขั้นตอนสั้นๆ ง่ายๆ ดังนี้ค่ะ

1. กดปุ่ม ‘Preview’ ใน GTM ถ้า Preview สามารถทำงานได้ปกติ จะมีแถบสีส้มปรากฏขึ้นมาด้านบนของ GTM

2. จากนั้นไปที่เว็บไซต์ของเรา แล้วกด Refresh จะมีส่วนของ GTM ปรากฏขึ้นมาด้านล่าง จากนั้นลองคลิกที่ปุ่มที่เราต้องการ Track ถ้า Tags ที่เราตั้งค่าไว้ถูก Fired แสดงว่า Trigger ของเราทำงานได้ถูกต้องค่ะ

3. เพื่อความมั่นใจว่าข้อมูลเราจะถูกส่งเข้า GA ให้ไปที่ Realtime Report บน GA จากนั้นเลือกที่เมนู Events ถ้า Event ที่เราตั้งค่าไว้ถูกส่งมาเรียบร้อย และชื่อถูกต้องตามที่ตั้งไว้ ก็แสดงว่าเสร็จสมบูรณ์ค่ะ

ขอจบเนื้อหาในตอนแรกเพียงเท่านี้ก่อนนะคะ ซึ่งสิ่งที่ได้อธิบายไปก็จะมี สิ่งที่ต้องเตรียมก่อนจะทำ Event Tracking, การทำ Click Tracking บน Google Tag Manager รวมถึงการ Test ผ่าน Preview Mode บน GTM หรือการดูข้อมูล Realtime Report บน Google Analytics

หวังว่าทุกท่านจะเข้าใจการตั้งค่า Click Tracking เบื้องต้น และสามารถนำไปประยุกต์ใช้กับการ Tracking Event บนเว็บไซต์ของท่านได้นะคะ และในตอนหน้าจะมาอธิบายวิธีการ Tracking ที่เหลืออีก 2 วิธี ได้แก่ Scroll Depth และ Element Visibility นั่นเองค่ะ

ถ้าท่านใดมีข้อสงสัยเพิ่มเติมตรงไหนสามารถสอบถามได้เลยค่ะ หรือหากต้องการคำปรึกษา เพื่อวางแผนการเก็บข้อมูลบนเว็บไซต์ จนไปถึงการนำข้อมูลไปใช้ เพื่อให้ตอบโจทย์ Business Objective ทาง Predictive ยินดีให้คำปรึกษาเบื้องต้นโดยไม่มีค่าใช้จ่าย สามารถติดต่อเข้ามาได้เลย ผ่านช่องทางการติดต่อของ CookiePlus By Predictive หรือคลิ้กติดต่อ CookiePlus ด้านล่างได้เลยค่ะ