Чекбокс — незаменимый элемент для сайтов, где требуется регистрация пользователя, различные подтверждения (совершеннолетия, согласия на обработку персональных данных, подписки на новости и пр.), а также выбор каких-либо элементов, которые расширяют возможности использования сайта для конкретного посетителя.
В данной статье рассмотрим отслеживание отправки формы обратной связи с чекбоксом, так как клик по самому чекбоксу без дальнейших событий смысла не имеет.
Проверяем наличие 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/
Поделиться ссылкой:
