NAV
html

Introduction

Welcome to Citybreak online documentation. Here you will find information related to Citybreak online widgets, template pages and tracking.

If you can find the information you are looking, or if the information in incorrect. Please contact us at help@citybreak.com and we’ll get back to you as soon as possible.

Domain & Https

Domain - DNS setup

Add a DNS record with type CNAME and point to hosted01.citybreak.com

When this is done Citybreak will connect the subdomain to your Citybreak online.

External testing tool example: dnschecker

Https - SSL information

We require all CB online implementations to use SSL/HTTPS Certificate. Citybreak online has implemented Let’s Encrypt service that enable us to easy add certificates on your sub domains including auto renewal.

We can install your own certificates as a addon service if requested. Note this extra service we that we will debit if asked for.

Template Page

Citybreak Online enables customization by offering the possibility to include a template page for header and footer. The template page is provided by setting an absolute URL to an HTML page containing a placeholder element where the Citybreak online booking engine will be injected. This gives the user ability to use their own header and footer as well as other static resources such as style sheets and JavaScripts.

A responsive template page is strongly recommended.

Citybreak online template page solution

Brief description

Restrictions

NOTE: Consultning or troubleshooting a tempate will be debited with standard hour rate.

Optional functionality

<script data-cb-template-trackerscript>    
</script>

Integrate your cookie consent solutions that leverage script-tag rewriting by simply including one script tag with the data attribute data-cb-template-trackerscript. The online will use the attributes of the script tag as a template when producing script tags containing trackers.

Language select feature

Language select feature (if multiple languages are configured for the specific guide and a span with id attribute cb_replace_languages_select is encountered).

Note: not supported in one domain implementations

Reference currency

Reference currency select feature (if multiple refence currency’s are configured for the specific guide and a span with id attribute cb_replace_referencecurrency_select is encountered).

This can also be implemented by adding a parameter to the CB online URLs.

Parameter

Values sample:

https://[CBONLINE_URL]?refcur=EUR

Note: not supported in one domain implementations

Features

Detailed description

This section will go into the details of how to create your external header footer.

Error reporting

If something goes wrong during the creation of the header/footer include from Citybreak, the error will be reported as a .NET stack trace in a comment at the bottom of the HTML generated. The standard header footer of Citybreak online will be used meanwhile.

Features

Form tags If a form tag is encountered in the header/footer include document that has a child element that defines special functionality for Citybreak online (such as the content div or language span, described below), the form will simply be removed and replaced by an HTML comment that states that the tag was removed. Form tags that do not interfere with Citybreak functionality will be preserved.

.NET Viewstate

If a hidden input field with the name attribute set to ‘__VIEWSTATE’ is encountered, it will be replaced with a comment stating the field was removed. If you are using .NET WebForms a form tag will most likely wrap the entire page. That form element will be removed (since it wraps all elements of the page, and we want to make sure that we don’t pass too much unnecessary data back and forth from the client to the server).

Citybreak Online content div

<div id="cb_init_bookingengine">
     <h1>Booking engine goes here.</h1>
</div>

The Citybreak online will download the file, parse it, modify it as necessary and split the content in two parts: one header and one footer. You should define a div tag with the id attribute set to ‘cb_init_bookingengine’ where you would like the Citybreak online content to be injected.

Everything within this div element will be ignored and replaced by the Citybreak online content. In this case will the h1 tag be ignored and the specific requested Citybreak online page will be inserted there instead. If this tag is omitted the header/footer has no meaning in the context of Citybreak online and will be dealt with according to section Error reporting.

Change language

<span id="cb_replace_languages_select"></span> 

If the online guide implements more than one language, a change language control can be included into the header/footer document. Just include a span tag where you wish to insert the language change controls.

The id attribute must be the specific ‘cb_replace_languages_select’. Everything in the span will be ignored and replaced with a form element which has some hidden fields as well as select box with available languages and an input type submit control. This will enable the user to change language and still end up at the same page as currently is viewed.

Title tag

The contents of the title tag will be replaced with a title appropriate for the Citybreak online page that is displayed. This title is generated from Citybreak online and can not be changed from the include file.

