ในบทที่ผ่าน ๆ มา เราใช้การวัดผลแบบ "จับจากหน้าจอ" (Auto-Event Tracking) เช่น การคลิกปุ่ม หรือการโหลดหน้าเว็บ
แต่วิธีพวกนั้นมีข้อจำกัดครับ... สมมติเราอยากรู้ว่า "คนที่กดซื้อสินค้า ซื้อสินค้าราคาเท่าไหร่?" หรือ "คนที่กรอกฟอร์ม เป็นลูกค้าประเภท VIP หรือเปล่า?" ข้อมูลพวกนี้มันไม่ได้แปะอยู่บนปุ่มให้ GTM อ่านได้ง่าย ๆ ครับ
นี่คือเหตุผลที่ Data Layer ที่จะเข้ามา solve ปัญหาส่วนนี้
Data Layer คืออะไร?
อธิบายแบบภาษาคนทำเว็บ: Data Layer คือตัวแปร JavaScript Array ( [] ) ตัวหนึ่งที่ลอยอยู่ "ตรงกลาง" ระหว่าง เว็บไซต์ กับ GTM ครับ
เปรียบเสมือน "ถังข้อมูล" ที่ Developer สามารถโยนข้อมูลอะไรก็ได้ลงไป แล้ว GTM ก็จะมายืนรอรับข้อมูลจากถังนี้ เพื่อเอาไปส่งต่อให้ GA4, Facebook, หรือ Google Ads อีกที
เว็บไซต์เหมือน "ครัว" (ทำอาหาร) -> GTM เหมือน "เด็กเสิร์ฟ" -> Data Layer คือ "เคาน์เตอร์วางอาหาร"
พ่อครัว (Dev) ทำเสร็จก็วางบนเคาน์เตอร์ (Data Layer) แล้วเด็กเสิร์ฟ (GTM) ก็หยิบไปเสิร์ฟลูกค้า (Analytics)
Step 1: โครงสร้างของ Data Layer (ฝั่ง Dev ต้องรู้)
ปกติแล้ว GTM จะสร้าง Data Layer ให้เราอัตโนมัติครับ แต่สิ่งที่เราต้องทำคือการ "ผลัก (Push)" ข้อมูลลงไป
คำสั่งศักดิ์สิทธิ์ที่ใช้กันทั่วโลกคือ: window.dataLayer.push({...})
ตัวอย่าง Code: การส่งข้อมูลเมื่อสมัครสมาชิกสำเร็จ
สมมติเพื่อน ๆ อยากวัดผลว่ามีคนสมัครสมาชิก และอยากรู้ว่าเป็นสมาชิกแบบไหน (Free หรือ Premium)
// วาง Code นี้ไว้ในฟังก์ชันหลังจากที่ User สมัครสำเร็จ (Success State)
window.dataLayer.push({
'event': 'signup_complete', // ชื่อเหตุการณ์ (Trigger)
'user_id': 'U-123456', // ไอดีสมาชิก (Variable)
'plan_type': 'Premium_Annual', // ประเภทแพ็กเกจ (Variable)
'value': 2500 // มูลค่า (Variable)
});
เห็นไหมครับ? เราส่งข้อมูลที่เป็น Key-Value pairs ลงไปตรง ๆ เลย ไม่ต้องรอให้ GTM ไปแกะจากหน้าเว็บ
Step 2: รับค่าใน GTM (ฝั่ง Marketer ต้องทำ)
เมื่อ Dev ส่งข้อมูลมาแล้ว หน้าที่ของเราใน GTM คือสร้าง "ตัวรับ" ครับ
- ไปที่เมนู Variables -> New
- Variable Type: เลือก Data Layer Variable (อันนี้สำคัญมาก!)
-
Data Layer Variable Name: ใส่ชื่อ Key ให้ตรงกับ Code เป๊ะ ๆ
* ถ้าจะดึงประเภทแพ็กเกจ ให้ใส่:plan_type
* ถ้าจะดึงมูลค่า ให้ใส่:value -
ตั้งชื่อ Variable ใน GTM ว่า
DLV - Plan Typeแล้วกด Save
Step 3: สร้าง Trigger จาก Data Layer
จำตอนเราทำ Click Trigger ได้ไหมครับ? คราวนี้เราไม่ได้รอคลิก แต่เรารอ Custom Event ที่ Dev ส่งมา
- ไปที่เมนู Triggers -> New
- Trigger Type: เลือก Custom Event
- Event Name: ใส่ชื่อ event ที่อยู่ใน Code (จากตัวอย่างข้างบนคือ
signup_complete) - ตั้งชื่อ Trigger ว่า
Custom Event - Signup Successแล้วกด Save
Step 4: ประกอบร่าง (Tags + Triggers + Variables)
ตอนนี้เรามีครบทุกอย่างแล้วครับ มาสร้าง Tag เพื่อส่งเข้า GA4 กัน
- Tag Type: Google Analytics: GA4 Event
- Event Name:
sign_up -
Event Parameters: (นี่คือทีเด็ด!)
* Parameter Name:plan_type
* Value: กดปุ่มเฟือง แล้วเลือก{{DLV - Plan Type}} -
Triggering: เลือก
Custom Event - Signup Success
ผลลัพธ์: เมื่อ Code ทำงาน -> ข้อมูลไหลลง Data Layer -> GTM จับ Trigger ได้ -> ดึงค่า Plan Type -> ส่งไป GA4 พร้อมกัน จบปิ๊ง!
ประโยชน์ของการทำ Data Layer
- แม่นยำ 100%: ไม่ต้องกลัวเว็บเปลี่ยนดีไซน์แล้ว Tracking หลุด เพราะเราไม่ได้อิงกับ HTML ID หรือ Class
- ปลอดภัย: ข้อมูลส่วนตัว (PII) สามารถ Hash หรือจัดการได้ก่อนส่ง
- Standard: เป็นมาตรฐานสากลที่ใช้ได้กับทุก Tool (ส่งชุดเดียว ใช้ได้ทั้ง FB, Google Ads, TikTok)
สรุปบทเรียน
Data Layer คือ สะพานเชื่อม ที่ดีที่สุดระหว่าง Technical กับ Marketing ครับ ช่วงแรกอาจจะดูยุ่งยากที่ต้องเขียน Code แต่ระยะยาวมันคือวิธีที่เสถียรที่สุดในการทำเว็บระดับ Enterprise
ในบทถัดไป (Ep. 9) เราจะนำความรู้เรื่อง Data Layer หรือ DOM Element มาแก้ปัญหาโลกแตกของคนทำเว็บ นั่นคือ "การวัดผลการกรอกฟอร์ม (Form Submission)" ที่กดแล้วหน้าไม่เปลี่ยน หรือใช้ AJAX ซึ่งเป็นท่ามาตรฐานของเว็บยุคใหม่ครับ
Tip: ชื่อ Key ใน Data Layer (เช่น
user_id,value) เป็น Case Sensitive นะครับ! เขียนตัวเล็กตัวใหญ่ไม่ตรงกัน GTM จะมองไม่เห็นค่าทันที ดังนั้นตกลงกับ Dev ให้ดี หรือ Copy-Paste มาเลยจะชัวร์สุดครับ — Son, WebMastery.dev