Как с помощью Google Analytics GA4 отследить клики по кнопке Купить на White Label

Весь процесс настройки Google Analytics для White Label делится на три этапа: 

1. Создание и настройка аккаунта в Google Tag Manager и Analytics.
2. Определение параметров, по которым будут отслеживаться действия на White Label.
3. Проверка статистики в Google Analytics.

Создание и настройка аккаунта в Google Tag Manager и Analytics

1. Перейдите по ссылке https://tagmanager.google.com/ и создайте новый аккаунт.

2. Заполните поля:

• Название аккаунта — укажите любое название, например, имя вашего White Label.
• Страна — выберите Россия или ту страну, откуда будет идти основной трафик.
• Название контейнера — можете указать здесь адрес White Label.
• Целевая платформа — укажите Веб-сайт.

3. Нажмите Создать и примите соглашение об условиях использования. Появится окно с кодом Менеджера тегов.

4. Скопируйте код из первого поля и разместите его в блоках кода в настройках White Label на вкладке Мета-данные и сохраните изменения.

Обратите внимание! Код нужно размещать для всех типов страниц (главная, авиа и отельная выдача, страница отеля). Также важно помнить, что код должен быть размещён во все языковые блоки. Если вы добавили три языка для своего White Label, то код нужно разместить для всех трёх языков и для всех типов страниц у этих языков.

5. Скопируйте код из второго поля Менеджера тегов и разместите его на вкладке Мои блоке в поле Хедер сайта в самом верху и сохраните изменения.

Обратите внимание! Код нужно размещать для всех языков, которые вы добавили в White Label.

6. Перейдите на сайт Google Analytics и создайте новый ресурс (Администратор — Создать — Ресурс).

7. Заполните все поля. На последнем шаге выберите Веб и настройте веб поток, указав адрес вашего сайта и его название.

8. Нажмите Создать и продолжить.

9. После этого вы получите идентификатор потока, кликните на него.

10. Откроется окно Сведения о веб-потоке. Скопируйте значения из поля идентификатор потока данных.

11. Вернитесь в Google Tag Manager и создайте новый тег.

12. В поле Конфигурация тега выберите Google Аналитика -> Тег Google.

15. Вставьте ранее скопированный идентификатор потока данных в поле Идентификатор тега. В поле Триггеры выберите All pages.

16. После этого обязательно опубликуйте все изменения. Для этого нажмите кнопку Отправить на главной странице Google Tag Manager.

Определение параметров, по которым будут отслеживаться действия на White Label

События по просмотру страницы, скролу и т.п. Автоматически начнут собираться в Google Аналитике. Чтобы отслеживать клики по кнопке Купить, нужно выполнить дополнительные действия.

1. Перейдите в Google Tag Manager и добавьте новую встроенную переменную:

2. Нажмите кнопку Настроить и отметьте галками переменные Click Element и Click Classes:

3. Далее перейдите на вкладку Триггеры и нажмите Создать. Тут мы укажем, какие условия должны произойти, чтобы событие клика по кнопке Купить упало в статистику.

4. В открывшемся окне в поле Тип триггера выберите Клик — Все элементы. В параметре Условия активации - Некоторые клики. Далее выберите Click Classes -> содержит ->

5. В последнем окошке нужно указать класс нужного элемента. В нашем случае это как раз клик по кнопке Купить на White Label.
Класс можно найти с помощью консоли, для этого перейдите на ваш White Label, осуществите поиск, чтобы попасть на страницу выдачи авиабилетов.
Откройте консоль разработчика в браузере и кликните иконку в левом верхнем углу:

Наведите курсор на кнопку Купить. Справа отобразится класс элемента. В нашем примере это ticket-action-button-deeplink ticket-action-button-deeplink–. 

5. Вставьте это значение в поле триггера, дайте ему название и сохраните изменения.

6. Перейдите в раздел Теги и создайте новый тег.

7. Кликните поле Конфигурация тега и выберите тип тега Google Аналитика -> Google Аналитика cобытие GA4.

8. В открывшемся окне укажите Идентификатор потока данных нашего Analytics (мы его получили в начале статьи, также его можно посмотреть в Администратор -> Настройки ресурса в Аналитике).

В поле Название события укажите название, по которому вам будет удобно искать события в Google Аналитике, например, book.

9. В поле Триггер выберите ранее созданный триггер.

10. Сохраните настройки,

11. После этого обязательно опубликуйте все изменения. Для этого нажмите кнопку Отправить на главной странице Google Tag Manager.

Проверка статистики в Google Analytics

1. Перейдите в аналитику на вкладку отчёты.

2. Выберите Отчет в реальном времени.

3. Отобразится отчет, где можно отследить все события. В нижней части экрана вы найдёте Количество событий с разбивкой по параметру. 

4. Перейдите на свой WL и кликните на кнопку Купить. Убедитесь, что клик отобразился в статистике с ранее заданным названием.

Обратите внимание:

• Для успешного тестирования событий нужно убедиться, что все изменения в Google Tag Manager опубликованы, иначе данные могут не попасть в Google Analytics.
• Задержка между кликом и его отображением в Google Analytics может составлять до нескольких секунд.

Далее вы можете аналогичным образом добавить в статистику клики по кнопке Купить в отельной выдаче и других страницах вашего White Label, для этого достаточно добавить дополнительные классы в настройку триггера и опубликовать новую версию.

Как создать цели Яндекс.Метрики для White Label и отследить переход по кнопке «Купить»

В разделе Отчёты личного кабинета Travelpayouts доступна информация о следующих действиях посетителей: 

• количество человек, перешедших по партнёрской ссылке на сайт aviasales или hotellook и совершивших хотя бы один поиск.
• количество посетителей, воспользовавшихся формой поиска (ввели запрос и нажали Найти).
• количество посетителей, кликнувших на один из вариантов в результатах поиска;
• количество посетителей, забронировавших билеты/номера в отелях.

Если же вы хотите отследить количество нажатий на кнопку Купить в вашем White Label или количество переходов по ссылкам на конкретные предложения, рекомендуем воспользоваться специальными сервисами: Яндекс Метрика или Google Analytics.