Relative href/src URL rewriting

All elements that have attributes named href or src will be tried to be rewritten in the context of the URL where the page was downloaded from. That is, Citybreak online will try to rewrite relative paths to absolute paths.

If the include file was found at https://somesite.com/templ/cb.htm and a tag in that document is defined as /css/base.css the tag will be rewritten to the definition https://somesite.com/css/base.css It applies to all elements with the attribute href or src, meaning it applies to link tags, script tags, img tags etc, etc.

Meta keyword inject

If a specific page in Citybreak online defines specific keywords to be used, it will create a new meta tag with them. If a meta keywords tag already exists in the header/footer document, Citybreak online will append the specific keywords to it.

Meta description inject

If no meta description tag is defined on the page, Citybreak online will create one and append it to the document. If one exists in the include document, Citybreak online will append its own description to the tag.

Meta refresh

If meta refresh is defined on the include page, it will be removed. In rare cases Citybreak Citybreak online will define a refresh tag.

Meta content charset

Citybreak online will remove all elements that define meta http-equiv and replace it with the following:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Robots

If meta tags to hint robots are encountered they are preserved, except for pages that Citybreak online defines as local. Those pages will be tagged as noindex, nofollow. If requested we can set the Citybreak online entirely as noindex

Head re-ordering

Citybreak online will reorder the tags in the head. The elements will be rearranged according to this order:

  1. Title element.
  2. Meta tags.
  3. Link definitions from header.
  4. Citybreak online link definitions.
  5. Explicit style definition from header.
  6. Script definitions from header.
  7. Script definitions from Citybreak online.
  8. Content Script definitions.

Injected CSS classes

The Citybreak online will inject class names on specific tags in the include file where applicable for styling purposes.

Conventions used

CSS class names To make it harder for CSS class names to interfere, the Citybreak online team preambles all its internal CSS classes with either Citybreak or cb_.

CSS web fonts

When using custom fonts in the header/footer template, access must be granted for your Citybreak online sub-domain. This applies to both 3rd party services such as Typekit, as well as hosted fonts declared via @font-face CSS rules.

BodyCssClasses

Citybreak online inserts some CSS classes into the class attribute of the Body element based on what section of Citybreak online is active. This enables you to do special styling based on the currently active section, and these values are also accessible from javascript. It also inserts the currently active language. The body tag always has a class of cb_citybreak_body when Citybreak online is active.

Language The currenly active language is inserted prepended by cb_lang_ , e.g cb_lang_sv or cb_lang_en

Section The currently active section is indicate with a cb_ prefix followed by the name of the section. The following values are used:

Section Class
Accommodation cb_accommodation
Basket cb_checkout
Basket & Payment pages cb_basket
Payment page cb_basket cb_progress
Events cb_event
Todo cb_activity
Ferry cb_ferry
Add-ons / Complementary information cb_complementary
Packages cb_package

jQuery

Citybreak online uses the jQuery JavaScript library. The specific jQuery handle is called ‘‘‘citybreakjq’’’ and should never be interfered with.

Extra url parameters

If you want to compare your CB online url with and with out the template page loaded you can user this URL parameter:
NoHeaderFooter=true

//[ONLINE-HOST]/[CULTURE]/[CB ONLINE URL...]?NoHeaderFooter=true

If you want to load all System translation strings on a url you can user this parameter:
showTranslationKeys=true

//[ONLINE-HOST]/[CULTURE]/[CB ONLINE URL...]?showTranslationKeys=true

Cookies

What are cookies

Cookies are small text files stored on your device to identify your browser across different visits and web pages. Cookies can be used both on behalf of Citybreak online as the e-com solution, CMS/website provider or on behalf of others (third party cookies).

Mandatory Cookies

Cookies necessary for the Citybreak online to function and cannot be switched off in our systems.

Description of Citybreak Online cookies

Mandatory cookies

Optional cookies

See information under template page or click here

Widgets

Citybreak online comes with a set of standard widgets these widgets are fully customizable with its own CSS that can be sent in as a parameter, thus making it possible to change the style in different locations.

The widgets are JavaScript widgets that are easy to integrate with a few lines of code.

