สะพานเชื่อม GTM & เหตุการณ์ GA4

รวมเทเลเมทรีเชิงปริมาณ Google Analytics 4 กับการเล่นย้อนหลังเซสชันเชิงคุณภาพ MousePlayer ด้วยการซิงค์ dataLayer สองทิศทางและ API ที่เข้ากันได้กับ GA4

1. ภาพรวมสถาปัตยกรรม & ความสามารถ

การวิเคราะห์เว็บสมัยใหม่มักมีข้อมูลแยกกัน แพลตฟอร์มเชิงปริมาณ เช่น Google Analytics 4 รายงานว่า อะไร เกิดขึ้น ส่วนเครื่องมือเล่นย้อนหลังเชิงคุณภาพอธิบายว่า ทำไม จึงเกิดขึ้น สะพานเชื่อม MousePlayer GTM & GA4 ปิดช่องว่างด้วยช่องซิงค์สองทางภายในรันไทม์ JavaScript ของเบราว์เซอร์

เมื่อเปิด สคริปต์ติดตามเริ่มโมดูลหลักสองส่วน:

  • ตัวส่งออกการเล่นย้อนหลังเซสชัน (initGa4SessionBridge): ส่งตัวระบุเซสชันที่กำลังบันทึก (mp_session_id) และ URL เล่นโดยตรง (mp_session_url) ไป data layer อัตโนมัติทันทีที่สร้างเซสชัน
  • ตัวรับเหตุการณ์ GA4 (initDataLayerBridge): เพิ่มตัวฟังในอาร์เรย์ data layer โดยไม่ทำลายของเดิม เหตุการณ์อีคอมเมิร์ซหรือพฤติกรรมกำหนดเองที่ส่งให้ GA4 จะถูกทำสำเนาทันทีในฐานข้อมูลวิเคราะห์ MousePlayer เป็นเหตุการณ์กำหนดเอง (ce) พร้อมพารามิเตอร์ตัวเลขและข้อความทั้งหมด

รองรับอ็อบเจ็กต์ dataLayer กำหนดเอง: หากเว็บแอปใช้ชื่ออาร์เรย์ JavaScript กำหนดเองแทนมาตรฐาน dataLayer (เช่น xyzDataLayer) ระบบปรับตามพารามิเตอร์ gtm_datalayer_name ที่ตั้งไว้โดยไม่ต้องแก้โค้ดเอง

2. คุณค่าทางธุรกิจเชิงกลยุทธ์

การผูกลิงก์เล่นย้อนหลังกับสายข้อมูลวิเคราะห์องค์กรโดยตรงให้ประโยชน์การทำงานสำคัญหลายด้าน:

ความสามารถทางธุรกิจ ผลต่อการทำงาน
เพิ่มประสิทธิภาพอัตราคอนเวอร์ชัน (CRO) นักวิเคราะห์ระบุอุปสรรคในกรวย GA4 แล้วเปิดบันทึกผู้ที่ทิ้งตะกร้าในขั้นตอนชำระเงินเฉพาะได้ทันที
การระบุที่มารายได้ & การตรวจสอบ ตรวจธุรกรรมอีคอมเมิร์ซมูลค่าสูงโดยดูเส้นทางตัวชี้ คลิก และสถานะพื้นที่แสดงผลที่นำสู่การซื้อจริง
ดีบักทางเทคนิคได้เร็วขึ้น ทีมวิศวกรรม QA เชื่อมเหตุการณ์ข้อยกเว้น JavaScript ใน GA4 หรือบันทึก API ผิดพลาดกับบันทึกภาพได้โดยตรง ไม่ต้องจำลองบั๊กเอง
แก้ปัญหาช่วยเหลือลูกค้า ทิกเก็ตที่มี ID เซสชันให้เจ้าหน้าที่ดูการเล่นย้อนหลังที่ตรงกัน จึงลดเวลาแก้ปัญหามาก

3. คู่มือตั้งค่า Google Tag Manager

เพื่อรับ URL เล่นย้อนหลังใน Google Tag Manager และส่งต่อ Google Analytics 4 ต้องตั้งองค์ประกอบ GTM สามส่วน:

ขั้นตอน 1: สร้างตัวแปร Data Layer

ในพื้นที่ทำงาน GTM ไปที่ Variables → User-Defined Variables แล้วสร้างตัวแปรสองตัวประเภท Data Layer Variable:

  • ชื่อตัวแปร: dlv - mp_session_id • ชื่อ Data Layer Variable: mp_session_id
  • ชื่อตัวแปร: dlv - mp_session_url • ชื่อ Data Layer Variable: mp_session_url

ขั้นตอน 2: สร้างทริกเกอร์เปิดใช้งาน

ไปที่ Triggers → New แล้วเลือกประเภททริกเกอร์ Custom Event ตั้งพารามิเตอร์ต่อไปนี้:

  • ชื่อเหตุการณ์: mp_session_ready
  • ทริกเกอร์นี้ทำงานเมื่อ: All Custom Events

ขั้นตอน 3: ตั้งแท็กเหตุการณ์ GA4

สร้างแท็กใหม่ประเภท Google Analytics: GA4 Event เพื่อส่งลิงก์เซสชันไปทรัพยากร GA4:

# GA4 Event Tag Configuration Tag Type: Google Analytics: GA4 Event Configuration Tag: [Select standard GA4 Configuration Tag] Event Name: mp_recording_ready # Event Parameters: | Parameter Name | Value | |-----------------|---------------------------| | mp_session_id | {{dlv - mp_session_id}} | | mp_session_url | {{dlv - mp_session_url}} | Triggering: Fire on Custom Event -> mp_session_ready

4. ตั้ง Explorations (รายงานกำหนดเอง) ใน GA4

