Než vložíte formulář do Vašeho webu, doporučujeme si jej nejprve vyzkoušet na demo stránce dostupné z recepčního systému.


V recepčním systému si také vygenerujete kód pro vložení do webu. Pokud nemáte přístupy, vygeneruje Vám kód majitel či manažer licence systému.


Integrace formuláře

Formulář umí na svém vstupu přijímá různé signály, kterými můžete upravit vstupní hodnoty nebo chování formuláře. Veškeré vstupy se zadávají jako HTML data atributy do DIVu formuláře. 

Jednotlivá nastavení (žádné není povinné): 


  • data-arrival-date (str) - předvyplněné datum příjezdu (formát  YYYY-MM-DD) 
  • data-departure-date (str) - předvyplněné datum odjezdu (formát dat YYYY-MM-DD) 
  • data-height (int) - nastavení výšky formuláře, doporučujeme nevyplňovat, formulář si umí chytře nastavovat výšku podle aktuálního obsahu a není proto pak potřeba dvakrát scrollovat 
  • data-color (str) - primární barva Vašeho formuláře (hex bez úvodního #)
  • data-lang (str) - výchozí jazyk formuláře (ISO 639-1 formát - 'cs', 'en', 'de' apod.) - pokud není zadaný, použije se Váš výchozí jazyk systému
  • data-persons (int) - výchozí počet hostů - pokud není zadaný, nastaví se na číslo 2
  • data-roomtype (int) -  předvyplní z nabídky typ pokoje podle zadaného id (id pokoje získáte v nastavení - rezervační systém - online rezervace - pokoje k prodeji - zde před názvem typu pokoje je jeho ID) - formulář poté může sloužit např. pro prodej jednotlivých apartmánů, chalup ze širší nabídky apod. 
  • data-package (int) -  předvyplní z nabídky balíček podle zadaného id (pro získání id nás kontaktuje)
  • data-pribg (str) - primární podkladová barva Vašeho formuláře (hex bez úvodního #)
  • data-secbg (str) - sekundární podkladová barva Vašeho formuláře (hex bez úvodního #)
  • data-force-mobile (bool) - nastavení chování přesměrování formuláře na mobilních zařízeních
  • data-source (int) - zdrojový kód (příklad 123456789)
  • data-variation (int) - číslo varianty prodeje pro zobrazení konkrétních nabídek z nastavení online rezervací (příklad 2). Výchozí = 0
  • data-z-index (int) - nastavení hloubky formuláře v rámci struktury  webu (pro překrytí). Jedná se o přímé nastavení css property z-index pro iframe. (Výchozí: 1000001)
  • data-frame-border (int) - ohraničení rámečku aplikovaný do iframe (Výchozí: 0)
  • data-currency (str) - výchozí měna Vašeho formuláře, zadání pomocí ISO kódu (příklad: ISO 4217 pro EUR). Výchozí: CZK
  • data-package-only (bool) - hlavní přepínač pro zobrazení pouze balíčků ve Vašem formuláři (true/false)
  • data-add-gtag (str) - API klíč pro Google Tag Manager například (GTM-0AA000)

Nově přidané:

  • data-facility (bool) - nastavení zobrazení pro facility mod (pro více zařízení)  (true/false)
  • data-vouchers (bool) - přepínač pro viditelnost karty voucherů (false = hide)
  • data-room-filter (bool) - přepínač pro viditelnost filtru typu pokoje v horní liště v 1. kroku 
  • data-recommended-offer (boolean) - možnost nastavení zobrazení doporučené nabídky (false = vypnout)
  • data-tab-acc (boolean) - hlavní přepínač pro zobrazení záložky Ubytování (Výchozí: true)
  • data-tab-pkg (boolean) - hlavní přepínač pro zobrazení záložky Balíčků (Výchozí: true)
  • data-ive-only (boolean) - hlavní přepínač pro zobrazení pouze voucherů. Při hodnotě "true" se bude zobrazovat pouze prodej poukazů (Výchozí: false)
  • data-nudge-topbar (int)- parametrem posunete fixní toolbar našeho formuláře o určitý počet px dolu. Je to prevence kolize, pokud používáte na svém webu vlastní plovoucím toolbar.
  • data-no-package (bool) - skryje nabídku všech balíčků. Aktivace parametru data-no-package=”true”
  • data-margin-bottom (int) - výška spodního offsetu - default 100px (bezpečnostní lišta). Může být nastaveno ale i 0px
  • data-predestination (str) - úvodní zobrazení stránky booking engine na balíčcích / voucherech, pokud jsou aktivní. Ostatní stránky (např. ubytování) jsou také aktuální, ale nejsou na úvodním zobrazení.
  • data-disable-first-step => {boolean} - hodnota true pro přímý výběr data na kalendáři, nutno mít definován parametr data-roomtype="id", který definuje pokoj - jinak se parametr data-disable-first-step ignoruje
  • data-food-label => {bool} - vypne popis s informací o stravě, pro deaktivaci popisu zadáte hodnotu ‘false’ (Výchozí: true)
  • data-tax-label => {bool} -- vypne popis s informací o poplatku z pobytu, pro deaktivaci popisu zvolte hodnotu ‘false’ (Výchozí: true) 

Příklad nastavení DIVu

<div id="mevris-booking-engine" data-color="f15c5d" data-id="66b375b08fc869632935c9e6a9c7f8da" data-arrival-date="2016-08-16" data-departure-date="2016-08-20" data-lang="en" data-persons="3" ></div>


UPOZORNĚNÍ: 

Pokud je to technicky možné, nevkládajete iniciační <div id="mevris-booking-engine"> do webu pomocí iframu (typicky pomocí iframe widgetu elementoru, wix. apod).

Doporučujeme použít custom HTML widget či přímé vložení našeho iniciačního kódu do struktury webu, máte-li k němu přístup. Rezervační formulář se sám dohrává pomocí iframu do iniciačního divu. Iframe komunikuje s tímto divem a automaticky si nastavuje svou výšku případně scroll eventy. Pokud vložíte iniciační kód do iframu s odkazem na příslušnou stránku rezervačního formuláře na vašem webu, přestanou tyto funkce fungovat.

Konverzní a měřící kódy

Pro měření konverzí vložte příslušné Event Snippety daných akcí:

1. zobrazení rezervačního formuláře

2. provedení rezervace
 
Event Snippet vygenerujete v Google Analytics (či jiném systému).
Jestliže potřebujete měřit konkrétní hodnotu konverzí a eventuálně další údaje, nastavte v systému, že po dokončení rezervace dojde k přesměrování  na stránku, kde toto měření konverzí probíhá (mimo proces online rezervace). Better Hotel Vám do URL pro přesměrování navíc může vložit konkrétní hodnoty z rezervace pomocí zástupných proměnných.
 
Příklad
 
Pokud by tedy např. bylo Vaše URL pro přesměrování https://vasedomena.cz/success, kdy na této adrese budete chtít sledovat třeba peněžní hodnotu vytvořené rezervace, stačí upravit url adresu takto: https://vasedomena.cz/success?res_price={price}&res_currency={currency} a vložit ji jako adresu pro přesměrování po dokončení rezervace do našeho systému. Better Hotel poté zástupné znaky v závorkách nahradí konkrétními daty z rezervace. Pakliže by tedy rezervace byla v hodnotě 100 EUR, Better Hotel upraví URL na https://vasedomena.cz/success?res_price=100&res_currency=EUR a přesměruje na ni.

 

TIP: Pro měření konverzních kódů doporučujeme zvážit možnost pokročilého měření prostřednictvím Google Tag Manageru. Více informací níže.


Výčet zástupných proměnných naleznete zde: 

  • {price} = celková cena rezervace
  • {currency} = měna rezervace
  • {persons} = celkový počet osob
  • {arrival} = datum příjezdu ve formátu Y-m-d
  • {departure} = datum odjezdu ve formátu Y-m-d
  • {lang} = dvoupísmenový ISO kod použitého jazyka pro rezervaci


Pokročilé měření konverzí

Měření je realizováno pomocí na Google Tag Manageru. Z naší strany jsou následně odesílány předdefinované pushe do vrstvy dataLayer, které zasíláme automaticky (v případě připojeného GTM kódu) a které můžete odchytávat např. pro Google Analytics.

1. Aktivace - Při inicializaci svého rezervačního formuláře vložte následující data-atribut do HTML struktury vkládaného snippetu.

data-add-gtag="Your-GTM-kod"

2. Měření - Po samotné aktivaci začne systém automaticky odesílat všechny níže uvedené události do vašeho GTM se základním setem dat.

  • Při načtení formuláře (event name v dataLayer: 'start')
  • Při zadání termínu  (event name v dataLayer: 'selectDate')
  • Při vybrání produktů  (event name v dataLayer: 'formSentStep1')
  • Při upsale pobytového balíčku  (event name v dataLayer: 'packageUpsale')
  • Při selhání online platby  (event name v dataLayer: 'paymentFail')
  • Při dokončení rezervace  (event name v dataLayer: 'finishBooking')


Pokud si přejete pro jednotlivé události upravit set dat, máte možnost do formulářů vložit kompletní výčet dat ve formátu JSON. Vždy máte možnost v takovémto objektu využít některé zástupné symboly jako  {price},{arrival},{departure},{person}, {currency}, {language} atd.