Dokumentation

Betrieb: Testhotel HGV (hotelhgv.it) (9002)

Die Daten der Unterkunft werden in der Dokumentation dynamisch angepasst, wenn Sie die entsprechende Betriebs-ID, wie an folgendem Beispiel, hinter die URL setzen: https://widget.bookingsuedtirol.com/docs/de/9002

Installation

Der nachfolgende Code muss auf der Webseite innerhalb des <body /> Tags eingebunden werden. Nach erfolgreichem Laden wird das Widget im Bs-BookingWidget Platzhalter initialisiert.

<script>
window.BsBookingWidget = {
    // Einstellungen
    accommodationId: 9002,
    lang: 'de',
    // arrival: '2016-02-20',
    // departure: '2016-02-23',
    // occupations: [[18,18],[18,4]],
    // promotion: ['INTERNET', 'portal.de', 'Name der Kampagne'],

    // Callback Funktionen
    onBookingSuccess: function(data) {
        // Wird nach erfolgreicher Buchung aufgerufen
    },
    onBookingError: function(data) {
        // Wird nach fehlgeschlagener Buchung aufgerufen
    },
    onRequestSuccess: function(data) {
        // Wird nach erfolgter Anfrage aufgerufen
    }
};
</script>
<div id="Bs-BookingWidget"></div>
<script src="https://widget.bookingsuedtirol.com/widget.js" async></script>

Hinweis: Das Widget wird asynchron geladen und beeinflusst die Seitenladezeit nicht.

Konfiguration

Das Widget kann entweder über Parameterübergabe oder bei Initialisierung konfiguriert werden. Werden beide Konfigurationsmöglichkeiten gleichzeitig benutzt, haben Parameter die höhere Wertigkeit.

Bei Initialisierung

Wird ein globales BsBookingWidget Objekt definiert, werden dessen Einstellungen direkt im Widget eingelesen. Zudem besteht die Möglichkeit mit Callback Funktionen auf Events (z.B. die erfolgreiche Buchung) zuzugreifen und dessen Inhalt selber weiterzuverarbeiten.

Parameterübergabe

Dieselben Einstellungen können auch über die URL eingegeben werden. Bereits vorhandene Einstellungen in window.BsBookingWidget werden dabei überschrieben.

https://www.URL.com/?lang=de&arrival=2016-02-20&departure=2016-02-23&occupations=[[18,18],[18,4]]

API

accommodationId

ID der Unterkunft

Pflichtfeld. Der betreffende Betrieb muss bereits für das Widget freigeschaltet worden sein.

lang

Sprache

Standardwert: de

arrival

Definiert das Anreisedatum im ISO 8601 Format (JJJJ-MM-TT)

2016-02-20

Standardwert: null

departure

Definiert das Abreisedatum im ISO 8601 Format (JJJJ-MM-TT)

2016-02-23

Standardwert: null

Hinweis: Wird nur das Abreisedatum gesetzt, wird es automatisch zum Anreisedatum umkonvertiert.

currentMonth

Definiert das angezeigte Kalender-Monat im ISO 8601 Format (JJJJ-MM-TT)

2016-04-01

Standardwert: das aktuelle Monat

occupations

Bestimmt die Anzahl der Zimmer und ihre Belegung in Form vom Alter der einzelnen Personen.

// Beispiele

// Zimmer 1: 2 Erwachsene
[[18,18]]

// Zimmer 1: 2 Erwachsene, 2 Kinder (14 - und 5 Jahre)
[[18,18,14,5]]

// Zimmer 1: 2 Erwachsene
// Zimmer 2: 1 Erwachsener, 1 Kind (4 Jahre)
[[18,18],[18,4]]

// Zimmer 1: 2 Erwachsene
// Zimmer 2: 1 Erwachsener
// Zimmer 3: 2 Erwachsene, 1 Kind (3 Jahre)
[[18,18],[18],[18,18,3]]

// Produziert Fehler, da keine Erwachsenen übergeben wurden
[[12]]

// Produziert Fehler, da mehr als drei Zimmer übergeben wurden
[[18],[18,14],[18],[18]]

Standardwert: 2 Erwachsene [[18,18]]

