Сейчас в сети: 686
Сейчас в сети: 686
Учитесь работать в Google Analytics вместе с нами!
star_border

Отслеживаем взаимодействие с формами в Google Analytics, используя GTM

В этой статье я хотела бы детально рассмотреть работу с формами. С методами отслеживания успешной отправки форм мы уже познакомились в статье “Учимся работать в 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

 

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


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

Анастасия Тимошенко

Меня зовут Анастасия. Занимаюсь интернет-рекламой и веб-аналитикой в компании OdesSeo. Сертифицированный специалист по Google AdWords и Google Analytics. Всегда рада поделиться опытом и узнать что-то новое=)

Комментарии
a_timo_ Ведущий участник
июля 2016 - последнее изменение июля 2016

P. P. S. Пункт, посвященный отслеживанию загрузки файла не поместился в основной текст статьи, поэтому выношу его в комментарий.

 

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

 

formimg28

 

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

 

Код

 

 

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

 

 

formimg29

 

 

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

 

 

 

Настройки в GTM

 

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

 

formimg30

 

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

 

formimg31

 

Roman Klepikov
июля 2016

Огромное спасибо за столь подробную инструкцию по настройке!

a_timo_ Ведущий участник
июля 2016

Роман, спасибо за обратную связь! Очень рада, что материал полезен=)

Евгений К
сентября 2016

Большое спасибо, давно искал толковую статью именно на отслеживание действий с формой через GTM. Еще такой вопрос: можно ли через GTM отслеживать неуспешные нажатия на кнопку отправить (по причине неправильно заполненной формы), с детализацией до поля, в котором возникла проблема?

Сева М
октября 2016

добрый день.

А зачем вы передаете данные в события?

Не лучше ли сделать пользовательские параметры "Поле" и "значение" на уровне хита, и передавать данные в них вместе с cid и timestamp? событие при этом одно - заполнение поля.

a_timo_ Ведущий участник
октября 2016

Добрый день.

 

Я показываю способы отслеживания взаимодействия с элементами, а в каком виде это передавать в Google Analytics - это Ваш выбор. Мне было удобно проиллюстрировать свои методы на примере событий. Ваш способ также применим. Спасибо за дополнение!

Денис Б
декабря 2016

Настя!

Огромное вам свпасибо за столь подробную статью по настройке GTM. Очень давно искал подобное описание.

Еще раз большущее спасибо!

С наступающими Вас праздниками! Веселый

a_timo_ Ведущий участник
декабря 2016

@Денис Б, спасибо! Мне очень приятно=) И Вас с наступающим!

Michał S
февраля 2017

Скажите, а какой триггер использовался в настройках GTM для выпадающего списка?

a_timo_ Ведущий участник
февраля 2017

@Michał S, добрый день.

 

В моем примере триггером выступает отправка формы фильтрации, в состав которой входит выпадающий список.

Лена П
Март

Добрый день. так и не могу понять какой тригер использовать((

a_timo_ Ведущий участник
Март

@Лена П, расскажите, какой тег настраиваете.

Лена П
Март

@a_timo_ отслеживание выпадающего списка