Обратите внимание! Просто добавить счётчик на страницу редиректа нельзя. Чтобы получить полезную информацию, нужно считать нажатия на кнопку Купить на странице с результатами поиска.

Установка счётчика Яндекс Метрики для формы авиабилетов

1. Инициируйте jQuery. Для этого разместите указанный ниже код на вкладке Мета данные в настройках White Label в личном кабинете Travelpayouts.
Обратите внимание, что размещать его нужно на всех Мета страницах (Главная, Авиа выдача, Отельная выдача, Страница отеля).

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

2. Перейдите на сайт Яндекс Метрики и создайте новый счётчик. 

3. Скопируйте код счётчика, перейдите в настройки White Label в личном кабинете Travelpayouts и вставьте код в поле Хедер сайта на вкладке Мои блоки.

4. Добавьте в счётчик две цели с идентификаторами BUY_BUTTON и DEEPLINK.

• BUY_BUTTON — считает нажатия на кнопку Купить.
• DEEPLINK — нажатия на ссылки, ведущие на сайты агентств в поисковой выдаче вашего White Label.
  

5. В настройках White Label добавьте следующий код в блок Футер сайта на вкладке Мои блоки:

<script>
$(document).on("click",".ticket-action-airline",function(){
ym(НОМЕРСЧЁТЧИКА,'reachGoal','BUY_BUTTON');
});
$(document).on("click",".main-proposal-link",function(){
ym(НОМЕРСЧЁТЧИКА,'reachGoal','BUY_BUTTON');
});
$(document).on("click",".ticket-action-button-deeplink",function(){
ym(НОМЕРСЧЁТЧИКА,'reachGoal','BUY_BUTTON');
});
$(document).on("click",".ticket-action-proposals-item-link",function(){
ym(НОМЕРСЧЁТЧИКА,'reachGoal','DEEPLINK');
});
</script>

где вместо НОМЕРСЧЁТЧИКА укажите номер своего счётчика Яндекс. Метрики.

6. В итоге на вкладке Мои блоки должны появиться два фрагмента кода в полях Хедер и Футер:

7. Сохраните изменения в White Label.

После этого в вашей статистике начнут отображаться все нажатия на кнопку Купить и переходы на сайты агентств на страницах редиректа.

Подробнее о работе целей в Метрике читайте на странице помощи Яндекса.

Установка счётчика Яндекс Метрики для формы отелей

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

1. Аналогично инструкции выше для авиабилетов, добавьте в счётчик две цели с идентификаторами HOTELS_BUY_BUTTON и HOTELS_BUY_LINK

• HOTELS_BUY_BUTTON — считает нажатия на кнопку Бронировать.
• HOTELS_BUY_LINK — считает переходы по ссылкам с вариантами номеров.

2. Перейдите в настройки White Label и откройте вкладку Мои блоки. Добавьте такой код в блок Футер сайта:

<script>
$(document).on("click",".main_gate-button",function(){
ym(НОМЕРСЧЁТЧИКА,'reachGoal','HOTELS_BUY_BUTTON');
});
$(document).on("click",".card-gates_list__name",function(){
ym(НОМЕРСЧЁТЧИКА,'reachGoal','HOTELS_BUY_LINK');
});
</script>

где вместо НОМЕРСЧЁТЧИКА укажите номер своего счётчика Яндекс. Метрики.

Добавление целей Google Analytics

Информацию о подключении целей в Аналитике смотрите в статье Как настроить цели Google Analytics для White Label.

Какдобавить всплывающее окно в поисковую выдачу White Label

В этой статье рассказывается, как сделать у себя на White Label всплывающее окно, которое будет появляться при клике на кнопку Купить в поисковой выдаче авиабилетов. Окно может содержать любую рекламу или дополнительную информацию. В примере ниже оно содержит ссылку на сайт бренда Booking.com с партнёрской ссылкой партнёра.

Чтобы всё работало корректно, сначала добавьте код подключения библиотеки для обработки jquery. Для этого откройте настройки White Label и перейдите в раздел Подвал.

В блок для ввода кода добавьте следующий код:

<script
 src="https://code.jquery.com/jquery-3.3.1.min.js"
 integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
 crossorigin="anonymous">
</script>

Обратите внимание! Код подключения библиотеки jquery добавляется только один раз. Если вы добавляете другие расширения для White Label, то повторно код вставлять не нужно.

Пример работы:

Код, который отвечает за работу попапа, необходимо разместить в Подвале White Label (в коде даны комментарии, для удобства изменения):

	<!-- модальное окно -->
    <div id="feedback-hotel" class="hidden">
        <div class="js-feedback-hotel feedback-hotel">

            <!-- задний полупрозрачный фон -->
            <div class="js-feedback-hotel-overlay feedback-hotel__overlay"></div>
            <!-- задний полупрозрачный фон -->

            <!-- белое окно с контентом -->
            <div class="feedback-hotel__popup">

                <!-- кнопка с крестиком -->
                <div class="js-feedback-hotel-close feedback-hotel__close"></div>
                <!-- кнопка с крестиком -->

                <!-- заголовок -->
                <div class="feedback-hotel__title">Купил билет - купи отель!</div>
                <!-- заголовок -->

                <!-- описание -->
                <div class="feedback-hotel__description">Скидка до 60% только для наших клиентов</div>
                <!-- описание -->

                <div class="feedback-hotel__action">

                    <!-- кнопка бронирования (ссылка на букинг.ком из вашего партнерского кабинета) -->
                    <a target="_blank" data-target="booking" class="feedback-hotel__action-button" href="https://c84.travelpayouts.com/click?shmarker=78606&promo_id=2064&source_type=link&type=click"><span>Забронировать отель на</span></a>
                    <!-- кнопка бронирования (ссылка на букинг.ком из вашего партнерского кабинета) -->
               
				</div>

                <!-- ссылка для сравнения цен на White Label -->
                <!-- замените ссылку http://travel.abegan.ru на ваш White Label -->
                <div class="feedback-hotel__compare">Или <a target="_blank" data-target="hotellook" href="http://travel.abegan.ru">сравните цены на сайте travel.abegan.ru</a>
                </div>
                <!-- ссылка для сравнения цен на White Label -->

            </div>
            <!-- белое окно с контентом -->
        </div>
    </div>
    <!-- модальное окно -->

    <script>

        // Открытие модального окна с задержкой в 7 сек. после нажатия на кнопку "Купить ..."
        setTimeout(function() {
            $('.ticket-action-button-deeplink').on('click', function() {
                $("#feedback-hotel").removeClass("hidden");

            });
        }, 7000);

        // Открытие модального окна с задержкой в 7 сек. после нажатия на кнопку "Купить ..."

        // Скрытие модального окна после клика вне модального окна
        $('.js-feedback-hotel-overlay').on('click', function() {
            $("#feedback-hotel").addClass("hidden");

        });
        // Скрытие модального окна после клика вне модального окна

        // Скрытие модального окна после клика по крестику
        $('.js-feedback-hotel-close').on('click', function() {
            $("#feedback-hotel").addClass("hidden");

        });
        // Скрытие модального окна после клика по крестику
    </script>

