Инструкция для настройки отслеживание кликов в форме с помощью Яндекс Метрики или Google Analytics.
В этой статье содержится информация о том, как настроить отслеживание кликов по кнопке Найти в форме поиска авиабилетов и отелей с помощью Яндекс Метрики или Google Analytics.
Обратите внимание! Отслеживание технически невозможно, если форма поиска вставлена на страницу с помощью iframe-кода. Используйте компактный или полный код формы для вставки.
Для отслеживания целей вам понадобится аккаунт в Яндекс Метрике / Гугл Аналитике и Google Tag Manager.
Создание цели в Яндекс Метрике
Создайте аккаунт в Яндекс Метрике. Код счётчика пока не трогайте, он нам понадобится позже.
Перейдите в раздел Цели и создайте новую цель с типом JavaScript-событие.
В поле Идентификатор цели укажите идентификатор, по которому Метрика будет считать события. В нашем примере это CLICKBTN. Нажмите Добавить цель.
Тут мы пока закончили, но не закрывайте вкладку с Яндекс Метрикой, мы к ней ещё вернёмся.
Настройка Google Tag Manager
Авторизуйтесь в Google Tag Manager (Диспетчер тегов) и создайте новый аккаунт и контейнер (мы не будем останавливаться на этом процессе, так как он подробно расписан в других статьях в интернете и не должен вызвать проблем).
Добавьте код Google Tag Manager к себе на сайт. Если у вас сайт на WordPress, используйте один из плагинов (например, этот).
Чтобы проверить, что код добавлен корректно, нажмите кнопку Предварительный просмотр в Диспетчере тегов.
В новом окне откроется форма, в которой нужно будет ввести адрес вашего сайта. Если всё было настроено правильно, то ещё в одном окне откроется сам сайт с небольшим блоком, подтверждающем корректность подключения. Если возникли проблемы, внимательно проверьте, что вы всё добавили и сохранили.
Теперь можно продолжать настройку.
Для начала, создайте новую переменную. Для этого в Диспетчере тегов перейдите в раздел Переменные и нажмите кнопку Создать в блоке Пользовательские переменные.
В открывшемся окне нажмите на поле Конфигурация переменной и выберите тип переменной Переменная уровня данных (Data Layer Variable).
В поле Имя переменной уровня данных введите gtm.element.parentElement.className. Это нужно, чтобы отслеживать клики по определённой кнопке. В блоке Версия уровня данных выберите Версия 2. Сохраните переменную.
Теперь нам нужно создать триггер. Перейдите в раздел Триггеры и нажмите Создать.
Задайте имя триггера и в его настройках выберите тип Клик — Все элементы. В условиях активации триггера выберите Некоторые клики.
В появившемся блоке выберите вашу переменную и укажите, что она «содержит» следующий код: mewtwo-flights-submit_button mewtwo-flights-submit_button-new.
Теперь нам осталось добавить два тега и всё начнёт считаться.
Перейдите в раздел Теги и нажмите Создать. Задайте имя тега и в конфигураторе выберите Пользовательский HTML.
В блок HTML добавьте код Яндекс Метрики, а в блоке Триггеры выберите Все страницы (All pages):
Сохраните тег и создайте ещё один.
Вновь выберите тип Пользовательский HTML и в открывшийся блок HTML добавьте код вида:
<script type="text/javascript">
ym(ХХХХХХХХ,'reachGoal','CLICKBTN')
</script>
где ym(ХХХХХХХХ,'reachGoal','CLICKBTN') — код вашей цели из Яндекс Метрики.
В блоке Триггеры выберите созданный вами ранее триггер.
На этом настройка закончена. В Диспетчере тегов нажмите кнопку Отправить, чтобы применить все ваши изменения.
Обратите внимание, что данные по целям приходят в Метрику с задержкой примерно в 30 минут. Но вы можете проверить корректность работы Метрики и целей, с помощью отладчика.
Дополнительную информацию о подключении Яндекс Метрики читайте здесь.
Добавление целей Google Analytics
Google Analytics подключается аналогично Яндекс Метрике, только ещё проще. Вам нужно будет добавить аналитику через специальный тип тега. А в теге по отслеживанию кликов вместо кода метрики указать код цели в аналитике (предварительно создав её):
ga('send', 'event', 'TARGET_NAME');
Подробная документация доступна на сайте Google.