Make sure you only run ONE widget script at the time. If you need to have more then one widget on the same page/view you can load and unload the scripts to handle this.

FYI- don´t load a widget scripts on your tempalte page. This will affect the booking controlles and create possible conflicts.

Implementation

To implement the widgets you need to add two things to your webpage:

  1. A script tag that points to our server. Should be loaded asynchronously by using the below script added just before </head>. Replace WIDGET_URL with a URL constructed according to instructions below.
<script type="text/javascript">
        (function() {
              var widget = document.createElement('script'); widget.type = 'text/javascript'; widget.async = true;
               widget.src = 'https://[ONLINE-HOST]/[CULTURE]...';
              var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(widget, s);
        })();
</script>
  1. A div tag somewhere in the document body with an id parameter for each widget. This is where the widget will be inserted into the document. There is a separate id for each widget, e.g:

``

``

<div id="citybreak_accommodation_searchform_widget"></div>

Combine widget

The combine widget is located at: /combinewidget/combine

The combine widget requires three parameters:

c=

Controller - A list of names of controllers for the desired widgets, e.g. "c=accommodationwidget&c=basketwidget&c=ferrywidget"

a=

Action - A list of names of actions for the widget controllers specified in the “c” parameter, e.g. "a=searchform&a=basket&a=searchform" This would pass “searchform” as an action to “accommodationwidget”, “basket” as an action to “basketwidget” and “searchform” as an action to “ferrywidget”.

p=

Parameters - A list of parameters to each widget action specified by the “c” and “a” parameters. To pass multiple parameters to a widget, use a semicolon-separated list of keys and values, e.g. "p=defaultCategoryId=1345;defaultRoomCfg=2&p=&p=alignDirection=2" This would send defaultCategoryId=1345 and defaultRoomCfg=2 to /accommodationwidget/searchform, an empty list of parameters to /basketwidget/basket and “alignDirection=2” to /ferrywidget/searchform in the previous examples.

The parameters have to be passed in the correct order, i.e. the value of the first “a” parameter will be passed to the first “c” parameter and so on. The parameters must exactly match, i.e. if you have three controllers (“c” parameters) you have to pass three actions (“a” parameters) and three parameter values (“p” parameters).

Combine widgets sample

<script type="text/javascript">
        (function() {
              var widget = document.createElement('script'); widget.type = 'text/javascript'; widget.async = true;
               widget.src = 'https://[ONLINE-HOST]/[CULTURE]/combinewidget/combine?c=accommodationwidget&c=basketwidget&c=ferrywidget&a=searchform&a=minibasket&a=searchform&p=defaultCategoryId=1345;defaultRoomCfg=2&p=&p=alignDirection=2';
              var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(widget, s);
        })();
</script>

Combine widget dive place holder sample

<div id="citybreak_accommodation_searchform_widget"></div>
<div id="citybreak_basket_minibasket_widget"></div>
<div id="citybreak_ferry_searchform_widget"></div>

Accommodation search widget

Script resource: /accommodationwidget/searchform

Div tag Id: citybreak_accommodation_searchform_widget

Valid parameters

string css

URL to where the CSS can found, if not submitted the default CSS will be used.

int? defaultCategoryId

To set a default category on the widget, the Id category can be found in the dropdownlist of the widget, the category tree is administered in CBIS

string defaultRoomCfg

This is a string that can be set the default number of room/adults/children, the string is build up by using our format.

PARAMETERS FOR NUMBER OF ROOMS/CABINS AND GUESTS

You define the number of adults and children (including the child’s age) that will stay in each room as parameters in the direct search, so called ”Room configuration”. It can for example be a search with two rooms where the first room shall have two adults and the other room shall have one adult and a child with age 5.

“&pr” is the base parameter for the room configuration that shall be searched.

“a“ is the separator between adults and children.

“r“ is the separator if the search is made on more rooms than one.

“c“ is the separator if the search shall be made on more than one child.

Example:

DateTime? defaultArrivalDate

A valid date to set the default arrival date in the widget, the format of the date must be the same as the format of the requested widget

DateTime? defaultDepartureDate

