หลังจากที่เรารู้จัก 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 ของคุณ
สร้างบัญชี Google Tag Manager -
คลิกปุ่ม "(สร้างบัญชี) Create Account" ที่มุมขวาบน
- Account Settings: ใส่ชื่อบริษัทของเรา (เช่น WebMastery Co., Ltd.) และเลือกประเทศ (ไทย)
-
Container Setup: ตัว Container Name แนะนำให้ใส่เป็นชื่อโดเมน (เช่น webmastery.dev) เพื่อให้จำง่าย
- Target Platform: สำหรับเว็บไซต์ทั่วไป ให้เลือก Web
ตัวอย่างขั้นตอนการสร้างบัญชี Google Tag Manager โดยกรอกชื่อ Account, เลือกประเทศ ตั้งชื่อ Container และเลือกแพลตฟอร์ม Website
- กด สร้าง (Create) และกดยอมรับเงื่อนไขการใช้งาน (Service Agreement) ได้เลยครับ
หน้าจอยืนยันและยอมรับข้อกำหนดการใช้งานของ Google Tag Manager ก่อนเริ่มใช้งานระบบ
Step 2: วิธีติดตั้ง GTM Code ลงบนเว็บไซต์
เมื่อสร้างเสร็จ ระบบจะเด้งหน้าต่างที่มี Code มาให้ 2 ชุดครับ (ถ้าใครเผลอกดปิดไป ให้คลิกที่รหัส GTM-XXXXXXX สีฟ้าที่แถบเมนูด้านบนเพื่อเรียกดูใหม่ได้เน้อ)
หน้าต่างแสดง Snippet Code ที่ต้องนำไปติดตั้งในเว็บไซต์
วิดีโอสาธิตขั้นตอนการคัดลอกและติดตั้ง GTM Install Code ลงในส่วน <head> และ <body> ของเว็บไซต์
1. สำหรับสาย Hard-coded (เขียนเว็บเอง)
ก๊อปปี้ Code ชุดบนไปวางไว้ในส่วน <head> ให้สูงที่สุดเท่าที่จะทำได้ และชุดล่างไว้หลังเปิดแท็ก <body> ทันทีครับ
โค้ดส่วน <head>
(วางไว้ให้สูงที่สุดเท่าที่จะทำได้ ในส่วนของ head)
<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-XXXXXXX');</script>
โค้ดส่วน <body>
(วางไว้บรรทัดแรกสุด ต่อจากแท็กเปิด body)
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
Inspect ดู
ตัวอย่างการตรวจสอบโค้ด Google Tag Manager ที่ติดตั้งจริงบนเว็บไซต์ผ่าน Chrome DevTools โดยเห็นสคริปต์ใน <head> และ <body> ครบถ้วน
ทำไมต้องวาง Code ชุดบนไว้สูงที่สุด?
เพราะเราต้องการให้ GTM เริ่มทำงานเร็วที่สุด เพื่อเก็บข้อมูลพฤติกรรม User ได้ครบถ้วนตั้งแต่เริ่มโหลดหน้าเว็บนั่นเองครับ — Son, webmastery.dev
วิดีโอสาธิตวิธีการตรวจสอบว่า GTM Code ถูกฝังอยู่บนหน้าเว็บไซต์เรียบร้อยแล้วหรือไม่ (Inspect Source)
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" ที่มุมขวาบน (ใครยังใช้ไม่เป็น อ่านวิธีใช้งาน GTM Preview Mode แบบเจาะลึกได้ที่ EP นี้ครับ)
- ใส่ 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