GTM-brygga & GA4-händelsebrygga

Koppla samman kvantitativ telemetri från Google Analytics 4 med kvalitativa sessionsuppspelningar i MousePlayer genom dubbelriktad dataLayer-synkronisering och GA4-kompatibla API:er.

1. Arkitekturöversikt & funktioner

Modern webbanalys har ofta ett grundläggande problem med åtskilda data: kvantitativa plattformar som Google Analytics 4 visar vad som hände på webbplatsen, medan kvalitativa verktyg för sessionsuppspelning förklarar varför det hände. Vår MousePlayer-brygga för GTM & GA4 överbryggar glappet genom en dubbelriktad synkroniseringskanal i webbläsarens JavaScript-miljö.

När funktionen aktiveras initierar spårningsskriptet två särskilda kärnmoduler:

  • Export av sessionsuppspelning (initGa4SessionBridge): skickar automatiskt den aktiva inspelningssessionens identifierare (mp_session_id) och en direkt uppspelningslänk (mp_session_url) till webbplatsens datalager så snart sessionen upprättas.
  • Inläsning av GA4-händelser (initDataLayerBridge): kopplar en lyssnare till datalagerlistan utan att ändra dess funktion. Varje anpassad e-handels- eller beteendehändelse som skickas för GA4 speglas direkt till MousePlayers analysdatabas som en anpassad händelse (ce), med alla numeriska parametrar och strängparametrar.

Stöd för egna dataLayer-objekt: om en webbapplikation använder ett eget JavaScript-listnamn i stället för standardnamnet dataLayer (till exempel xyzDataLayer) anpassar motorn sig dynamiskt till den konfigurerade parametern gtm_datalayer_name utan att koden behöver ändras manuellt.

2. Strategiskt affärsvärde

Att integrera länkar till sessionsuppspelningar direkt i företagets analysflöden ger flera betydande fördelar i arbetet:

Affärsfunktion Praktisk effekt
Optimering av konverteringsgrad (CRO) Låter digitala analytiker hitta friktionspunkter i GA4-konverteringstrattar och direkt öppna inspelningar av användare som övergav varukorgen vid specifika kassasteg.
Intäktsattribuering & granskning E-handelstransaktioner med högt värde kan granskas genom de exakta pekarbanor, klick och visningslägen som ledde till köpet.
Snabbare teknisk felsökning QA-team kan koppla GA4-händelser för JavaScript-undantag eller API-felloggar direkt till visuella skärminspelningar och slipper återskapa felen manuellt.
Lösning av supportärenden Supportärenden med användarens sessions-ID låter handläggare se den exakta sessionsuppspelningen, vilket minskar lösningstiden avsevärt.

3. Konfigurationsguide för Google Tag Manager

Tre separata delar måste konfigureras i GTM för att fånga uppspelningslänken i Google Tag Manager och skicka den till Google Analytics 4:

Steg 1: skapa datalagervariabler

Gå i GTM-arbetsytan till Variabler → Användardefinierade variabler och skapa två variabler av typen Datalagervariabel:

  • Variabelnamn: dlv - mp_session_id • Namn på datalagervariabel: mp_session_id
  • Variabelnamn: dlv - mp_session_url • Namn på datalagervariabel: mp_session_url

Steg 2: skapa aktiveringsutlösaren

Gå till Utlösare → Ny och välj utlösartypen Anpassad händelse. Ange följande parametrar:

  • Händelsenamn: mp_session_ready
  • Utlösaren aktiveras vid: Alla anpassade händelser

Steg 3: konfigurera GA4-händelsetaggen

Skapa en ny tagg av typen Google Analytics: GA4-händelse för att skicka sessionslänken till GA4-egendomen:

# 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. Konfigurera utforskningar (anpassade rapporter) i GA4

När GTM-taggen är publicerad börjar GA4 ta emot uppspelningslänken som en händelseparameter. För att analysera dessa data i anpassade utforskningsrapporter måste parametern först registreras som en anpassad dimension.

Registrera anpassade dimensioner i GA4-administrationen

Gå i Google Analytics 4 till Administratör → Datavisning → Anpassade definitioner och klicka på Skapa anpassad dimension:

  • Dimensionsnamn: MousePlayer Session URL
  • Omfattning: Händelse (eller Session om den kopplas till parametrar på sessionsnivå)
  • Händelseparameter: mp_session_url

Skapa en utforskning för sessionsgranskning

Skapa i avsnittet Utforska i GA4 en ny utforskning av typen Fritt format för att granska enskilda användarresor:

  • Rader: lägg till Event name, Transaction ID (för e-handel) eller Landing page.
  • Kolumner / dimensioner: ta med den nya anpassade dimensionen MousePlayer Session URL.
  • Värden: lägg till Event count eller Total users.

Rapporttabellen visar direkt klickbara URL:er bredvid GA4-mätvärdena, så att du kan gå från statistiska avvikelser till visuella uppspelningar direkt.

5. Integrera uppspelningslänkar i GA4:s standardrapporter

Utöver utforskningar kan anpassade dimensioner läggas till i vanliga GA4-standardrapporter (som Trafikförvärv, Sidor och skärmar eller E-handelsköp) via GA4:s rapportbibliotek.

Ändra standardrapporternas tabeller

  1. Öppna en valfri detaljerad standardrapport i GA4 (t.ex. Rapporter → Engagemang → Sidor och skärmar).
  2. Klicka på pennikonen Anpassa rapport uppe till höger (kräver administratörsåtkomst).
  3. Klicka i högerpanelen under Rapportdata på Dimensioner.
  4. Lägg till MousePlayer Session URL i listan över primära eller sekundära dimensioner och gör den synlig.
  5. Klicka på Spara → Spara ändringar i aktuell rapport.

När ändringen är sparad kan analytiker som granskar vanliga förvärvs- eller konverteringstabeller lägga till MousePlayer Session URL som sekundär dimension och direkt granska besökarnas beteenden visuellt i vanliga trafiksegment.

6. JavaScript-API & kompatibilitetsreferens för GA4 / GTM

MousePlayer erbjuder ett lättanvänt, GA4-kompatibelt JavaScript-API (med standardkommandon i gtag()-stil) och ett offentligt globalt objekt (window.MousePlayer). Utvecklare kan hämta sessionslänkar i konsolen, koppla B2B-kund-ID:n och infoga uppspelningslänkar i externa helpdesk- eller felspårningsverktyg.

1. Infoga uppspelningslänkar direkt (Intercom / Zendesk / egna bryggor)

Du kan hämta hela uppspelningslänken för den aktiva besökarsessionen direkt från webbläsarkonsolen eller ett eget skript med 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. Ange egna B2B-kund-ID:n (user_id)

För att identifiera inloggade SaaS- eller B2B-kunder kan du ange ett eget user_id (t.ex. ett databas-ID, en e-postadress eller ett UUID) vid den första skriptkonfigurationen eller dynamiskt under körning med GA4-syntax:

// 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. Asynkrona metoder för datahämtning

Du kan använda vanlig GA4-callbacksyntax för att hämta sessionsmetadata asynkront i egna skript för tagghantering:

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

Alla nämnda varumärken tillhör respektive ägare. MousePlayer har ingen affärsrelation med leverantörerna.