На вкладке Цветовая схема необходимо разместить код стилей до тега </style>:

/* Скрытие формы и кнопки */
.hidden {
    display: none;
}
.hidden-price{
    display: none;
}
/* Скрытие формы и кнопки */

/* Задний фон модального окна */
.feedback-hotel__overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
}
/* Задний фон модального окна */

/* Контейнер модального окна */
.feedback-hotel__popup {
    position: fixed;
    background: #fff;
    z-index: 5000;
    left: 50%;
    top: 50%;
    margin-left: -255px;
    margin-top: -189px;
    width: 671px;
    height: 378px;
    border-radius: 5px;
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.62);
    padding: 0 52px;
    text-align: center;
}
/* Контейнер модального окна */

/* Графический элемент "Hotel" в верхней части модального окна */
.feedback-hotel__popup:before {
    content: '';
    display: block;
    position: absolute;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAFcCAMAAACOWpd4AAAAvVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////h8f////9Yt2l3en7y8/XW19r4aXzs7O7v8PL8/v/R6f/09feTlZnKPlP29/nu7/GNjpDy+f/9+v3x8fPw8PL25y75e4zf7v/4cYOAg4lhY2f5g5T8sb3q9f/5i5r8ucWDyZCY0qRiu3Lb796hpKm5vMGx3bnG5sxywoD5k6J2biUtAAAAFXRSTlMAP2Tf0J6vIQvtT8SIkHeEfnV/ensf1q/bAAAXxElEQVR4AezYR5K0MAyG4XG2iZOsJUuz5/53+3MO1LRQw4eZ9whPSajwA1YxqEYPnfOttcakNBPNKRljbetdN+hGhfgAEF5B6dG1id5Qat2oVXg3+1ZUelVuxVGreHW7J29oU8Y/XVQxNl07k0hz2zUXQ1SdJeFsp65yLrRPdJeS16F6vUdLd80+hor1XiztkH0JVeo9Wdot+1SbYeNp53xT0fCNiQ4ojaGO4WvpsNrTj2HUhg7N6Pi+u1fd5OBmgmh24ZR8BNTpCIObCKrpVIShnwiuqT8LYexngmzuT3GRdSLYkobnU5agswqaL3ja2lQ+tXwq/9byqfKpibbmA67f47xN7rvaesuyzXF+xN9eeTpRRqsgby8P7zc7hiIPEe8eN4aFlwViIZoGa/zczXh8PSFDBzSE6tbxW8PjI946hArFb+TpHW84QvCF9qbVXfJdW27a5Tbg/7nJXw3J72HSJ7oeDD224VluSbB8PhRCe+Aaq/Tm3c279+ZNTodd4wHicAgclOEQvuj504c2hT4CfP74fACENuzuZ/h8iIQmIJ6PkiEqeKdET8C3g3lNJr2f3zOfD5nweS+/Hn97eXvc7+Pn+OOHPoQOxK9kyAqCYPTy44c0hD4e7lcycOVgwej544cyhIcKevnxwxtCf9z94I8f1BC6dz9MwR5/faXWuD/i/63kE1X2/6vT+OsrucZa2k9N+H6SgpOS9QuJ1pryCVsXTGHH9+eST1nZ7Y06Wnw/eUEbxQB9BX4MQS/lN1ThxxAchA4wrbXkU7fQWkr+AOP7SQqmIH9A8P0kBQUOiavIjyHotvrpqvwYgvqOH8CSK6nc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) no-repeat;
    background-size: 100%;
    width: 160px;
    height: 174px;
    left: 0;
    right: 0;
    margin: auto;
    top: -36px;
}
/* Графический элемент "Hotel" в верхней части модального окна */

/* Иконка скрытия модального окна */
.feedback-hotel__close {
    cursor: pointer;
    display: block;
    width: 36px;
    height: 36px;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+Q2xvc2UgYnV0dG9uPC90aXRsZT48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xOCAzNWM5LjM4OSAwIDE3LTcuNjExIDE3LTE3UzI3LjM4OSAxIDE4IDEgMSA4LjYxMSAxIDE4czcuNjExIDE3IDE3IDE3eiIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNMTggMTYuODY5bDQuNTI1LTQuNTI2Yy40NTEtLjI2Mi44NzItLjI2IDEuMTMyIDAgLjI2LjI2LjI2Mi42OCAwIDEuMTMyTDE5LjEzIDE4bDQuNTI2IDQuNTI1Yy4zMDYuNDA0LjMwOC44MjQgMCAxLjEzMi0uMjA5LjIwOC0uNjI5LjIwNi0xLjEzMiAwTDE4IDE5LjEzbC00LjUyNSA0LjUyNmMtLjQ1MS4yNjItLjg3Mi4yNi0xLjEzMiAwLS4yNi0uMjYtLjI2Mi0uNjggMC0xLjEzMkwxNi44NyAxOGwtNC41MjYtNC41MjVjLS4yMDYtLjUwMy0uMjA4LS45MjMgMC0xLjEzMi4zMDgtLjMwOC43MjgtLjMwNiAxLjEzMiAwTDE4IDE2Ljg3eiIgZmlsbD0iI0ZGRiIvPjwvZz48L3N2Zz4=) no-repeat 50%;
    position: absolute;
    right: -34px;
    top: -34px;
}
/* Иконка скрытия модального окна */