A valid date to set the default departure date in the widget, the format of the date must be the same as the format of the requested widget

int? alignDirection

Use this to position objects in the widget either to the left or to the right.

0=objects will be aligned to the left (default)

2=objects will be aligned to the right.

int? geoNodeId

Use this to set a default geo node in the widget, this parameter will render the name of the geonode in textbox “Where do you want to go”.

int? cbispids

Use this to set a default product in the widget, this parameter will render the name of the product in textbox “Where do you want to go”.

bool? lockCategory

Use this parameter to lock down the category dropdown, when this is set then the dropdown with the categories will be hidden, and the auto complete of the “where do you want to go” will only display objects that are of/has this category.

String promotionCode

Use this parameter if you want to set a promotion code in the promotion code field.

Rental car widget

Script resource: /carrentalwidget/searchform

Div tag Id: citybreak_carrental_searchform_widget

Valid parameters

string css

URL to where the CSS can found, if not submitted the default CSS will be used.

int? alignDirection

Use this to position objects in the widget either to the left or to the right.

0=objects will be aligned to the left (default)

2=objects will be aligned to the right.

Ferry search widget

Script resource: /ferrywidget/searchform

Div tag Id: citybreak_ferry_searchform_widget

Valid parameters

string css

URL to where the CSS can found, if not submitted the default CSS will be used.

int? alignDirection

Use this to position objects in the widget either to the left or to the right.

0=objects will be aligned to the left (default)

2=objects will be aligned to the right.

Flight search widget

Script resource /flightwidget/searchform

Div tag Id: citybreak_flight_searchform_widget

Valid parameters

string css

URL to where the CSS can found, if not submitted the default CSS will be used.

int? alignDirection

Use this to position objects in the widget either to the left or to the right.

0=objects will be aligned to the left (default)

2=objects will be aligned to the right.

string defaultArrivalDate

Use this to configure a default arrival date.

string defaultDepartureDate

Use this to configure a default departure date.

bool? preselectFlexibleDates

Use this to preselect flexible date search.

True = flexible date search is preselected

int? preselectedEndLocationId

Use this to preselect a end location id (aggregator location id).

bool? lockEndLocation

Use this to locked/disabled changing the end location.

True = changing end location is locked/disabled

int? sgid

Use this to preselect start location using a CBIS geonode id.

tring defaultArrivalDate

Use this to configure a default arrival date, example 2016-01-20

Basket widget

The basket widget can be used within or outside of the Citybreak online template page.

When the basket widget is to be used within the template the script tag must be omitted.

Script resource: /basketwidget/widget

Div tag id: citybreak_basket_widget_summary

optional trigger id: citybreak_basket_widget_display

<script type="text/javascript">
        (function () {
	        var widget = document.createElement('script');
	        widget.type = 'text/javascript';
	        widget.async = true;
	        widget.src = '//[ONLINE-HOST]/[CULTURE]/basketwidget/widget';
	        var s = document.getElementsByTagName('script')[0];
	        s.parentNode.insertBefore(widget, s);
        })();
</script>

<span id="citybreak_basket_widget_display"></span>
<div id="citybreak_basket_widget_summary"></div>

Accommodation property / product widget

Script resource AccommodationPropertyWidget/searchform

Div tag Id: citybreak_accommodation_property_widget

 <script type="text/javascript">
  (function() {
	try{
	var widget = document.createElement('script');
	widget.type = 'text/javascript';
	widget.async = true;
	widget.src = 'https://[ONLINE-HOST]/[CULTURE]' + '?productid=123456';
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(widget, s);
	} catch {return;} })();							
</script>

<div id="citybreak_accommodation_property_widget"></div>

Accommodation property widget 3 collun design sample Its avaliable in 1,2 or 3 collum Style

Valid parameters

int ProductId

The CBIS id of the property/product to display the search form for. (you can only use one product per widget)

Activity transport product widget

Script resource activitytransportwidget/searchform

Div tag Id: citybreak_activity_transport_searchform_widget

<script type="text/javascript">
	(function() { 		
	var widget = document.createElement('script'); widget.type = 'text/javascript'; widget.async = true;
        widget.src = 'https://[ONLINE-HOST]/[CULTURE]' + '?cbisProductId=123456';		
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(widget, s);			
	})(); 