Hinweis: Es können maximal drei Zimmer hinzugefügt werden. Werden ungültige Daten übergeben (z.B. ein vierjähriges Kind, das Mindestalter im Betrieb beträgt aber acht Jahre), so werden diese komplett ignoriert und es wird eine entsprechende Fehlermeldung angezeigt.

layout

Bestimmt das Layout des erweiterten Widgets.

Standardwert: one-pager

defaultOfferList

Bestimmt, ob Zimmer- oder Angebotsliste standardmäßig angezeigt wird.

Standardwert: rooms

offerId

Bietet die Möglichkeit ein bestimmtes Angebot über dessen ID anzuzeigen. Die ID kann entweder über die MSS Schnittstelle oder folgende Tabelle ausgelesen werden.

ID Angebotsname
263125 Wander-Wellness-Woche
646177 Weiße Wochen
666177 Nicht ohne meinen besten Freund

Sind offerId und roomId definiert, hat roomId Präzedenz.

Standardwert: null

roomId

Bietet die Möglichkeit ein bestimmtes Zimmer über dessen ID anzuzeigen. Die ID kann entweder über die MSS Schnittstelle oder folgende Tabelle ausgelesen werden.

ID Zimmername
25722 Einbettzimmer
25723 Einbettzimmer Deluxe
25724 Doppelzimmer
25725 Dreibettzimmer

Sind offerId und roomId definiert, hat roomId Präzedenz.

Standardwert: null

promotion

Bietet die Möglichkeit Werbemedium (sourceofbusiness), Werbepartner (promotionvendor) und Werbekampagne (promotion) zu individualisieren und an das PMS zu übermitteln.

Wie genau die Felder zu befüllen sind, wurde im AlpineBits Standard genau definiert und kann in der dazugehörigen Dokumentation unter dem Punkt 4.2.5 Implementation​ ​tips​ and​ best​ ​practice nachgelesen werden.

['Werbemedium', 'Werbepartner', 'Werbekampagne']

Standardwert: [null, null, null] ASA Werbemedium/-partner/-kampagne

Die Google Analytics Parameter utm_medium, utm_source, sowie utm_campaign bieten die Möglichkeit, die Felder auch einzeln zu senden.

Die URL https://www.URL.com/?utm_medium=metasearch&utm_source=tripadvisor.com&utm_campaign=tripadvisor_desktop würde zum Beispiel ['metasearch', 'tripadvisor.com', 'tripadvisor_desktop'] an das PMS übertragen.

Hinweis: Beim Verwenden dieser Funktion wird ein 30-tägiges Tracking-Cookie gesetzt. Fügen Sie in diesem Fall das Cookie bs_widget_promotion in Ihre Datenschutzerklärung ein.

source

Ermöglicht es das Widget auf Portalen mit mehreren Betrieben einzubauen. Wenden Sie sich für diese Funktionalität direkt an den Support.

Events

In der globalen window.BsBookingWidget Konfiguration können Funktionen definiert werden, welche nach erfolgtem Event (Buchung erfolgreich, Buchung fehlgeschlagen, Anfrage erfolgreich) automatisch ausgeführt werden. Die Buchung - Anfrageinformationen werden immer als Parameter mitgegeben.

window.BsBookingWidget = {
    // Einstellungen
    // ...

    onBookingSuccess: function(data) {
        // Wird nach erfolgreicher Buchung aufgerufen
    },
    onBookingError: function(data) {
        // Wird nach fehlgeschlagener Buchung aufgerufen
    },
    onRequestSuccess: function(data) {
        // Wird nach erfolgter Anfrage aufgerufen
    }
};

onBookingSuccess(bookingData)

Wird nach erfolgreicher Buchung aufgerufen.

onBookingError(bookingData)

Wird nach fehlgeschlagener Buchung aufgerufen.

onRequestSuccess(requestData)

Wird nach erfolgter Anfrage aufgerufen.

Hinweis: requestData ist von der Struktur her identisch wie bookingData, außer dass Preisinformationen und der extras Knoten fehlen.

Struktur der Buchung - und Anfragedaten

