Google Tag Manager (GTM)

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

นี่คือปัญหาที่ Google Tag Manager (GTM) เข้ามาแก้ไข แต่ GTM คืออะไร? และมันจะช่วยให้การทำงานของเราง่ายขึ้นได้อย่างไร? มาดูภาพรวมและรีวิว GTM ฉบับเต็มกันครับ

Google Tag Manager (GTM) หน้าเริ่มต้น

Google Tag Manager (GTM) คืออะไร?

Google Tag Manager หรือ GTM เป็นเครื่องมือฟรีจาก Google ที่ช่วยให้นักการตลาด เจ้าของเว็บไซต์ หรือนักทำ SEO สามารถจัดการและปรับ tracking code บนเว็บไซต์ได้โดยไม่ต้องแก้ไขโค้ดโดยตรง

โดย GTM ทำหน้าที่เป็นตัวกลางระหว่างเว็บไซต์ของและ tracking tools หรือ 3rd party services ต่าง ๆ เช่น Google Analytics, Facebook Pixel, TikTok Pixel และอื่น ๆ เป็นต้น

ทำไมต้องใช้ Google Tag Manager?

ประหยัดเวลา: ไม่ต้องรอทีม dev ในการเพิ่มหรือแก้ไขแท็ก เราสามารถจัดการใน GTM container ได้เลย
ลดข้อผิดพลาด: ลดโอกาสที่จะเกิดข้อผิดพลาดจากการแก้ไขโค้ดโดยตรง
เพิ่มความยืดหยุ่น: สามารถเพิ่ม ลบ หรือแก้ไขแท็กได้อย่างรวดเร็ว พร้อมมี preview mode ให้ทดสอบก่อนนำขึ้น production จริง
ปรับปรุงประสิทธิภาพเว็บไซต์: ช่วยจัดการการโหลดแท็กให้มีประสิทธิภาพ

การทำงานของ Google Tag Manager

GTM ทำงานโดยใช้ "container" ซึ่งเป็นชุดโค้ดสั้น ๆ ที่ถูก generate โดย GTM ที่เราต้องติดตั้งบนเว็บไซต์ของเราเพียงครั้งเดียว จากนั้นก็สามารถจัดการแท็กทั้งหมดผ่านอินเตอร์เฟซของ GTM ได้ โดยไม่ต้องแก้ไขโค้ดเว็บไซต์อีก หรือไม่ต้องรบกวน developer เลยครับ ซึ่งสะดวกมาก ๆ

ส่วนประกอบหลักของ GTM

Tags: Tracking code ที่เราต้องการใช้งาน
Triggers: เงื่อนไขที่กำหนดว่าเมื่อไหร่แท็กควรทำงาน
Variables: ข้อมูลที่ใช้ในแท็กหรือตัวกระตุ้น

โค้ดชุดนี้วางบน <head> แท็ก

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

โค้ดชุดนี้วางภายในแท็ก <body> วางไว้หน้าสุดถัดจาก body เลย

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

ขั้นตอนการใช้งาน Google Tag Manager

สร้างบัญชีและ Container: เข้าไปที่ tagmanager.google.com และสร้างบัญชีใหม่
ติดตั้ง GTM บนเว็บไซต์: จากนั้นนำโค้ด GTM ไปติดตั้งบนเว็บไซต์
สร้างแท็ก: เพิ่มแท็กที่ต้องการใช้งาน เช่น Google Analytics, Facebook Pixel
กำหนด Triggers: ตั้งค่าว่าเมื่อไหร่แท็กควรทำงาน (tag fired)
ทดสอบ: ใช้ Preview mode เพื่อทดสอบการทำงานของแท็ก (ก่อนนำไปใช้งานจริง)
เผยแพร่: เมื่อทุกอย่างพร้อม ให้กด Publish เพื่อนำการเปลี่ยนแปลงไปใช้จริง

ตัวอย่างการใช้งาน Google Tag Manager

ติดตามการคลิกปุ่ม CTA: สร้างแท็ก Google Analytics และตั้ง trigger เมื่อมีการคลิกปุ่ม
วัดผล Scroll Depth: ติดตามว่าผู้ใช้เลื่อนหน้าเว็บลงไปกี่เปอร์เซ็นต์
ติดตาม Form Submissions: สร้างแท็กเพื่อติดตามการส่งฟอร์มบนเว็บไซต์

GTM Tags

ตัวอย่าง tags จากบางโปรเจคท์ที่ผมได้สร้างขึ้นมาเพื่อ track events ต่าง ๆ

GTM Triggers

Triggers คือกฎหรือเงื่อนไขที่กำหนดว่าเมื่อไหร่ที่ Tag ควรถูกเรียกใช้ภายใน Google Tag Manager (GTM) เช่น เมื่อผู้ใช้เข้าชมหน้าเว็บหนึ่ง คลิกปุ่ม หรือส่งฟอร์มสำเร็จ เป็นต้น

ตัวอย่าง Triggers

ตัวอย่างเช่น

