ใน Google Analytic 4 ซึ่งเป็นเวอร์ชันใหม่ที่จะมาแทนที่ตัวเก่า (Google Analytic Universal จะเลิกใช้ช่วงเดือนกรกฎาคม 2023 ที่จะถึงนี้) วันนี้หลังจากที่เราย้ายมาใช้ Google Analytic 4 (GA4) ก็เลยจะมาบันทึกวิธีการทำ Custom Site search เผื่อจะเป็นประโยชน์กับเพื่อน ๆ ที่กำลังลองเล่นอยู่เหมือนกัน (ต้องบอกว่าปกติมีแต่ใช้งานดูข้อมูลเบื้องต้นเท่านั้น เราไม่เคยที่จะเข้าไปศึกษาการตั้งค่าแบบขั้นสูงเลย)
GA4 นั้นมากับฟีเจอร์ใหม่ ๆ หลายตัว หนึ่งในนั้นก็คือการ Tracking Site search ต่อไปนี้จะเรียกว่าเหตุการณ์ หรือ Event สำหรับ Site search มันคือ
บันทึกเหตุการณ์การดูผลการค้นหาแต่ละครั้งที่ผู้เข้าชมค้นหาในเว็บไซต์ (ตามพารามิเตอร์การค้นหา) โดยค่าเริ่มต้น ระบบจะให้เหตุการณ์ผลการค้นหาเริ่มทำงานเมื่อหน้าเว็บโหลดโดยมีพารามิเตอร์การค้นหาทั่วไปใน URL ปรับพารามิเตอร์ที่ต้องการค้นหาในการตั้งค่าขั้นสูง
https://analytics.google.com/
ซึ่ง Event นี้เป็นหนึ่งใน Enhanced measurement (การวัดที่ปรับปรุงแล้ว) มีมาให้เราใช้งานได้เลย โดยที่ไม่ต้องทำอะไรเพิ่ม แต่ว่าจะวัดได้ก็ต่อเมื่อเว็บของเรามีระบบการค้นหาแบบใช้ Query Parameter ใน URL เช่น
https://green.in.th/?s=คำค้น ซึ่งพารามิเตอร์ใน URL ตัวอย่างก็คือ s หากเว็บเราใช้ชื่ออื่น ๆ ก็สามารถเพิ่มชื่อพารามิเตอร์ที่เว็บของเราใช้งานได้เลย โดยทั่ว ๆ ไป ก็จะใช้ชื่อ q,s,search,query,keyword และถ้าหากเว็บใครที่ใช้ WordPress ก็หวานหมูเลย ไม่ต้องทำอะไรเพิ่มมาก แค่ตรวจสอบว่ามีพารามิเตอร์ชื่อ s อยู่หรือไม่ อย่างในตัวอย่างภาพที่ผมแคปไว้ให้ดูนั้นก็มีอยู่แล้ว
Custom Site Search in GA4
สำหรับเว็บที่มีระบบค้นหาที่ไม่ได้ใช้ Query Parameter อย่างเว็บอีกเว็บที่เรากำลังจะทำเป็นตัวอย่างก็คือเว็บอีสานร้อยแปด มีระบบการค้นหาภาษาอีสานเป็นแบบ https://esan108.com/dict/search/คำค้นหา
ซึ่งไม่มี Query Parameter เลย ดังนั้นเราจึงต้องมาทำการ ตั้งค่าเพิ่มเติมกัน ซึ่งจริง ๆ แล้วมีหลายวิธีอยู่เหมือนกัน อาจจะเป็นวิธีการไปเพิ่มโค้ดในเว็บเพื่อส่งเป็น data เข้าไป แต่วิธีที่เรากำลังจะพาทำคือ การใช้ Google Tag Manager เพราะว่าเราก็ติด GA4 ผ่าน Google Tag Manager (GTM) อยู่แล้ว และจะได้ไม่ต้องไปยุ่งกับโค้ดที่ใช้งานอยู่ เผื่ออยากปรับเปลี่ยนอะไรก็ทำผ่าน GTM ได้เลยนั่นเอง
ตั้งค่าผ่าน GTM สำหรับทำ Custom Site search in GA4
เพิ่มตัวแปรสำหรับอ่านค่าคีย์เวิร์ดจาก URL ใน GTM
ผมได้ทำการสร้างตัวแปรโดยเลือกประเภทตัวแปรเป็น JavaScript เพื่อที่จะได้ใช้ JavaScript ในการดึงค่าจาก URL โดยโค้ดที่ผมเพิ่มมีดังนี้ หน้าที่ของโค้ดนี้คือ ดึงค่าข้อความที่อยู่หลัง /search/ แล้ว return ค่าออกมา ตั้งชื่อเป็น “Dict Search Variable” ชื่อนี้จะได้นำไปใช้งานในขั้นตอนถัด ๆ ไป
function() {
var pagePath = window.location.pathname;
var searchParam = '/search/';
if (pagePath.indexOf(searchParam) > -1) {
return decodeURI(pagePath.split(searchParam)[1].split('/')[0])
}
}เราสามารถกด Debug ใน GTM ดูได้ว่าโค้ดที่เราเพิ่งเพิ่มไปสามารถส่งค่าตัวแปรได้ถูกต้องหรือไม่
สร้าง Trigger เพื่อให้เป็นตัว Trig ว่าต้องการจะให้ Tag ทำงานเมื่อไหร่
ในที่นี้ผมตั้งค่า ทริกเกอร์นี้เริ่มทำงานเมื่อ Page URL ตรงกับค่าที่เราต้องการ ซึ่งในเว็บอีสานร้อยแปดของเราเป็น https://esan108.com/dict/search/ หากเว็บของเพื่อน ๆ มีฟอร์แมตที่ไม่เหมือนกันก็เปลี่ยนให้ตรงกับเว็บของเราได้เลย
สร้างแท็กเพื่อส่ง Event ใน GA4
ทำการสร้างแท็กเพื่อเป็นตัวส่งข้อมูล Event ไปหา GA4
- เลือกประเภทของแท็กเป็น Event GA4
- แท็กการกำหนดค่า เลือกแท็กที่เราเชื่อมต่อกับ GA4 เอาไว้ (ไม่ได้พูดถึงวิธีการติดตั้ง GA4 ในบทความนี้)
- ใส่ชื่อเหตุการณ์ หรือ Event Name เป็น view_search_results
- ใส่ชื่อพารามิเตอร์เหตุการณ์เป็น search_term
- ใส่ค่าเป็น {{Dict Search Variable}} ซึ่งเลือกมาจากตัวแปรที่เราได้สร้างไว้ก่อนหน้านั้น
- เลือกทริกเกอร์ที่เราได้สร้างไว้ก่อนหน้านั้นเป็น Dict Search Trigger
แล้วก็กดบันทึก สังเกตุว่าการตั้งค่าตั้งตัวแปร ทริกเกอร์ และ แท็ก ผมจะตั้งชื่อให้มันขึ้นต้นเหมือนกัน เพื่อในอนาคตหากมีการติดแท็ก หรือเพื่อตัวแปรเยอะ ๆ เราจะได้จัดการได้ง่าย สามารถกดเรียงเพื่อให้กลุ่มที่ทำงานเดียวกันอยู่ใกล้ ๆ กันนั่นเอง
ทำการ Debug เพื่อทดสอบการทำงานของแท็กที่เราเพิ่งสร้างไปว่าสามารถส่ง Event ออกไปได้หรือไม่
เป็นอันเสร็จเรียบร้อยครับ
