GTM Bridge at GA4 Event Bridge

1. Pangkalahatang Arkitektura & mga Kakayahan

Madalas may pangunahing pagkakahiwalay ng datos sa modernong web analytics: iniuulat ng mga quantitative na platform (gaya ng Google Analytics 4) kung ano ang nangyari sa website, samantalang ipinapaliwanag ng mga qualitative na tool ng replay ng session kung bakit ito nangyari. Inaalis ng MousePlayer GTM & GA4 Bridge ang puwang na ito sa pamamagitan ng two-way na channel ng pagsasabay sa JavaScript runtime ng browser.

Kapag pinagana, sinisimulan ng tracking script ang dalawang pangunahing module:

Session Replay Exporter (initGa4SessionBridge): Awtomatikong inilalagay ang identifier ng aktibong recording ng session (mp_session_id) at ang direktang URL ng playback (mp_session_url) sa data layer ng website sa sandaling maitatag ang session.
GA4 Event Ingestor (initDataLayerBridge): Nagdaragdag ng listener na hindi sumisira sa array ng data layer. Agad na kinokopya sa analytics database ng MousePlayer bilang custom event (ce) ang anumang custom na e-commerce o behavioral event na ipinadala para sa GA4, kasama ang lahat ng numerong parameter at string.

Suporta sa Custom na Object ng dataLayer: Kung ibang pangalan ng JavaScript array ang gamit ng web application sa halip na karaniwang dataLayer (halimbawa, xyzDataLayer), kusang umaangkop ang engine sa itinakdang parameter na gtm_datalayer_name nang hindi nangangailangan ng manu-manong pagbabago sa code.

2. Estratehikong Halaga sa Negosyo

Maraming malaking pakinabang sa operasyon ang paglalagay ng mga link ng replay ng session nang direkta sa mga pipeline ng enterprise analytics:

Kakayahan sa Negosyo	Epekto sa Operasyon
Pagpapahusay ng Conversion Rate (CRO)	Natutukoy ng mga digital analyst ang friction sa mga conversion funnel ng GA4 at agad na nabubuksan ang mga recording ng mga user na umalis sa cart sa partikular na hakbang ng checkout.
Pagtatalaga ng Kita & Pag-audit	Maaaring i-audit ang malalaking transaksiyon ng e-commerce sa pamamagitan ng pagsuri sa eksaktong landas ng cursor, mga click at katayuan ng viewport na humantong sa pagbili.
Mas Mabilis na Pag-debug	Direktang maiuugnay ng mga QA engineering team ang mga JavaScript exception event ng GA4 o API error log sa biswal na recording ng screen, kaya hindi na kailangang manu-manong ulitin ang bug.
Paglutas sa Customer Support	Sa mga support ticket na may session ID ng user, masusuri ng mga support agent ang eksaktong replay ng session ng customer, kaya mas mabilis malulutas ang problema.

3. Gabay sa Configuration ng Google Tag Manager

Para makuha ang URL ng replay sa Google Tag Manager at maipasa ito sa Google Analytics 4, kailangang i-configure ang tatlong magkahiwalay na asset ng GTM:

Hakbang 1: Gumawa ng mga Variable ng Data Layer

Sa workspace ng GTM, pumunta sa Mga Variable → Mga Variable na Tinukoy ng User at gumawa ng dalawang variable na may uri na Variable ng Data Layer:

Pangalan ng Variable: dlv - mp_session_id • Pangalan ng Variable ng Data Layer: mp_session_id
Pangalan ng Variable: dlv - mp_session_url • Pangalan ng Variable ng Data Layer: mp_session_url

Hakbang 2: Gumawa ng Trigger sa Pag-activate

Pumunta sa Mga Trigger → Bago at piliin ang uri ng trigger na Custom Event. I-configure ang mga sumusunod na parameter:

Pangalan ng Event: mp_session_ready
Gumagana ang trigger na ito sa: Lahat ng Custom Event

Hakbang 3: I-configure ang Tag ng GA4 Event

Gumawa ng bagong tag na may uring Google Analytics: GA4 Event upang maipadala ang link ng session sa property ng 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. Pag-configure ng mga Exploration (Custom na Ulat) sa GA4

