Widget – Externe Tracking-Dienste nutzen (Buchhungssystem)

Sie können das Widget an externe Dienste (Google Analytics, Matomo Analytics, etc.) anbinden. Die Auswertung liefert Ihnen präzise Daten, nicht nur ob und wie oft das Widget aufgerufen wurde, sondern auch Informationen darüber, ob eine Reservierung oder Bestellung getätigt worden ist. Dadurch erhalten Sie tiefere Einblicke in die Interaktion Ihrer Gäste mit Ihrem Widget und können gegebenenfalls Maßnahmen ergreifen, damit die Möglichkeit zur Online-Reservierung und Bestellung effektiver genutzt wird.

Welche Daten sind verfügbar?

referral

Alle Events übergeben bereits den referral. Sie können, wenn Sie das Widget irgendwo einbinden, die Ursprungsplattform angeben, um so nachvollziehen zu können, woher die Zugriffe stammen. Beispielsweise können Sie Instagram als Ursprungsplattform angeben, wenn Sie einen Link zum Widget generieren, der in Ihrem Instagram-Profil genutzt wird. Diese Daten sind auch ohne externes Tool über die Statistiken in gastronovi Office auswertbar.

• Widget-Steuerung – Widget-Script mit Ursprungsplattform

loaded

Das loaded-Event wird nur getriggert, wenn das Widget auch im sichtbaren Bereich ist.

Beispiel

{
  loaded: true,
  referral: "website",
  type: "loaded"
}

first-interaction

Das first-interaction-Event wird getriggert, wenn der User auf eine der Kacheln klickt.

Des Weiteren wird das first-interaction-Event (und andere, zukünftige Events) erst getriggert, wenn das loaded-Event getriggert wurde (es gibt eine Queue, die alle Events sammelt, bis loaded durch ist) – das ist z. B. relevant, weil first-interaction auch dann zum Tragen kommt, wenn für das Widget ein Einstiegspunkt festgelegt wurde (z. B. Der Gast ruft eine Seite mit Widget (inkl. Einstiegspunkt) auf, das aber nicht im direkt sichtbaren Bereich liegt).

Beispiel

{
  path: "reservation",
  referral: "website",
  type: "first-interaction"
}

completed

Das completed-Event wird getriggert, wenn der Gast eine Reservierung oder Bestellung abschließt, dabei können die Daten jedoch leicht variieren. Denn paymentMethods enthält ein Array in dem in den meisten Fällen vermutlich immer nur eine einzige Payment-Methode liegen wird. Es kann jedoch sein, dass mit einem Gutschein gezahlt wird und dieser den Gesamtbetrag nicht decken kann. In diesem Fall wird der Restbetrag mit einer weiteren Zahlungsart (oder einem weiteren Gutschein) beglichen werden – daraus ergibt sich dann, dass paymentMethods Gutschein (voucher) und eben jene zweite Zahlungsart, z. B. PayPal, enthält.

Beispiel für eine Reservierung:

{
  path: "reservation",
  persons: 2,
  referral: "website",
  type: "completed"
}

Beispiel für eine Abholung, Lieferung, Vorbestellung, …

{
  amount: "16.05"
  paid: true
  path: "pickup"
  paymentMethods:
  [
    {
      type: 'paypal', 
      amount: 16.05
    }
  ]
  persons: 1
  referral: "website"
  type: "completed"
}

Wie wird das Tracking eingebunden?

1. Script im Header der Website

Zuerst muss das entsprechende Script des gewählten Anbieters in den Header (Kopfbereich) der Website eingebunden werden. Die Anleitungen sind i. d. R. beim Dienstleister verfügbar und unterscheiden sich häufig, daher halten Sie sich bitte an die Vorgaben dort.

2. Einbindung des Codes

Anschließend müssen Sie den folgenden Code auf der Website einbinden, dabei ist es egal, ob dieser im Header (Kopfbereich), Footer (Fußbereich) oder auf der Seite platziert wird. Ist der Code platziert, laufen in der Funktion customTracking alle oben genannten Daten zusammen und Sie können diese nach Belieben an den externen Tracking-Anbieter (z. B. Google Analytics) weitergeben.

<script type="text/javascript">
    // Funktion zur Überprüfung der Origin
    function isValidOrigin(origin) {
        const allowedOrigins = [
            window.location.origin,  // Die gleiche Host-Domain
            "https://services.gastronovi.com"  // Die erlaubte Domain
        ];
        return allowedOrigins.includes(origin);
    }

    // Listener für Messages vom iFrame
    window.addEventListener('message', function (event) {
        if (!isValidOrigin(event.origin)) {
            console.warn('Unerlaubte Origin:', event.origin);
            return; // Ignoriere Nachrichten von unautorisierten Quellen
        }

        if (event.data.eventType === 'gn-widget-event') {
            customTracking(event.data.detail);
        }
    });

    // Listener für Events aus dem gleichen Fenster
    window.addEventListener('gn-widget-event', function (event) {
        customTracking(event.detail);
    });

    function customTracking(data) {
        /*********************************************
         *********************************************
         *************** YOUR CODE HERE **************
         *********************************************
         *********************************************/
        console.log('Received gn-widget-event:', data);
    }
</script>

Beispiel – Google Analytics

Um das Ganze einmal am Beispiel "Google Analytics” durchzuspielen:

Zusätzlich zu dem oben genannten Code wird der Google Analytics-Code mit der Property-ID im Header (Kopfbereich) eingebaut. Und dort wo YOUR CODE HERE steht muss in der Funktion am Beispiel von Google Analytics folgendes ersetzt werden gtag('event', data.type, data).

gtag('event', data.type, data);

Also:

function customTracking(data) {
    /*********************************************
      *********************************************
      *************** YOUR CODE HERE **************
      *********************************************
      *********************************************/
    console.log('Received gn-widget-event:', data);

    gtag('event', data.type, data);
}

Anschließend können in dem verknüpften Google Analytics-Konto die Daten ausgewertet werden, bzw. sind die Events detailliert einsehbar. Neben den Daten, die Google sowieso aufzeichnet (trackt), werden die Daten von gastronovi Office zusätzlich übergeben und ausgewertet.