Прямое Бронирование (v2) - интеграция на ваш сайт и скрипты отслеживания

После того, как вы настроили Прямое Бронирование, добавили контент, настроили брендинг и дизайн, остается последняя часть - интеграция Прямого Бронирования на ваш сайт.

Clock PMS+ предлагает вам различные варианты интеграции, такие как внешняя или внутренняя интеграция, а также использование других элементов, таких как форма бронирования на главной странице, кнопка напоминания и скрипты отслеживания

Пожалуйста, прочитайте ниже, чтобы получить более подробную информацию обо всех этих возможностях, имеющихся в вашем распоряжении.

Важно: Хотя все варианты интеграции достаточно просты и удобны, мы рекомендуем вам проконсультироваться с веб-разработчиком и предоставить ему приведенную ниже информацию, если у вас нет опыта и знаний в области веб-разработки.

Всю информацию, необходимую для обоих подходов к интеграции - внешнего или внутреннего - можно найти в меню Web-> Прямое бронирование-настройки -> раздел Интеграция с веб-сайтом.

Внешняя интеграция

Этот вариант интеграции является самым простым.

Если вы выберете этот вариант интеграции, вам просто нужно добавить ссылку на свой сайт. Как только гости нажмут на ссылку, Прямое Бронирование откроется в новом окне.

Примечание: Прямое Бронирование откроется в новом окне (вкладка браузера), и гости будут видеть служебный URL ClockPMS+ вашего модуля бронирования - https://sky-ru1.clock-software...

Чтобы получить ссылку, нажмите на Прямой URL WRS (1) и скопируйте ссылку, которая будет вам представлена. После этого вы можете использовать ссылку по своему усмотрению - предоставить ее своему веб-разработчику для добавления на ваш сайт, например, в качестве кнопки "Забронировать сейчас"; использовать ее в электронных письмах для направления гостей на ваш модуль бронирования; использовать ее в кампаниях в социальных сетях и т. д.

Встроенная интеграция

Этот вариант интеграции гарантирует, что гости не смогут отличить модуль бронирования от вашего сайта, и позволяет использовать больше инструментов для интеграции. Однако он может потребовать более глубоких знаний в области веб-разработки.

Важно: Ваш сайт должен работать по протоколу HTTPS, чтобы использовать встроенную интеграцию.

Примечание: Прямое Бронирование откроется на вашем сайте и будет его частью. Гости будут видеть ваш URL - например, https://myclockhotel.com/book-now.

Примечание: Пожалуйста, ознакомьтесь с ЭТИМ сайтом, чтобы увидеть примеры опций встроенной интеграции и инструментов интеграции.

Настройки

Чтобы включить встроенную интеграцию, сначала необходимо ввести ваш домен или домены, на которых вы будете интегрировать Прямое бронирование в Гостиничный домен (интеграция) (4).

Важно: Добавьте все домены, которые вы поддерживаете, по очереди - те, которые имеют и/или не имеют 'www', а также любые поддомены. 
Прямое бронирование не будет работать и выдаст сообщение об ошибке, если вы интегрируете его на сайт, домен которого не добавлен здесь.

После добавления доменов нажмите на Скрипт интеграции (2).

Выберите режим по умолчанию и закругленные углы:

  • Режим по умолчанию (5) - здесь выберите способ отображения Прямого Бронирования на вашем сайте. У вас есть 3 варианта на выбор:
    • fullscreen - Прямое Бронирование будет отображаться на весь экран и покрывать вашу страницу (сайт).
    • standard - Прямое Бронирование не будет занимать всю страницу, и ваш сайт будет виден на заднем плане. Ширина Прямого Бронирования позволяет видеть содержимое в две колонки.
    • Mobile - Прямое Бронирование отображается на минимальной ширине, а ваш сайт виден на заднем плане. Контент располагается в одну колонку.
  • Закругленные углы (6) - выберите, должны ли углы Прямого Бронирования быть закругленными или нет.
  • Язык сайта (7) - выбор языка по умолчанию для Прямого Бронирования.

Примечание: Независимо от выбранного режима, Прямое Бронирование хорошо адаптируется к размерам экрана, а для мобильных устройств он всегда полноэкранный.

После выбора режима и настроек закругления просто скопируйте скрипт (8) и отправьте его вашему веб-разработчику для интеграции на ваш сайт.

Важно: Скрипт должен быть помещен в тег <head> всех страниц, на которых вы хотите интегрировать Прямое Бронирование.

Инструменты интеграции

Помимо простого добавления Прямого Бронирования на страницу вашего сайта, при использовании встроенной интеграции вы можете воспользоваться несколькими инструментами интеграции.

Примечание: Пожалуйста, ознакомьтесь с ЭТИМ сайтом, чтобы увидеть примеры опций встроенной интеграции и инструментов интеграции.

Кнопка бронирования

Вы можете добавить кнопку "Забронировать/Забронировать сейчас" во многих местах вашего сайта, при нажатии на которую откроется Прямое Бронирование.

Дизайн, размер и надпись самой кнопки зависит от вас и вашего веб-разработчика.

