Booking Widget

Accommodation: Testhotel Webseitentool HGV (hotelhgv.it) (9002)

Installation

The following code must be embedded on the website within the <body /> tag. After successful loading, the widget is initialized in the Bs-BookingWidget placeholder.

<script>
window.BsBookingWidget = {
    accommodationId: 9002,
    lang: 'de',
    // Callback functions
    onBookingSuccess: function(reservation) {
        // Called after successful booking
    },
    onBookingError: function(reservation) {
        // Called after failed booking
    },
    onRequestSuccess: function(reservation) {
        // Called after successful request
    }
};
</script>
<div id="Bs-BookingWidget"></div>
<script src="https://widget.bookingsuedtirol.com/widget.js" async></script>

Please note: Do not include the script in a bundle or host a copy of it yourself.

Configuration

The widget can be configured through URL parameters or by setting a global object. If both configuration options are used at the same time, URL parameter settings take precedence.

Global object

If a global BsBookingWidget object is defined, its settings are read directly into the widget. Furthermore, it is possible to access events (e.g. the successful booking) with callback functions and process their content manually.

URL parameters

The same settings can also be entered via URL. This will overwrite already existing settings in window.BsBookingWidget.

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

API

accommodationId: number

ID of the accommodation

Mandatory field. The accommodation must already have been activated for the widget.

lang: string?

Language

  • de: German (default)
  • it: Italian
  • en: English
  • fr: French

arrival: string?

Defines the arrival date in ISO 8601 format (yyyy-MM-dd)

2020-02-20

departure: string?

Defines the departure date in ISO 8601 format (yyyy-MM-dd)

2020-02-23

currentMonth: string?

Defines the displayed calendar month in ISO 8601 format (yyyy-MM-dd)

2020-04-01

occupations: number[][]?

Determines the number of rooms and their occupancy in the form of the age of each person.

  • 18: adult
  • 0-17: child
// Examples

// room 1: 2 adults
[[18,18]]

// room 1: 2 adults, 2 children (14 - and 5 years)
[[18,18,14,5]]

// room 1: 2 adults
// room 2: 1 adult, 1 child (4 years)
[[18,18],[18,4]]

// room 1: 2 adults
// room 2: 1 adult
// room 3: 2 adults, 1 child (3 years)
[[18,18],[18],[18,18,3]]

// Produces error because no adults were submitted
[[12]]

// Produces error because more than three rooms were submitted
[[18],[18,14],[18],[18]]

Default value: 2 adults [[18,18]]

Please note: You can add a maximum of three rooms.

layout: string?

Determines the layout of the extended widget

  • one-pager (default)
  • 4-steps
  • compact

defaultOfferList: string?

Determines which offer list is displayed by default.

  • rooms (default)
  • specials

offerId: number?

Enables you to display a specific special via its ID.

ID Special name
263125 Wander-Wellness-Woche
1942598 Nicht ohne meinen besten Freund
1942603 Weiße Wochen

If offerId and roomId are defined, roomId has precedence.

roomId: number?

Enables you to display a specific room via its ID. The ID can be read either via the MSS interface or the following chart.

ID Room name
25722 Einbettzimmer
25723 Doppelzimmer Deluxe
25724 Doppelzimmer
25725 Dreibettzimmer

If offerId and roomId are defined, roomId has precedence.

promotion: [string | null, string | null, string | null]?

Enables you to customize the advertising fields medium (ResID_SourceContext), source (ResID_Source) und campaign (ResID_Value) and submit them to the PMS.

How exactly the fields are to be filled has been precisely defined in the AlpineBits Standard and can be read in the corresponding documentation in section 4.2.5 Implementation tips and best practice.

['Advertising medium', 'Advertising source', 'Advertising campaign']

Default value: [null, null, null] ASA promotion fields

The Google Analytics parameters utm_medium, utm_source, and utm_campaign campaign offer the possibility to submit the fields individually.

For example, the URL https://www.URL.com/?utm_medium=metasearch&utm_source=tripadvisor.com&utm_campaign=tripadvisor_desktop would submit ['metasearch', 'tripadvisor.com', 'tripadvisor_desktop'] to the PMS.

Please note: Using this feature will set a 30-day tracking cookie. In this case, add the cookie bs_widget_promotion to your Privacy Policy.

source: string?

Enables the widget to be installed on portals with multiple accommodations. For this functionality, please contact support directly.

onBookingSuccess: (reservation: object)? => void

Function called after successful booking.

onBookingError: (reservation: object)? => void

Function called after failed booking.

onRequestSuccess: (reservation: object)? => void

Function called after successful request.

Please note: onRequestSuccess uses the same reservation object as onBookingSuccess, with the exception that price information and detailed offer infos can be missing.

Reservation structure

{
    bookingId: number,
    arrival: string, // ISO 8601
    departure: string, // ISO 8601
    nights: number,
    price: number | null,
    offers: [
        {
            id: number,
            title: string | undefined,
            price: number | null,
            service: 0 | 1 | 2 | 3 | 4 | 5,
                        // 0: not defined
                        // 1: without board
                        // 2: breakfast
                        // 3: half board
                        // 4: full board
                        // 5: all-inclusive
            room: {
                id: number,
                title: string | undefined,
                code: string | undefined,
                roomSeq: 1 | 2 | 3,
                roomType: 1 | 2 | undefined,
                             // 1: room
                             // 2: apartment
                adults: number[],
                children: number[]
            }
        },
        {...}
    ],
    extras: [
        {
            id: number,
            title: string,
            amount: number, // number of additional services
            price: number // price per additional service
        },
        {...}
    ],
    // Guest data
    guest: {
        gender: "" | "m" | "f",
        firstname: string,
        lastname: string,
        email: string,
        phone: string,
        street: string,
        city: string,
        zipcode: string,
        country: string, // ISO 3166-1
        note: string,

        // company details
        company: {
            name: string,
            taxnumber: string,
            street: 'string,
            city: string,
            zipcode: string,
            country: string // ISO 3166-1
        }
    }
}

Example with Google Adwords

The example shows the tracking of a booking with Google Adwords.

${CONVERSION_ID} and ${CONVERSION_LABEL} are placeholders.

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);
    }
};

Tracking

The widget supports the tracking of events and transactions using Google Tag Manager.

Please note: Google Analytics tracking without Google Tag Manager is not supported and must be implemented separately!

Google Tag Manager configuration

Under Tags, add a new tag of type Universal Analytics. Set the Track type to Event.

Under Variables create the following Data Layer Variables:

Name Data Layer Variable
Event Kategorie eventCategory
Event Aktion eventAction
Event Label eventLabel
Event Wert eventValue

Creation of the data layer variable &quot;Event category&quot;

Store the data layer variables in the previously created tag in Event Tracking Parameters.

Event Tracking parameters

Under Ecommerce, the settings Enable Enhanced Ecommerce Features and Use Data Layer must be activated.

Enhanced Ecommerce features

Now you must create a trigger which executes the newly created code. To do this, switch to the menu item Triggers and create a Custom Event with the event name BsWidgetEvent.

Create a trigger

Subsequently, the newly created trigger must be referenced in the tag. In the tag settings go to Triggering and select the previously created trigger from the resulting list.

Reference trigger in tag

The configuration is now complete.

Google Analytics events

As the user interacts with the widget, events are generated in the background for all possible interactions. These are stored in the global dataLayer variable, which the Google Tag Manager can read and process.

The following events are supported:

Category Action Label Value
HGV-Buchungswidget Zimmerbelegung hinzugefügt
HGV-Buchungswidget Zimmerbelegung entfernt
HGV-Buchungswidget Erwachsene ausgewählt Nummer of selected adults
HGV-Buchungswidget Kinder ausgewählt Number of selected children
HGV-Buchungswidget Monat im Kalender geändert Year and month i.e. 2020-06
HGV-Buchungswidget Reisedaten ausgewählt Travel dates i.e. 2020-06-14 to 2020-06-18
HGV-Buchungswidget Weiter zu Anfrage
HGV-Buchungswidget Angebotsliste gewechselt rooms, specials
HGV-Buchungswidget Verfügbarkeit geprüft
HGV-Buchungswidget Angebot ausgewählt Offer name Offer ID
HGV-Buchungswidget Zimmer ausgewählt Room name Room ID
HGV-Buchungswidget Verpflegung ausgewählt Board Board ID
HGV-Buchungswidget Zimmerdetails geöffnet Room name Room ID
HGV-Buchungswidget Angebotsdetails geöffnet Offer name Offer ID
HGV-Buchungswidget Bildergalerie geöffnet
HGV-Buchungswidget Zusatzleistung hinzugefügt Name of additional service Numer of additional services
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 Language ID Total price
HGV-Buchungswidget Buchung fehlgeschlagen Language ID Total price
HGV-Buchungswidget Anfrage erfolgreich Language ID

You can view them in your Google Analytics account under Behavior, Events.

Google Analytics Enhanced Ecommerce

Enhanced Ecommerce enables you to track bounces between individual booking steps and to display information on bookings made in Google Analytics.

It is recommended to store descriptive names for the 4 booking steps in the Google Analytics account under Admin, View, Ecommerce Settings, Checkout Labeling.

Labels for the 4 booking steps in Google Analytics

Subsequently, you can analyze the bounce rate under Conversions, Ecommerce, Checkout behavior.

Labels for the 4 booking steps in Google Analytics