Passerelle d’événements GTM et GA4

1. Architecture & fonctionnalités

L’analyse web moderne se heurte souvent à un cloisonnement fondamental des données : les plateformes quantitatives (comme Google Analytics 4) indiquent ce qui s’est passé sur un site, tandis que les outils qualitatifs de relecture de session expliquent pourquoi cela s’est produit. La passerelle GTM & GA4 de MousePlayer comble cet écart en établissant un canal de synchronisation bidirectionnel dans l’environnement d’exécution JavaScript du navigateur.

Une fois activé, le script de suivi initialise deux modules principaux dédiés :

Exportateur de relectures de session (initGa4SessionBridge) : Transmet automatiquement l’identifiant de la session d’enregistrement active (mp_session_id) et une URL de relecture directe (mp_session_url) au dataLayer du site dès que la session est établie.
Module de réception des événements GA4 (initDataLayerBridge) : Ajoute un écouteur non destructif au tableau du dataLayer. Tout événement personnalisé de commerce électronique ou de comportement transmis à GA4 est immédiatement répliqué dans la base d’analyse de MousePlayer sous forme d’événement personnalisé (ce), avec tous ses paramètres numériques et textuels.

Prise en charge des noms personnalisés du dataLayer : Si une application web utilise un nom de tableau JavaScript personnalisé au lieu du nom standard dataLayer (par exemple, xyzDataLayer), le moteur s’adapte dynamiquement au paramètre gtm_datalayer_name configuré, sans modification manuelle du code.

2. Valeur stratégique pour l’entreprise

L’intégration de liens de relecture de session directement dans les chaînes de traitement analytique de l’entreprise offre plusieurs avantages opérationnels majeurs :

Domaine d’application	Impact opérationnel
Optimisation du taux de conversion (CRO)	Permet aux analystes d’identifier les points de friction dans les entonnoirs de conversion GA4 et d’ouvrir immédiatement les enregistrements des utilisateurs ayant abandonné leur panier à une étape précise du paiement.
Attribution du chiffre d’affaires & audit	Les transactions de commerce électronique de grande valeur peuvent être auditées en examinant les trajectoires exactes du curseur, les clics et les états de la zone d’affichage ayant conduit à l’achat.
Débogage technique accéléré	Les équipes d’assurance qualité peuvent rapprocher les événements d’exception JavaScript ou les journaux d’erreurs d’API de GA4 des enregistrements visuels, sans avoir à reproduire manuellement les anomalies.
Résolution des demandes d’assistance	Les tickets contenant un identifiant de session permettent aux agents d’assistance de revoir exactement la session du client, ce qui réduit considérablement les délais de résolution.

3. Guide de configuration de Google Tag Manager

Pour récupérer l’URL de relecture dans Google Tag Manager et la transmettre à Google Analytics 4, vous devez configurer trois éléments distincts dans GTM :

Étape 1 : créer les variables du dataLayer

Dans l’espace de travail GTM, accédez à Variables → Variables définies par l’utilisateur et créez deux variables de type Variable de couche de données :

Nom de la variable : dlv - mp_session_id • Nom de la variable de couche de données : mp_session_id
Nom de la variable : dlv - mp_session_url • Nom de la variable de couche de données : mp_session_url

Étape 2 : créer le déclencheur d’activation

Accédez à Déclencheurs → Nouveau et sélectionnez le type de déclencheur Événement personnalisé. Configurez les paramètres suivants :

Nom de l’événement : mp_session_ready
Ce déclencheur se déclenche sur : Tous les événements personnalisés

Étape 3 : configurer la balise d’événement GA4

Créez une balise de type Google Analytics : Événement GA4 pour transmettre le lien de session à la propriété 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. Configurer les explorations (rapports personnalisés) dans GA4

Une fois la balise GTM déployée, GA4 reçoit l’URL de relecture comme paramètre d’événement. Pour analyser ces données dans des rapports d’exploration personnalisés, vous devez d’abord enregistrer ce paramètre comme dimension personnalisée.

Enregistrer les dimensions personnalisées dans l’administration GA4

Dans l’interface de Google Analytics 4, accédez à Administration → Affichage des données → Définitions personnalisées et cliquez sur Créer une dimension personnalisée :

Nom de la dimension : MousePlayer Session URL
Portée : Événement (ou Session pour les paramètres de portée session)
Paramètre d’événement : mp_session_url

Créer une exploration pour examiner les sessions

Dans la section Explorer de GA4, créez une exploration au format Libre pour examiner les parcours individuels des utilisateurs :

Lignes : Ajoutez Event name, Transaction ID (pour le commerce électronique), ou Landing page.
Colonnes / Dimensions : Incluez la dimension personnalisée que vous venez de créer MousePlayer Session URL.
Valeurs : Ajoutez Event count ou Total users.

Le tableau du rapport affiche des URL directement cliquables à côté des indicateurs GA4, ce qui permet de passer instantanément d’une valeur statistique atypique à une relecture visuelle.

5. Intégrer les URL de relecture aux rapports standards GA4

Outre les explorations, les dimensions personnalisées peuvent être intégrées aux rapports standards de GA4 (comme Acquisition de trafic, Pages et écrans, ou Achats de commerce électronique) au moyen de la bibliothèque de rapports GA4.

Modifier les tableaux des rapports standards

Dans GA4, ouvrez un rapport détaillé standard (par exemple, Rapports → Engagement → Pages et écrans).
Cliquez sur l’icône en forme de crayon Personnaliser le rapport en haut à droite (des droits d’administration sont nécessaires).
Dans le panneau de droite, sous Données du rapport, cliquez sur Dimensions.
Ajoutez MousePlayer Session URL à la liste des dimensions principales ou secondaires et rendez cette dimension visible.
Cliquez sur Enregistrer → Enregistrer les modifications du rapport actuel.

Après l’enregistrement, tout analyste consultant les tableaux standards d’acquisition ou de conversion peut ajouter MousePlayer Session URL comme dimension secondaire pour examiner immédiatement le comportement des visiteurs dans les segments de trafic standards.

6. Référence de l’API JavaScript & compatibilité GA4 / GTM

MousePlayer fournit une API JavaScript intuitive compatible avec GA4 (avec des commandes de type gtag()) et un objet global public (window.MousePlayer). Les développeurs peuvent ainsi consulter les URL de session dans la console, associer des identifiants de clients B2B et insérer des liens de relecture dans des outils d’assistance ou de suivi des erreurs tiers.

1. Insertion directe de l’URL de relecture (Intercom / Zendesk / passerelles personnalisées)

Vous pouvez récupérer l’URL de relecture complète de la session active du visiteur depuis la console du navigateur ou tout script personnalisé avec 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. Définir des identifiants de clients B2B personnalisés (user_id)

Pour identifier les clients SaaS ou B2B connectés, vous pouvez transmettre un user_id personnalisé (identifiant de base de données, adresse e-mail ou UUID, par exemple) à la configuration initiale du script ou dynamiquement à l’exécution, avec la syntaxe 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. Méthodes de récupération asynchrone des données

Vous pouvez utiliser la syntaxe standard des fonctions de rappel GA4 pour récupérer de manière asynchrone les métadonnées de session dans vos scripts personnalisés de gestion des balises :

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

Comment pouvons-nous vous aider ?