Inhaltsverzeichnis

resmio » Aide » Intégration resmio » Google Tag Manager

Suivi des conversions avec Google Tag Manager (GTM)

Qui peut utiliser cette fonctionnalité ?

Disponible à partir de l’abonnement ULTIMATE.

Suivre les événements pertinents du widget via Google Tag Manager (GTM)
Envoyer des événements / conversions à GA4, Meta et autres
Évaluer le succès de vos campagnes marketing

C’est parti

Aperçu

Préparations pour le suivi des conversions via GTM

PARAMÈTRE EXPERT Afin de mesurer le succès de vos campagnes de marketing en ligne pour n’importe quel restaurant, nous avons créé des fonctionnalités de base pour suivre le widget de réservation de resmio via le Google Tag Manager (en abrégé : GTM).

resmio pousse pour cela des événements spécifiques dans le widget vers la couche de données (Data Layer).

Grâce aux déclencheurs configurés dans le GTM, vous pouvez transmettre les signaux traités par exemple à Google Analytics (GA4) et suivre ainsi les étapes allant de la consultation de la page d’atterrissage (par ex. page du site) à la première interaction de l’utilisateur avec le widget jusqu’à la réservation.

Les préparations suivantes doivent être effectuées :

Un compte GTM (avec conteneur web préinstallé)
Un compte GA4 avec propriété (avec balise GA4 préinstallée sur le site web)
Le widget resmio (intégré en tant que script sur le site web)
Le suivi des conversions GTM est activé dans le compte resmio

GTM Conversation Tracking im resmio Konto aktivieren

Le suivi GTM est désactivé par défaut, vous pouvez activer cette fonctionnalité sous Paramètres > Intégrations > Marketing. Les agences sont priées de s’adresser directement à leurs clients restaurateurs pour cela.

À noter : Pour ne pas dépasser le cadre de cet article, nous n’aborderons pas la création de compte de GTM et GA4 dans ce qui suit. L’installation de GTM ainsi que de la balise GA4 sur le site web n’est pas non plus abordée ici. Vous trouverez des instructions détaillées sous les liens respectifs.

Événements du widget surveillés

GTM resmio Tracking - Prozess veranschaulicht

Via postMessage, le widget resmio (en tant qu’iFrame intégré) communique de manière sécurisée avec le site web sur lequel il est intégré.

Chaque fois qu’il se passe quelque chose dans le widget – par ex. un clic, un changement d’étape ou une réservation envoyée – le widget envoie un message (postMessage) au site web.
Ce message y est reçu par le Google Tag Manager, écrit dans la couche de données (Data Layer) et peut ensuite être traité, par ex. dans GA4.
Ainsi, le widget peut être suivi de manière fiable sans avoir à intervenir directement dans le code du widget.

Actuellement, nous envoyons les événements suivants à GTM :

widget_interaction_started

Déclenchement lors de la première interaction de l’utilisateur avec le widget (par ex. taper sur l’heure de réservation, sélection de la taille du groupe, ouverture du calendrier)

reservation_step_2_started

Déclenchement lors du passage à l’écran de paiement (saisie des données de contact)

reservation_completed

Déclenchement lors d’une réservation en ligne réussie

Protection des données : Nous ne transmettons aucune donnée personnelle au Google Tag Manager, c’est pourquoi le suivi des événements du widget dans notre configuration est, selon notre compréhension, possible de manière conforme à la protection des données.

Données transmises à GTM

resmio Widget pusht an GTM spezifische Daten

Nous transmettons tous les événements mentionnés ci-dessus avec horodatage au Datalayer.

Nous incluons systématiquement les données suivantes :

- timestamp · Horodatage de l’interaction · Exemple : 2025-12-05T12:23:35.430Z
- facility_id · Indicateur pour le restaurant respectif · Exemple : mon-nom-de-restaurant
- promotion · Nom de la période d’offre sélectionnée · Exemple : happy_hour
- party_size · Taille du groupe de la réservation · Exemple :4
Vous pouvez transmettre ces données (en option), par ex. à GA4 pour l’évaluation.

Site de démonstration

Demo-Webseite fürs GTM-Conversion-Tracking mit resmio

Nous avons implémenté Google Tag Manager, GA4 et un widget modèle sur notre site de démonstration resmio Steakhouse (restaurant fictif).

Dans notre configuration, tous les événements du widget techniquement interceptés sont également enregistrés dans la console du navigateur.

Clic droit sur le site web > Inspecter
Passer à l’onglet Console / Console
Déclencher les signaux du widget sur le site web et observer la console

Configuration du suivi GTM

1. Balise Listener dans GTM

Dans la première étape, nous devons configurer ce que l’on appelle la balise Listener dans GTM.

Sa tâche consiste à indiquer à Google Tag Manager d’attendre certains événements et d’envoyer des données spécifiques (par ex. à l’outil d’analyse GA4) lorsque les actions prédéfinies se produisent.

Voici comment procéder :