/* Тест заголовка (Купил билет - купи отель!)*/
.feedback-hotel__title {
    font-weight: 700;
    font-size: 1.625rem;
    margin-top: 146px;
    line-height: 1.875rem;
}
/* Тест заголовка (Купил билет - купи отель!)*/

/* Тест описания (Скидка до 60% только для наших клиентов) */
.feedback-hotel__description {
    font-size: 1rem;
    line-height: 2.5rem;
}
/* Тест описания (Скидка до 60% только для наших клиентов) */

/* Контейнер кнопки booking.com */
.feedback-hotel__action {
    margin: 20px 0;
}
/* Контейнер кнопки booking.com */

/* Общий стиль кнопки booking.com */
.feedback-hotel__action-button {
    font-size: .66938rem;
    line-height: .875rem;
    width: 275px;
    height: 58px;
    border-radius: 5px;
    background: #143a90;
    box-shadow: 0 1px 0 0 #051f5b, 0 2px 3px 0 rgba(0, 0, 0, .3);
    text-transform: uppercase;
    color: #fff;
    position: relative;
    display: block;
    margin: auto;
}
/* Общий стиль кнопки booking.com */

/* Логотип booking.com внутри кнопки */
.feedback-hotel__action-button:before {
    content: '';
    display: block;
    position: absolute;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEwIiBoZWlnaHQ9IjE4IiB2aWV3Qm94PSIwIDAgMTEwIDE4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+UGFnZSAxPC90aXRsZT48ZGVmcz48cGF0aCBpZD0iYSIgZD0iTTE1LjI1NCAxMC4wNTlWLjAyMkguMDEyVjEwLjA2aDE1LjI0MnoiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNNDcuMSAxLjM2N2MuMTc3Ljg5NC0uNTI2IDEuODI3LTEuNDI1IDEuODkzLS44MzcuMTEyLTEuNjc3LS41NDgtMS43NjYtMS4zOTYtLjEyNC0uNzguMzk1LTEuNTkyIDEuMTUtMS43OTQuODg5LS4yOSAxLjkyMS4zNiAyLjA0MSAxLjI5N3pNMzMuMTguODJjLjU2Mi4wMDQgMS4xMjUtLjAwNiAxLjY4NyAwIC4zNjQuMDA3Ljc2Mi4wNzggMS4wMi4zMy4yODkuMjc4LjMyNS42ODIuMzI3IDEuMDQ1LS4wMDUgMS44MDcgMCAzLjYxMy0uMDA0IDUuNDIuNDAxLS4wMjMuOTQ2LjA3MiAxLjE5LS4zMDEuNjktLjk1NyAxLjM2NS0xLjkyIDIuMDUzLTIuODc5IDEuMTM1LjAwMiAyLjI3Mi4wMDIgMy40MS4wMDItLjkwNyAxLjIzNC0xLjgyMiAyLjQ2MS0yLjczMiAzLjY5M2E0Ljk3NSA0Ljk3NSAwIDAgMS0uNTc2LjY1MmMuNDE2LjM3Mi42MzYuODY5LjkxMiAxLjMyNi43MTkgMS4zMTIgMS42MDUgMi41MzggMi40MjQgMy43OTktLjkwMy0uMDEtMS44MDYuMDE5LTIuNzA5LS4wMTQtLjUzLS4wMDktMS4wMy0uMjc2LTEuMjgyLS43MDItLjYwOC0uOTgtMS4xNTgtMS45OTItMS43NTQtMi45OC0uMTgyLS4zMDEtLjYyNC0uMjA0LS45MzQtLjI0Mi0uMDAzIDEuMzE0LjAwMiAyLjYyNi0uMDAzIDMuOTM4LTEuMDA5IDAtMi4wMTgtLjAwMi0zLjAyOCAwLS4wMDMtNC4zNjIgMC04LjcyNCAwLTEzLjA4N20xNy40NTUgNC41NmE0LjA3NSA0LjA3NSAwIDAgMSAyLjYwOC0xLjI2M2MxLjA2Mi0uMDk0IDIuMjM5LjA1IDMuMDY1LjczNy43NS42MTMgMS4wNSAxLjU2NCAxLjExMSAyLjQ2Ni4wMzcgMi4xOTUtLjAzNCA0LjM5LjAzNyA2LjU4NC0uNTgyLS4wMDgtMS4xNjUuMDI3LTEuNzQ1LS4wMi0uNDEtLjAyOC0uODI1LS4yMDgtMS4wMzUtLjU1LS4yNDktLjQxOC0uMjAyLS45MTMtLjIwNS0xLjM3NC0uMDAxLTEuMzA2LjAwNy0yLjYxMy0uMDAzLTMuOTItLjAxMy0uNDk1LS4xNDctMS4xMjUtLjcyLTEuM2EyLjQ3IDIuNDcgMCAwIDAtMi4yMTguNTU3Yy0uNTY2LjUyLS44MDggMS4yODQtLjgzIDIuMDEgMCAxLjUzMi4wMDIgMy4wNjUgMCA0LjU5OC0uOTg0LjAwMS0xLjk3LjAwMi0yLjk1NSAwdi05LjZjLjcxNS4wMzggMS40NjQtLjEwNSAyLjE1LjE0LjQyNS4xNDYuNjM1LjU1Ljc0LjkzNSIgZmlsbD0iI0ZGRiIvPjxwYXRoIGQ9Ik03NC4yOTIgNS41NWMxLjQxNC0xLjMyNyAzLjYxNy0xLjc0MiA1LjUyLTEuMjczLjczNi4xOTIgMS41MDkuNTE2IDEuOTIxIDEuMTUzLjQxMS42MzQuMTkzIDEuNDA3LjI0NyAyLjEwNi0uNTc0LS4wMTEtMS4xNDcuMDIzLTEuNzE4LS4wMTUtLjQwMS0uMDQyLS42NzQtLjM2OC0uNzk0LS43MDUtLjA4OC0uMjU3LS4zOTItLjM0NS0uNjM4LS40MTQtMS4wMjItLjIyNi0yLjE4NC4xODUtMi43NDQgMS4wM2EyLjgzOSAyLjgzOSAwIDAgMC0uMTg3IDIuNzY1Yy40MTQuODU4IDEuNDEyIDEuMzU4IDIuMzkgMS4zODMgMS4xNzUuMDU3IDIuMjY4LS41NSAzLjA1My0xLjMzLjM5OC42MjguODA1IDEuMjUgMS4yMDIgMS44OC0xLjk3NyAyLjE1NC01Ljg3MSAyLjQwNC04LjEwMi40NjQtMi4wOTItMS43NzMtMi4xNDYtNS4xODktLjE1LTcuMDQzIiBmaWxsPSIjMDBBREVGIi8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTQuNjgzIDQuMDkpIj48bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+PHVzZSB4bGluazpocmVmPSIjYSIvPjwvbWFzaz48cGF0aCBkPSJNMi43NiAxLjQ0M0MzLjM2Mi43MzggNC4yLjE4OCA1LjE1LjA2MmMuOTI0LS4xMjQgMS45NTIuMDMyIDIuNjcuNjQ5LjMzLjI2OC41MzkuNjQuNzY1Ljk4OUM5LjI2Ljc3NyAxMC4zNC4xMzMgMTEuNTEuMDQxYzEuMDQtLjA5MiAyLjIxMi4xMzkgMi45MTIuOTUuNjc4Ljc4Mi44MiAxLjg0OS44MzIgMi44MzctLjAwMiAyLjA3NS4wMDQgNC4xNS0uMDA1IDYuMjI1LS43MjctLjA0Ni0xLjUwMy4xMTgtMi4xOTItLjE3My0uNTMtLjI0Ny0uNjI0LS44ODItLjYxNC0xLjM5MyAwLTEuNTE0LjAwNi0zLjAyOSAwLTQuNTQyLS4wMzEtLjQ3My0uMDk4LTEuMDgzLS42LTEuMzA3LS42NS0uMjU2LTEuNDA4LS4wMDctMS44ODQuNDYxLS42MzIuNjE3LS44OTIgMS41MS0uOTM3IDIuMzYuMDAyIDEuNTI4LS4wMDMgMy4wNTcuMDA1IDQuNTg3LS45MzguMDEyLTEuODc2LjAwMi0yLjgxMy4wMDVWNC4yNmMtLjAxLS40OC0uMDUyLTEuMDEyLS4zOTUtMS4zOS0uMzM2LS4zOC0uOTMtLjM5OC0xLjM4OC0uMjU0LS42NC4yMjctMS4wNjcuODA4LTEuMzE2IDEuNC0uMy42OTMtLjM1IDEuNDU1LS4zNTEgMi4xOTh2My44MzhILjAxM1YuMjRDLjczLjI3NCAxLjUxLjExNSAyLjE3MS40NmMuMzc1LjE5My40ODYuNjE2LjU4OC45ODIiIGZpbGw9IiMwMEFERUYiIG1hc2s9InVybCgjYikiLz48L2c+PHBhdGggZD0iTTQzLjcgNC4xYy43OTMuMDM1IDEuNjEzLS4xIDIuMzguMTIyLjU3My4xNzYuODU0LjcyMS44NTMgMS4yMjMuMDA5IDIuODIyIDAgNS42NDMuMDA0IDguNDYzaC0zLjIwNWMuMDE2LTMuMjctLjAyMy02LjUzOC0uMDMyLTkuODA5bS0yOC42MTggMi40YTIuMjgxIDIuMjgxIDAgMCAwLTEuNDAzIDEuMTMyYy0uNjE2IDEuMjEtLjM4IDIuOTQ1LjkyIDMuNjcgMS4wMTUuNTYyIDIuNDc2LjI4NyAzLjEyMS0uNjY0LjctMS4wNC42NTYtMi41MjQtLjE4LTMuNDg1LS41ODctLjY1OC0xLjU5Ni0uODktMi40NTgtLjY1M20tLjQ1Ny0yLjMwNmMxLjY1My0uMjk2IDMuNDgxLjA0NiA0Ljc1MiAxLjEyNSAyLjA4IDEuNzM2IDIuMjE5IDUuMDg1LjM2NCA3LjAxMy0yLjAwNyAyLjExMS01Ljk4MiAyLjExLTcuOTYtLjAzOC0xLjkxLTIuMDI3LTEuNjM0LTUuNTkxLjcxNS03LjIxOGE1LjMxNCA1LjMxNCAwIDAgMSAyLjEzLS44ODIiIGZpbGw9IiNGRkYiLz48cGF0aCBkPSJNMjYuNDM3IDYuNDkxYy0uODMuMjEyLTEuNDQ4LjkwOC0xLjY0IDEuNjg0LS4yOTUgMS4xIDAgMi40NjQgMS4wOCAzLjA5NS44Ny41IDIuMDg3LjQxIDIuODM1LS4yNTQuNjMzLS41NS44Ni0xLjQwMi44MTktMi4xOS0uMDI5LS43NDMtLjM1LTEuNTEtLjk4Ny0xLjk2OS0uNTg2LS40MzgtMS4zOTUtLjU0Ni0yLjEwNy0uMzY2bS0uNTQ3LTIuMjg4YzEuNDUzLS4yNjcgMy4wNDMtLjA2OSA0LjI4Mi43MjZhNC42MjggNC42MjggMCAwIDEgMi4wNTYgMi44NDljLjM2NiAxLjU0MS4wMzUgMy4yNzQtMS4wODQgNC40NzktMS45NjQgMi4xNi01Ljk0MyAyLjIxLTcuOTY4LjEwMy0xLjgxNS0xLjg2MS0xLjc2NS01LjA3OC4xNC02Ljg2Ny42OTMtLjY2NSAxLjYxMi0xLjA5OCAyLjU3NC0xLjI5IiBmaWxsPSIjRkZGIi8+PHBhdGggZD0iTTg3Ljk5MiA2LjQ3OWMtLjYyNC4xNS0xLjE2My41Ny0xLjQ1NiAxLjEwOS0uNTc5IDEuMDg3LS40NjIgMi41Ny41IDMuNDMzLjg3OC43OTUgMi40MjguNzQ1IDMuMjYzLS4wODUuNTQzLS41MzMuNzYtMS4yOTcuNzM0LTIuMDIzLS4wMDQtLjgwNC0uMzYtMS42NDYtMS4wNzUtMi4xMTQtLjU2My0uMzgtMS4zMDMtLjQ3LTEuOTY2LS4zMm0tLjQ1LTIuM2MxLjY1LS4yNzQgMy40NjYuMDg3IDQuNzE1IDEuMTggMi4wNDIgMS43NTIgMi4xNTggNS4wNzcuMzA0IDYuOTktMi4wMDIgMi4wOC01LjkyIDIuMDg1LTcuOTEtLjAxNC0xLjgxLTEuODkzLTEuNzI1LTUuMTU2LjI1MS02LjkxNy43Mi0uNjU0IDEuNjYtMS4wNzcgMi42NC0xLjI0IiBmaWxsPSIjMDBBREVGIi8+PHBhdGggZD0iTTYyLjY4NSA2LjE1Yy0uNjcuMjM4LTEuMDQuODktMS4xNTMgMS41MjEtLjE2Ljg0LS4wNDYgMS43ODQuNTEyIDIuNDgzLjcyLjkxNSAyLjQwOS45NjQgMy4xMzYuMDMyLjQ5NS0uNjU1LjUyLTEuNTA4LjQ2LTIuMjc5LS4wNi0uNjUtLjMzOC0xLjM3My0xLjAwMi0xLjY3N2EyLjcxIDIuNzEgMCAwIDAtMS45NTMtLjA4bS0xLjQ5MS0yLjI3YzEuNTI5LS41NzMgMy40NTMtLjQ2NCA0LjcyLjU5LjE3Ny0uMzI3LjQ4MS0uNjAyLjg3Ny0uNjY4LjU5Ny0uMDk1IDEuMjA2LS4wMyAxLjgwOC0uMDUuMDAyIDIuOTg0LjAwMSA1Ljk2Ny4wMDEgOC45NSAwIDEuMDktLjM1IDIuMjEzLTEuMTU4IDMuMDIxLTEuMDQyIDEuMDYzLTIuNjIgMS41MTEtNC4xMjUgMS41NTctMS40LjAyMi0yLjgxNC0uMjkyLTQuMDQzLS45My4yMzctLjU0MS40MjItMS4xMDcuNzE5LTEuNjI0LjE1LS4yNy40OS0uNDEuODA2LS4zNTcuNDk3LjA4NS45NjguMjgyIDEuNDc0LjM0MS44ODYuMTI0IDEuODkuMTA3IDIuNjM2LS40MTUuNTY3LS40MDUuNzQtMS4xMS43LTEuNzQ2LS45NDguNzQ2LTIuMjcuODc0LTMuNDUxLjY3My0xLjE4NS0uMjAzLTIuMjU3LS44OTctMi44ODgtMS44NTUtLjg1Ni0xLjI3OC0xLjAyMi0yLjg4LS43MDMtNC4zMzguMjktMS4zNTEgMS4yMy0yLjYzIDIuNjI3LTMuMTVNMy4wNSA4LjI4M2MtLjI5LjE3MS0uMzM3LjUxNS0uMzQ1LjgwOS0uMDAyLjg1Ny4wMDEgMS43MTQuMDAxIDIuNTcuODQyLS4wMDQgMS42ODYuMDA2IDIuNTMtLjAwMi41NzUtLjAxIDEuMTY0LS4yOTggMS40MzYtLjc4Ni40MS0uNzQuMzMtMS43OC0uMzcxLTIuMzQyLS41NzQtLjQ1Mi0xLjM2Ni0uMzk1LTIuMDY2LS40LS4zOTUuMDE2LS44MzUtLjA2MS0xLjE4Ni4xNU0yLjk3IDMuMTk0Yy0uMjM2LjE5NS0uMjU2LjUxLS4yNjUuNzg0LS4wMDIuNzA3LjAwMiAxLjQxMiAwIDIuMTE4LjczMy0uMDAzIDEuNDY2LjAxIDIuMi0uMDAzLjQzOC0uMDA4Ljg4MS0uMTg4IDEuMTUtLjUyLjUyOS0uNjc4LjQ5OS0xLjc5NC0uMjU2LTIuMzE2LS41MTctLjM1NC0xLjE4OC0uMjU1LTEuNzg3LS4yNy0uMzUuMDA3LS43NjgtLjA0NS0xLjA0Mi4yMDdtLTIuOTY4LS45OUMtLjA0NiAxLjQ2Ni42NzIuOCAxLjQ1Mi44MmgzLjU2NmMxLjE3MS4wMjUgMi40MS4zNDggMy4yMzggMS4xNjUgMS4yNzcgMS4yMzUgMS4yIDMuNDMyLS4xMTYgNC42MTctLjE1NS4xMzYtLjMxOC4yNi0uNDc5LjM5LjY3OC4zMTggMS4zMDUuNzc5IDEuNjQyIDEuNDMuNjEyIDEuMTcyLjUzOCAyLjY2Ni0uMjQgMy43NTUtLjg1NyAxLjE5NC0yLjQ1IDEuNy0zLjkyNyAxLjczLTEuNzEuMDA2LTMuNDIxIDAtNS4xMzMuMDAzVjIuMjAzIiBmaWxsPSIjRkZGIi8+PHBhdGggZD0iTTcwLjc5MSAxMC43Yy45MjktLjI5IDEuOTgzLjQ1MyAyLjAzMyAxLjQzMi4wOTcuODYtLjU5IDEuNzA4LTEuNDUgMS43NjYtLjg0OC4xMDktMS42OS0uNTczLTEuNzYzLTEuNDMxLS4xMTEtLjc4LjQyLTEuNTggMS4xOC0xLjc2OCIgZmlsbD0iIzAwQURFRiIvPjwvZz48L3N2Zz4=) no-repeat;
    left: 0;
    right: 0;
    margin: auto;
    width: 110px;
    height: 18px;
    bottom: 10px;
}
/* Логотип booking.com внутри кнопки */