{
    bookingId: 3766923, // Eindeutige Buchung - oder Anfrage ID
    arrival: '2016-02-22', // Anreise (ISO 8601)
    departure: '2016-02-29', // Abreise (ISO 8601)
    nights: 7, // Aufenthaltsdauer in Nächte
    price: 1200, // Gesamtpreis
    offers: [
        {
            id: 35320, // Angebots ID
            title: 'Preise', // Angebotsname        
            price: 600, // Angebotspreis
            service: 3  // Verpflegung
                        // 0: Nicht definiert
                        // 1: Ohne Verpflegung
                        // 2: Mit Frühstück
                        // 3: Halbpension
                        // 4: Vollpension
                        // 5: All-inclusive
            room: {
                id: 22647, // Zimmer ID
                title: 'Doppelzimmer Superior', // Zimmername
                code: 'DZS', Zimmer Code
                roomSeq: 1, // Fortlaufender Zimmer Index
                roomType: 1, // Zimmertyp
                             // 1: Zimmer
                             // 2: Apartment
                adults: [18,18], // Erwachsene
                children: [] // Kinder
            }
        },
        {...}
    ],
    extras: [
        {
            id: 23442, // ID der Zusatzleistung
            title: 'E-Bike', // Name der Zusatzleistung
            amount: 2, // Anzahl der Zusatzleistungen
            price: 18 // Preis pro Zusatzleistung
        },
        {...}
    ],
    // Gästedaten
    guest: {
        gender: 'm', // Anrede
                     // m => Männlich
                     // f => Weiblich
        firstname: 'David', // Vorname
        lastname: 'Spiess', // Nachname
        email: 'david.spiess@hgv.it', // E-Mail Adresse
        phone: '+39 0123456789', // Telefonnummer
        street: 'Schlachthofstraße 59', // Straße
        city: 'Bozen', // Stadt
        zipcode: '39100', // Postleitzahl
        country: 'ITA', // Land (ISO 3166-1)
        note: 'Bemerkung', // Bemerkung

        // Unternehmensdaten
        company: {
            name: 'HGV', // Betriebsname
            taxnumber: '80011590215', // Mehrwertssteuernummer
            street: 'Schlachthofstraße 59', // Straße
            city: 'Bozen', // Stadt
            zipcode: '39100', // Postleitzahl
            country: 'ITA' // Land (ISO 3166-1)
        }
    }
}

Beispiel mit Google Adwords

Das Beispiel zeigt das Tracking einer Buchung mit Google Adwords.

${CONVERSION_ID} und ${CONVERSION_LABEL} sind hier als Platzhalter zu sehen.

window.BsBookingWidget = {
    // ...
    onBookingSuccess: function() {
        var img = document.createElement('img');
        img.setAttribute('src', '//www.googleadservices.com/pagead/conversion/${CONVERSION_ID}/?label=${CONVERSION_LABEL}&amp;guid=ON&amp;script=0');
        img.setAttribute('alt', '');
        img.setAttribute('height', 1);
        img.setAttribute('width', 1);
        img.style.borderStyle = 'none';
        document.body.appendChild(img);
    }
};

Google Tag Manager, Google Analytics Ereignisse und Enhanced Ecommerce

Das Widget unterstützt das Tracking von Ereignissen und Transaktionen mit Hilfe des Google Tag Managers.

Hinweis: Google Analytics Tracking ohne Google Tag Manager wird derzeit nicht unterstützt und muss eigenständig implementiert werden!

Google Tag Manager Konfiguration

Fügen Sie unter Tags einen neuen Tag des Typs Universal Analytics hinzu. Stellen Sie den Erfassungstyp auf Ereignis.

Legen Sie unter Variablen folgende Datenschichtvariablen an:

Name Datenschichtvariable
Event Kategorie eventCategory
Event Aktion eventAction
Event Label eventLabel
Event Wert eventValue

Anlegen der Datenschichtvariable "Event Kategorie"

Hinterlegen Sie die Datenschichtvariablen im vorher angelegten Tag in Tracking-Parametern für Ereignisse.

Tracking-Parameter für Ereignisse

Unter Erweiterte Einstellungen, E-Commerce-Funktionen müssen die Punkte Erweiterte E-Commerce-Funktionen aktivieren sowie Datenschicht aktiviert werden.

