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 Make sure there is no proxying if you use Cloudflare! When this is done Citybreak will connect the subdomain to your Citybreak online.
External testing tool example:
nslookup.io - Check result on the authoritative tab.
or
Https - SSL information
We require all CB online implementations to use SSL/HTTPS Certificate. Citybreak online uses Let’s Encrypt service, via Cloudflare that enable us to easy add certificates on your sub domains including auto renewal.
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.
Brief description
Restrictions
-
Valid HTML5 markup Citybreak online will parse the template page as HTML5 markup and it will therefore need to consist of valid HTML5 markup. The validity of the markup is determined by the tool we use for parsing, which is currently HtmlAgilityPack, but the markup can be validated with a tool such as the W3C validator using the HTML 5 doctype setting. The DOCTYPE is replaced or set by Citybreak online to
<!DOCTYPE html>
-
No Citybreak online widgets included in the header/footer template page Loading an Citybreak online widget (via script) in the header/footer template page will cause serious conflicts and JavaScript errors. It is therefore not supported at this moment.
-
No Google Analytics tracking scripts GTM or Gtag are allowed in the template page. This would cause double page views since the tracker property is added via the implementation of the online booking in Citybreak.
-
Must Contain a div element with id attribute set to
cb_init_bookingengine
This will be the placeholder where the Citybreak online booking engine will be injected. Make sure this div element can use full page width. -
All meta tags except ‘viewport’ will be removed (You need to add the meta tag ‘viewport’ to your template to enable a mobile friendly responsive CB online. example:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
) -
**No support for , <iframe> , or
Note: Consultning or troubleshooting a tempate will be debited with standard hour rate.
Optional functionality
Cookie consent
> Usually tracking script tags look like this:
<script type="text/javascript">
code
</script>
> In our example we have a cookie consent solution which has categorized tracking scripts using a CSS class 'optanon-category-C0002'.
> We modify our template accordingly
<script data-cb-template-trackerscript="" type="text/plain" class="optanon-category-C0002">
</script>
> This will cause tracking scripts to be rendered as below and execution to be handed over to the control of your cookie consent solution, using script-tag rewriting:
<script type="text/plain" class="optanon-category-C0002">
code
</script>
Scripts rendered by the Online that perform tracking are categorized into one category, decorate the <script data-cb-template-trackerscript>
tag with the attributes used by your cookie consent solution to categorize scripts that perform tracking.
The online will use the attributes of the script tag as a template when producing script tags containing trackers.
Your cookie consent solution needs to support script-tag rewriting which is one of the most efficient methods of preventing cookies controlled by script tags being set without consent. This method requires the least amount of change to your site.
Most cookie consent solutions work by categorizing scripts by HTML attributes.
When the above code loads, JavaScript inside the tags will not run, and no cookies will be set. Then, when the Cookie Compliance code loads, if cookies for the associated group have consent, it will dynamically change the tag to: script type=text/javascript – the code inside the tags will then be recognized and run as normal.
Note: Its not allowed to add more then one <script data-cb-template-trackerscript>
in the tempalte page
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
- refcur
Values sample:
- EUR
- SEK
- NOK
- USD etc.
//[online-host]/[culture]/[slug]?refcur=EUR
Note: not supported in one domain implementations
Features
- Relative href/src rewriting.
- Title inject from Citybreak.
- Meta keyword inject
- Meta description inject
- Preserves CSS links and script references in original document.
- Injects CSS links and scripts from Citybreak online.
- Possibly remove form tags if interfering with Citybreak online.
- Possibly remove VIEWSTATE hidden input field.
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:
- Title element.
- Meta tags.
- Link definitions from header.
- Citybreak online link definitions.
- Explicit style definition from header.
- Script definitions from header.
- Script definitions from Citybreak online.
- 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]/[slug]?NoHeaderFooter=true
If you want to load all System translation strings on a url you can user this parameter:
showTranslationKeys=true
//[online-host]/[culture]/[slug]?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.
Cookie list
Description of Citybreak Online cookies
Mandatory cookies
None of the mandatory cookies stores personal data.
- online3_{guideIdentifier}_{UICulture}_{Culture}, User session
- online3_ss_{guideIdentifier}_[UICulture}_{Culture}, User session
- bookcred_online3_{guideIdentifier}, MyPage, stores booking credentials used to access a made booking
- chngbook_online3_{guideIdentifier}, MyPage change booking
- pgid_online3_{guideIdentifier}, MyPage, stores personId of the currently logged in person
- Promotion_online3_{guideIdentifier}, Stores promotion code used
- ca-citybreak-online, Specify backend server used by the client
- citybreak_online, Stores client search parameters
- pymtid + “” + “online3” + “” + onlineIdentifier, Stores payment service provider parameters
Optional cookies
- TrackingId_{guideIdentifier}, a Tracking string stored in cookie, is set by passing the querystring “tid”
- CBTRACKGTMBasket, Tracking Google cookie only if implemented
- CBTRACKGABasket, Tracking Google cookie only if implemented
- CBTRACKGTMCustomerInformation, Tracking Google cookie only if implemented
- CBTRACKGACustomerInformation, Tracking Google cookie only if implemented
- CBTRACKGTMPayment, Tracking Google cookie only if implemented
- CBTRACKGTM{bookingCode}, Tracking Google cookie only if implemented
- CBTRACKGA{bookingCode}, Tracking Google cookie only if implemented
- CBTRACKGAPayment, Tracking Google cookie only if implemented
- TRADEDOUBLER-{guideIdentifier}-s, Tracking
- TRADEDOUBLER-{guideIdentifier}-p, Tracking
- gat_citybreak0, TrackingGoogle cookie only if implemented (Set by Google “Advertising plugin for configured via Google analytics”)
- _utmt_citybreak0, Tracking _ Google cookie only if implemented (Set by Google “Used to throttle request rate.”)
More information regarding cookie consent implementation via your template page
See information under template page or click here
Widgets
Citybreak Online comes with a set of standard widgets.
These are JavaScript widgets that are easy to integrate with just a few lines of code.
All widgets use a script tag that is loaded asynchronously.
Example script:
<script async type="text/javascript" src="//[online-host]/[culture]/..."></script>
You also need a div
tag to indicate where the widget will be inserted on the page.
Example div
:
<div id="[id needed for widget]"></div>
See the example for the specific widget you need below.
FYI:
- Do not load widget scripts on your template page—this may affect booking controls and create potential conflicts.
- Never override the widget CSS manually, as the styling is controlled by the implementation.
- Need to test widgets in a CMS test environment? Ensure the domain is properly set up in the CMS and test CB Online to avoid potential CORS issues.
(If you want to use custom CSS, it should be loaded using thecss
parameter and a URL pointing to your hosted stylesheet.)
Widget Types
- Search Forms Widgets
- Product Booking & Package Search Widgets
- Traveller Rating / Guest Reviews Widget
- Basket Widget
Searchform widgets
Searchform widgets are used if you need a multi-product or a transport searchform in your CMS.
Accommodation searchform widget
Accommodation searchform example:
<div id="citybreak_accommodation_searchform_widget"></div>
<script async type="text/javascript" src="//[online-host]/[culture]/accommodationwidget/searchform"></script>
Use for multi-property accommodation search. (NOTE: will be replaced shortly with a newer token based version)
Parameter | Type | Example Value | Description |
---|---|---|---|
defaultCategoryId | int | 123456 | Set the default category in the widget. CBIS category ID is needed. |
lockCategory | Bool | true | Lock the category dropdown. When set, the dropdown with categories will be hidden. |
geoNodeId | int | 123456 | Set default geonode in the widget. CBIS geonode ID is needed. |
cbispids | int | 123456 | Set default products in the widget. CBIS product ID is needed. |
defaultArrivalDate | Date | 2023-03-12 | Set the default arrival date. Format must match the format of the requested widget. |
defaultDepartureDate | Date | 2023-03-13 | Set the default departure date. Format must match the format of the requested widget. |
promotionCode | String | Promo_2023 | Set a promotion code in the promotion code field. |
css | [url] | Add absolute URL to your custom hosted CSS. |
Parameters for number of rooms and guests
You define the number of adults and children (including the child’s age) that will stay in each room using parameters in the direct search—so-called “Room configuration.” For example, a search with two rooms: the first room has two adults, and the second room has one adult and one child aged 5.
Parameter | Type | Example Value | Description |
---|---|---|---|
&pr | String | &pr=1 (One room with one adult is entered) | The base parameter for the room configuration to be searched. |
a | String | &pr=1a10 (One room with one adult and one child (10 yrs)) | Separator between adults and children. |
r | String | &pr=1r1r1 (One room with one adult and two children (10, 12 yrs)) | Separator when more than one room is included in the search. |
c | String | &pr=1a10c12 (Two rooms: one with one adult and children 10,12; second with two adults) | Separator when multiple children are included. |
–
Todo searchform widget
Todo searchform example:
<script async type="text/javascript" src="//[online-host]/[culture]//widget?token=[Unique Token ID]"></script>
<div id="[Unique Token ID]"></div>
Used for filtering products in a Todo product list. Please contact our support team, and we’ll provide the necessary widget.
What is a Token? A token provides the necessary parameters to control the widget. Please see the notes below.
Note:
- A token is linked to a single online store.
- Each token is unique and should only be added once per view.
- A token is associated with a specific widget type.
–
Ferry searchform widget
Ferry searchform example:
<script async type="text/javascript" src="//[online-host]/[culture]//widget?token=[Unique Token ID]"></script>
<div id="[Unique Token ID]"></div>
Used for Ferry search. Please contact our support team, and we’ll provide the necessary widget.
What is a Token? A token provides the necessary parameters to control the widget. Please see the notes below.
Note:
- A token is linked to a single online store.
- Each token is unique and should only be added once per view.
- A token is associated with a specific widget type.
–
Flight searchform widget
Flight searchform example:
<div id="citybreak_flight_searchform_widget"></div>
<script async type="text/javascript" src="//[online-host]/[culture]/flightwidget/searchform"></script>
Used for external flight searches.
(NOTE: will be replaced by a new version)
Parameter | Type | Example Value | Description |
---|---|---|---|
defaultArrivalDate | String | 2023-03-12 | Set the default arrival date. |
defaultDepartureDate | String | 2023-03-13 | Set the default departure date. |
preselectFlexibleDates | Bool | True | Use to preselect a flexible date search. |
preselectedEndLocationId | Int | 123456 | Use to preselect an end location ID (Travelswitch aggregator location ID). |
lockEndLocation | Bool | True | Locks or disables changing the end location. |
sgid | Int | 123456 | Use to preselect the start location using a CBIS geonode ID. |
css | [url] | Add the absolute URL to your custom hosted CSS. |
–
Product booking & Package widgets
Todo group booking widget
Todo group booking widget example:
<script async type="text/javascript" src="//[online-host]/[culture]//widget?token=[Unique Token ID]"></script>
<div id="[Unique Token ID]"></div>
Used for Todo product groups when you want to load the list of child products in a list widget.
For the Todo group booking widget, contact our support team and we’ll provide the widget(s) needed.
What is a Token? A token provides the needed parameters to control the widget.
Note:
- A token is linked to a single online store.
- Each token is unique and should only be added once per view.
- A token is associated with a specific widget type.
Parameter | Type | Example Value | Description |
---|---|---|---|
cbisProductId | Int | 123456 | CBIS product ID; must be the parent product of the Todo product group. |
allowOverride | Bool | False | Toggle external URL parameter override; useful for automating widgets in CMS. |
–
Todo booking widget
Used for activity & merchandise products Note: Not for iTicket Bookingflow products Or iTicket Activity Transport products.
Very soon documentation will be updated with the new version widget version.
–
iTicket Activity Transport booking widget
iTicket Activity Transport example:
<div id="citybreak_activity_transport_searchform_widget"></div>
<script async type="text/javascript" src="//[online-host]/[culture]/activitytransportwidget/searchform?cbisProductId=[ID]"></script>
Use for iTicket transport products.
Parameter | Type | Example Value | Description |
---|---|---|---|
cbisProductId | Int | 123456 | CBIS product ID; specifies the product to display. |
proceedToBasket | Bool | true / false | Proceed to basket (checkout) or stay on the widget page. |
css | [url] | Add the absolute URL to your custom-hosted CSS. | |
preferredDate | Date | 2023-06-11 | Set the initially selected date. If unavailable, fallback behavior applies. |
preferredDeparture | Date | 2023-06-11 | ID of the initially selected departure location. |
preferredArrival | Date | 2023-07-01 | ID of the initially selected arrival location. |
enablePromocode | Bool | true / false | Show promo code field. Defaults to false if parameter is not added. |
tripType | String | oneway / roundtrip | Set selected trip type on load. Only works if product supports this option. |
–
iTicket Bookingflow booking widget
iTicket BookingFlow widgets example:
<script async type="text/javascript" src="//[online-host]/[culture]//widget?token=[Unique Token ID]"></script>
<div id="[Unique Token ID]"></div>
For iTicket BookingFlow widgets, contact our support team and we’ll provide the widget(s) needed.
What is a Token? A token provides the needed parameters to control the widget.
Note:
- A token is linked to a single online store.
- Each token is unique and should only be added once per view.
- A token is associated with a specific widget type.
Parameter | Type | Example Value | Description |
---|---|---|---|
cbisProductId | Int | 123456 | CBIS product ID to display in the widget. |
startDateISO | Date | 2024-12-24 | Default initially selected date in the widget. |
startTimeISO | String | 12:30 | Filter tour start time on the selected date: Only display tours after added time |
promotionCode | String | MyPromoCode | Promo code to load with the widget as active. |
proceedToBasket | Bool | true / false | Proceed to basket (checkout) or stay on the widget page. |
referenceCurrency | String | USD | Use ISO format to set reference currency. |
display | String | Button | Display type: Standard, Collapsed, or Button. |
allowOverride | Bool | False | Toggle external URL parameter override. Useful for automating widgets in CMS. |
–
Accommodation product widget
Accommodation product example:
<div id="citybreak_accommodation_property_widget"></div>
<script async type="text/javascript" src="//[online-host]/[culture]/accommodationPropertyWidget/searchform?productid=[ID]"></script>
Use for one accommodation property.
(NOTE: will be replaced shortly)
Parameter | Type | Example Value | Description |
---|---|---|---|
*productId | Int | 123456 | CBIS product ID to display the widget. Only one product per widget. |
css | [url] | Add absolute URL to your custom-hosted CSS. |
–
Dynamic packages widget
Dynamic package example:
<script async type="text/javascript" src="//[online-host]/[culture]//widget?token=[Unique Token ID]"></script>
<div id="[Unique Token ID]"></div>
For Dynamic packages widgets, contact our support team to obtain the necessary widget(s).
What is a Token? A token provides the parameters needed to control the widget.
Note:
- A token is linked to a single online store.
- Each token is unique and should only be added once per view.
- A token is associated with a specific widget type.
Parameter | Type | Example Value | Description |
---|---|---|---|
cbisProductId | Int | 123456 | CBIS product ID for the package to display. |
allowOverride | Bool | False | Toggle external URL parameter override for CMS widget automation. |
–
Traveller rating / GuestReviews widget
Traveller rating / GuestReviews widget
Traveller rating / GuestReviews example:
<script async type="text/javascript" src="//[online-host]/[culture]//widget?token=[Unique Token ID]"></script>
<div id="[Unique Token ID]"></div>
For Traveller rating / GuestReviews widgets, contact our support team to obtain the necessary widget(s).
What is a Token? A token provides the parameters needed to control the widget.
Note:
- A token is linked to a single online store.
- Each token is unique and should only be added once per view.
- A token is associated with a specific widget type.
Parameter | Type | Example Value | Description |
---|---|---|---|
cbisProductId | Int | 123456 | CBIS product ID to display in the widget. |
display | String | Button | Display type: ‘Button’ (default) or ‘Standard’. |
allowOverride | Bool | False | Toggle external URL parameter override for CMS widget automation. |
–
Basket widget
Basket example if anchor:
<a id="citybreak_basket_widget_display" href="javascript:void(0);"></a>
<div id="citybreak_basket_widget_summary"></div>
<script async type="text/javascript" src="//[online-host]/[culture]/basketwidget/widget"></script>
Basket example if span:
<span id="citybreak_basket_widget_display" tabindex="0"></span>
<div id="citybreak_basket_widget_summary"></div>
<script async type="text/javascript" src="//[online-host]/[culture]/basketwidget/widget"></script>
Used to include a shopping cart in your CMS or template page
The basket widget can be used both within and outside the Citybreak Online template page.
When used within the template, the <script>
tag must be omitted.
FYI:
The collapsed widget div <div id="citybreak_basket_widget_summary"></div>
is not styled by the Citybreak system.
Note: citybreak_basket_widget_display
is an optional trigger.
Tracking
Citybreak online tracking alternatives and technical information.
Booking tracking ID
(NOTE: This is a legacy feature and will be removed later on. This feature only works with redirect PSP integrations.)
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.
A tracking key is a text string that can be any value, and may be provided through a direct link or within a widget.
Once a tracking key is set, it remains valid for 30 days unless the cookie is manually deleted. Every time a request is made with the same tracking key, the 30-day period will refresh and restart.
If a tracking key is already set, it will not be overridden by another key. The first key must expire before a new one can be applied.
Referral statistics can be obtained by creating one of the following reports in https://reports.citybreak.com:
- Product report
- Analysis per country
Within these reports, there is a column that represents the tracking key used at the booking level, if one was present.
Parameter:
?tid=[your value]
Direct link sample
//[online-host]/[culture]/[slug]?tid=mytrackingkey
Custom conversion tracking
To make your script work for your organization, you need to configure it. Change the variables in your script using the variable names below. These custom scripts are added to the booking confirmation page.
Parameter | Description |
---|---|
{bookingcode} | Booking number, e.g. ABCD12. |
{bookingvalue} | Total sum of the customer’s booking. |
{customerfirstname} | Customer’s first name |
{customersurname} | Customer’s surname |
{randomnumber} | Generates a random number |
{date} | Timestamp |
{isodate} | Timestamp (yyyy-MM-dd) |
{currency} | Currency |
{zipcode} | Zip code |
{bookingJSONObject} | Booking information serialized as a JSON object. Assign it to a JavaScript variable. If serialization fails, {bookingJSONObject} will be replaced with undefined , so ensure you check for it. Empty arrays are not serialized. All numbers are formatted as strings according to the customer’s language culture. |
Example of {bookingJSONObject} usage:
var booking = {bookingJSONObject}; Will generate: var booking = { “BookingCode”: “ABCD12”, “City”: “asd”, “Country”: “SE”, “State”: “asd”, “TotalAmount”: “600.0”, “TotalTax”: “64.29”, “Products”: [{ “Id”: “123456”, “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 (GA4)
Citybreak online Google tracking options:
- Google Analytics 4 (gtag.js)
- Google Tag Manager (gtm.js)
Example of Google Analytics 4 gtag.js
<!-- Begin - Google tag (gtag.js) and Google Analytics v4 DataLayer-->
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-[ID]');
</script>
Example of Google Tag Manager (*with GA4* DataLayer) gtm.js
<!-- Begin - Google Tag Manager v4 (gtm.js) DataLayer and Events-->
<script type="text/javascript">
(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','dataLayer','GTM-[ID]');
</script>
Events:
A tracker property is implemented in Citybreak Admin per online.
To add or remove your tracker properties, contact our support with the [online ID] or [URL to the ecom] and the tracker property you want to add or remove.
Example: “Please add this tracker property ‘G-[ID]’ or ‘GTM-[ID]’ to online ID: [add identifier] OR URL to Citybreak online booking.”
FYI:
- Google tracking is only available in our production environment.
- Avoid adding Google tracking scripts via your template page. (To avoid the risk of double tracking.)
- Questions or feature requests related to the events we provide? Please contact us.
Need help with Google tools or your metric plan?
Don’t worry! Our tracker partner, BBO, is ready to assist you. Contact them at: kund-visit@bebetteronline.com
view_cart - This event signifies that a user viewed their cart.
Event fires on .../basket
Example output
'event': "view_cart",
'ecommerce': {
'currency': "SEK",
'value': 1234.00,
'items': [{
'item_name': "My product",
'item_id': "123456",
'item_brand': "My supplier",
'price': 1234.00,
'item_category': "Accommodation",
'quantity': 1,
'affiliation': "1234567890"
}]
}
Name | Type | Example value | Description |
---|---|---|---|
currency | String | SEK | Currency of the items associated with the event, in 3-letter ISO 4217 format. |
value | Number | 1234.00 | Value of products in the cart |
items | Array | See Items | The items for the event. |
Items parameters
Name | Type | Example value | Description |
---|---|---|---|
item_id | String | 123456 | Citybreak product ID |
item_name | String | My product | Citybreak product system name |
item_brand | String | My supplier | Citybreak supplier name |
price | Number | 1234.00 | Product price |
item_category | String | Accommodation | System category |
item_category2 | String | ||
item_category3 | String | ||
item_category4 | String | ||
item_category5 | String | ||
quantity | Number | 1 | Quantity of product |
affiliation | String | 1234567890 | Citybreak online identifier ID |
item_package_id | Number | 1234 | Citybreak dynamic package system ID OR iTicket bookingFlow system ID |
item_package_name | String | My Package | Citybreak dynamic package system name OR iTicket bookingFlow system name |
begin_checkout - This event signifies that a user has begun a checkout.
Event fires on .../paymentdetails
Example output
'event': "begin_checkout",
'ecommerce': {
'currency': "SEK",
'value': 1234.00,
'items': [{
'item_name': "My product",
'item_id': "123456",
'item_brand': "My supplier",
'price': 1234.00,
'item_category': "Accommodation",
'quantity': 1,
'affiliation': "1234567890"
}]
}
Name | Type | Example value | Description |
---|---|---|---|
currency | String | SEK | Currency of the items associated with the event, in 3-letter ISO 4217 format. |
value | Number | 1234.00 | Value of products in the cart |
items | Array | See Items | The items for the event. |
Items parameters
Name | Type | Example value | Description |
---|---|---|---|
item_id | String | 123456 | Citybreak product ID |
item_name | String | My product | Citybreak product system name |
item_brand | String | My supplier | Citybreak supplier name |
price | Number | 1234.00 | Product price |
item_category | String | Accommodation | System category |
item_category2 | String | ||
item_category3 | String | ||
item_category4 | String | ||
item_category5 | String | ||
quantity | Number | 1 | Quantity of product |
affiliation | String | 1234567890 | Citybreak online identifier ID |
item_package_id | Number | 1234 | Citybreak dynamic package system ID OR iTicket bookingFlow system ID |
item_package_name | String | My Package | Citybreak dynamic package system name OR iTicket bookingFlow system name |
purchase - This event signifies when one or more items are purchased by a user.
Event fires 1 time on .../confirmation
Example output
'event': "purchase",
'ecommerce': {
'transaction_id': "ABCD12",
'value': 1234.00,
'tax': 123.12,
'currency': "SEK",
'items': [{
'item_id': "123456",
'item_name': "My product",
'item_brand': "My supplier",
'item_category': "Accommodation",
'price': 1234.00,
'quantity': 1,
'affiliation': "1234567890"
}]
}
Name | Type | Example value | Description |
---|---|---|---|
transaction_id | String | ABCD12 | Booking number |
value | Number | 1234.00 | Booking value |
tax | Number | 123.12 | Booking tax value |
currency | String | SEK | Currency in 3-letter ISO 4217 format |
items | Array | See Items | The items for the event. |
Items parameters
Name | Type | Example value | Description |
---|---|---|---|
item_id | String | 123456 | Citybreak product ID |
item_name | String | My product | Citybreak product system name |
item_brand | String | My supplier | Citybreak supplier name |
price | Number | 1234.00 | Product price |
item_category | String | Accommodation | System category |
item_category2 | String | ||
item_category3 | String | ||
item_category4 | String | ||
item_category5 | String | ||
quantity | Number | 1 | Quantity of product |
affiliation | String | 1234567890 | Citybreak online identifier ID |
item_package_id | Number | 1234 | Citybreak dynamic package system ID OR iTicket bookingFlow system ID |
item_package_name | String | My Package | Citybreak dynamic package system name OR iTicket bookingFlow system name |
remove_from_cart - This event signifies when items are removed from /basket
by a user.
Event fires 1 time per user action on /basket
Example output
'event': "remove_from_cart",
'ecommerce': {
'currency': "SEK",
'value': 1234.00,
'items': [{
'item_id': "123456",
'item_name': "My product",
'item_brand': "My supplier",
'item_category': "Accommodation",
'price': 1234.00,
'quantity': 1,
'affiliation': "1234567890"
}]
}
Name | Type | Example value | Description |
---|---|---|---|
currency | String | SEK | Currency in 3-letter ISO 4217 format |
value | Number | 1234.00 | Booking value |
items | Array | See Items | The items for the event. |
Items parameters
Name | Type | Example value | Description |
---|---|---|---|
item_id | String | 123456 | Citybreak product ID |
item_name | String | My product | Citybreak product system name |
item_brand | String | My supplier | Citybreak supplier name |
price | Number | 1234.00 | Product price |
item_category | String | Accommodation | System category |
item_category2 | String | ||
item_category3 | String | ||
item_category4 | String | ||
item_category5 | String | ||
quantity | Number | 1 | Quantity of product |
affiliation | String | 1234567890 | Citybreak online identifier ID |
item_package_id | Number | 1234 | Citybreak dynamic package system ID OR iTicket bookingFlow system ID |
item_package_name | String | My Package | Citybreak dynamic package system name OR iTicket bookingFlow system name |
Booking confirmation URLs
//[online-host]/[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
Some help full Citybreak online APIs you can use via a CMS site etc…
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:
//[online-host]/[culture]/link/product/[CBIS-PRODUCT-ID]
Link to a supplier package
//[online-host]/[culture]/link/packagelight/[SUPPLIER-PACKAGE-ID]
Bookable status API
Online bookable status API can be useful to find out if a product is bookable or not via a simple call. This can then be used to build a citybreak online widget in the CMS or similar to have a more dynamic implementation.
(NOTE: This is a legacy feature and will be removed later on.)
//[online-host]/[culture]/api/products/bookablestatus?cbisProductId=[CBIS-PRODUCT-ID]