หลังเผยแพร่แท็ก GTM แล้ว GA4 เริ่มรับ URL เล่นเป็นพารามิเตอร์เหตุการณ์ ก่อนวิเคราะห์ในรายงานสำรวจกำหนดเอง ต้องลงทะเบียนพารามิเตอร์เป็น Custom Dimension

ลงทะเบียนมิติกำหนดเองใน GA4 Admin

ใน Google Analytics 4 ไปที่ Admin → Data display → Custom definitions แล้วคลิก Create custom dimension:

  • ชื่อมิติ: MousePlayer Session URL
  • ขอบเขต: Event (หรือ Session หากแนบกับพารามิเตอร์ระดับเซสชัน)
  • พารามิเตอร์เหตุการณ์: mp_session_url

สร้างรายงานสำรวจเพื่อตรวจเซสชัน

ในส่วน Explore ของ GA4 สร้างการสำรวจใหม่แบบ Free form เพื่อตรวจเส้นทางผู้ใช้รายบุคคล:

  • แถว: เพิ่ม Event name, Transaction ID (สำหรับอีคอมเมิร์ซ) หรือ Landing page
  • คอลัมน์ / มิติ: เพิ่มมิติกำหนดเองที่เพิ่งสร้าง MousePlayer Session URL
  • ค่า: เพิ่ม Event count หรือ Total users

ตารางรายงานแสดง URL ที่คลิกได้ข้างตัวชี้วัด GA4 ทำให้จากค่าผิดปกติทางสถิติไปดูภาพย้อนหลังได้ทันที

5. เพิ่ม URL เล่นย้อนหลังในรายงานมาตรฐาน GA4

นอกจาก Explorations เพิ่มมิติกำหนดเองในรายงานมาตรฐาน GA4 ได้ เช่น Traffic acquisition, Pages and screens หรือ E-commerce purchases ผ่าน GA4 Report Library

แก้ตารางรายงานมาตรฐาน

  1. ใน GA4 เปิดรายงานรายละเอียดมาตรฐาน เช่น Reports → Engagement → Pages and screens
  2. คลิกไอคอนดินสอ Customize report ที่มุมขวาบน (ต้องมีสิทธิ์ผู้ดูแล)
  3. แผงด้านขวาในส่วน Report Data คลิก Dimensions
  4. เพิ่ม MousePlayer Session URL ในรายการมิติหลักหรือรองแล้วตั้งให้แสดง
  5. คลิก Save → Save changes to current report

เมื่อบันทึกแล้ว นักวิเคราะห์ที่ดูตารางการได้มาหรือคอนเวอร์ชันมาตรฐานเพิ่ม MousePlayer Session URL เป็นมิติรองได้ เพื่อดูพฤติกรรมผู้เข้าชมในเซกเมนต์ทราฟฟิกมาตรฐานทันที

6. JavaScript API & อ้างอิงความเข้ากันได้ GA4 / GTM

MousePlayer มี JavaScript API ใช้ง่ายที่เข้ากับ GA4 (ใช้คำสั่งรูปแบบมาตรฐาน gtag()) และอ็อบเจ็กต์ส่วนกลางสาธารณะ (window.MousePlayer) นักพัฒนาจึงค้น URL เซสชันจากคอนโซล แนบ ID ลูกค้า B2B และส่งลิงก์เล่นย้อนหลังไปฝ่ายช่วยเหลือหรือระบบติดตามข้อผิดพลาดภายนอกได้

1. ส่ง URL เล่นย้อนหลังโดยตรง (Intercom / Zendesk / สะพานเชื่อมกำหนดเอง)

รับ URL เล่นเต็มของเซสชันผู้เข้าชมปัจจุบันจากคอนโซลหรือสคริปต์กำหนดเองได้ด้วย window.MousePlayer.getSessionUrl():

// Example: Retrieve the active session URL and attach it to Intercom chat metadata if (window.MousePlayer && window.MousePlayer.getSessionUrl) { var replayUrl = window.MousePlayer.getSessionUrl(); console.log('Active Replay:', replayUrl); // Attach to Intercom Messenger metadata if (window.Intercom) { Intercom('update', { 'mouseplayer_replay_url': replayUrl }); } }

2. ตั้ง ID ลูกค้า B2B กำหนดเอง (user_id)

เพื่อระบุตัวตนลูกค้า SaaS หรือ B2B ที่ลงชื่อเข้าใช้ ส่งค่า user_id กำหนดเอง (เช่น ID ฐานข้อมูล อีเมล หรือ UUID) ตอนตั้งค่าสคริปต์เริ่มต้นหรือแบบไดนามิกระหว่างทำงานด้วยไวยากรณ์ GA4 ได้:

// Method A: Set user_id dynamically at login (GA4 / gtag style) mp('set', 'user_id', 'USR-987654'); // Method B: Set via config object mp('config', 'YOUR_CHANNEL_ID', { user_id: 'USR-987654' }); // Method C: Direct SDK invocation window.MousePlayer.setUserId('USR-987654');

3. วิธีรับข้อมูลแบบอะซิงโครนัส

ใช้ไวยากรณ์ callback มาตรฐาน GA4 เพื่อรับเมทาดาทาเซสชันแบบอะซิงโครนัสในสคริปต์จัดการแท็กกำหนดเอง:

// Retrieve active session URL mp('get', 'session_url', function(url) { console.log('Session URL:', url); }); // Retrieve visitor ID (Client ID equivalent) mp('get', 'client_id', function(clientId) { console.log('Visitor ID:', clientId); });

เครื่องหมายการค้าทั้งหมดที่กล่าวถึงเป็นของเจ้าของแต่ละราย MousePlayer ไม่มีความสัมพันธ์ทางธุรกิจกับผู้ให้บริการเหล่านี้