Erweiterte E-Commerce-Funktionen in GTM aktivieren

Zu guter Letzt muss noch ein Auslöser (Trigger) erstellt werden, welcher den neu erstellten Code ausführt. Hierzu wechseln Sie in den Menüpunkt Trigger und legen ein Benutzerdefiniertes Ereignis mit dem Ereignisnamen BsWidgetEvent an.

Trigger erstellen

Anschließend muss der neu erstellte Trigger im Tag hinterlegt werden. Gehen Sie hierzu auf Auslösen bei und wählen Sie den Typ Mehr aus. In der daraus resultierenden Liste kann nun der Trigger ausgewählt werden.

Trigger erstellen

Die Konfiguration ist hiermit abgeschlossen.

Google Analytics Ereignisse

Während der Benutzer mit dem Widget interagiert, werden im Hintergrund für alle möglichen Interaktionen Ereignisse generiert. Diese werden in die globale dataLayer Variable gespeichert, welche der Google Tag Manager auslesen und weiterverarbeiten kann.

Folgende Ereignisse werden unterstützt:

Kategorie Aktion Label Wert
HGV-Buchungswidget Zimmerbelegung hinzugefügt
HGV-Buchungswidget Zimmerbelegung entfernt
HGV-Buchungswidget Erwachsene ausgewählt Anzahl der ausgewählten Erwachsenen
HGV-Buchungswidget Kinder ausgewählt Anzahl der ausgewählten Kinder
HGV-Buchungswidget Monat im Kalender geändert Jahr und Monat z.B. 2016-06
HGV-Buchungswidget Reisedaten ausgewählt Reisedaten z.B. 2016-06-14 bis 2016-06-18
HGV-Buchungswidget Weiter zu Anfrage
HGV-Buchungswidget Angebotsliste gewechselt rooms => Zimmerliste, offers => Angebotsliste
HGV-Buchungswidget Verfügbarkeit geprüft
HGV-Buchungswidget Angebot ausgewählt Angebotsname Angebots ID
HGV-Buchungswidget Zimmer ausgewählt Zimmername Zimmer ID
HGV-Buchungswidget Verpflegung ausgewählt Verpflegung Verpflegung ID
HGV-Buchungswidget Zimmerdetails geöffnet Zimmername Zimmer ID
HGV-Buchungswidget Angebotsdetails geöffnet Angebotsname Angebots ID
HGV-Buchungswidget Bildergalerie geöffnet
HGV-Buchungswidget Zusatzleistung hinzugefügt Name der Zusatzleistung Anzahl der Zusatzleistungen
HGV-Buchungswidget Schritt "Reisedaten" geöffnet
HGV-Buchungswidget Schritt "Angebotsliste" für 1. Belegung geöffnet
HGV-Buchungswidget Schritt "Angebotsliste" für 2. Belegung geöffnet
HGV-Buchungswidget Schritt "Angebotsliste" für 3. Belegung geöffnet
HGV-Buchungswidget Schritt "Persönliche Daten" geöffnet
HGV-Buchungswidget Schritt "Zusammenfassung" geöffnet
HGV-Buchungswidget Buchung erfolgreich Sprache Gesamtpreis
HGV-Buchungswidget Buchung fehlgeschlagen Sprache Gesamtpreis
HGV-Buchungswidget Anfrage erfolgreich Sprache

Sie können in Ihrem Google Analytics Konto unter Verhalten, Ereignisse eingesehen werden.

Google Analytics Enhanced Ecommerce

Enhanced Ecommerce bietet die Möglichkeit Absprünge zwischen den einzelnen Buchungsschritten zu tracken, sowie Informationen zu erfolgten Buchungen in Google Analytics darzustellen.

Es empfiehlt sich im Google Analytics Konto unter Verwalten, Datenansicht, E-Commerce-Einstellungen, Erweiterte E-Commerce-Einstellungen für die 4 Buchungsschritte aussagekräftigere Namen zu hinterlegen.

Labels für Bezahlvorgang in Google Analytics

Anschließend kann unter Conversions, E-Commerce, Kaufanalyse, Bezahlvorgang die Absprungrate analysiert werden.

Labels für Bezahlvorgang in Google Analytics