Единственным требованием для открытия модуля бронирования является наличие у кнопки определенного атрибута данных:

  • data-clock-pms-wbe-button

Пример:

<button type = "button" data-clock-pms-wbe-button> Забронировать сейчас </button>

Форма бронирования

Очень распространенным подходом, который используют многие отели, является также добавление формы бронирования непосредственно на главную страницу. Это позволяет гостям вводить даты заезда/отъезда и, возможно, любые коды, пока они находятся на вашей главной странице (или любой другой странице, на которую вы добавляете форму). 

Когда гости вводят свои критерии и осуществляют поиск, модуль бронирования открывается непосредственно на шаге 2, представляя доступные типы комнат и тарифы.

Дизайн формы бронирования, как и кнопки "Забронировать", полностью зависит от вас и вашего веб-разработчика. Однако для того, чтобы форма функционировала должным образом, существуют определенные требования:

1. Форма должна иметь следующий атрибут данных:

  • data-clock-pms-wbe-form

Пример:

<form data-clock-pms-wbe-form>

2. Входные данные формы (Дата прибытия; Дата отъезда; Код бонуса; Код организации; Код блока) должны иметь определенное значение для атрибута name.

  • arrival
  • departure
  • bonusCode
  • companyCode
  • blockCode

Пример:

<input type = "date" name = "arrival" /><input type = "date" name = "departure" /><input type = "text" name = "bonusCode" /><input type = "text" name = "companyCode" /><input type = "text" name = "blockCode" />

3. Кнопка, запускающая поиск, должна иметь тип:

  • submit

Пример:

<button type = "submit"> Забронировать </button>

Кнопка напоминания/завершения бронирования

Третий инструмент интеграции, который вы можете использовать, связан с конверсией.

Этот инструмент представляет собой всплывающую кнопку, которая появится, если гость начал поиск в Прямом Бронировании, но не создал бронирование. Эта всплывающая кнопка будет действовать как напоминание о необходимости завершить бронирование.

Несколько уточнений о напоминании:

  • скрипт интеграции (см. ниже) позаботится о позиционировании, показе и скрытии кнопки.
  • Ваш веб-разработчик может переопределить установленную конфигурацию CSS и оформить напоминание в соответствии с вашими потребностями или изменить его положение.
  • если вы используете на своем сайте архитектуру Single Page, когда гости нажимают на напоминание, Прямое Бронирование откроется на том этапе, на котором гости его оставили.
  • Если вы не используете архитектуру Single Page, Прямое Бронирование откроется на странице календаря (шаг 1), но все типы комнат/тарифы, выбранные до того, как гость покинул Прямое Бронирование, будут доступны в корзине.

Для того чтобы кнопка напоминания работала правильно, необходимо выполнить несколько требований:

1. Поле напоминания должно иметь следующий атрибут данных:

  • data-clock-pms-wbe-reminder

2. Кнопка или элемент в поле, которое будет фактически открывать Прямое Бронирование, должно иметь следующий атрибут данных:

  •  data-clock-pms-wbe-button

Итоговый пример:

<div data-clock-pms-wbe-reminder><button type = "button" data-clock-pms-wbe-button> Завершите ваше бронирование </button></div>

Скрипты отслеживания

Стремясь к высокой конверсии на своем сайте, крайне важно отслеживать активность на нем. Все больше и больше решений для отслеживания/аналитики, таких как Google Analytics, приходят вам на помощь, чтобы вы могли правильно анализировать поведение посетителей вашего сайта. 

Прямое Бронирование создано с учетом этого и позволяет использовать на нем скрипты отслеживания.

Важно: Скрипты отслеживания работают только со встроенной интеграцией.

Для того чтобы Прямое Бронирование соответствовало требованиям PCI DSS, скрипт отслеживания не добавляется в него напрямую, вместо этого вы должны добавить скрипт на страницу вашего сайта, куда интегрировано Прямое Бронирование.  

Мы удобно подготовили базовые скрипты для 3 версий Google Analytics. 

Чтобы найти их, просто нажмите на кнопку "Скрипты отслеживания просмотров страниц" в настройках Прямого Бронирования (3).

Там вы увидите 3 скрипта, и вам просто нужно ввести ваш Google Analytics ID в соответствующее поле - Measurement ID для версии Analytics, которую вы собираетесь использовать. После ввода скрипт будет завершен. 

Оттуда просто скопируйте скрипты и вставьте их в код вашего сайта:

- скрипт 1 должен быть добавлен в тег <head> вашего сайта.

- скрипт 2 должен быть добавлен в тег <body> вашего сайта.

Пользовательские скрипты отслеживания

Конечно, вы можете использовать другие средства и системы для отслеживания. В этом случае вы можете использовать пользовательский скрипт отслеживания. Принцип работы отслеживания заключается в том, что вы не добавляете скрипт внутри движка, вместо этого он добавляется где-то на той же странице, где вы интегрировали движок. Затем, используя сценарий обратного вызова, вы можете получить данные из сессии создания бронирования:

Вам просто нужно добавить свой скрипт отслеживания в скрипт обратного вызова. У вас также есть список с доступными на данный момент параметрами для отслеживания.