Отслеживание взаимодействий с формами в GA
В этой статье я хотела бы детально рассмотреть работу с формами. С методами отслеживания успешной отправки форм мы уже познакомились в статье «Учимся работать в GTM». Сегодня остановимся подробнее на способах отслеживания взаимодействия с наиболее популярными элементами форм.
Итак, рассмотрим следующие элементы форм.
Drop-down list (выпадающий список)
Для сбора данных о выбираемых значениях выпадающего списка можно воспользоваться следующим кодом.
Код
function()
{
var dSelector = '[name=element_name]';
var dOptions = document.querySelectorAll(dSelector+' option');
for(var i = 0; i < dOptions.length; i++)
if(dOptions[i].selected)
return dOptions[i].innerHTML;
}
Конкретный элемент типа “выпадающий список”, а также любой из рассматриваемых далее, можно определить несколькими способами, например:
- при помощи атрибута “name” (в селекторе заключается в квадратные скобки с указанием значения);
- при помощи названия класса (в селекторе перед названием класса ставится символ “.”);
- при помощи идентификатора (в селекторе перед идентификатором ставится символ “#”).
Следует выбирать тот способ, который позволит однозначно идентифицировать нужный элемент. Так как на веб-странице, к примеру, может быть несколько выпадающих списков с одинаковым классом, тогда в данном случае выбирать название класса в качестве селектора неверно.
Для использования того или иного способа определения элемента нужно будет изменить только одну строку кода. Рассмотрим, как изменится код, в зависимости от выбранного способа:
Чтобы обратиться к выпадающему списку выбора региона на скриншоте выше при помощи атрибута “name” в третьей строке кода пишем значение name=id_state в квадратных скобках:
var dSelector = '[name=id_state]';
Чтобы обратиться к выпадающему списку по названию класса в третьей строке кода переменной dSelector присваиваем значение .ok_field:
var dSelector = '.ok_field';
Для обращения по идентификатору в третьей строке кода переменной dSelector присваиваем значение:
var dSelector = '#id_state1';
В качестве примера рассмотрим выпадающий список брендов на сайте продажи женских аксессуаров.
Для того, чтобы идентифицировать этот выпадающий список, в третьей строке кода укажем атрибут “name” и соответствующее значение имени. В данном случае name=bfp_a15, то есть нам нужно заменить “element_name” на “bfp_a15”:
var dSelector = '[name=bfp_a15]';
Настройки в GTM
В интерфейсе Google Tag Manager cоздаем переменную типа “Собственный код JavaScript” и копируем приведенный выше код в текстовое поле, предварительно заменив третью строку на “var dSelector = ‘[name=bfp_a15]’;”.
Далее переменную “Выпадающий список. Значения брендов” используем как нам кажется целесообразным. Например, создадим тег отправки события в аналитику при использовании фильтров товаров и в качестве действия добавим эту переменную.
Тогда в отчетах аналитики можно увидеть, какой из брендов выбирают чаще при использовании фильтров:
Radiobutton (зависимый переключатель)
Чтобы собирать данные о выбираемых значениях зависимого переключателя используем следующий код.
Код
function()
{
var rSelector = '[name=element_name]';
var radioButtons = document.querySelectorAll(rSelector);
for (var i = 0; i < radioButtons.length; i++)
if (radioButtons[i].checked)
return radioButtons[i].value;
}
Для радиобатона также справедливы все методы определения элемента, описанные в блоке, посвященном отслеживанию взаимодействия с выпадающими списками.
Если в качестве примера рассмотреть выбор способа доставки, то этот список переключателей легко идентифицировать по атрибуту “name”: name=”id_carrier”.
Настройки в GTM
Создаем переменную типа “Собственный код JavaScript”. В текстовое поле копируем приведенный выше код.
Учитывая, что в рассматриваемом примере name=”id_carrier”, третья строка кода будет иметь вид:
var rSelector = '[name=id_carrier]';
Данный код возвращает параметр value. В рассматриваемом мной примере, да и в большинстве случаев, с которыми я сталкивалась, значение value является абсолютно неинформативным (в примере при выборе пользователем переключателя “Самовывоз со склада” value будет “1300”).
Для того, чтобы вместо непонятного “1300” видеть в отчете соответствующее ему значение “Самовывоз со склада”, можем воспользоваться вспомогательной переменной типа “Таблица поиска”.
Создаем переменную типа “Таблица поиска”. Входной будет переменная {{Radiobutton}}. В строках входных данных перечисляем значения value, а в результирующих строках указываем соответствующие значения.
Далее, чтобы показать на примере, как это может выглядеть в интерфейсе аналитики, я создаю тег отправки события в аналитику при успешном оформлении заказа и в качестве действия добавляю переменную {{Radiobutton — значения}}. Также для передачи данных может быть удобно использовать пользовательские параметры.
Данные в Google Analytics будут выглядеть следующим образом:
Сheckbox (независимый переключатель)
Выделим два вида независимых переключателей: одиночный чекбокс и группа чекбоксов.
Одиночный чекбокс
Для отслеживания взаимодействия с одиночным чекбоксом можно использовать код:
Код
function()
{
var chSelector = '[name=element_name]';
var checkbox = document.querySelector(chSelector);
return checkbox.checked ? 'on' : 'off';
}
Рассмотрим пример — фильтры на сайте продажи недвижимости. Для того, что разделить всех посетителей сайта, использующих фильтры, на тех, кто ищет только объекты с фото, и тех, для кого наличие фото не обязательно, воспользуемся приведенным выше кодом.
Настройки в GTM
Как и ранее, создаем переменную типа “Собственный код JavaScript” и копируем код в текстовое поле, предварительно заменив третью строку кода на
var chSelector = '[name=only_with_photos]';
Создаем тег отправки события в аналитику при использовании фильтров и в качестве действия добавляем эту переменную.
Данные в интерфейсе Google Analytics:
Группа чекбоксов
Для отслеживания выбора определенных вариантов из списка чекбоксов можно воспользоваться следующим кодом:
Код
function()
{
var chSelector = '[name=element_name]';
var checkboxes = document.querySelectorAll(chSelector);
checkboxesList = [];
for (var i = 0; i < checkboxes.length; i++)
if (checkboxes[i].checked)
checkboxesList.push(checkboxes[i].value);
stringValues = checkboxesList.join(', ');
return stringValues;
}
Как пример приведу выбор количества комнат объекта на том же сайте продажи недвижимости.
Для определения группы чекбоксов воспользуемся атрибутом name. name=”multiselect_0”.
Этот код возвращает параметр value. В данном случае, при выборе варианта “1 комната” value=»1″, при выборе “2 комнаты” value=»2″ и т. д. В зависимости от реализации группы чек-боксов вы можете обращаться к наиболее информативным для вас атрибутам элемента. В рассматриваемом примере также удобно обратиться к атрибуту «title». Для этого поменяем строку
checkboxesList.push(checkboxes[i].value);
которая возвращает value, на checkboxesList.push(checkboxes[i].title);
Настройки в GTM
Добавим новую переменную типа “Собственный код JavaScript” и добавим в поле ввода приведенный выше код.
Далее создаем тег отправки данных в аналитику по аналогии с тегом в предыдущих пунктах и получаем возможность видеть статистику в Google Analytics.
Textbox (Текстовое поле)
В случае возникновения необходимости получать данные о том, что пользователи вводят в текстовых полях, можно воспользоваться следующим кодом.
Код
function() {
var textboxSelector = "[name=element_name]";
var textbox = document.querySelector(textboxSelector);
return textbox.value;
}
В качестве примера рассмотрим фильтры на сайте продажи недвижимости и передачу в аналитику данных о параметрах выбора квартиры (например, улица).
ВАЖНО: Сразу хочу обратить внимание читателей на то, что запрещено передавать в Google Analytics информацию, которая позволяет идентифицировать пользователя. В частности, нельзя передавать данные об имени, номере телефона, адресе электронной почты, платежных реквизитах и т. д.
Для определения текстового поля в коде воспользуемся его атрибутом “name”. Для поля “Улица” name=”street”.
Настройки в GTM
Создаем переменную типа “Собственный код JavaScript” и копируем код в текстовое поле.
Создаем тег отправки события в аналитику при использовании фильтров и в качестве действия добавляем переменную {{Текстовое поле — Значения}}.
Дополнение стандартных отчетов такими данными позволит получить представление о частоте, с которой пользователи выбирают определенные значения в фильтрах. На базе такой статистики можно, например, создавать персонализированные сценарии ремаркетинга.
Поле выбора файла
Чтобы отследить факт загрузки документа в поле выбора файла используем следующий код.
Код
function()
{
var fileSelector = '[name=element_name]';
var file = document.querySelector(fileSelector);
return file.value == ''?"no":"yes";
}
Определим нужный элемент по идентификатору id=»input_4_8″.
Тогда третья строка кода будет иметь вид:
var fileSelector = '#input_4_8';
Настройки в GTM
Создаем переменную типа “Собственный код JavaScript” с приведенным выше кодом.
По аналогии с предыдущими пунктами с помощью тега отправки событий, собираем данные в Google Analytics.
Спасибо за внимание! Надеюсь, что материал был полезен для вас=)
P.S. Если у вас есть вопросы по отслеживанию каких-то других элементов форм, пишите в комментариях. Наиболее частые вопросы постараюсь рассмотреть в следующем посте.
Спасибо, и в 2022 году ваша статья не потеряла актуальность и очень пригодилась!!
В этом скрипте:
function()
{
var dSelector = ‘[name=element_name]’;
var dOptions = document.querySelectorAll(dSelector+’ option’);
for(var i = 0; i < dOptions.length; i++)
if(dOptions[i].selected)
return dOptions[i].innerHTML;
}
при попытке Предварительного просмотра или Публикации происходит следующая ошибка компиляции: «Ошибка в строке 6, символ 38. Parse error. ‘)’ expected»
Добрый день. Я не вижу ошибки в коде, и у меня все работает. Убедитесь, что после фигурной скобки в редакторе ничего нет.
Добрый день!Настроил событие на взаимодействие с чекбоксами. Но в режиме реально времени показывает след. информацию — http://prntscr.com/cuybyp
Т.е. Действие по событию — undefined. Подскажите, в чем может быть проблема? Тег активирую кликом по элементу. Спасибо за помощь.
Здравствуйте, у меня не хватает опыта решить следующую задачу:
Имеется 4 блока одного класса, у этих есть id. В этих блоках есть содержимое с разными классами, но без id. В GA через GTM передаю клик по ним пользуясь конструкцией триггера: Click Element -> соответствует селектору CSS -> .class * Т.е. gtm понимает клики непосредственно на элементе и не работает, если задан клик по родителю. В такой ситуации нужно передавать id родительского блока как ярлык события. Каким образом это можно реализовать?
почему то код не отобразился в сообщении, может вот так получится: //
//
Shinglas
и
//
//
Анастасия, еще вопрос — если у меня есть чекбоксы на разных страницах сайта, например,
Shinglas
и
HC35
как можно отследить их с помощью одного тега? Что нужно указать в скрипте?
Анастасия, спасибо за статью. Можете пояснить — какой триггер запускает тег для отслеживания чекбоксов?
Татьяна, спасибо за обратную связь! В качестве триггера можно использовать событие отправки формы.
не «данные», а «знания», опечатка)
Спасибо за статью.
А где лучше всего почерпнуть данные по javascript? Чтобы не просто копировать предоставленные вами коды, а и самому уметь их редактировать)
Виталий, спасибо за обратную связь=)
Посмотрите книги по основам, например эту https://learn.javascript.ru/
Про jquery тут хорошо написано https://www.kobzarev.com/wp-content/uploads/books/jquery/jQuery-tutorial-for-beginners-1.0.0beta.pdf
Удачи!)
Спасибо! Будем качать скилл)