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

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

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

Для отслеживания целей вам понадобится аккаунт в Яндекс Метрике / 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.