/* Текст описания кнопки booking.com */
.feedback-hotel__action-button span {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    margin: auto;
}
/* Текст описания кнопки booking.com */

/* Контейнер модального окна (с изменениями)*/
Inherited from div.feedback-hotel__popup
.feedback-hotel__popup {
    position: fixed;
    background: #fff;
    z-index: 16;
    left: 50%;
    top: 50%;
    margin-left: -255px;
    margin-top: -189px;
    width: 510px;
    height: 378px;
    border-radius: 5px;
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.62);
    padding: 0 80px;
    text-align: center;
}
/* Контейнер модального окна (с изменениями)*/

/* Контейнер для кнопки сравнения */
.feedback-hotel__compare {
    font-size: .75rem;
    line-height: 1.0625rem;
    letter-spacing: .0125rem;
    text-transform: uppercase;
}
/* Контейнер для кнопки сравнения */

/* Ссылка на White Label */
.feedback-hotel__compare a {
    color: #009eca;
}
/* Ссылка на White Label */

Как автоматически вывести блок с информацией на White Label

На White Label можно выводить блок с любой информацией, рекламой или изображением с определённой задержкой. Это немного агрессивный способ, поэтому используйте его осторожно, чтобы не вызвать негатив у ваших посетителей.

Подготовка к добавлению расширения