</script>

<div id="citybreak_activity_transport_searchform_widget"></div>

Valid parameters

int cbisProductId

The id of the product to display the search form for.

DateTime? preferedDate

A valid date to set the default initially selected date in the widget, the format of the date must be the same as the format of the requested widget.

If the prefered date is not available it will fallback to default behaviour.

int? preferredDeparture

Id of the location that will be initially selected as departure location. If not available it will fallback to default behavior.

int? preferredArrival

Id of the location that will be initially selected as arrival location. If not available it will fallback to default behavior.

bool? enablePromocode

Whether field for entering promocode will be available/visible in the widget. If not available, defaults to false.

bool? proceedToBasket

Whether to proceed to basket after . If not available, defaults to true.

Booking event listner

You may also customize the booking process (same Activity product widget below) as the with the proceedToBasket option and 'cb-activitytransport-booked'.

Activity product widget

This widget does not take a product id as parameter, instead you initialize it with javascript. This enables you to show multiple booking widgets on the same page.

Script resource activitywidget/booking

Div tag Id: citybreak_activity_booking_widget

Valid parameters

string css

URL to where the CSS can found, if not submitted the default CSS will be used.

Initialization To initialize a widget, create a container for the product and run initContainer with the required cbisProductId option.

<script type="text/javascript">
  (function() {
   document.addEventListener('cb-activity-widget-loaded', function() {
       window.citybreakActivityBooking.initContainer(document.getElementById('activity_booking_widget-12345'), {
            cbisProductId: 12345
        });
       window.citybreakActivityBooking.initContainer(citybreakjq('#activity_booking_widget-67891'), {
            cbisProductId: 67891
        });
    }, false);
  })();
</script>
<div id="citybreak_activity_booking_widget"></div>
<div id="activity_booking_widget-12345"></div>
<div id="activity_booking_widget-67891"></div>

Valid options to initContainer are:

cbisProductId: [required, int] a CBIS product id, proceedToBasket: [bool] whether to proceed to basket after booking, defaults to true, defaultDate: [date] a default selected date (Use JS new date format), startDate: [date] minimum selectable date, endDate: [date] maximum selectable date

{
  cbisProductId: [required, int] a CBIS product id,
  proceedToBasket: [bool] whether to proceed to basket after booking, defaults to true,
  defaultDate: [date] a default selected date (Use JS new date format),
  startDate: [date] minimum selectable date,
  endDate: [date] maximum selectable date
}

Booking event

You may also customize the booking process with the proceedToBasket option and 'cb-activity-booked' event.

<script type="text/javascript">
  (function() {
   document.addEventListener('cb-activity-booked', function(data) {
        console.log("Activity booked?: " + data.detail.success);
    }, false);
   document.addEventListener('cb-activity-widget-loaded', function() {
       window.citybreakActivityBooking.initContainer(document.getElementById('activity_booking_widget-12345'), {
            cbisProductId: 12345,
            proceedToBasket: false
        });
    }, false);
  })();
</script>
<div id="citybreak_activity_booking_widget"></div>
   <div id="activity_booking_widget-12345"></div>

The cb-activity-booked event receives:

cbisProductId: a CBIS product id of the booked product, basketProductIds: a list of resulting basket product ids, complementaryUrl: url to complementary page (will redirect to basket if no complementary options are available), success: [bool] whether the product was added successfully to basket

detail: {
    cbisProductId: a CBIS product id of the booked product,
    basketProductIds: a list of resulting basket product ids,
    complementaryUrl: url to complementary page (will redirect to basket if no complementary options are available),
    success: [bool] whether the product was added successfully to basket
}

Dynamic package widgets

Script and div resource differ per package type here is some samples

Accommodation Todo package widget

Script resource differ per package type accommodationtodopackagewidget/searchform

Div tag Id: citybreak_accommodation_todo_package_searchform_widget

Valid parameters

int cbisProductId

The id of the product/package to display the search form for.

Todo Todo package widget

Script resource differ per package type todotodopackagewidget/searchform

