Search

iFrame Tracking with Google Tag Manager

Prerequisites

You should set up two GTM containers :

  1. GTM on the client’s website → Receives events.
  2. GTM in the Zenchef module (iFrame) → Sends events.

Download and import the .json variables for both containers before starting, available here.

 

 

Objective

Enable tracking of Zenchef reservations in Google Analytics 4 and Google Ads, or any other tracking solution with Google Tag Manager.

 

 

Creating GTM Tags

Three tags are required:

  1. Custom HTML tag for sending events (inside the GTM container in Zenchef) → Sends events to the website.
  2. Custom HTML tag for receiving events (inside the GTM container on the client’s website) → Captures events sent by Zenchef.
  3. Tracking tag (GA4 / Google Ads) (inside the GTM container on the client’s website) → Records events in the tracking tool.

 

 

Configuring the Tags

1️⃣ Sending Tag (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>

⚠️ Modify:

  • reservation_completed → Event name to be personnalised (e.g., chose_date, chose_slot).
  • https://yourwebsite.com → Replace with your actual website domain.
  • Add additional variables as needed (ensure they match those from the .json file).

Trigger:

  • Type: Custom Event
  • Select the appropriate event from the downloaded .json file.

 

2️⃣ Receiving Tag (GTM on the Client’s Website)

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>

Trigger:

  • Type: Page View – All Pages (to ensure the tag is active across the site).

 

3️⃣ GA4 / Google Ads Tracking Tag (GTM on the Client’s Website)

Type: GA4 Event or Google Ads Conversion Tracking
Trigger: Custom Event

  • Event name: Must match the name defined in the first tag (e.g., reservation_completed).

 

Testing & Verification

  • GTM Preview Mode: Verify that events are sent and received correctly.
  • GA4 DebugView: Ensure events appear in Google Analytics.
  • Google Tag Assistant: Check that GTM is firing the tags correctly.

Important: Once the tests are successful, do not forget to publish your GTM containers (both Zenchef and the client’s website) to activate tracking in production.

 

 

Summary of Actions to Take:

  •  Import the .json variables into both GTM containers.
  • Add a sending tag in GTM Zenchef.
  • Add a receiving tag in GTM on the client’s website.
  • Configure a GA4 / Google Ads tracking tag on the client’s website.
  • Test and validate using debugging tools.
  • Publish your GTM containers.

Zenchef reservation tracking is now fully operational! 

Related to