Чтобы всё работало корректно, сначала добавьте код подключения библиотеки для обработки jquery. Для этого откройте настройки White Label и перейдите на вкладку Мои блоки.

В блок для ввода кода Футер сайта добавьте следующий код:

<script
 src="https://code.jquery.com/jquery-3.3.1.min.js"
 integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
 crossorigin="anonymous">
</script>

Обратите внимание! Код подключения библиотеки jquery добавляется только один раз. Если вы добавляете другие расширения для White Label, то повторно код вставлять не нужно.

Добавление блока с информацией

Чтобы добавить вызов блока, добавьте следующий код в поле Хедер сайта:

<div class="block-inform">
 Информация
</div>

Чтобы блок начал отображаться, добавьте этот код в поле Футер сайта:

<script>
 window.onload = function() {
 setTimeout(function() { $(".block-inform").show(500); }, 5000);
};
</script> 

В функции setTimeout цифра 5000 отвечает за время в миллисекундах с момента открытия White Label, через которое появится всплывающее окно.

Настройка стилей

Чтобы изменить стиль всплывающего окна, добавьте в поле Футер сайта тег <style></style> и поместите в него такой код:

 .block-inform {
 position: fixed;
 top: 20px;
 right: 20px;
 background: #000;
 color: #fff;
 padding: 30px;
 display: none;
 }