Kapag na-deploy ang tag ng GTM, nagsisimulang tumanggap ang GA4 ng URL ng playback bilang parameter ng event. Upang masuri ang datos sa mga custom na ulat ng exploration, kailangang irehistro muna ang parameter bilang Custom Dimension.

Pagrerehistro ng mga Custom Dimension sa GA4 Admin

Sa interface ng Google Analytics 4, pumunta sa Admin → Pagpapakita ng datos → Mga custom na kahulugan at i-click ang Gumawa ng custom dimension:

Pangalan ng dimension: MousePlayer Session URL
Saklaw: Event (o Session kung nakalakip sa mga parameter na ang saklaw ay session)
Parameter ng event: mp_session_url

Pagbuo ng Exploration para sa Pagsuri ng Session

Sa seksiyong Mag-explore ng GA4, gumawa ng bagong exploration na Free form para suriin ang mga indibidwal na paglalakbay ng user:

Mga Row: Idagdag ang Event name, Transaction ID (para sa e-commerce), o Landing page.
Mga Hanay / Dimension: Isama ang bagong gawang custom dimension na MousePlayer Session URL.
Mga Value: Idagdag ang Event count o Total users.

Ipinapakita ng nabuong talahanayan ng ulat ang mga direktang naki-click na URL sa tabi ng mga metric ng GA4, kaya agad na makalilipat mula sa pambihirang estadistika patungo sa biswal na replay.

5. Paglalagay ng mga URL ng Replay sa mga Default na Ulat ng GA4

Bukod sa mga Exploration, maaaring isama ang mga custom dimension sa karaniwang default na ulat ng GA4 (gaya ng Pagkuha ng trapiko, Mga pahina at screen, o Mga pagbili sa e-commerce) gamit ang GA4 Report Library.

Pagbabago ng mga Karaniwang Talahanayan ng Ulat

Sa GA4, buksan ang anumang default na detalyadong ulat (hal., Mga Ulat → Pakikipag-ugnayan → Mga pahina at screen).
I-click ang lapis na I-customize ang ulat sa kanang itaas (kailangan ng administratibong access).
Sa panel sa kanan, sa ilalim ng Datos ng Ulat, i-click ang Mga Dimension.
Idagdag ang MousePlayer Session URL sa listahan ng pangunahin o pangalawang dimension at itakdang nakikita ito.
I-click ang I-save → I-save ang mga pagbabago sa kasalukuyang ulat.

Kapag nai-save na, maaaring idagdag ng analyst na sumusuri sa karaniwang talahanayan ng acquisition o conversion ang MousePlayer Session URL bilang pangalawang dimension, upang agad na biswal na masuri ang asal ng bisita sa mga karaniwang segment ng trapiko.

6. Sanggunian sa JavaScript API & Pagkatugma sa GA4 / GTM

Nagbibigay ang MousePlayer ng madaling gamitin at GA4-compatible na JavaScript API (gamit ang mga karaniwang command na may anyong gtag()) at pampublikong global object (window.MousePlayer). Maaaring kunin ng developer ang mga URL ng session sa console, maglakip ng mga customer ID ng B2B, at maglagay ng mga link ng replay sa mga helpdesk o error tracker ng ibang provider.

1. Direktang Paglalagay ng URL ng Replay (Intercom / Zendesk / mga Custom Bridge)

Makukuha ninyo ang buong URL ng playback ng aktibong session ng bisita mula mismo sa console ng browser o anumang custom script gamit ang 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. Pagtatakda ng mga Custom na Customer ID ng B2B (user_id)

Upang matukoy ang mga naka-login na SaaS o B2B customer, maaari kayong magpasa ng custom na user_id (gaya ng database ID, email o UUID) sa unang configuration ng script o nang dynamic habang tumatakbo gamit ang syntax ng 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. Mga Paraan ng Asynchronous na Pagkuha ng Datos

Maaari ninyong gamitin ang karaniwang callback syntax ng GA4 upang asynchronous na makuha ang metadata ng session sa loob ng mga custom na script sa pamamahala ng tag:

// 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); });

Paano kami makakatulong?