CAPI ฝั่งเซิร์ฟเวอร์ & การติดตามเหตุการณ์

ข้ามตัวบล็อกโฆษณาและข้อจำกัด ITP ด้วยการส่งทราฟฟิก MousePlayer ผ่านคอนเทนเนอร์ GTM ฝั่งเซิร์ฟเวอร์ First-Party ของคุณ และติดตามวิเคราะห์อีคอมเมิร์ซเชิงลึก

1. ภาพรวมโหมดติดตาม

MousePlayer V2 มี Event Router ทรงพลังให้ควบคุมข้อมูลจากเบราว์เซอร์ผู้ใช้ถึงเซิร์ฟเวอร์เรา เลือกสามโหมดได้:

  • เฉพาะเว็บ (ค่าเริ่มต้น): สตรีมทั้งหมดผ่าน WebSocket ตรงไป MousePlayer เหมาะที่สุดกับมุมมองสด แต่เสี่ยงถูกตัวบล็อกโฆษณาเข้มงวด
  • โหมดไฮบริด: ข้อดีทั้งสองแบบ ส่งพิกัดเมาส์/เลื่อนขนาดเล็กผ่าน WebSocket เพื่อมุมมองสดลื่นไหล ส่วน DOM เปลี่ยนแปลงและเหตุการณ์กำหนดเองขนาดใหญ่รวมเป็นชุด ส่งอย่างปลอดภัยผ่าน GTM ฝั่งเซิร์ฟเวอร์ด้วย HTTP POST
  • Pure CAPI: ส่งชุด HTTP POST 100% เป็นส่วนตัวสูงสุด ไม่มี WebSocket เป็นบุคคลที่หนึ่งทั้งหมด หมายเหตุ: โหมดนี้ปิดมุมมองสด

2. ตั้ง Google Tag Manager (แนะนำ)

วิธีง่ายที่สุดใช้โหมด Hybrid หรือ Pure CAPI คือแม่แบบ GTM Community Templates ทางการ ดาวน์โหลดไฟล์ .tpl ด้านล่างแล้วนำเข้าพื้นที่ทำงาน GTM

ดาวน์โหลดแม่แบบ:

↓ Web GTM: MousePlayer SDK Tag

↓ Server GTM: MousePlayer Ingest Client

↓ Server GTM: MousePlayer Connector Tag

ขั้นตอน 1: ตั้งไคลเอนต์และแท็กฝั่งเซิร์ฟเวอร์

ในคอนเทนเนอร์ GTM ฝั่งเซิร์ฟเวอร์ นำเข้าแม่แบบ Ingest Client ให้ฟังเส้นทางกำหนดเอง (เช่น /mp_capi) แล้วนำเข้า Connector Tag ตั้งให้ทำงานเมื่อเหตุการณ์ mouseplayer_batch และเผยแพร่คอนเทนเนอร์

ขั้นตอน 2: ตั้งแท็ก Web GTM