Ouvrez votre conteneur GTM (espace de travail)
Cliquez ensuite à gauche dans la liste des pages sur Balises
Créez une nouvelle balise via le bouton Nouvelle
Dans la configuration de la balise, sélectionnez le type de balise HTML personnalisé
Choisissez un nom descriptif pour la balise et copiez le code suivant.


<script>
window.addEventListener('message', function(e) {
  if (!e.data || e.data.event !== 'resmio_widget_action') return;
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: e.data.step,       // 'widget_interaction_started', 'reservation_step_2_started', 'reservation_completed'
    timestamp: e.data.timestamp,
    facility_id: e.data.facility_id,
    party_size: e.data.party_size,
    promotion: e.data.promotion
  });
});
</script>

Astuce : Pour que les événements du widget déclenchés soient enregistrés dans la console du navigateur, ajoutez également console.log(e.data.step);.

GTM mit resmio verbinden: Code für den benutzerdefinierten HTML Tag kopieren

Le code devrait ressembler à la capture d’écran ci-dessus. Ainsi, le Listener s’exécute en permanence sur la page et intercepte tous les événements postMessage du widget.

Comme déclencheur, toutes les pages devraient être présélectionnées.

N’oubliez pas d’enregistrer votre balise HTML personnalisée.

2. Déclencheurs d’événements personnalisés et balises

Maintenant, nous avons besoin d’un déclencheur d’événement personnalisé dédié pour chaque étape de notre entonnoir (funnel).

Dans notre configuration, nous avons besoin au total de 3 déclencheurs pour 3 balises GA4 personnalisées, que nous associerons ensuite aux déclencheurs.

widget_interaction_started

Déclenchement lors de la première interaction de l’utilisateur avec le widget

reservation_step_2_started

Déclenchement lors du passage à l’écran de paiement (saisie des données de contact)

reservation_completed

Déclenchement lors d’une réservation en ligne réussie

Voici comment procéder :

Ouvrez votre conteneur GTM (espace de travail)
Cliquez ensuite à gauche dans la liste des pages sur Déclencheurs
Créez un nouveau déclencheur d’événement personnalisé via le bouton Nouveau
Sélectionnez Événement personnalisé comme type de déclencheur
Attribuez un nom d’événement descriptif et choisissez « Tous les événements personnalisés » comme condition de déclenchement
Répétez les étapes 3 à 5 jusqu’à ce que vous ayez un total de trois déclencheurs

GTM mit resmio verbinden: Übersicht der Trigger

Une fois tous les déclencheurs créés, vous pouvez créer les balises personnalisées correspondantes pour GA4 (ou au choix Meta, TikTok, etc.) et enfin les associer aux déclencheurs dans Google Tag Manager.

Nous esquissons ci-dessous une configuration pour Google Analytics 4.

Voici comment procéder :

Cliquez à gauche dans la liste des pages sur Balises
Créez une nouvelle balise via le bouton Nouvelle
Dans la configuration de la balise, sélectionnez le type de balise Google Analytics
Ajoutez l’ID de mesure GA4 de votre propriété
Choisissez un nom d’événement descriptif
Associez maintenant la balise personnalisée au déclencheur approprié
Répétez les étapes pour tous les événements

Voici à quoi pourrait ressembler votre configuration de suivi finale pour GTM et resmio :

N’oubliez pas de pousser toutes les modifications vers GTM pour qu’elles soient prises en compte. Pour cela, cliquez sur Envoyer dans la barre d’en-tête en haut à droite.

3. Créer des variables Data Layer (en option)

(Étape facultative) Avec les événements du widget, nous transmettons des données supplémentaires que vous pouvez par exemple transmettre à GA4.

timestamp · Horodatage de l’interaction · Exemple : 2025-12-05T12:23:35.430Z
facility_id · Indicateur pour le restaurant respectif · Exemple : mon-nom-de-restaurant
promotion · Nom de la période d’offre sélectionnée · Exemple : happy_hour
party_size · Taille du groupe de la réservation · Exemple :4

Pour utiliser les données pour vos évaluations dans GA4, vous avez besoin de…

… variables Data Layer correspondantes dans GTM, que vous associez aux événements GA4.
… définitions personnalisées (Custom Dimensions) dans GA4, qui contiennent les paramètres d’événement

Créer des variables dans GTM

Data Layer Variablen fürs resmio Widget im GTM anlegen

Voici comment procéder :

Ouvrez votre conteneur GTM (espace de travail)
Cliquez ensuite à gauche dans la liste des pages sur Variables
Créez une nouvelle variable personnalisée via le bouton Nouvelle
Sélectionnez Variable de couche de données comme type de variable
Saisissez maintenant les valeurs suivantes : Nom de la variable, par ex. DLV - facility_id, Nom de la variable de couche de données facility_id Enregistrez cette variable.
Répétez les étapes pour les variables de couche de données promotion, timestamp et party_size

Associer les variables aux balises GA4

Une fois les variables créées dans Google Tag Manager, il ne vous reste plus qu’à les associer aux balises GA4 correspondantes (comme illustré sur la capture d’écran ci-dessus).

Dans notre exemple de configuration, nous associons les variables de couche de données aux trois balises GA4.

Voici comment procéder :

Cliquez sur Balises dans GTM
Modifiez une balise GA4 au choix
Ajoutez les paramètres d’événement correspondants à la balise GA4 respective :
1. Paramètre d’événement : facility_id a la valeur {{DLV - facility_id}}
2. Paramètre d’événement : promotion a la valeur {{DLV - promotion}}
3. Paramètre d’événement : timestamp a la valeur {{DLV - timestamp}}
4. Paramètre d’événement : party_size a la valeur {{DLV - party_size}}

Enregistrez les modifications et répétez les étapes pour les balises GA4 restantes.

Créer des dimensions personnalisées dans GA4

Custom Dimensions in GA4 anlegen, um Widget-Daten empfangen und auswerten zu können

Enfin et surtout, nous avons besoin de dimensions personnalisées adaptées pour GA4, afin que Google Analytics puisse les enregistrer, les évaluer et les afficher dans des rapports. La raison en est que GA4 ne peut pas suivre nos données de widget supplémentaires telles quelles. Nous devons d’abord enseigner ces paramètres d’événement à GA4.

Voici comment créer des dimensions personnalisées dans GA4 :

Passez à GA4 et là, sur Administration > Affichage des données > Définitions personnalisées.
Cliquez ensuite en haut à droite sur le bouton Créer une dimension personnalisée
Attribuez un nom de dimension descriptif ainsi qu’une description le cas échéant. Le champ d’application de notre définition personnalisée est Événement / Event.
Ajoutez maintenant le paramètre d’événement respectif de la balise GA4 de GTM, veillez impérativement à l’orthographe correcte (respect de la casse !). Exemple : facility_id
Enregistrez votre dimension personnalisée et répétez les étapes pour toutes les autres couches de données.

Disponibilité des données : Les dimensions personnalisées n’apparaissent généralement pas immédiatement dans les rapports de GA4. Il peut parfois falloir jusqu’à 24 heures pour que toutes les données soient visibles.

4. Tester le suivi GTM

Une fois la configuration terminée, nous recommandons de tester le suivi dans Google Tag Manager et GA 4.

Après avoir envoyé les modifications à GTM :

Passez en mode débogage en cliquant sur Prévisualiser dans la barre d’en-tête en haut à droite
Saisissez le site web sur lequel le conteneur web GTM et le widget resmio sont intégrés
Vous devriez être connecté avec succès à Tag Assistant (voir capture d’écran ci-dessus), sinon veuillez vérifier l’intégration du conteneur web sur le site web
Déclenchez les signaux dans le widget de réservation, quittez à nouveau Tag Assistant et vérifiez enfin si les balises ont été déclenchées

Ouvrez au choix la DebugView ou la Vue d’ensemble des rapports en temps réel de Google Analytics 4
Déclenchez les signaux de widget correspondants et vérifiez dans GA4 si les événements ont été transmis de manière appropriée
Les événements transmis devraient également apparaître dans GA4 après quelques minutes sous Administration > Événements. Si ce n’est pas le cas après le test, vérifiez sous Administration > Collecte et modification des données > Filtres de données si le trafic interne est exclu, et désactivez temporairement l’option le cas échéant.

Astuce : Marquez l’événement reservation_completed dans GA4 comme Événement clé pour pouvoir surveiller vos conversions dans tous les rapports.

5. Entonnoir simple dans GA4

Les signaux du widget sont-ils correctement transmis par GTM à GA4 ?

Super, avec ces données, vous pouvez maintenant configurer un entonnoir, par exemple via l’Analyse exploratoire des données, et ainsi suivre les différentes étapes de l’interaction de l’utilisateur, de la consultation de la page à la conclusion de la réservation.

Voici comment procéder :

Ouvrez la propriété GA4 correspondante
Cliquez dans la barre latérale gauche sur Analyse exploratoire des données puis sur Analyse exploratoire de l'entonnoir
Modifiez les étapes créées dans les paramètres > Étapes : Ajoutez successivement tous les événements (page_view, widget_interaction_started, reservation_step_2_started, reservation_completed).
Via les dimensions, vous pouvez segmenter l’entonnoir par exemple par catégorie d’appareil, sources de trafic, etc.

Suivi des conversions avec Google Tag Manager (GTM)

Aperçu

Préparations pour le suivi des conversions via GTM

Événements du widget surveillés

Données transmises à GTM

Site de démonstration

Configuration du suivi GTM

1. Balise Listener dans GTM

2. Déclencheurs d’événements personnalisés et balises

3. Créer des variables Data Layer (en option)

Créer des variables dans GTM

Associer les variables aux balises GA4

Créer des dimensions personnalisées dans GA4

4. Tester le suivi GTM

5. Entonnoir simple dans GA4

Ces sujets pourraient également vous intéresser

Plan de table

Personnaliser le widget

Intégrer le widget de réservation resmio

Notifications

iPad App

Instagram

Configurer le menu / le système de commande

Gestion des retours