ServioReservation v4

Матеріал з SERVIO
Перейти до навігації Перейти до пошуку

Розміщення модуля бронювання на сайті готелю

Підтримується два варіанти розміщення модуля бронювання на сайті готелю: безпосереднє вбудовування в сторінку на сайті та посилання на окрему сторінку для модулю.

Для вбудовування модуля в сайт потрібно розмістити тег <section> в потрібному місці на сторінці, та скрипту для завантаження модуля:

   <section 
       class="booking-page-container" 
       id="bookingPageContainer" 
       data-theme="light">
   </section>
   <script 
       id="servioQRBookingScript" 
       src="https://smartspot.servio.support/ServioQR/js/bookingPage.js" 
       companyKey="772B5716-XXX-XXX-XXXX-AD3060375951"
       isExport="true">
   </script>

Ключ companyKey, надається для після реєстрації модуля в системі, потрібен для однознаної ідентифікації модуля бронювання.

Додаткові параметри які можуть бути використані як ключі для скрипту так і в параметрах URL для модуля бронювання.

Фільтри для використання на сторінці сайту:

  • hotels(number[]): Перелік id готелів, які відображаються, перечисленні через кому. Приклад: 1 чи 1,2;
  • visibleHotels(boolean): Чи відображати селектор готелів. За замовчуванням true. Приклад: true чи false;
  • rooms(number[]): Перелік id типів кімнат, які відображаються, перечисленні через кому. Приклад: 1 чи 1,2;

Приклад для URL: https://domen-hotel.com/booking[/{companyKey}]/?rooms=3,5

Параметри для ініціалізації модуля бронювання:

  • adults(number): Кількість повнолітніх гостей. Не може бути нижче за 1(значення за замовчуванням), однак у випадку виходу значення за ліміт встановлений готелем - буде застосовано значення ліміту;
  • children(number): Кількість неповнолітніх гостей. Не може бути нижче за 0(значення за замовчуванням), однак у випадку виходу значення за ліміт встановлений готелем - буде застосовано значення ліміту;
  • checkInDate(string): Рядкове представлення дати заселення до готелю. Мінімальне значення - теперішня дата. Формат рядка: YYYY-MM-DD, MM/DD/YYYY. Приклад: 2024-12-1, 12/1/2024;
  • checkOutDate(string): Рядкове представлення дати виселення з готелю. Мінімальне значення - наступний від дати заселення. Формат рядка: YYYY-MM-DD, MM/DD/YYYY. Приклад: 2024-12-2, 12/2/2024;

Правила для дат:

checkInDate та checkOutDate не вказані: checkInDate = наступний від теперішньої дати день, checkOutDate = наступний день від checkInDate; checkOutDate не вказаний: checkOutDate = наступний день від checkInDate; checkInDate не вказаний: якщо checkOutDate більша за наступний від теперішньої дати день - checkInDate = минулий від checkOutDate день, інакше виконується перше(1) правило.


Відслідковується 5 кроків:

   1. choose_date - "Пошук" номерів.
   2. choose_hotel_room - вибір номеру
   3. add_user_data - бронювання
   4. order_created - формування рахунку для оплати
   5. purchase - оплата бронювання


Інструкція для додавання тегів для відслідковування

Для того, щоб мати змогу відслідковувати ефективність реклами чи модуля бронювання, потрібно підключили сервіс Google Analytics до сайту. Зайти на https://analytics.google.com/ Створити аккаунт та отримати код відслідковування.

Крок №1: створити акаунт

Крок 1.png

Крок №2: створити ресурс

Крок 2.png

Крок №3: вказати відомості про компанію

Крок 3.png

Крок №4: вкащати бізнес цілі

Крок 4.png

Крок №5: вибрати платформу і почати збір даних

Крок 5.png
Крок 5.2.png


Після завершення всіх кроків потрібно перейти по стрілці в додаткові налаштування.

Додаткові налаш 5.2.png

Відкрити огляд інструкції тега.

Вигляд інструкції тега.png

Скопіювати код відслідковування та передачи його адміністратору сайту чи веб-розробнику для встановлення на всі сторінки сайту. Код вставляється в базовий шаблон сайту, одразу після елемента <HEAD>, щоб він відобразився на кожній його сторінці.

Встановити вручну.png

Маємо 5 подій для відслідковування кожного кроку процесу бронювання

   1. choose_date - завершення першого кроку
   2. choose_hotel_room - завершення другого кроку
   3. add_user_data - завершення третього кроку
   4. order_created - завершення четвертого кроку
   5. purchase - успішна оплата 

Скрипти для відправки подій вже вбудовані в модуль бронювання, тож вони мають автоматично з'явитися в GA4. Для того, щоб відмітити події як конверсії, потрібно перейти: Адміністратор > Огляд даних > Ключові події

Ключові події.png

Після переходу в розділ, потрібно натиснути “Створити ключову подію”

Створити ключову подію.png

У вікні, що відкрилось прописати назви подій і натиснути кнопку “Зберегти”. Потрібно повторити процедуру 4 рази, щоб створити 4 події (назви краще копіювати, ніж переписувати):

   1. choose_date
   2. choose_hotel_room
   3. add_user_data
   4. order_created
   
   5. purchase - створювати не потрібно, подія є стандартною для GA4
Choose date.png
Hotelroom123.png
Add user date.png
Order created.png