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

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

Обратите внимание! Отслеживание технически невозможно, если форма поиска вставлена на страницу с помощью iframe-кода. Используйте компактный или полный код формы для вставки.

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

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

Создайте аккаунт в Яндекс Метрике. Код счётчика пока не трогайте, он нам понадобится позже.

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

mceclip0.png

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

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

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

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

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

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

mceclip1.png

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

mceclip2.png

Теперь можно продолжать настройку.

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

mceclip3.png

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

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

mceclip4.png

Теперь нам нужно создать триггер. Перейдите в раздел Триггеры и нажмите Создать.

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

В появившемся блоке выберите вашу переменную и укажите, что она «содержит» следующий код: mewtwo-flights-submit_button mewtwo-flights-submit_button-new.

mceclip6.png

Теперь нам осталось добавить два тега и всё начнёт считаться.

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

mceclip7.png

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

mceclip10.png

Сохраните тег и создайте ещё один.

Вновь выберите тип Пользовательский HTML и в открывшийся блок HTML добавьте код вида:

<script type="text/javascript">
ym(ХХХХХХХХ,'reachGoal','CLICKBTN')
</script>

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

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

mceclip11.png

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

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

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

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

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

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

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

Была ли эта статья полезной?

Еще есть вопросы? Отправить запрос