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

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

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

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

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

1

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

Код

Конкретный элемент типа “выпадающий список”, а также любой из рассматриваемых далее, можно определить несколькими способами, например:

  • при помощи атрибута “name” (в селекторе заключается в квадратные скобки с указанием значения);
  • при помощи названия класса (в селекторе перед названием класса ставится символ “.”);
  • при помощи идентификатора (в селекторе перед идентификатором ставится символ “#”).

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

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

formimg2

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

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

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

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

formimg3

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

Настройки в GTM

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

formimg4

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

formimg5

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

formimg6

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

formimg7

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

Код

Для радиобатона также справедливы все методы определения элемента, описанные в блоке, посвященном отслеживанию взаимодействия с выпадающими списками.

Если в качестве примера рассмотреть выбор способа доставки, то этот список переключателей легко идентифицировать по атрибуту “name”: name=”id_carrier”.

formimg8

Настройки в GTM

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

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

formimg9

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

formimg10

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

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

formimg11

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

formimg12

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

formimg13

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

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

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

formimg14

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

Код

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

formimg15

Настройки в GTM

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

formimg16

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

formimg17

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

formimg18

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

formimg19

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

Код

Как пример приведу выбор количества комнат объекта на том же сайте продажи недвижимости.

Для определения группы чекбоксов воспользуемся атрибутом name. name=”multiselect_0”.

formimg20

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

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

Настройки в GTM

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

formimg21

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

formimg22

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

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

Код

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

formimg23

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

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

formimg24

Настройки в GTM

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

formimg25

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

formimg26

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

formimg27

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

formimg28

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

Код

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

formimg29

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

Настройки в GTM

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

formimg30

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

formimg31

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

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