ยินดีต้อนรับเข้าสู่บทเรียนที่ 6 ครับ! หลังจากที่เราวัดผลภายในเว็บกันไปแล้ว คราวนี้ถึงเวลาส่งข้อมูลออกไปข้างนอกบ้างครับ
สำหรับเพื่อน ๆ ที่ทำธุรกิจออนไลน์ หรือยิงแอด Facebook การติดตั้ง Facebook Pixel (หรือชื่อใหม่คือ Meta Pixel) คือไฟลท์บังคับที่ "ต้องทำ" ครับ เพราะมันจะช่วยให้เรา:
- ทำ Retargeting: ตามหลอนลูกค้าที่เคยเข้าเว็บแต่ยังไม่ซื้อ
- วัดผล Conversion: รู้ว่าเงินค่าแอดที่จ่ายไป ได้ยอดขายหรือคนทักกลับมาเท่าไหร่
- Optimize Ads: ให้ AI ของ Facebook เรียนรู้ว่าลูกค้าหน้าตาแบบไหนที่เราอยากได้
วันนี้ผมจะพาติดตั้งผ่าน GTM ซึ่งบอกเลยว่าง่ายกว่า, เร็วกว่า และยืดหยุ่นกว่าการใช้ Plugin สำเร็จรูปเยอะครับ!
สิ่งที่ต้องเตรียม
- บัญชี Facebook Business Manager
- Pixel ID (เลขประจำตัว Pixel ของเรา)
Step 1: ค้นหา Pixel ID และ Base Code
ก่อนอื่นเราต้องไปเอา "ชุดรหัส" จากบ้านของ Facebook มาก่อนครับ
- เข้าไปที่ Events Manager (ตัวจัดการเหตุการณ์) ใน Facebook Business
- ไปที่เมนู Data sources (แหล่งข้อมูล) ด้านซ้ายมือ
- เลือก Pixel ที่เราต้องการ แล้วไปที่ tab Settings เพื่อก๊อปปี้ Pixel ID เก็บไว้ (เช่น
1234567890) - หรือถ้าจะเอา Code เต็มๆ ให้กดปุ่ม Add Events -> From a New Website -> Install code manually แล้วก๊อปปี้ Code ชุดยาวๆ มาครับ
Step 2: ติดตั้ง Base Code (ตัวปูพื้นฐาน)
เราจะเริ่มจากการติดตั้ง Code หลักเพื่อให้ Facebook เริ่มเก็บข้อมูล "คนเข้าชมหน้าเว็บ" (PageView) ทุกหน้าครับ
- ไปที่ GTM ของเรา เลือกเมนู Tags -> New
- ตั้งชื่อ Tag ว่า
FB - Base Code - PageView - Tag Configuration: เลือกประเภท Custom HTML (เราจะวางโค้ดดิบๆ เลยครับ ชัวร์ที่สุด)
- วาง Code ที่ก๊อปปี้มาจาก Facebook ลงไป
- จุดสำคัญ: ให้มองหาบรรทัดที่มีคำว่า
fbq('init', 'XXXXXXXXXXXXXXXX');แล้วตรวจสอบว่าเลข ID ตรงกับของเราไหม - Triggering: เลือก All Pages (เพราะเราอยากให้ทำงานทุกหน้า)
- กด Save
หน้าตาของ Code จะประมาณนี้ครับ:
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'ใส่_PIXEL_ID_ของคุณตรงนี้');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=ใส่_PIXEL_ID_ของคุณตรงนี้&ev=PageView&noscript=1"
/></noscript>
Step 3: ติดตั้ง Standard Event (วัดผลคนกดปุ่ม)
จำบทที่แล้ว (Ep. 5) ที่เราสร้าง Trigger "คลิกปุ่มแอดไลน์" ได้ไหมครับ? ตอนนี้เราจะเอามันมาใช้ประโยชน์ด้วยการบอก Facebook ว่า "เฮ้ย! ถ้ามีคนกดปุ่มนี้ แปลว่าเขาติดต่อเราแล้วนะ (Contact)"
- สร้าง Tag ใหม่ ตั้งชื่อว่า
FB - Event - Contact - Tag Configuration: เลือก Custom HTML เหมือนเดิม
- ใส่ Code สั้นๆ แค่นี้พอครับ:
<script>
fbq('track', 'Contact');
</script>
- Triggering: เลือก Trigger
Click - Line Button(ตัวเดิมที่เราทำไว้ใน Ep. 5) - กด Save
Son's Explanation: สังเกตไหมครับว่าเราไม่ต้องวาง Base Code ยาวๆ ซ้ำอีกรอบ เพราะ Base Code มันโหลดไปแล้วใน Step 2 เราแค่ส่งคำสั่งเพิ่มสั้นๆ ว่า
fbq('track', 'Contact')ก็พอครับ นี่แหละความฉลาดของ GTM!
Step 4: ตรวจสอบความถูกต้อง (Meta Pixel Helper)
ติดตั้งเสร็จแล้ว อย่าเพิ่งเชื่อผมครับ ต้องเช็คเอง!
- ติดตั้ง Chrome Extension ชื่อ Meta Pixel Helper
- กลับมาที่ GTM กด Preview และใส่เว็บเราเหมือนเดิม
- เมื่อหน้าเว็บเปิดขึ้นมา ให้สังเกตที่ไอคอน Pixel Helper บน Browser bar
* ถ้าเข้าหน้าเว็บเฉยๆ ต้องขึ้นเลขสีเขียวว่า PageView
* พอลองกดปุ่ม "แอดไลน์" ต้องมี event ใหม่เด้งขึ้นมาชื่อว่า Contact
ถ้าขึ้นครบตามนี้ ยินดีด้วยครับ! คุณพร้อมที่จะยิงแอดแบบ Retargeting หรือทำ Lookalike Audience จากคนที่กดปุ่มแอดไลน์ได้แล้ว!
สรุปบทเรียน
การติดตั้ง Pixel ผ่าน GTM ช่วยให้เราบริหารจัดการ Event ต่างๆ ได้ง่ายมากครับ อยากวัดผล "หยิบลงตะกร้า (AddToCart)" หรือ "สั่งซื้อสำเร็จ (Purchase)" ก็ใช้วิธีเดียวกันกับ Step 3 แค่เปลี่ยนชื่อ Event และ Trigger เท่านั้นเอง
ในบทถัดไป (Ep. 7) เราจะไปลุยฝั่ง Google Ads กันบ้าง กับการติดตั้ง "Google Ads Conversion Tracking" เพื่อให้รู้ว่า Keyword ไหนที่ทำเงินให้เราจริง ๆ ครับ
Tip: สำหรับเพื่อน ๆ ที่ทำเว็บ E-commerce ยุค 2026 นี้ การพึ่งพา Pixel อย่างเดียวอาจจะไม่พอเพราะติดเรื่อง Cookie ครับ ในอนาคต (Advanced Course) ผมจะมาสอนทำ Conversion API (CAPI) แบบ Server-side เพื่อส่งข้อมูลให้ Facebook แบบแม่นยำ 100% กันครับ — Son, webmastery.dev