Div tag Id: citybreak_todo_todo_package_searchform_widget

Accommodation Accommodation package widget

Script resource differ per package type accommodationaccommodationpackagewidget/searchform

Div tag Id: citybreak_accommodation_accommodation_package_searchform_widget

Valid parameters

int cbisProductId

The id of the product/package to display the search form for.

Valid parameters

int cbisProductId

The id of the product/package to display the search form for.

Accommodation Ferry package widget

Script resource differ per package type accommodationferrypackagewidget/searchform

Div tag Id: citybreak_accommodation_ferry_package_searchform_widget

Valid parameters

int cbisProductId

The id of the product/package to display the search form for.

<script type="text/javascript">
    (function () {
        var widget = document.createElement('script');
        widget.type = 'text/javascript';
        widget.async = true;
        widget.src = '//[ONLINE-HOST]/[CULTURE]/accommodationferrypackagewidget/searchform?cbisProductId=[CBIS_ID]';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(widget, s);
    })();
</script>
        <div id="citybreak_accommodation_ferry_package_searchform_widget"></div>

Tracking

Citybreak online support the basic google tracking and has a few custom build options that can be used.

Booking tracking id

The booking tracking feature is a simple way for a client to track whether or not certain bookings were referred to by a tracking key or not.

A tracking key is a text string which could be any value, it could be provided through a direct link or within a widget.

Once a tracking key is set it will remain alive for 30 days unless the cookie is manually deleted, everytime a request is done with the same tracking key the period of 30 days will refresh and start over.

If an already existing tracking key is set it will never be overridden by another key, meaning that the first key must expire before a new one can be set.

Referral statistics can be obtained by creating one of following reports in https://reports.citybreak.com

Within these reports there’s a column which represents which tracking key was used on a booking level, if there was one present.

Paramerter: ?tid=[your value]

Direct link sample https://[ONLINE-HOST]/[culture]/[Citybreak guide]?tid=mytrackingkey

Widget link sample https://[ONLINE-HOST]/[culture]/[widgettype]/searchform?tid=mytrackingkey

Custom conversion tracking

To make your script work for your organization you need to configure it. To do so you need to change the variables in your script with the variable names below. This custum scripts are added to the booking confirmaiton page.

Parameter Description
{bookingcode} Booking number, e.g. ABCD12.
{bookingvalue} Total sum of customers booking.
{customerfirstname} Customers first name
{customersurname} Customers surname
{randomnumber} Generates a random number
{date} Time stamp
{isodate} Time stamp (yyyy-MM-dd)
{currency} Currency
{zipcode} Zipcode
{bookingJSONObject} Booking information serialized as a JSON object, assign it to a javascript variable. If serialization fails {bookingJSONObject} will be replaced by undefined, so guard for it. Empty arrays are not serialized. All numbers are formatted as strings to the customer language culture.

Example of {bookingJSONObject} usage:

