หลังจากที่เรารู้จัก GTM กันไปแล้วในบทที่ผ่านมา วันนี้ผมจะพาเพื่อน ๆ มาลงมือ "ขุดฐานราก" ให้มั่นคงครับ การติดตั้ง GTM ไม่ใช่แค่การเอา Code ไปแปะแล้วจบ แต่การวางโครงสร้าง Account ให้ถูกต้องตั้งแต่แรก จะช่วยให้เราจัดการหลาย ๆ เว็บไซต์ได้โดยไม่มึนหัวในอนาคตครับ
การวางโครงสร้าง Account (Hierarchy) แบบมือโปร
ก่อนจะสมัคร ผมอยากให้เพื่อน ๆ เข้าใจลำดับชั้นของ GTM ก่อนครับ ซึ่งจะแบ่งเป็น 2 ระดับหลัก ๆ ที่เราต้องเจอ:
- Account: เปรียบเสมือน "บริษัท" (โดยทั่วไป 1 บริษัท หรือ 1 เจ้าของ ควรมีแค่ 1 Account)
- Container: เปรียบเสมือน "เว็บไซต์" (ใน 1 Account สามารถมีได้หลาย Container เช่น เว็บหลัก, เว็บพนักงาน, หรือ Landing Page แยกส่วน)
Step 1: เริ่มต้นสร้างบัญชี Google Tag Manager
- เข้าไปที่ tagmanager.google.com แล้ว Log-in ด้วย Google Account ของคุณ
- คลิกปุ่ม "Create Account" ที่มุมขวาบน
- Account Settings: ใส่ชื่อบริษัทของคุณ (เช่น WebMastery Co., Ltd.) และเลือกประเทศ
- Container Setup: * Container Name: แนะนำให้ใส่เป็นชื่อโดเมน (เช่น webmastery.dev) เพื่อให้จำง่าย
- Target Platform: สำหรับเว็บไซต์ทั่วไป ให้เลือก Web
- กด Create และกดยอมรับเงื่อนไขการใช้งาน (Service Agreement) ได้เลยครับ
Step 2: วิธีติดตั้ง GTM Code ลงบนเว็บไซต์
เมื่อสร้างเสร็จ ระบบจะเด้งหน้าต่างที่มี Code มาให้ 2 ชุดครับ (ถ้าใครเผลอกดปิดไป ให้คลิกที่รหัส GTM-XXXXXXX สีฟ้าที่แถบเมนูด้านบนเพื่อเรียกดูใหม่ได้เน้อ)
หน้าต่างแสดง Snippet Code ที่ต้องนำไปติดตั้งในเว็บไซต์
1. สำหรับสาย Hard-coded (เขียนเว็บเอง)
ก๊อปปี้ Code ชุดบนไปวางไว้ในส่วน <head> ให้สูงที่สุดเท่าที่จะทำได้ และชุดล่างไว้หลังเปิดแท็ก <body> ทันทีครับ
ทำไมต้องวาง Code ชุดบนไว้สูงที่สุด?
เพราะเราต้องการให้ GTM เริ่มทำงานเร็วที่สุด เพื่อเก็บข้อมูลพฤติกรรม User ได้ครบถ้วนตั้งแต่เริ่มโหลดหน้าเว็บนั่นเองครับ — Son, webmastery.dev
2. สำหรับสาย WordPress (ใช้ Plugin)
หากเพื่อน ๆ ไม่ถนัดแก้ Code ผมแนะนำ Plugin ตัวท็อปที่คนทำ SEO และ Analytics นิยมที่สุดคือ "GTM4WP (Google Tag Manager for WordPress)" ครับ
* ติดตั้ง Plugin -> ใส่แค่ GTM ID (เช่น GTM-PWXXXX) -> เลือก Container Code เป็น On จบเลยครับ!
Step 3: วิธีตรวจสอบว่า GTM ทำงานถูกต้องหรือยัง?
ติดตั้งเสร็จแล้ว อย่าเพิ่งคิดว่ารอดนะครับ! เราต้องเช็คก่อนด้วยเครื่องมือฟรีที่ชื่อว่า Tag Assistant เพื่อความชัวร์
- ไปที่หน้าแรกของ GTM แล้วกดปุ่ม "Preview" ที่มุมขวาบน
- ใส่ URL เว็บไซต์ของคุณแล้วกด Connect
- หน้าเว็บของคุณจะเปิดขึ้นมาพร้อมหน้าต่างเล็ก ๆ มุมล่างว่า "Tag Assistant Connected"
- กลับมาดูที่หน้าต่าง Preview ของ GTM ถ้าเห็นชื่อ Container ของเราขึ้นสถานะ Connected แสดงว่าติดตั้งสำเร็จ 100% แล้วครับ!
ตารางสรุป: Checklist การติดตั้ง GTM
| จุดเช็ค | สิ่งที่ต้องตรวจสอบ | สถานะ |
|---|---|---|
| Header Check | วาง Code ชุดที่ 1 ใน <head> สูงที่สุด |
[ ] |
| Body Check | วาง Code ชุดที่ 2 หลังแท็ก <body> |
[ ] |
| Connection | ทดสอบผ่าน Preview Mode แล้วขึ้น Connected | [ ] |
| Single Source | มั่นใจว่าไม่ได้วาง Code ซ้ำซ้อนกับ Plugin อื่น | [ ] |
สรุปบทเรียน
ในบทนี้เราได้ติดตั้ง "ตัวรับข้อมูล" หรือ Container ของ GTM ลงบนเว็บเรียบร้อยแล้วครับ นี่คือจุดเริ่มต้นที่จะทำให้เราไม่ต้องยุ่งกับ Code หลังบ้านอีกต่อไปในบทเรียนหลังจากนี้
ในบทถัดไป (Ep. 3) เราจะมาเจาะลึก 3 หัวใจสำคัญที่จะทำให้เพื่อน ๆ ใช้งาน GTM ได้อย่างคล่องแคล่ว นั่นคือ Tags, Triggers และ Variables ครับ เตรียมตัวให้พร้อมเน้อ!
Pro Tip: หากเพื่อน ๆ ทำ SEO ด้วย WordPress การใช้ Plugin GTM4WP ยังมีฟีเจอร์ช่วยส่งข้อมูล "Ecommerce Data" และ "Post Metadata" เข้า Data Layer ให้เราแบบอัตโนมัติด้วยนะ สะดวกสุด ๆ สำหรับสาย Analytics ครับ — Son, webmastery.dev