Настройка отслеживания чекбоксов в формах в Яндекс Метрике и Google Аналитике с помощью GTM

Чекбокс – незаменимый элемент для сайтов, где требуется регистрация пользователя, различные подтверждения (совершеннолетия, согласия на обработку персональных данных, подписки на новости и пр.), а также выбор каких-либо элементов, которые расширяют возможности использования сайта для конкретного посетителя.

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

Проверяем наличие GTM в коде страниц сайта. Если его ещё нет, установите.

Для начала необходимо исследовать код формы и самого чекбокса.

Из данного скриншота выбираем и выписываем полезные для себя данные, которые нам понадобится для настроек триггера в GTM:

  • id – ptichka – чекбокс
  • class – feedback btn btn-block btn-large btn-success – кнопка отправки сообщения

Затем переходим в ГТМ в Переменные и создадим переменную с типом Собственный код JavaScript для чекбокса, которая проинформирует, установлена ли галочка на чекбоксе. Назовём её Form Checkbox.

Пропишем в ней код:

function() {
 var checkbox = document.getElementById("ptichka");
 return checkbox.checked || false;
}

Переходим в Триггеры и создадим триггер для формы типа Клик – Все элементы. Назовём его Form Checkbox.

В условиях активации триггера выбираем Некоторые клики и зададим следующие условия:

Form Checkboxне равноfalse
Click Classesсодержитfeedback

Далее переходим в Теги и создадим тег типа Google Аналитика – Universal Analytics для отправки события в Google Analytics. Назовём его Form Checkbox – GA и зададим ему следующие параметры:

  • Тип отслеживания: Событие
  • Категория: Form Checkbox
  • Действие: Checkbox Tracking
  • Ярлык: Ptichka
  • Настройки Google Analytics: {{Google Analytics}}

и привяжем к нему триггер Form Checkbox.

Сохраняем.

После этого создадим тег типа Пользовательский HTML и назовём его Form Checkbox – YM

В конфигурации тега пропишем скрипт для отправки цели в Яндекс Метрику

<script>
  yaCounterXXXXXXXX.reachGoal('form-checkbox');
</script>

и привяжем к нему триггер Form Checkbox

XXXXXXXX – это id счётчика Метрики

Сохраняем.

Отправляем изменения GTM для активации.

Переходим в Яндекс Метрику в Настройки – Цели. Добавим цель типа JavaScript-событие с идентификатором form-checkbox

Цель появится в списке

Через некоторое время в отчётах появятся данные.

В Яндекс Метрике переходим в Отчёты – Стандартные отчёты – Конверсии и видим появившиеся там данные

В Google Аналитике переходим в Отчёты – Поведение – События – Лучшие события и также видим данные

Если есть необходимость – создаём цель. Для этого переходим в пункт Администратор, в колонке Представление выбираем Цели и добавляем цель:

  • В Установке цели выбираем Собственная
  • В Описании цели задаём название, например Форма с чекбоксом и выбираем тип Событие
  • В Подбробных сведениях задаём Категорию цели Form Checkbox, Действие Checkbox Tracking и Ярлык Ptichka

Сохраняем.

Готово!

P.S.: скрипт был взят отсюда: https://osipenkov.ru/checkbox-gtm/

Поделиться ссылкой: