Отслеживание чекбоксов с помощью GTM

Октябрь 04, 2019

Согласны ли вы с пользовательским соглашением? Отметьте галочкой правильный ответ. Отправляя форму, вы соглашаетесь получать электронные письма с новостями нашей компании. Как правило, все эти сценарии реализуются с помощью флажка, галочки, или как его чаще всего называют, чекбоксом (checkbox), который пользователь ставит перед отправкой данных. Сегодня мы научимся отслеживать их с помощью Google Tag Manager.

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

Отслеживание чекбоксов с помощью GTM

Пример отслеживания

По сути, у такого элемента есть два состояния:

  1. галочка стоит (true);
  2. галочка не стоит (false).

Третьего не дано. Отслеживается достаточно просто. В Google Tag Manager создадим пользовательскую переменную типа Собственный код JavaScript, в которую вставим этот кусок кода:

В GTM это выглядит так:

Отслеживание чекбоксов с помощью GTM

Переменная типа «Собственный код JavaScript»

Вместо #checker вы подставляете значение собственного идентификатора элемента. Чтобы его найти, перейдите в консоль разработчика (клавиша F12 в Google Chrome) и выделите тот элемент, который хотите отслеживать. В моем случае чекбокс имеет id = ‘checker’:

Отслеживание чекбоксов с помощью GTM

Идентификатор (id) элемента — checker

Это и есть идентификатор элемента. Аналогично работает код, который описан в статье Симо Ахава (Simo Ahava):

Если у вашего элемента нет идентификатора, то вы можете скопировать его CSS-селектор и вставить в тоже место.

Отслеживание чекбоксов с помощью GTM

Копирование CSS-селектора

В моем примере я получаю код такого вида:

Что делают эти коды? Функционал одинаковый – если чекбокс стоит (галочка есть), то в переменную возвращается значение true, если не стоит, то false.

Сохраняем пользовательскую переменную. Теперь нам необходимо создать триггер активации, который срабатывал бы только в том случае, когда чекбокс стоит, то есть принимало значение true. Поскольку галочку пользователь ставит с помощью клика мыши, то создаем триггер типа Клик – Все элементы.

Выбираем условие активации триггера – Некоторые клики и активируем при условии checkbox – содержит (или равно) – true

Отслеживание чекбоксов с помощью GTM

Условие активации триггера

Триггер будет срабатывать только тогда, когда наша пользовательская переменная будет иметь значение true, а true у нас когда чекбокс с галочкой. Здесь могут разные условие. Например, у вас несколько форм и каждая из них срабатывает на отдельной странице. Тогда в качестве дополнительного условия вы можете задать {{Page URL}} содержит Страница и т.д. У меня в примере форма одна, поэтому я просто сохраняю триггер.

Осталось создать тег, который будет передавать эту информацию в системы аналитики. Тег типа Google Аналитика — Universal Analytics со следующими настройками:

  • Тип отслеживания – Событие
  • Категория – checkbox (произвольно)
  • Действие – active (произвольное)
  • Триггер активации – см. предыдущий шаг
Отслеживание чекбоксов с помощью GTM

Тег Google Аналитика — Universal Analytics с типом Событие

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

Отслеживание чекбоксов с помощью GTM

Активация тега

Данные по событию можно посмотреть в Google Analytics в режиме реального времени:

Отслеживание чекбоксов с помощью GTM

Отчет «В режиме реального времени»

Все события доступны в отчете Поведение — События — Лучшие события.

Как еще можно проверить, что чекбокс принимает значения true или false?

Открываем консоль разработчика, вкладку Console и вставляем следующий код:

вместо #popup-audit > div > form > div:nth-child(6) > input[type=checkbox] необходимо вставить свой CSS-селектор.

Отслеживание чекбоксов с помощью GTM

Проверка, false (чекбокс не установлен)

Галочки нет, нам вернулось значение false. Чекбокс активен, значение true:

Отслеживание чекбоксов с помощью GTM

Проверка, true (чекбокс установлен)

Есть и другие варианты отслеживания активации чекбоксов в Google Tag Manager. И с помощью querySelector(), и getElementsByTagName по n-ому элементу, и через свойства элемента DOM (previousSibling.innerText || previousSibling.textContent). Симо Ахава в своей статье разбирает данные примеры и приводит плюсы и минусы таких подходов. На мой взгляд, самый оптимальный способ отслеживания тот, который описан в этой статье. 1 переменная, 1 триггер и 1 тег. А код, который вы будете использовать в качестве своего решения, выбирать только вам.

Понравилась статья? Поставьте оценку 👉

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике