@bookingbooster/bbtm

BBTM

The BBTM library is used to track user iterations after landing on a website through an ad created by the BookingBooster system.

Table of Contents

• Installation
• Session Initializazion
• Push Session Events
• Send Conversion
• Cross-Domain Automatic Tagging
• Cross-Domain Manual Tagging
• Domain Session Storage

Installation

Install the library using npm:

npm install @bookingbooster/bbtm

Import the library using ES modules:

import { BBTM } from "https://cdn.bookingbooster.it/bbtm/{version}/vendor.js";

Session Initialization

When a user browses your website through an ad from an advertising system (Google ADS, Bing ADS, etc.), it is immediately necessary to initialize the BBTM session so that all the URL (or stored) parameters that will be used to track the origin of the click are captured and stored.

import { BBTM } from '@bookingbooster/bbtm';

const bbtm = new BBTM();

// Initialize session with navigation URL parameters
bbtm.init()
    .then((session) => {
        if (session) {
            console.log('Session successfully created.');
        }
    });

[!WARNING] If the BBTM has not been initialized (Or when the init method is called without any possible source of tracking params) all the other methods of the class will not result in any action.

Push Session Events

To improve the performance of the BookingBooster system it is important to send to the BBTM the events that are triggered following the actions taken by the user. To do this, use the pushSessionEvent method.

import { BBTMSessionEvents } from '@bookingbooster/bbtm';

...

bbtm.pushSessionEvent(BBTMSessionEvents.BookingEngineOpened);

Available events are enumerated in BBTMSessionEvents:

enum BBTMSessionEvents {
  BookingEngineOpened = 'Booking_Engine_Opened',
  SearchMade = 'Search_Made',
  SearchShowedResults = 'Search_Showed_Results',
  SearchShowedNoResults = 'Search_Showed_No_Results',
  RoomAddedToCart = 'Room_Added_To_Cart',
  ExtraServicesShown = 'Extra_Services_Shown',
  ExtraServiceAddedToCart = 'Extra_Service_Added_To_Cart',
  CheckoutPageShown = 'Checkout_Page_Shown',
}

Send Conversion

When the booking process is completed you need to send the conversion to BookingBooster via the sendConversion method

bbtm.sendConversion({ 
    order: 'XYZ',           // Booking identification code
    value: 89,              // Total booking price
    currencyCode: 'EUR'     // Currency code ISO 4217
}).then(() => {
  console.log('Reservation conversion successfully sent to the BBTM.');
});

Cross-Domain Automatic Tagging

When the session is initialized on a domain (e.g. www.myhotel.site) but must continue on another domain (e.g. myhotel.booking.site) it is possible to integrate the autotagging script into the initial domain.

// To install the latest version
<script type="module" src="https://cdn.bookingbooster.it/bbtm/tag.js"></script>

// To install a specific version
<script type="module" src="https://cdn.bookingbooster.it/bbtm/{version}/tag.js"></script>

[!WARNING] The autotagging script will initialize the session and add tracking parameters to all <a> element hrefs. If your site uses javascript to navigate between pages (e.g. window.open) use Cross-Domain Manual Tagging

Cross-Domain Manual Tagging

When the session is initialized on a domain (e.g. www.myhotel.com) but must continue on another domain (e.g. myhotel.booknow.com) it is possible to manually read the token of the current session, transfer it to the new domain as desired and reactivate the session in the new domain.

// www.myhotel.com

import { BBTM } from '@bookingbooster/bbtm';

const bbtm = new BBTM();

await bbtm.init();

function onBookNowClicked() {
    window.open(`https://myhotel.booknow.com?myCustomParam=${bbtm.getSessionToken()}`);
}

// myhotel.booknow.com

import { BBTM } from '@bookingbooster/bbtm';

const urlParams = new URLSearchParams(window.location.search);

const bbtm = new BBTM();

await bbtm.init({
    sessionToken: urlParams.get('myCustomParam')
});

Domain Session Storage

By default the BBTM stores the session in the browser's localStorage, so that by closing the browser window and reopening the website later, the user's operations can continue to be tracked. If you want to replace saving to localStorage in favor of a custom saving strategy, you can do so by passing a custom instance of BBTMStorage.

import { BBTM, BBTMStorage, BBTMSession } from '@bookingbooster/bbtm';

class MyCustomBBTMStorage implements BBTMStorage {
  async set(session: BBTMSession) {
    const token = session.getToken();
    await saveToMyCustomStore(token.toString());
  }

  async get() {
    const token = await getFromMyCustomStore();
    return BBTMSession.fromTokenString(token);
  }
}

const bbtm = new BBTM();

await bbtm.init({
    storage: new MyCustomBBTMStorage()
});