Zum Inhalt springen

Besucher im Reservierungsfenster messen

← Integration

Wie können Sie Besucherströme im Reservierungsfenster (Widget) DSGVO- bzw. DSG-konform messen – obwohl das Widget selbst auf foratable.com gehostet wird?

Wir stellen eine Event-API bereit, die es erlaubt, Ereignisse aus dem Widget auszulesen und an Ihre bestehenden Monitoring-, Marketing- oder Analyse-Tools weiterzugeben.

Je nach Integration können unterschiedliche Datenstrukturen übergeben werden:
– ein einfacher Event-Name oder
– ein Event inklusive Datenkontext (TrackingContext).

Welche Events werden ausgelöst?

Das Widget löst verschiedene Events aus, die die wichtigsten Interaktionen des Gastes abbilden. Diese Events können z. B. in GTM, Analytics-Systemen oder internen Tools erfasst werden.

Aktuell werden folgende Events gesendet:

  • widget_loaded
    Das Widget wurde geladen und ist einsatzbereit.

  • first_page_reached
    Die Einstiegsseite des Widgets wurde angezeigt.

  • offers_requested
    Der Gast hat eine Anfrage (Datum, Zeit, Pax) gestellt.

  • alternatives_offered
    Das Widget zeigt alternative Optionen (z. B. andere Zeiten) an.

  • more_alternatives_offered
    Der Gast fordert weitere Alternativen an.

  • alternative_restaurant_disclaimer_shown
    Ein Hinweis auf ein alternatives Restaurant wurde angezeigt.

  • restaurant_switched
    Der Gast ist zu einem anderen Restaurant gewechselt.

  • guest_data_form_reached
    Das Formular zur Eingabe der Gästedaten wurde erreicht.

  • phone_verification_triggered
    Die Telefonverifizierung wurde eingeleitet.

  • reservation_done
    Eine Reservation wurde erfolgreich erstellt (inkl. Pending-Zustände wie IVR oder Kreditkarte).

Wichtig

Der Event widget_loaded wird genau einmal ausgelöst – unabhängig davon, auf welcher Seite der Gast einsteigt.
Ein Gast kann z. B. direkt auf die Experience-Auswahl oder das Gästedatenformular gelangen; in diesen Fällen werden beim Seitenaufruf sowohl der Kontext als auch das jeweils passende Event übermittelt.

Welche Daten werden mitgeliefert?

Zusätzlich zum Event-Namen kann ein Datenkontext (TrackingContext) übermittelt werden. Dieses Objekt enthält immer alle Informationen, die auf der jeweiligen Widget-Seite bereits bekannt sind.

Struktur des Datenkontextes


interface TrackingContext {
  restaurant: TrackedRestaurant
  request?: {
    date: IsoDate
    time?: IsoTime
    pax?: number
    experience?: { id: ExperienceId; name: string }
  }
  alternativeRestaurant?: TrackedRestaurant
}

interface TrackedRestaurant {
  name: string
  hash: RestaurantHash
}

Beispiele für Events und Datenkontext

first_page_reached


{
  "restaurant": {
    "name": "Chez Restaurant",
    "hash": "68d72f1b12de6520cff29c0f2a3ecf18"
  }
}


offers_requested

oder

more_alternatives_offered


{
  "restaurant": {
    "name": "Chez Restaurant",
    "hash": "68d72f1b12de6520cff29c0f2a3ecf18"
  },
  "request": {
    "date": "2025-07-17",
    "time": "13:00",
    "pax": 2
  }
}

alternative_restaurant_disclaimer_shown

oder

restaurant_switched


{
  "restaurant": {
    "name": "Chez Restaurant",
    "hash": "68d72f1b12de6520cff29c0f2a3ecf18"
  },
  "request": {
    "date": "2025-07-17",
    "time": "11:00",
    "pax": 2
  },
  "alternativeRestaurant": {
    "name": "Chez Restaurant (chaines 2)",
    "hash": "b49dad61d80214557284eed90d9231e1"
  }
}

guest_data_form_reached

oder

reservation_done


{
  "restaurant": {
    "name": "Chez Restaurant (chaines 2)",
    "hash": "b49dad61d80214557284eed90d9231e1"
  },
  "request": {
    "date": "2025-07-17",
    "time": "11:00",
    "pax": 2,
    "experience": {
      "id": 18,
      "name": "Restaurant"
    }
  }
}

Wie empfange ich die Events?

Damit die Events empfangen werden können, muss das Widget entweder als Pop-Up oder Inline-iFrame eingebunden sein. Der individuelle Code steht im Foratable-Konto zur Verfügung.

Fügen Sie vor </body> folgendes Script ein:

<script async defer src="https://static.foratable.com/iframeContainers.js"></script>

Dieses Script sorgt dafür, dass alle Widgets korrekt initialisiert werden.

Einbindung als Pop-Up


<button data-lunchgate-modal-url="{{widget-url}}">
  Tisch reservieren
</button>

Einbindung als Inline-Widget


<div data-lunchgate-inline-url="{{widget-url}}"></div>

Events in den Google Tag Manager (dataLayer) schreiben

Wenn Sie Google Tag Manager nutzen, können die Events direkt in den dataLayer geschrieben werden.

Beispiel:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'reservation_done',
  tracking_context: {
    restaurant: {
      name: 'Chez Restaurant',
      hash: '68d72f1b12de6520cff29c0f2a3ecf18'
    },
    request: {
      date: '2025-07-17',
      time: '11:00',
      pax: 2
    }
  }
});

Im GTM können Sie dann ein Benutzerdefiniertes Ereignis einrichten und Tags darauf auslösen.

Events per postMessage empfangen

Alternativ können Sie die Events über postMessage abfangen und an beliebige Systeme weiterleiten.

Das folgende Beispiel schreibt die Events in den dataLayer. Sie können die Daten aber ebenso an eigene APIs senden.

<script>
  /**
  * event.data Format:
  * {
  * type: 'ft-tracking',
  * event: 'reservation_done',
  * context: { ... }
  * }
  */
  (function () {
    var handleMessage = function (event) {
      if (!event.data || event.data.type !== 'ft-tracking') return;

      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: event.data.event,
        tracking_context: event.data.context
      });
    };
    window.addEventListener('message', handleMessage);
  })();
</script>


Feedback- und Wissensdatenbank

(Ansicht…)