Tracking: Your own booking form (OpenTable API)

For sites whose own booking form makes bookings through OpenTable's API.

The problem this solves

If your developer built your booking form, and it sends bookings to OpenTable behind the scenes, only your website knows when a booking has gone through. OpenTable doesn't send any message to the page, so your code has to tell Distil.

The booking call

Where your booking form receives a successful confirmation from OpenTable, call trackReservation once. The values below are examples: fill each one in from the confirmation.

if (window.distil) window.distil.trackReservation({
  restaurant:         123456,          /* OpenTable restaurant ID (RID) — a number */
  confirmationNumber: 1234567890,     /* OpenTable confirmation number — a number */
  bookingDate:        "2026-12-04",   /* "YYYY-MM-DD", as returned by OpenTable */
  bookingTime:        "19:30",        /* "HH:MM" 24-hour, as returned by OpenTable */
  partySize:          2               /* number of guests — a number */
});

Rules, and why

Once the tracking script is on the page, you can call trackReservation even if the tracker hasn't finished loading: the call waits in a queue. The if (window.distil) check stops your booking form from erroring if the tracking script isn't there, for example when the visitor declined cookies.

Sending it through Google Tag Manager instead

This setup is available from Distil as a ready-made Google Tag Manager import file, including the booking tag and its variables (see Installing with Google Tag Manager).

Your developer pushes the confirmed booking into the dataLayer:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: "booking_confirmed",
  booking: {
    restaurant: 123456,
    confirmationNumber: 1234567890,
    date: "2026-12-04",
    time: "19:30",
    partySize: 2
  }
});

In GTM:

1. Create a Data Layer Variable for each field (for example DLV - booking.restaurant for booking.restaurant).
2. Add a Custom HTML tag, triggered by Custom Event booking_confirmed, with the same consent settings as your tracking tag. In its Advanced Settings → Tag Sequencing, tick Fire a tag before this tag fires and choose your Distil tracking tag, so Distil is always set up before the booking is sent:

<script>
window.distil.trackReservation({
  restaurant:         Number({{DLV - booking.restaurant}}),
  confirmationNumber: Number({{DLV - booking.confirmationNumber}}),
  bookingDate:        {{DLV - booking.date}},
  bookingTime:        {{DLV - booking.time}},
  partySize:          Number({{DLV - booking.partySize}})
});
</script>

Don't put quote marks around {{…}} variables. In a Custom HTML tag, GTM inserts each variable as a proper JavaScript value: text arrives already in quotes, and numbers as numbers. Adding your own quotes turns numbers into text, and a missing value into the word "undefined".