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

Отслеживание взаимодействий с формами в 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. Если у вас есть вопросы по отслеживанию каких-то других элементов форм, пишите в комментариях. Наиболее частые вопросы постараюсь рассмотреть в следующем посте.