หลังจากที่เราทราบแล้วว่า GA4 สำคัญอย่างไร ในบทนี้เราจะมาลงมือติดตั้งกันครับ โดยผมจะแนะนำวิธีที่ดีที่สุด นั่นคือการติดตั้งผ่าน Google Tag Manager (GTM) ครับ
ทำไมต้องติดตั้งผ่าน GTM?
หลายคนอาจสงสัยว่า ทำไมไม่เอา Code จาก GA4 ไปแปะในเว็บตรง ๆ แบบ gtag เหมือนแต่ก่อน?
คำตอบคือการใช้ GTM จะช่วยให้เราบริหารจัดการ Tag ทั้งหมด (Facebook Pixel, Google Ads, TikTok Pixel) ได้ในที่เดียวโดยไม่ต้องไปรบกวน dev ทุกครั้งที่เราต้องการแก้ไขครับ
ตารางเปรียบเทียบ: ติดตั้งตรงๆ vs ผ่าน GTM
| หัวข้อ | ติดตั้งตรงๆ (gtag.js) | ติดตั้งผ่าน GTM |
|---|---|---|
| ความยาก | ง่ายในช่วงแรก | ต้องเรียนรู้เพิ่มเล็กน้อย |
| ความยืดหยุ่น | ต่ำ (ต้องแก้ Code เว็บ) | สูงมาก (แก้ผ่านหน้าเว็บ GTM) |
| ความเร็วเว็บ | อาจช้าลงถ้ามีหลาย Tag | จัดการลำดับการโหลดได้ดีกว่า |
| การวัดผลขั้นสูง | ต้องเขียน Code เพิ่มเยอะ | มี Template สำเร็จรูปให้ใช้ |
สิ่งที่ต้องเตรียมก่อนเริ่ม
- Google Account: สำหรับเข้าใช้งาน Google Analytics และ GTM
- Access to Website: สิทธิ์ในการเข้าหลังบ้านเว็บไซต์เพื่อวาง Code GTM (ครั้งเดียว)
- Google Analytics Property: สร้างไว้รอรับข้อมูล
ขั้นตอนการติดตั้ง Step-by-Step
Step 1: ค้นหา Measurement ID ใน GA4
ก่อนอื่นเราต้องไปเอา "เลขประจำตัว" ของ GA4 เรามาก่อนครับ
- เข้าไปที่ Google Analytics
- ไปที่เมนู Admin (รูปเฟืองมุมซ้ายล่าง)
- ภายใต้คอลัมน์ Property เลือก Data Streams
- เลือก Web Stream ของคุณ แล้วก๊อปปี้ Measurement ID (จะขึ้นต้นด้วย G-XXXXXXXXXX) ในภาพคือ "G-PSW1MY7HB4" (อันนี้เป็น demo account ของ Google นะครับ)
ภาพแสดงตำแหน่งของ Measurement ID ในหน้า Data Stream ของ Google Analytics 4
Pro Tip: เก็บเลข Measurement ID นี้ไว้ใน Notepad เพราะเราจะต้องใช้มันบ่อยมากในทุกๆ Tag ของ GA4 ครับ — Son, WebMastery.dev
Step 2: ติดตั้ง GTM ลงในเว็บไซต์
หากเพื่อน ๆ ยังไม่มี GTM ให้ไปสร้าง Account ที่ tagmanager.google.com แล้วนำ Code ไปวางในเว็บไซต์ดังนี้:
1. ส่วน \<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](https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f));
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
2. ส่วน \<body> (วางต่อจาก Tag เปิดทันที):
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="[https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX](https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX)"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
Step 3: สร้าง Google Tag ใน GTM
ภาพแสดงหน้าแรกของ Google Tag Manager (GTM) สำหรับจัดการ Tag ต่างๆ บนเว็บไซต์
- ในหน้า GTM Container ของเพื่อน ๆ ให้ไปที่เมนู Tags -> กด New
- ตั้งชื่อ Tag ว่า GA4 - Configuration
- ในส่วน Tag Configuration เลือกประเภทเป็น Google Tag
- ใส่ Tag ID (คือ Measurement ID ที่เราก๊อปปี้มาจาก Step 1)
- ในส่วน Triggering ให้เลือก Initialization - All Pages (เพื่อให้ GA4 โหลดเร็วที่สุดก่อน Tag อื่นๆ)
- กด Save
ภาพแสดงขั้นตอนการตั้งค่า (Configuration) พื้นฐานภายใน Google Analytics 4
การตรวจสอบความถูกต้อง (Preview Mode)
ห้ามกด Publish ทันทีเน้อ เราต้องเช็คก่อนว่าข้อมูลไหลเข้าจริงไหม
- กดปุ่ม Preview มุมขวาบนของ GTM
- ใส่ URL เว็บไซต์ของคุณ แล้วกด Connect
- เมื่อหน้าเว็บเปิดขึ้นมา ให้กลับมาดูที่หน้าต่าง Tag Assistant
- ตรวจสอบว่ามีคำว่า Tags Fired ภายใต้ชื่อ GA4 - Configuration หรือไม่
ลิงก์ที่เกี่ยวข้องและเครื่องมือช่วยตรวจสอบ
- Google Tag Assistant Companion - Chrome Extension ที่ต้องมีสำหรับสาย Tracking
- GTM Official Documentation - คู่มือการติดตั้ง GTM อย่างละเอียด
สรุปบทเรียน
การติดตั้ง GA4 ผ่าน GTM เป็นรากฐานสำคัญที่จะช่วยให้เพื่อน ๆ สามารถทำ Event Tracking ขั้นสูง (เช่น วัดคนคลิกปุ่ม, วัดยอดขาย) ได้ง่ายขึ้นในบทเรียนถัด ๆ ไปครับ