CAPI côté serveur et suivi des événements

Contourner les bloqueurs de publicités et les restrictions ITP en faisant transiter le trafic MousePlayer par votre propre conteneur GTM côté serveur propriétaire, et suivre en détail votre activité de commerce électronique.

1. Présentation des modes de suivi

MousePlayer V2 introduit un puissant routeur d’événements qui vous permet de contrôler le parcours des données du navigateur de l’utilisateur vers nos serveurs. Vous disposez de trois modes distincts :

  • Web uniquement (par défaut) : Transmet toutes les données directement à MousePlayer par WebSockets. Idéal pour la vue en direct en temps réel, mais vulnérable aux bloqueurs de publicités stricts.
  • Mode hybride : Le meilleur des deux mondes. Envoie les coordonnées légères de souris et de défilement par WebSockets pour une vue en direct fluide, tandis que les modifications volumineuses du DOM et les événements personnalisés sont regroupés et acheminés en toute sécurité via votre GTM côté serveur par HTTP POST.
  • CAPI pur : Envoi par lots à 100% en HTTP POST. Confidentialité maximale, aucun WebSocket, entièrement propriétaire. Remarque : la vue en direct est désactivée dans ce mode.

2. Configuration de Google Tag Manager (recommandée)

Le moyen le plus simple d’utiliser les modes hybride ou CAPI pur est de passer par nos modèles officiels de la galerie communautaire GTM. Téléchargez les fichiers .tpl ci-dessous et importez-les dans vos espaces de travail GTM.

Télécharger les modèles :

↓ GTM web : balise SDK MousePlayer

↓ GTM serveur : client d’ingestion MousePlayer

↓ GTM serveur : balise de connexion MousePlayer

Étape 1 : configurer le client et la balise côté serveur

Dans votre conteneur GTM côté serveur, importez le modèle Client d’ingestion . Configurez-le pour écouter sur un chemin personnalisé (par ex. /mp_capi). Importez ensuite la Balise de connexion, configurez son déclenchement sur l’événement mouseplayer_batch , puis déployez votre conteneur.

Étape 2 : configurer la balise GTM web

Dans votre conteneur GTM web, importez la Balise SDK. Sélectionnez « Configuration et initialisation » comme type de balise, saisissez votre Channel ID, sélectionnez Mode hybride, puis collez l’URL de votre point de terminaison ssGTM (par ex. https://metrics.yourdomain.com/mp_capi).

3. Installation manuelle (sans GTM)

Si vous préférez intégrer le script directement dans le code, définissez l’objet window.mp_config avant de charger l’extrait de code de suivi.

<!-- MousePlayer Config & SDK --> <script> window.mp_config = { channel: 'YOUR_UNIQUE_ID_HERE', mode: 'hybrid', // 'web_only', 'hybrid', or 'pure_capi' capi_endpoint: 'https://metrics.yourdomain.com/mp_capi' }; window.mp = window.mp || function() { (window.mp.q = window.mp.q || []).push(arguments); }; (function(w, d, s) { var f = d.getElementsByTagName(s)[0], j = d.createElement(s); j.async = true; j.src = 'https://www.mouseplayer.com/mp.js'; f.parentNode.insertBefore(j, f); })(window, document, 'script'); </script>

4. Suivi de l’entonnoir de commerce électronique

Suivez l’ensemble du parcours client. Les noms d’événements standardisés permettent à MousePlayer de générer automatiquement des rapports d’entonnoir de commerce électronique soignés dans l’espace de travail de votre projet. Tous les événements sont entièrement compatibles avec les modes CAPI et Web uniquement.

1. view_item

Déclenchez cet événement lorsqu’un utilisateur consulte une page produit précise.

mp('event', 'view_item', { item_id: 'SKU_98765', item_name: 'Wireless Noise-Cancelling Headphones', item_category: 'Electronics', price: 299.99 });

2. add_to_cart

Déclenchez cet événement lorsqu’un utilisateur ajoute un article à son panier.

mp('event', 'add_to_cart', { item_id: 'SKU_98765', item_name: 'Wireless Noise-Cancelling Headphones', price: 299.99, quantity: 1 });

3. begin_checkout

Déclenchez cet événement lorsqu’un utilisateur passe à l’écran de paiement.

mp('event', 'begin_checkout', { cart_value: 299.99, currency: 'USD', total_items: 1 });

4. purchase

Déclenchez cet événement après un paiement réussi ou une confirmation de commande.

mp('event', 'purchase', { transaction_id: 'T_1002938', value: 299.99, tax: 24.00, shipping: 0.00, currency: 'USD', coupon_used: 'FREESHIP' });

5. Événements personnalisés et génération de prospects

Vous n’êtes pas limité au commerce électronique. Suivez les envois de formulaires, les inscriptions à une newsletter ou les interactions propres à votre application web.

Génération de prospects (envoi de formulaire)

Déclenchez cet événement lorsqu’un utilisateur envoie un formulaire de contact ou demande un devis avec succès.

mp('event', 'generate_lead', { form_name: 'B2B Contact Form', industry: 'Software Development', company_size: '50-200' });

Interaction personnalisée avec l’interface

Comprenez comment les utilisateurs interagissent avec des éléments complexes comme les calculateurs, les fenêtres modales ou les changements d’onglet.

mp('event', 'calculator_used', { loan_amount: 50000, duration_months: 48, interest_rate: 7.5 });

6. Limites des paramètres et recommandations

Typage des données : MousePlayer détecte automatiquement les types des paramètres. Envoyez les nombres sous forme d’entiers ou de nombres à virgule flottante (par ex. 150.00, pas "150.00") pour permettre les filtres numériques avancés (par ex. « Prix > 100 ») dans le tableau de bord.

Règle Description
Longueur des noms d’événements Au maximum 128 caractères. Utilisez snake_case pour une lisibilité optimale (par ex. user_signup).
Longueur des clés de paramètres Au maximum 64 caractères par nom de clé (par ex. transaction_id).
Valeurs textuelles Les paramètres textuels sont tronqués à 255 caractères pour garantir des performances optimales de la base de données.
Confidentialité des données N’envoyez pas de données permettant d’identifier une personne (PII), comme des adresses e-mail en clair, des noms réels ou des mots de passe, dans les paramètres d’événements.