Вы можете изменять стиль оформления по своему усмотрению. Если вам не хватает знаний CSS — найдите разработчика на фрилансе, который сможет вам помочь.

Пример работы:

Настройки для социальных сетей

White Label закрыт от индексации поисковыми системами. Исключение составляет главная страница. Поэтому изначально у страниц с результатами поиска были одинаковые метатеги title, keywords, description. Но такой подход работает плохо, если нужно отправить ссылку в социальные сети — не подтягивается нормальное описание или заголовок.

Мы добавили поддержку специальных параметров, с помощью которых можно создавать шаблоны для метатегов.

Как добавить параметры

Чтобы добавить параметр в метатеги, откройте настройки White Label и перейдите на вкладку Мета данные. Выберите тип страницы, для которой нужно добавить шаблон. Например, добавим метатеги для страницы отеля:

В поле для ввода кода добавьте нужные метатеги и нужные параметры. Пример итогового кода:

<title>[:origin_name:] - [:destination_name:], [:dates:] - Поиск авиабилетов</title>
<meta name="description" content="Перелёт [:origin_from:] [:destination_to:], [:dates:], [:passengers:], [:flight_class:]"/>
<meta property="og:title" content="Я нашел дешёвый авиабилет!" />
<meta property="og:description" content="Перелёт [:origin_from:] [:destination_to:], [:dates:], [:passengers:], [:flight_class:]" />
<meta content="ru_RU" property="og:locale">
<meta content="product.group" property="og:type">
<meta content="[:og_image:]" property="og:image">
<meta content="Я нашел дешёвый авиабилет!" name="twitter:title">
<meta content="Перелёт [:origin_from:] [:destination_to:], [:dates:], [:passengers:], [:flight_class:]" name="twitter:description">
<meta content="summsummary_large_imageary" name="twitter:card">

Параметры добавляются с помощью конструкции вида [:hotel_country_7:]. Описание параметров смотрите ниже.

Обратите внимание! Если вам нужно, чтобы метатеги отображались на разных языках — добавьте эти языки в основных настройках White Label. После этого добавьте код на вкладке Мета во все языковые блоки.

Что отображается вместо параметра

В White Label поддерживаются два типа параметров — для авиабилетов и отелей. Вместо каждого параметра на итоговой странице отобразится соответствующее ему значение.

Обратите внимание! Вам не нужно ничего менять или подставлять в эти параметры. Все значения подгружаются автоматически, в зависимости от содержимого страницы.

Авиабилеты

• [:flight_class:] — класс перелёта;
• [:passengers:] — количество пассажиров;
• [:origin_name:] — город отправления в именительном падеже, например «Москва»;
• [:origin_from:] — город отправления в формате «из Города», например «из Москвы»;
• [:destination_name:] — город назначения в именительном падеже;
• [:destination_to:] — город назначения в формате «в Город»;
• [:trip_type:] — тип перелёта (в одну сторону или туда-обратно);
• [:og_image:] — изображение города прилёта;
• [:dates:] — даты вылета и возвращения вместе;
• [:depart_date:] — дата вылета;
• [:return_date:] — дата возвращения.

Отели

• [:guests:] — количество гостей;
• [:hotel_city:] — название города, в котором расположен отель или по которому осуществлялся поиск;
• [:hotel_city_1:] — название города в именительном падеже (Москва);
• [:hotel_city_2:] — название города в родительном падеже (Москвы);
• [:hotel_city_3:] — название города в дательном падеже (Москве);
• [:hotel_city_4:] — название города в винительном падеже (Москву);
• [:hotel_city_5:] — название города в творительном падеже (Москвой);
• [:hotel_city_6:] — название города в предложном падеже (Москве);
• [:hotel_city_7:] — название города в формате «в Городе» (в Москве);
• [:hotel_city_iata:] — IATA код города, в котором расположен отель или по которому был поиск;
• [:hotel_county:] — страна, в которой находится отель (поддерживаются падежи по такому же принципу, как у города);
• [:hotel_county_iata:] — IATA-код страны, в которой расположен отель;
• [:hotel_name:] — название отеля;
• [:og_image:] — изображение отеля;
• [:check_in:] — дата заселения;
• [:check_out:] — дата выезда;
• [:dates:] — даты заселения и выезда вместе;
• [:og_image:] — ссылка на изображение, которое будет отображаться при отправке ссылки в соц. сети.

