взаимодействие с формами

Отслеживание взаимодействий с формами в GA

 

В этой статье я хотела бы детально рассмотреть работу с формами. С методами отслеживания успешной отправки форм мы уже познакомились в статье «Учимся работать в GTM». Сегодня остановимся подробнее на способах отслеживания взаимодействия с наиболее популярными элементами форм.

Итак, рассмотрим следующие элементы форм.

Drop-down list (выпадающий список)

1

Для сбора данных о выбираемых значениях выпадающего списка можно воспользоваться следующим кодом.

Код

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” (в селекторе заключается в квадратные скобки с указанием значения);
  • при помощи названия класса (в селекторе перед названием класса ставится символ “.”);
  • при помощи идентификатора (в селекторе перед идентификатором ставится символ “#”).

Следует выбирать тот способ, который позволит однозначно идентифицировать нужный элемент. Так как на веб-странице, к примеру, может быть несколько выпадающих списков с одинаковым классом, тогда в данном случае выбирать название класса в качестве селектора неверно.

Для использования того или иного способа определения элемента нужно будет изменить только одну строку кода. Рассмотрим, как изменится код, в зависимости от выбранного способа:

formimg2

Чтобы обратиться к выпадающему списку выбора региона на скриншоте выше при помощи атрибута “name” в третьей строке кода пишем значение name=id_state в квадратных скобках:

var dSelector = '[name=id_state]';

Чтобы обратиться к выпадающему списку по названию класса в третьей строке кода переменной dSelector присваиваем значение .ok_field:

var dSelector = '.ok_field';

Для обращения по идентификатору в третьей строке кода переменной dSelector присваиваем значение:

var dSelector = '#id_state1';

В качестве примера рассмотрим выпадающий список брендов на сайте продажи женских аксессуаров.

formimg3

Для того, чтобы идентифицировать этот выпадающий список, в третьей строке кода укажем атрибут “name” и соответствующее значение имени. В данном случае name=bfp_a15, то есть нам нужно заменить “element_name” на “bfp_a15”:

var dSelector = '[name=bfp_a15]';

Настройки в GTM

В интерфейсе Google Tag Manager cоздаем переменную типа “Собственный код JavaScript” и копируем приведенный выше код в текстовое поле, предварительно заменив третью строку на “var dSelector = ‘[name=bfp_a15]’;”.

formimg4

Далее переменную “Выпадающий список. Значения брендов” используем как нам кажется целесообразным. Например, создадим тег отправки события в аналитику при использовании фильтров товаров и в качестве действия добавим эту переменную.

formimg5

Тогда в отчетах аналитики можно увидеть, какой из брендов выбирают чаще при использовании фильтров:

formimg6

Radiobutton (зависимый переключатель)

formimg7

Чтобы собирать данные о выбираемых значениях зависимого переключателя используем следующий код.

Код

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”.

formimg8

Настройки в GTM

Создаем переменную типа “Собственный код JavaScript”. В текстовое поле копируем приведенный выше код.

Учитывая, что в рассматриваемом примере name=”id_carrier”, третья строка кода будет иметь вид:

var rSelector = '[name=id_carrier]';
formimg9

Данный код возвращает параметр value. В рассматриваемом мной примере, да и в большинстве случаев, с которыми я сталкивалась, значение value является абсолютно неинформативным (в примере при выборе пользователем переключателя “Самовывоз со склада” value будет “1300”).

formimg10

Для того, чтобы вместо непонятного “1300” видеть в отчете соответствующее ему значение “Самовывоз со склада”, можем воспользоваться вспомогательной переменной типа “Таблица поиска”.

Создаем переменную типа “Таблица поиска”. Входной будет переменная {{Radiobutton}}. В строках входных данных перечисляем значения value, а в результирующих строках указываем соответствующие значения.

formimg11

Далее, чтобы показать на примере, как это может выглядеть в интерфейсе аналитики, я создаю тег отправки события в аналитику при успешном оформлении заказа и в качестве действия добавляю переменную {{Radiobutton — значения}}. Также для передачи данных может быть удобно использовать пользовательские параметры.

formimg12

Данные в Google Analytics будут выглядеть следующим образом:

formimg13

Сheckbox (независимый переключатель)

Выделим два вида независимых переключателей: одиночный чекбокс и группа чекбоксов.

Одиночный чекбокс

formimg14

Для отслеживания взаимодействия с одиночным чекбоксом можно использовать код:

Код

function() 
{
  var chSelector = '[name=element_name]';
  var checkbox = document.querySelector(chSelector);
  return checkbox.checked ? 'on' : 'off';
}

Рассмотрим пример — фильтры на сайте продажи недвижимости. Для того, что разделить всех посетителей сайта, использующих фильтры, на тех, кто ищет только объекты с фото, и тех, для кого наличие фото не обязательно, воспользуемся приведенным выше кодом.

formimg15

Настройки в GTM

Как и ранее, создаем переменную типа “Собственный код JavaScript” и копируем код в текстовое поле, предварительно заменив третью строку кода на

var chSelector = '[name=only_with_photos]';
formimg16

Создаем тег отправки события в аналитику при использовании фильтров и в качестве действия добавляем эту переменную.

formimg17

Данные в интерфейсе Google Analytics:

formimg18

Группа чекбоксов

formimg19

Для отслеживания выбора определенных вариантов из списка чекбоксов можно воспользоваться следующим кодом:

Код

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”.

formimg20

Этот код возвращает параметр value. В данном случае, при выборе варианта “1 комната” value=»1″, при выборе “2 комнаты” value=»2″ и т. д. В зависимости от реализации группы чек-боксов вы можете обращаться к наиболее информативным для вас атрибутам элемента. В рассматриваемом примере также удобно обратиться к атрибуту «title». Для этого поменяем строку

checkboxesList.push(checkboxes[i].value);

которая возвращает value, на checkboxesList.push(checkboxes[i].title);

Настройки в GTM

Добавим новую переменную типа “Собственный код JavaScript” и добавим в поле ввода приведенный выше код.

formimg21

Далее создаем тег отправки данных в аналитику по аналогии с тегом в предыдущих пунктах и получаем возможность видеть статистику в Google Analytics.

formimg22

Textbox (Текстовое поле)

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

Код

function() {
  var textboxSelector = "[name=element_name]";
  var textbox = document.querySelector(textboxSelector);
  return textbox.value;
}

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

formimg23

ВАЖНО: Сразу хочу обратить внимание читателей на то, что запрещено передавать в Google Analytics информацию, которая позволяет идентифицировать пользователя. В частности, нельзя передавать данные об имени, номере телефона, адресе электронной почты, платежных реквизитах и т. д.

Для определения текстового поля в коде воспользуемся его атрибутом “name”. Для поля “Улица” name=”street”.

formimg24

Настройки в GTM

Создаем переменную типа “Собственный код JavaScript” и копируем код в текстовое поле.

formimg25

Создаем тег отправки события в аналитику при использовании фильтров и в качестве действия добавляем переменную {{Текстовое поле — Значения}}.

formimg26

Дополнение стандартных отчетов такими данными позволит получить представление о частоте, с которой пользователи выбирают определенные значения в фильтрах. На базе такой статистики можно, например, создавать персонализированные сценарии ремаркетинга.

formimg27

Поле выбора файла

formimg28

Чтобы отследить факт загрузки документа в поле выбора файла используем следующий код.

Код

function() 
{
	var fileSelector = '[name=element_name]';
  	var file = document.querySelector(fileSelector);
  	return file.value == ''?"no":"yes";
}

Определим нужный элемент по идентификатору id=»input_4_8″.

formimg29

Тогда третья строка кода будет иметь вид:

var fileSelector = '#input_4_8';

Настройки в GTM

Создаем переменную типа “Собственный код JavaScript” с приведенным выше кодом.

formimg30

По аналогии с предыдущими пунктами с помощью тега отправки событий, собираем данные в Google Analytics.

formimg31

Спасибо за внимание! Надеюсь, что материал был полезен для вас=)

P.S. Если у вас есть вопросы по отслеживанию каких-то других элементов форм, пишите в комментариях. Наиболее частые вопросы постараюсь рассмотреть в следующем посте.