หากต้องการติดตามเมื่อผู้ใช้คลิกปุ่ม Trigger จะถูกตั้งให้เป็นแบบ "Click" และกำหนดว่าต้องเป็นปุ่มที่ต้องการเท่านั้น
เมื่อเงื่อนไขที่ตั้งไว้เกิดขึ้น Trigger จะเรียกใช้ Tag ที่เชื่อมโยงกันโดยอัตโนมัติ

Triggers ช่วยให้สามารถติดตามกิจกรรม (Events) ที่ผู้ใช้กระทำบนเว็บไซต์ได้อย่างแม่นยำ

GTM Variables

GTM Variables คือ ข้อมูลหรือค่าที่สามารถเปลี่ยนแปลงได้ตามสถานการณ์หรือเงื่อนไขที่กำหนดใน Google Tag Manager (GTM) ซึ่งจะถูกใช้ใน Tags และ Triggers เพื่อกำหนดการทำงานที่เฉพาะเจาะจงมากขึ้น

Variables ทำหน้าที่เป็นตัวช่วยในการระบุและดึงข้อมูล เช่น

Built-in Variables ที่มาพร้อมกับ GTM เช่น Click URL, Page URL หรือ Scroll Depth
User-Defined Variables ที่สามารถสร้างขึ้นเองเพื่อใช้ดึงข้อมูลเฉพาะ เช่น ข้อมูลจากฟอร์ม หรือค่าที่มากับ URL

GTM Variables

จากภาพมีการกำหนดตัวแปรที่สร้างขึ้นเองชื่อ "GA4 Measurement ID"

ดูผลลัพธ์การ track ที่ได้เซ็ตไว้ใน GTM บน GA4

ตัวอย่างผลลัพธ์การ track การคลิกปุ่มต่าง ๆ บนเว็บ (อันนี้แสดงผลบน Google Analytics) ทำให้เราได้ insights รวมถึงเข้าใจพฤติกรรมผู้ใช้งานเว็บของเรามากยิ่งขึ้น ว่าได้คลิกปุ่มอะไรบ้าง เพื่อที่เราจะได้นำข้อมูลส่วนนี้ไปวิเคราะห์และปรับปรุงเว็บไซต์หรือด้าน marketing ให้มีประสิทธิสูงยิ่งขึ้นไปอีก

ตัวอย่างการ track events การคลิกต่าง ๆ แล้วนำมาแสดงผลบน GA4

ข้อดีของ Google Tag Manager

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

ข้อควรระวัง

ความปลอดภัย: ระมัดระวังในการให้สิทธิ์การเข้าถึง GTM แก่ทีมงาน
การทดสอบ: ทดสอบให้แน่ใจก่อนเผยแพร่การเปลี่ยนแปลงใด ๆ
การจัดการแท็ก: ตรวจสอบและลบแท็กที่ไม่ได้ใช้งานอยู่เป็นประจำ

เคล็ดลับการใช้งาน Google Tag Manager ให้มีประสิทธิภาพ

ใช้ Folders: จัดระเบียบแท็กโดยใช้โฟลเดอร์
ตั้งชื่อให้ชัดเจน: ใช้ระบบการตั้งชื่อที่เข้าใจง่ายสำหรับทั้ง Tags, Triggers, และ Variables ให้อยู่ในรูปแบบมาตรฐานที่เป็น naming convention เพื่อที่คนที่มารับหน้าที่ต่อจากเรา หรือแม้แต่ตัวเราเองจะได้เข้าใจชื่อเหล่านั้นได้ง่าย ไม่สับสน
ใช้ Workspaces: สร้าง workspace แยกสำหรับการทดลองหรือโปรเจคท์ใหญ่
ศึกษา Built-in Variables: ทำความเข้าใจและใช้ประโยชน์จากตัวแปรที่มีมาให้
ใช้ Custom HTML Tags อย่างระมัดระวัง: ระวังการใช้ Custom HTML Tags เพราะอาจส่งผลต่อประสิทธิภาพของเว็บไซต์

สรุป

Google Tag Manager เป็นเครื่องมือที่ทรงพลังสำหรับนักการตลาดดิจิทัล เจ้าของเว็บไซต์ และนักทำ SEO ช่วยให้การจัดการแท็กและสคริปต์ต่าง ๆ เป็นเรื่องง่าย รวดเร็ว และมีประสิทธิภาพ แม้ว่าจะมีความซับซ้อนในการเรียนรู้ช่วงแรก แต่เมื่อเข้าใจการทำงานแล้ว GTM จะช่วยประหยัดเวลาและรีซอร์สได้อย่างมาก

หากเพื่อน ๆ ยังไม่เคยใช้ Google Tag Manager มาก่อน นี่อาจเป็นเวลาที่เหมาะสมที่จะเริ่มต้น ลองนำ GTM ไปใช้กับเว็บไซต์ของเราดูครับ และจะพบว่าการจัดการแท็กและการวิเคราะห์ข้อมูลเป็นเรื่องที่ง่ายขึ้นอย่างไม่น่าเชื่อ