Как добавить рекламу Google AdSense

Создание рекламного объявления в AdSense

Перейдите в свой аккаунт AdSense и создайте рекламное объявление.

В результате вы получите код вида:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0515363181603345"
data-ad-slot="8813803962"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Как добавить рекламный блок в выдачу авиабилетов

Перейдите в настройки White Label и разместите в разделе Мета данные на вкладке Авиа выдача следующий код:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=GOOGLE-DATA-AD-CLIENT"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align: center;"
data-ad-client="GOOGLE-DATA-AD-CLIENT"
data-ad-slot="GOOGLE-DATA-AD-SLOT"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Замените GOOGLE-DATA-AD-CLIENT на значение атрибута data-ad-client, а GOOGLE-DATA-AD-SLOT на значение атрибута data-ad-slot из кода вашего объявления.

Перейдите на вкладку Мои блоки и разместите в блоке Футер сайта до закрывающего тега </div> такой код:

<script>
setTimeout(function(){
var div = document.createElement("ins");
div.setAttribute('class', 'adsbygoogle');
div.setAttribute('data-ad-client', 'GOOGLE-DATA-AD-CLIENT');
div.setAttribute('data-ad-slot', 'GOOGLE-DATA-AD-SLOT');
document.getElementById('ad_top_container').appendChild(div);
var js = document.createElement("script");
js.setAttribute('src', 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js');
js.setAttribute('async', '');
document.head.appendChild(js);
setTimeout(function(){ 
(adsbygoogle = window.adsbygoogle || []).push({}); 
}, 1000);
}, 3000);
</script>

Сохраните изменения. Теперь рекламное объявление Google AdSense будет отображаться в результатах поиска авиабилетов.

Как добавить рекламный блок в выдачу отелей

Чтобы добавить рекламный блок Google AdSense в выдачу отелей, перейдите в настройки White Label и разместите в разделе Мета данные на вкладке Отельная выдача следующий код:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=GOOGLE-DATA-AD-CLIENT"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align: center;"
data-ad-client="GOOGLE-DATA-AD-CLIENT"
data-ad-slot="GOOGLE-DATA-AD-SLOT"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Перейдите на вкладку Мои блоки и разместите в блоке Футер сайта до закрывающего тега </div> такой код:

<script>
setTimeout(function(){
var div = document.createElement("ins");
div.setAttribute('class', 'adsbygoogle');
div.setAttribute('data-ad-client', 'GOOGLE-DATA-AD-CLIENT');
div.setAttribute('data-ad-slot', 'GOOGLE-DATA-AD-SLOT');
document.getElementById('ad_top_container').appendChild(div);
var js = document.createElement("script");
js.setAttribute('src', 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js');
js.setAttribute('async', '');
document.head.appendChild(js);
setTimeout(function(){
(adsbygoogle = window.adsbygoogle || []).push({});
}, 1000);
}, 3000);
</script>

Замените GOOGLE-DATA-AD-CLIENT на значение атрибута data-ad-client, а GOOGLE-DATA-AD-SLOT на значение атрибута data-ad-slot из кода вашего объявления.

Сохраните изменения. Теперь рекламное объявление Google AdSense будет отображаться в результатах поиска отелей.

Ссылки на White Label с заполненной формой поиска

При работе с White Label вы можете создать ссылку на форму поиска с уже заполненными полями. Такие ссылки удобны тем, что после перехода пользователям не нужно тратить время на заполнение формы, можно сразу перейти к бронированию.

Чтобы создать такую ссылку:

1. Возьмите адрес вашего White Label и добавьте к нему /flights/: АдресВашегоWhiteLabel/flights/

2. К адресу нужно добавить параметры из таблице ниже. Первый параметр добавляется к адресу с помощью знака ?, а все остальные — с помощью &.

Например: /flights/?origin_iata=MOW&destination_iata=VIE. При переходе по такой ссылке пользователь попадёт на форму поиска с заполненными пунктами отправления и назначения.

Таблица параметров

Примечание:

• adults/children/infants — количество взрослых, детей и младенцев — числа.
  Всего в запросе не может быть больше 9 пассажиров с местами (adults + children). При этом infants путешествуют без места на руках у adults. Infants не может быть больше чем adults. Если infants больше, сверхнормативные запрашиваются как children (с местом).
• marker — при необходимости вместе с ID можно указать дополнительный Sub ID.  (указывается через знак «.» после основного ID).

Как изменить высоту iframe

Если вы используете на своей странице iframe с кодом White Label, то по умолчанию он имеет высоту 500px. Это сделано для того, чтобы корректно отображались все контролы: выбор валюты и языка, выбор дат и количества путешественников.

Чтобы уменьшить высоту iframe, добавьте в код страницы, где он расположен, такой стиль:

<style>
#tpcwl_iframe { 
min-height: 200px !important; 
}
</style>

В настройках White Label на вкладке Мои блоки добавьте в поле Футер сайта тег <style> и поместите в него такой код:

body.TPWL--iframe .page { 
min-height: 200px !important; 
}

Обратите внимание! При этом контрол выбора языка и валюты будет частично обрезан снизу.

Как сделать календарь раскрытым по умолчанию

Чтобы автоматически развернуть Календарь низких цен в результатах поиска, перейдите в настройки White Label и добавьте следующий код в блок с кодом Футер сайта в разделе Мои блоки:

<script>
setTimeout(function() { 
 TP_DISPATCHER.send('calendar_toggle')
 document.querySelector('[role="calendar_line--wrapper"]').classList.add('calendar_line--hide')
}, 5000);
</script>

В результате календарь автоматически откроется через 5 секунд после начала поиска:

Как соединить White Label и сайт на WordPress