Connettore eventi GTM e GA4

1. Architettura & funzionalità

L’analisi web moderna soffre spesso di un isolamento fondamentale dei dati: le piattaforme quantitative (come Google Analytics 4) indicano cosa è successo su un sito, mentre gli strumenti qualitativi di session replay spiegano perché è successo. Il connettore GTM & GA4 di MousePlayer colma questa lacuna creando un canale di sincronizzazione bidirezionale nell’ambiente di esecuzione JavaScript del browser.

Quando viene attivato, lo script di monitoraggio inizializza due moduli principali dedicati:

Esportatore di riproduzioni delle sessioni (initGa4SessionBridge): Invia automaticamente l’identificativo della sessione di registrazione attiva (mp_session_id) e un URL di riproduzione diretto (mp_session_url) al dataLayer del sito non appena viene stabilita la sessione.
Modulo di acquisizione eventi GA4 (initDataLayerBridge): Collega un listener non distruttivo all’array del dataLayer. Qualsiasi evento personalizzato di e-commerce o comportamento inviato a GA4 viene subito replicato nel database analitico di MousePlayer come evento personalizzato (ce), con tutti i parametri numerici e testuali.

Supporto per nomi personalizzati del dataLayer: Se un’applicazione web usa un nome di array JavaScript personalizzato al posto di quello standard dataLayer (ad esempio, xyzDataLayer), il motore si adatta dinamicamente al parametro gtm_datalayer_name configurato, senza modifiche manuali al codice.

2. Valore strategico per l’azienda

Integrare i link di riproduzione direttamente nei processi analitici aziendali offre diversi vantaggi operativi rilevanti:

Ambito di applicazione	Impatto operativo
Ottimizzazione del tasso di conversione (CRO)	Consente agli analisti di individuare punti di attrito nei funnel di conversione GA4 e aprire subito le registrazioni degli utenti che hanno abbandonato il carrello in passaggi specifici del checkout.
Attribuzione dei ricavi & audit	Le transazioni e-commerce di alto valore possono essere verificate esaminando le traiettorie esatte del cursore, i clic e gli stati dell’area visibile che hanno portato all’acquisto.
Debug tecnico più rapido	I team di controllo qualità possono collegare le eccezioni JavaScript o i log degli errori API di GA4 alle registrazioni visive dello schermo, senza riprodurre manualmente i problemi.
Risoluzione delle richieste di assistenza	I ticket con ID di sessione consentono agli operatori di rivedere la riproduzione esatta della sessione del cliente, riducendo notevolmente i tempi di risoluzione.

3. Guida alla configurazione di Google Tag Manager

Per acquisire l’URL di riproduzione in Google Tag Manager e inviarlo a Google Analytics 4, occorre configurare tre componenti GTM:

Passaggio 1: creare le variabili del dataLayer

Nell’area di lavoro GTM, vada su Variabili → Variabili definite dall’utente e crei due variabili di tipo Variabile di livello dati:

Nome variabile: dlv - mp_session_id • Nome della variabile di livello dati: mp_session_id
Nome variabile: dlv - mp_session_url • Nome della variabile di livello dati: mp_session_url

Passaggio 2: creare l’attivatore

Vada su Attivatori → Nuovo e selezioni il tipo Evento personalizzato. Configuri questi parametri:

Nome evento: mp_session_ready
Questo attivatore si attiva su: Tutti gli eventi personalizzati

Passaggio 3: configurare il tag evento GA4

Crei un nuovo tag di tipo Google Analytics: evento GA4 per trasmettere il link della sessione alla proprietà 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. Configurare le esplorazioni (report personalizzati) in GA4

Dopo la pubblicazione del tag GTM, GA4 riceve l’URL di riproduzione come parametro evento. Per analizzarlo nei report di esplorazione personalizzati, occorre prima registrarlo come dimensione personalizzata.

Registrare dimensioni personalizzate nell’amministrazione GA4

Nell’interfaccia di Google Analytics 4, vada su Amministrazione → Visualizzazione dei dati → Definizioni personalizzate e faccia clic su Crea dimensione personalizzata:

Nome dimensione: MousePlayer Session URL
Ambito: Evento (o Sessione per i parametri con ambito sessione)
Parametro evento: mp_session_url

Creare un’esplorazione per esaminare le sessioni

Nella sezione Esplora di GA4, crei un’esplorazione Formato libero per esaminare i percorsi dei singoli utenti:

Righe: Aggiunga Event name, Transaction ID (per e-commerce), oppure Landing page.
Colonne / Dimensioni: Includa la dimensione personalizzata appena creata MousePlayer Session URL.
Valori: Aggiunga Event count oppure Total users.

La tabella del report mostra URL direttamente cliccabili accanto alle metriche GA4, consentendo di passare subito dai valori statistici anomali alle riproduzioni visive.

5. Integrare gli URL di riproduzione nei report predefiniti GA4

Oltre alle esplorazioni, le dimensioni personalizzate possono essere integrate nei report predefiniti GA4 (come Acquisizione del traffico, Pagine e schermate, oppure Acquisti e-commerce) tramite la raccolta di report GA4.

Modificare le tabelle dei report standard

In GA4, apra un report dettagliato predefinito (ad esempio, Report → Coinvolgimento → Pagine e schermate).
Faccia clic sull’icona a matita Personalizza report in alto a destra (richiede accesso amministrativo).
Nel pannello destro, sotto Dati del report, faccia clic su Dimensioni.
Aggiunga MousePlayer Session URL all’elenco delle dimensioni principali o secondarie e la renda visibile.
Faccia clic su Salva → Salva modifiche al report corrente.

Dopo il salvataggio, chi analizza le tabelle standard di acquisizione o conversione può aggiungere MousePlayer Session URL come dimensione secondaria, per esaminare subito visivamente il comportamento dei visitatori nei segmenti di traffico standard.

6. Riferimento API JavaScript & compatibilità GA4 / GTM

MousePlayer offre un’API JavaScript intuitiva compatibile con GA4 (con comandi in stile gtag()) e un oggetto globale pubblico (window.MousePlayer). Gli sviluppatori possono così consultare gli URL di sessione nella console, associare ID di clienti B2B e inserire link di riproduzione in helpdesk o strumenti di monitoraggio errori esterni.

1. Inserimento diretto dell’URL di riproduzione (Intercom / Zendesk / connettori personalizzati)

Può ottenere l’URL completo di riproduzione della sessione attiva dalla console del browser o da uno script personalizzato con 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. Impostare ID personalizzati dei clienti B2B (user_id)

Per identificare clienti SaaS o B2B autenticati, può passare un user_id personalizzato (come ID del database, e-mail o UUID) durante la configurazione iniziale oppure dinamicamente in esecuzione, usando la sintassi 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. Metodi di recupero asincrono dei dati

Può usare la sintassi standard dei callback GA4 per recuperare asincronicamente i metadati di sessione negli script personalizzati di gestione dei 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); });

Come possiamo aiutarla?