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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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