Recherche

Tracking d'un iFrame avec Google Tag Manager

Prérequis

Vous devez créer deux conteneurs GTM :

  1. GTM sur le site client → Réception des événements.
  2. GTM dans Zenchef (iFrame) → Envoi des événements.

Téléchargez et importez les variables .json pour les deux conteneurs avant de commencer, disponible ici.

 

 

Objectif

Permettre le tracking des réservations Zenchef sur Google Analytics 4 et Google Ads, ou tout autre type de tracking via Google Tag Manager.

 

 

Création des Balises GTM

Trois balises sont nécessaires :

  1. Balise Custom HTML d’envoi (dans le conteneur GTM de Zenchef) → Transmet les événements vers le site client.
  2. Balise Custom HTML de réception (dans le conteneur GTM du site client) → Capture les événements envoyés par Zenchef.
  3. Balise de tracking (GA4 / Google Ads) (dans le conteneur GTM du site client) → Enregistre les événements dans l’outil de suivi.

 

Configuration des Balises

1️⃣ Balise d’envoi (GTM Zenchef - iFrame)

Type : Custom HTML
Code :

<script>
try {
var postObject = JSON.stringify({
event: 'reservation_completed',
variable: 'variable'
});
parent.postMessage(postObject, 'https://votresite.com');
} catch(e) {
console.log(e);
}
</script>

⚠️ À modifier :

  • reservation_completed → Nom de l’événement à personnaliser, selon votre choix (ex. : chose_date, chose_slot).
  • https://votresite.com → Remplacez par le domaine de votre site.
  • Ajoutez d’autres variables selon vos besoins (respectez les variables du fichier .json).

Déclencheur :

  • Type : Événement personnalisé
  • Sélectionnez l’événement correspondant importé depuis le fichier .json, disponible dans la liste des déclencheurs de votre conteneur.

 

2️⃣ Balise de réception (GTM Site Client)

Type : Custom HTML
Code :

<script>
(function(window) {
addEvent(window, 'message', function(message) {
try {
var data = JSON.parse(message.data);
var dataLayer = window.dataLayer || (window.dataLayer = []);
if (data.event) {
dataLayer.push({
'event': data.event,
'postMessageData': data
});
}
} catch(e) {}
});
function addEvent(el, evt, fn) {
if (el.addEventListener) el.addEventListener(evt, fn);
else if (el.attachEvent) el.attachEvent('on' + evt, function(evt) { fn.call(el, evt); });
else el['on' + evt] = function(evt) { fn.call(el, evt); };
}
})(window);
</script>

Déclencheur :

  • Type : Page vue – Toutes les pages (s’assurer que la balise est active sur toutes les pages du site).

 

3️⃣ Balise de tracking GA4 / Google Ads (GTM Site Client)

Type : Événement GA4 ou Suivi des conversions Google Ads, selon vos besoins
Déclencheur : Événement personnalisé

  • Nom de l’événement : Doit correspondre au nom défini dans la première balise (ex. reservation_completed).

 

Test & Vérification

  • Mode Aperçu dans GTM : Vérifiez l’envoi et la réception des événements.
  • DebugView dans GA4 : Confirmez que les événements apparaissent bien.
  • Google Tag Assistant : Vérifiez que GTM déclenche bien les balises.

Important : Une fois les tests validés, n’oubliez pas de publier vos conteneurs GTM (Zenchef et Site Client) pour que le tracking soit actif en production.

 

 

Résumé des actions à effectuer :

  • Importer les variables .json dans les deux conteneurs GTM.
  • Ajouter une balise d’envoi dans GTM Zenchef.
  • Ajouter une balise de réception dans GTM du site client.
  • Configurer une balise GA4 / Google Ads sur le site client.
  • Tester et valider avec les outils de débogage.

Le tracking des réservations Zenchef est maintenant opérationnel !

Associé à