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_bookingengineThis 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 in relation to the implementation. The widgets are JavaScript widgets that are easy to integrate with a few lines of code.
All widget got a sctipt tag loaded asynchronously Example script:
<script async type="text/javascript" src="//[online-host]/[culture]/...</script>
And a div tag that that you add where the widget will be inserted into the page.
Example div:
<div id="[id needed for widget]"></div>
See example for the widget you need below.
FYI:
- Make sure you only run ONE widget script at the time.
- Don´t load a widget scripts on your tempalte page. This will affect the booking controlles and create possible conflicts.
- Never use CSS overrides on the widget since the CSS are controlled from the impementaion.
- Need to test widgets in CMS test envitoment? Make sure you good domain setup in CMS and test CB online to avoid potential CORS issues. (if you want to use custom CSS this should be loaded via CSS parameter and the url where you host the CSS)
Widget types
Searchform widgets - Used for a search or filtering for prodcuts per of guide.
Searchform widget are user if you want to have a singel searchform widget loaded on the page. (if you need to load 2 widget on 1 page see combine widget (LINK))
Accommodation searchform
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 will target
| Parameter | type | Example value | Description |
|---|---|---|---|
| defaultCategoryId | int | 123456 | Set default category in the widget. CBIS category id is needed. |
| lockCategory | Bool | true | Use this parameter to lock down the category dropdown, when this is set then the dropdown with the 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 prodcut id is needed. |
| defaultArrivalDate | Date | 2023-03-12 | 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 |
| defaultDepartureDate | Date | 2023-03-13 | 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 |
| promotionCode | String | Promo_2023 | Use this parameter if you want to set a promotion code in the promotion code field. |
| css | [url] | Add absolute url to you custom hosted CSS. |
Parameter 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 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.
| Parameter | type | Example value | Description |
|---|---|---|---|
| &pr | String | &pr=1 (One room with one adults is entered) | This is the base parameter for the room configuration that shall be searched. |
| a | String | &pr=1a10 (One room with one adult and one child (10 yrs) is entered) | The separator between adults and children. |
| r | String | &pr=1r1r1 (One room with one adult and two children (10, 12 yrs) is entered) | The separator if the search is made on more rooms than one. |
| c | String | &pr=1a10c12(Two rooms with one adult and two children (10, 12 yrs) in the first room and two adults in the second room is entered) | The separator if the search shall be made on more than one child. |
Activity searchform
Activity searchform example:
<div id="citybreak_activity_searchform_widget"></div>
<script async type="text/javascript" src="//[online-host]/[culture]/activitywidget/searchform"></script>
Use for multi product todos, search/fitler will target
Ferry searchform
Ferry searchform example:
<div id="citybreak_ferry_searchform_widget"></div>
<script async type="text/javascript" src="//[online-host]/[culture]/ferrywidget/searchform"></script>
Use for external ferry search
Flight searchform
Flight searchform example:
<div id="citybreak_flight_searchform_widget"></div>
<script async type="text/javascript" src="//[online-host]/[culture]/flightwidget/searchform"></script>
Use for external flight search
| Parameter | type | Example value | Description |
|---|---|---|---|
| defaultArrivalDate | String | 2023-03-12 | Set default default arrival date. |
| defaultDepartureDate | String | 2023-03-13 | Set default default departure date. |
| preselectFlexibleDates | Bool | True | Use to preselect flexible date search. |
| preselectedEndLocationId | Int | 123456 | Use to preselect a end location id (Travelswitch(agregatror) location id). |
| lockEndLocation | Bool | True | Use to locked/disabled changing the end location. |
| sgid | Int | 123456 | Use to preselect start location using a CBIS geonode id. |
| css | [url] | Add absolute url to you custom hosted CSS. |
Carrental searchform
Carrental searchform example:
<div id="citybreak_carrental_searchform_widget"></div>
<script async type="text/javascript" src="//[online-host]/[culture]/carrentalwidget/searchform"></script>
Use for external carrental search
Public transport searchform
Public Transport searchform example:
<div id="citybreak_publictransportwidget_searchform_widget"></div>
<script async type="text/javascript" src="//[online-host]/[culture]/publictransportwidget/searchform"></script>
Use for external public transport search
Combine widget - Used if you want to load 2 or more widgets on the same page.
Combine Accommodation and ferry searchform example:
<div id="citybreak_accommodation_searchform_widget"></div>
<div id="citybreak_ferry_searchform_widget"></div>
<script async type="text/javascript" src="//[online-host]/[culture]/combinewidget/combine?c=accommodationwidget&c=ferrywidget&a=searchform&a=searchform&p=defaultCategoryId=1345;defaultRoomCfg=2&p=alignDirection=2"></script>
You have 3 parameters what has to be included.
| Type | Parameter | Example value | Description |
|---|---|---|---|
| Controller | c= | c=accommodationwidget&c=ferrywidget | Names of controllers for the desired widgets |
| Action | a= | a=searchform&a=searchform | Names of actions for the widget controllers specified in the “c” parameter |
| Parameter | p= | p=defaultCategoryId=1345;defaultRoomCfg=2&p=alignDirection=2 | 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 |
Product & package widgets - Used to load a product or package booking widget
Activity & merchandise product widget
Activity product example:
<div id="citybreak_activity_booking_widget"></div>
<div id="activity_booking_widget-[ID]"></div>
<script async type="text/javascript" src="//[online-host]/[culture]/activitywidget/booking"></script>
<script type="text/javascript">
document.addEventListener('cb-activity-widget-loaded', function() {
console.log('Activity booking widget loaded');
window.citybreakActivityBooking.initContainer(document.getElementById('activity_booking_widget-[ID]'), {
cbisProductId: [ID],
proceedToBasket: true
});
}, false);
</script>
Activity & merchandise product booking widget - load one per page. (you can load multipe products in one script if needed.)
| Parameter | type | Example value | Description |
|---|---|---|---|
| cbisProductId | Int | 123456 | CBIS product id, We reccomend that you keep this ID on all elements See [ID] in example. |
| proceedToBasket | Bool | true (or false) | Use to proceed to basket(checkout) or stay on widget page? |
| css | [url] | Add absolute url to you custom hosted CSS. | |
| defaultDate | Date | 2023-06-11 | Use JavaScript “new” date format, default selected date |
| startDate | Date | 2023-07-01 | Use JavaScript “new” date format, widget start date selectable date |
| endDate | Date | 2023-07-01 | Use JavaScript “new” date format, maximum selectable date |
| enablePromocode | Bool | true (or false) | Whether field for entering promocode will be visible in the widget. If parameter is not added widget defaults to false. |
*cbisProductId is requierd
Booking event listner for Activity
You may also customize the booking process with the proceedToBasket option and ‘cb-activity-booked’ event. 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
iTicket Activity Transport 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, product to display the widget. |
| proceedToBasket | Bool | true (or false) | Use to proceed to basket(checkout) or stay on widget page? |
| css | [url] | Add absolute url to you custom hosted CSS. | |
| preferredDate | Date | 2023-06-11 | 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 preferred date is not available it will fall back to default behavior. |
| preferredDeparture | Date | 2023-06-11 | Id of the location that will be initially selected as departure location. If not available it will fallback to default behavior. |
| preferredArrival | Date | 2023-07-01 | Id of the location that will be initially selected as arrival location. If not available it will fallback to default behavior. |
| enablePromocode | Bool | true (or false) | Whether field for entering promocode will be visible in the widget. If parameter is not added widget defaults to false. |
| tripType | String | oneway (or roundtrip) | Set selected trip type onload roundtrip OR oneway, only work for iticket product with a trip type as option of course. |
*cbisProductId id requierd
Booking event listner for iTicket Activity Transport
You may also customize the booking process as the with the proceedToBasket option and ‘cb-activitytransport-booked’.
Accommodation product widget
Accommodation prodcut 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.
| Parameter | type | Example value | Description |
|---|---|---|---|
| *productId | Int | 123456 | CBIS product id, product to display the widget. You can only use one product per widget. |
| css | [url] | Add absolute url to you custom hosted CSS. |
Dynamic packages widget
Use for dynamic package you have 1 widget per package type.
Parameters for all package types
| Parameter | type | Example value | Description |
|---|---|---|---|
| cbisProductId | Int | 123456 | CBIS product id for the package |
| css | [url] | Add absolute url to you custom hosted CSS. |
*cbisProductId is requierd
Accommodation Ferry package widget
Accommodation Ferry package example:
<div id="citybreak_accommodation_ferry_package_searchform_widget"></div>
<script async type="text/javascript" src="//[online-host]/[culture]/accommodationferrypackagewidget/searchform?cbisProductid=[ID]"></script>
Use for package type AccommodationFerry
Accommodation Todo package widget
Accommodation Todo package example:
<div id="citybreak_accommodation_todo_package_searchform_widget"></div>
<script async type="text/javascript" src="//[online-host]/[culture]/accommodationtodopackagewidget/searchform?cbisProductid=[ID]"></script>
Use for package type AccommodationTodo
Accommodation Accommodation package widget
Accommodation Accommodation package example:
<div id="citybreak_accommodation_accommodation_package_searchform_widget"></div>
<script async type="text/javascript" src="//[online-host]/[culture]/accommodationaccommodationpackagewidget/searchform?cbisProductid=[ID]"></script>
Use for package type AccommodationAccommodation
Todo Todo package widget
Todo Todo package example:
<div id="citybreak_todo_todo_package_searchform_widget"></div>
<script async type="text/javascript" src="//[online-host]/[culture]/todotodopackagewidget/searchform?cbisProductid=[ID]"></script>
Use for package type TodoTodo
Accommodation Flight package widget
Accommodation Flight package example:
<div id="citybreak_accommodation_flight_package_searchform_widget"></div>
<script async type="text/javascript" src="//[online-host]/[culture]/accommodationflightpackagewidget/searchform?cbisProductid=[ID]"></script>
Use for package type AccommodationFlight
Basket widget - Used if you want to have a shopping cart in the CMS and in your template page.
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>
The basket widget can be used within or outside of the Citybreak online template page. When the basket widget is 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 from Citybreak system.
Note: citybreak_basket_widget_display is a optional trigger
Tracking
Citybreak online tracking alternativs and technical information.
Booking tracking id
(NOTE: This is a legacy feature will be removed later on. This feature only work 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 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
- Product report
- Analysis per country
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
//[online-host]/[culture]/[slug]?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”: “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 googles 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 propertys, 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 onlineid: [add identifier] OR url to citybreak online booking
FYI:
- Google tracking is only avaliable in our production environment.
- Avoid to add Google tracking scripts via your template page. (To avoid risk of double tracking)
- Questions or feature request related to the events we provide? Please contact us.
Do you need help with the google tools or your metric plan? Don’t worry! Our trackerpartner, BBO is ready to assist you. Contact them through this email: kund-visit@bebetteronline.com
view_cart - This event signifies that a user viewed their cart.
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_brand | String | My supplier | Citybreak supplier name |
| 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 is 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 of the items associated with the event, 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 remove 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 of the items associated with the event, 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 confimation 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.
//[online-host]/[culture]/api/products/bookablestatus?cbisProductId=[CBIS-PRODUCT-ID]