ในคอนเทนเนอร์ Web GTM นำเข้า SDK Tag เลือกประเภท "Configuration & Initialization" กรอก Channel ID เลือก Hybrid Mode และวาง URL ปลายทาง ssGTM (เช่น https://metrics.yourdomain.com/mp_capi)

3. ติดตั้งเอง (ไม่ใช้ GTM)

หากต้องการใส่สคริปต์ในโค้ด ต้องกำหนดอ็อบเจ็กต์ window.mp_config ก่อนโหลดโค้ดติดตาม

<!-- MousePlayer Config & SDK --> <script> window.mp_config = { channel: 'YOUR_UNIQUE_ID_HERE', mode: 'hybrid', // 'web_only', 'hybrid', or 'pure_capi' capi_endpoint: 'https://metrics.yourdomain.com/mp_capi' }; window.mp = window.mp || function() { (window.mp.q = window.mp.q || []).push(arguments); }; (function(w, d, s) { var f = d.getElementsByTagName(s)[0], j = d.createElement(s); j.async = true; j.src = 'https://www.mouseplayer.com/mp.js'; f.parentNode.insertBefore(j, f); })(window, document, 'script'); </script>

4. ติดตามกรวยอีคอมเมิร์ซ

ติดตามเส้นทางลูกค้าทั้งหมด ชื่อเหตุการณ์มาตรฐานให้ MousePlayer สร้างรายงานกรวยอีคอมเมิร์ซที่สวยงามในโปรเจกต์อัตโนมัติ ทุกเหตุการณ์เข้ากันได้เต็มที่ทั้ง CAPI และเฉพาะเว็บ

1. view_item

เรียกเหตุการณ์เมื่อผู้ใช้ดูหน้าสินค้าเฉพาะ

mp('event', 'view_item', { item_id: 'SKU_98765', item_name: 'Wireless Noise-Cancelling Headphones', item_category: 'Electronics', price: 299.99 });

2. add_to_cart

เรียกเมื่อผู้ใช้เพิ่มสินค้าลงตะกร้า

mp('event', 'add_to_cart', { item_id: 'SKU_98765', item_name: 'Wireless Noise-Cancelling Headphones', price: 299.99, quantity: 1 });

3. begin_checkout

เรียกเมื่อผู้ใช้ไปหน้าชำระเงิน

mp('event', 'begin_checkout', { cart_value: 299.99, currency: 'USD', total_items: 1 });

4. purchase

เรียกเมื่อชำระเงินสำเร็จหรือยืนยันคำสั่งซื้อ

mp('event', 'purchase', { transaction_id: 'T_1002938', value: 299.99, tax: 24.00, shipping: 0.00, currency: 'USD', coupon_used: 'FREESHIP' });

5. เหตุการณ์กำหนดเองและผู้สนใจ

ไม่จำกัดอีคอมเมิร์ซ ติดตามการส่งแบบฟอร์ม สมัครจดหมายข่าว หรือการโต้ตอบเฉพาะเว็บแอป

สร้างผู้สนใจ (ส่งแบบฟอร์ม)

เรียกเมื่อส่งแบบฟอร์มติดต่อหรือขอใบเสนอราคาสำเร็จ

mp('event', 'generate_lead', { form_name: 'B2B Contact Form', industry: 'Software Development', company_size: '50-200' });

การโต้ตอบ UI กำหนดเอง

เข้าใจวิธีใช้ส่วนซับซ้อน เช่น เครื่องคำนวณ กล่องโต้ตอบ หรือสลับแท็บ

mp('event', 'calculator_used', { loan_amount: 50000, duration_months: 48, interest_rate: 7.5 });

6. ขีดจำกัดและแนวทางพารามิเตอร์

ชนิดข้อมูล: MousePlayer ตรวจชนิดพารามิเตอร์อัตโนมัติ ส่งตัวเลขเป็นจำนวนเต็มหรือทศนิยม (เช่น 150.00 ไม่ใช่ "150.00") เพื่อกรองตัวเลขขั้นสูงในแดชบอร์ด (เช่น "Price > 100")

กฎ คำอธิบาย
ความยาวชื่อเหตุการณ์ สูงสุด 128 อักขระ ใช้ snake_case เพื่ออ่านง่าย (เช่น user_signup)
ความยาวคีย์พารามิเตอร์ สูงสุด 64 อักขระต่อชื่อคีย์ (เช่น transaction_id)
ค่าสตริง ตัดพารามิเตอร์ข้อความที่ 255 อักขระเพื่อประสิทธิภาพฐานข้อมูลสูงสุด
ความเป็นส่วนตัวข้อมูล ห้าม ไม่ว่าในกรณีใด ส่งข้อมูลระบุตัวบุคคล (PII) เช่น อีเมลดิบ ชื่อจริง หรือรหัสผ่านเป็นพารามิเตอร์เหตุการณ์