var booking = {bookingJSONObject}; Will generate: var booking = { “BookingCode”: “STRW85”, “City”: “asd”, “Country”: “SE”, “State”: “asd”, “TotalAmount”: “600.0”, “TotalTax”: “64.29”, “Products”: [{ “Id”: “248466”, “Name”: “Hotell_name/room_name”, “Category”: “Accommodation/Hotelroom”, “Price”: “600.0”, “Quantity”: “1”, “DocumentUrls”: [“https://doc.citybreak.com/url-to-ticket”] }] };


<script type="text/javascript" src="//citybreak.com/?value={bookingvalue}&cur={currency}&order={bookingcode}&rand={randomnumber}"></script>

Google tracking

Citybreak online has build in standard support for google tracking.

NOTE: adding Google tracker id via your template page is not allowed. We what to avoid dubble tracking

We just need to add the google tracking id for you when implementing a new Citybreak online. Need help to add this contact us!

FYI:

Enhanced e-commerce

Citybreak has some support for enhance ecommerce and event tracking.

Citybreak online are able to keep track of user behaviour in Citybreak online web pages and send them to Universal Analytics account, by using Google Tag Manager container(s). Citybreak online supports single and multiple GTMs on page. We keep track of the following GTM events:

  1. Page View
  2. Checkout Step
  3. Checkout Step Option
  4. Purchase

Table1 describes pages where mentioned events are fired:

Page View Checkout Step Checkout Step Option Purchase
All pages (on load) Group Basket; (on load) Payment Details* (on successfull form submit) Confirmation (on load)
  Payment Details; (on load)    
  Confirmation; (on load)    

Payment details page may have 2 dimensions that are of interest: Payment Type (full payment, down payment …) and Payment Option (VISA, Master, Paypal …). We are firing GTM events for each of the present dimensions.

Setting up the UA account

If you already have UA account set up, you only need to set up a view so skip to step 5.

  1. Sign in to your Google Marketing Platform and select product Analytics.
  2. Under the Admin console create account, by giving it a name and saving it.
  3. Create a property, by naming it. I suggest to enable user metrics in reporting.
  4. Make a note of the Tracking Id (UA-***-)** of your property. You will need it later.
  5. Create a view (or use the default one called All Web Site Data), by:
    • specifing the domain URL
    • Enable Ecommerce
    • Enable Enhanced Ecommerce Reporting
    • Add labels for Checkout process, just in order for you to keep track of steps.
      • /basket
      • /customerinformation
      • /confirmation

Sample

Setting up Google tag manager

If you already have account set up, you can continue from step 2. If you also have a container set up, you can continue from step 4.

  1. Open Tag Manager and in Admin console create new account
  2. Set up a container name and select Web
  3. Switch to Workspace tab
  4. Add Variables (name these to your liking or use the suggested ones - you will use them later on so make note):

checkoutstepvalue:

checkoutoptionvalue:

checkout:

checkoutoption:

cbonlinecheckout:

cbonlinepageview:

Sample Sample

Reading the event data

Look at the Real-Time reports. Be aware that every dimension you select under Real-Time, will behave as a filter. Behaviour -> Events -> Overview

Sample

Sample

Need to add a tracker id or edit a exsiting one. Contact our support in we will help you

Purchase output sample

Purchase event output sample

<script>
citybreak0dataLayer = [{
'onlineGuide': '[citybreak_online_id]',
'organizationId': '[citybreak_organization_id]',
'culture': 'en-GB'
}];

if (shouldSendCheckoutTrackingGTMCookie === 'true') {
 citybreak0dataLayer.push({
 'ecommerce': {
  'checkout': {
   'actionField': {
    'step': 1
    },
   'currencyCode': 'SEK',
   'products': [{
    'name': "Hotel_name/room_name",
    'id': '******',                    
    'price': '1234,00',
    'category': "Accommodation/Room",
    'quantity': 2
    }]
   }
  }
 },
 {
 'event': 'checkout',
 'eventCallback': function() {
   console.log('Checkout event has fired');
  }
 });
}
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                               new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                                j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                               '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                                })(window,document,'script','citybreak0dataLayer','GTM-[tracker_id]');
 </script>

Booking confimation urls

http(s)://[CB online url]/[Lang/Culture]/confirmation...

Language url
sv /Bekraftelse
da /Bekraftelse
de /Bestaetigung
es /confirmacion
fi /vahvistus
fr /confirmation
it /conferma
nl /bevestiging
no /bekreftelse
pt /confirmacao
en /confirmation
Not in list /confirmation

Note: After /confirmation we add unique parameters to define the booking

Online API

Here some help full Citybreak online API to be user via a CMS site.

Linking API

Determine the link to a dynamic page irregardless of its language, there is an api endpoint available that either redirects or provides redirect information based on a query.

Linking to products:

https://[ONLINE-HOST]/[CULTURE]/link/product/[CBIS-PRODUCT-ID]

Link to a supplier package

https://[ONLINE-HOST]/[CULTURE]/link/packagelight/[SUPPLIER-PACKAGE-ID]

Bookable status API

Online bookable status API can be usefull to find out if a product is bookable or not via a simple call. This can then be user to build a citybreak online widget in the CMS or similar to have a more dynamic implementation.

https://[ONLINE-HOST]/[CULTURE]/api/products/bookablestatus?cbisProductId=[CBIS-PRODUCT-ID]