Как отследить с помощью Яндекс Метрики или Google Analytics взаимодействие с формой поиска

В этой статье представлена информация о том, как настроить отслеживание кликов по кнопке «Найти» в форме поиска авиабилетов и отелей с помощью Яндекс Метрики или Google Analytics.

Обратите внимание! Отслеживание возможно только для новых поисковых форм Aviasales и Hotellook. Техническая поддержка старых поисковых форм остановлена, поэтому мы рекомендуем обновить виджеты, чтобы использовать все возможности.

Для отслеживания целей вам понадобится аккаунт в Яндекс Метрике / Google Analytics и Google Tag Manager. 

Сначала вставьте скрипт для отправки события на страницу, где расположена форма поиска, а далее перейдите к настройке Яндекс Метрики или Google Analytics. В обоих случаях вам необходимо настроить Google Tag Manager для того, чтобы аналитика начала работать.

1. Скрипт для отправки события

После размещения формы поиска авиабилетов и отелей на вашем ресурсе, нужно добавить скрипт, который будет отправлять события (клики по кнопке «Найти») в Яндекс Метрику или Google Analytics.

Вставьте скрипт в конце тега body на ту же страницу, где расположена форма поиска.

<script>
const shadowHost = document.querySelector('[data-cascoon-id="ВСТАВЬТЕ_ПАРАМЕТР"]');

const shadowRoot = shadowHost.shadowRoot;

const submitButton = shadowRoot.querySelector('#ID_ЭЛЕМЕНТА');

submitButton.addEventListener('click', function() {
    // Yandex пример
       yaCounter11111111.reachGoal('CLICKBT');

    // Пример отправки события в Google Analytics
    gtag('event', 'submit_button_click', {
        'event_category': 'Form Submission',
        'event_label': 'Submit Button',
    });
});
</script>

Вставьте следующие значения в скрипт: 

  • Вместо текста ВСТАВЬТЕ_ПАРАМЕТР, укажите идентификатор data-cascoon-id, его можно найти с помощью консоли:
  • Вместо текста ID_ЭЛЕМЕНТА, укажите значение button id, его также можно найти с помощью консоли:

2. Создание цели в Яндекс Метрике

1. Создайте аккаунт в Яндекс Метрике. Не трогайте код счётчика на этом этапе, к нему мы вернёмся чуть позже.

2. Перейдите в раздел Цели и создайте новую цель с типом JavaScript-событие.

mceclip0.png

3. В поле Идентификатор цели укажите идентификатор, по которому Метрика будет считать события. В нашем примере это CLICKBTN.

4. Нажмите Добавить цель.

Тут мы пока закончили, но не закрывайте вкладку с Яндекс Метрикой, мы к ней ещё вернёмся.

3. Настройка Google Tag Manager

1. Авторизуйтесь в Google Tag Manager (Диспетчер тегов) и создайте новый аккаунт и контейнер. Вы можете найти подробные инструкции в документации от Google.

2. Добавьте код Google Tag Manager к себе на сайт. Если у вас сайт на WordPress, используйте один из плагинов (например, этот).

Чтобы проверить, что код добавлен корректно, нажмите кнопку Предварительный просмотр в Диспетчере тегов.
mceclip1.png

В новом окне откроется форма, в которой нужно будет ввести адрес вашего сайта. Если всё было настроено правильно, то ещё в одном окне откроется сам сайт с небольшим блоком, подтверждающем корректность подключения. Если возникли проблемы, внимательно проверьте, что вы правильно добавили код GTM на свой сайт.
mceclip2.png

3. Создайте новую переменную. Для этого в Диспетчере тегов перейдите в раздел Переменные и нажмите кнопку Создать в блоке Пользовательские переменные.
mceclip3.png

4. В открывшемся окне нажмите на поле Конфигурация переменной и выберите тип переменной Переменная уровня данных (Data Layer Variable).

5. В поле Имя переменной уровня данных введите gtm.element.parentElement.className. Это нужно, чтобы отслеживать клики по определённой кнопке. 

6. В поле Версия уровня данных выберите Версия 2 и сохраните переменную.
mceclip4.png

7. Следующим шагом нужно создать триггер. Для этого перейдите в раздел Триггеры и нажмите Создать.

8. Задайте имя триггера и в его настройках выберите тип Клик — Все элементы. В условиях активации триггера выберите Некоторые клики.

9. В появившемся блоке выберите вашу переменную и укажите, что она «содержит» и в последнее поле вставьте значение параметра button id ( этозначение мы уже находили в консоли выше).

10. Перейдите в раздел Теги и нажмите Создать. Задайте имя тега и в конфигураторе выберите Пользовательский HTML.
mceclip7.png

11. В блок HTML добавьте код Яндекс Метрики, а в блоке Триггеры выберите Все страницы (All pages):
mceclip10.png

12. Сохраните тег и создайте ещё один с типом Пользовательский HTML и в открывшийся блок HTML добавьте код вида:

<script type="text/javascript">

ym(ХХХХХХХХ,'reachGoal','CLICKBTN')

</script>

где ym(ХХХХХХХХ,'reachGoal','CLICKBTN') — код вашей цели из Яндекс Метрики.

 

13. В блоке Триггеры выберите созданный вами ранее триггер.
mceclip11.png

На этом настройка закончена. В Диспетчере тегов нажмите кнопку Отправить, чтобы применить все ваши изменения.

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

Дополнительную информацию о подключении Яндекс Метрики читайте здесь.

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

Google Analytics подключается аналогично Яндекс Метрике, только ещё проще. Вам нужно будет добавить аналитику через специальный тип тега. А в теге по отслеживанию кликов вместо кода метрики указать код цели в аналитике (предварительно создав её):

ga('send', 'event', 'TARGET_NAME');

Подробная документация доступна на сайте Google.