22.10.2018

Отслеживание заполнения полей формы с помощью Google Analytics

Формы с большим количеством полей – это не круто! Имя, фамилия, e-mail, телефон, ссылка на сайт, капча… Сколько таких полей выдержит пользователь? На каком из них он остановится и покинет сайт? Как определить их оптимальное количество? В этой статье с помощью Google Analytics научимся строить визуализированные воронки и отслеживать заполнения полей форм.

Чтобы было нагляднее и понятнее, разбирать будем на примере данной формы:

Отслеживание заполнения полей формы с помощью Google Analytics

Форма с полями

Форма состоит из заполняемых полей:

  • Имя
  • Ссылка на сайт или мобильное приложение
  • E-mail
  • Телефон
  • Принять пользовательское соглашение (чекбокс)
 

После отправки пользователя перебрасывает на страницу «Спасибо», которая имеет URL страницы https://graphanalytics.ru/thank-you.html

Отслеживание заполнения полей формы с помощью Google Analytics

Страница «Спасибо»

А воронка, которую мы построим и увидим в Google Analytics, будет выглядеть так:

Отслеживание заполнения полей формы с помощью Google Analytics

Воронка заполнения полей формы

Отслеживать заполнение полей будем с помощью событий onblur и виртуальных страниц. Прочитать подробнее о событиях Google Analytics можно в этой статье.

Кратко:

  • событие onblur срабатывает тогда, когда идет переход фокуса от определенного элемента к другому.
 

Сущность этого действия заключается в утере фокуса. В нашем примере событие будет происходить тогда, когда пользователь введет информацию в первое поле «Имя», а потом перейдет к следующему «Сайт или мобильное приложение», введет данные в нем и перейдет к следующему «E-mail», и т.д. по полям. Когда будет переход фокус от одного поля к другому – будут срабатывать события.

На самом деле можно использовать два события на одном элементе, как onblur, так и противоположное onfocus. При такой конструкции события будут возникать и передаваться в GA по два раза — при получении фокуса в текстовом поле и при его потере.

  • виртуальные страницы нам нужны для того, чтобы визуализировать воронку, поскольку в Google Analytics это можно делать только с помощью классических целей. А чтобы это сделать для событий, необходимо использовать virtual page.
 

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

  • затем создаем составную цель из виртуальных страниц, а на последнем шаге указываем конечный URL нашей страницы «Спасибо».

Все, что теперь осталось – это добавить конструкции события c просмотром виртуальных страниц в код формы в зависимости от библиотеки Google Analytics. У меня сайт с analytics.js, поэтому < inрut > будет иметь вид:

<input class="form-control mclname" id="reg_lname" name="your_name" onblur="ga('send', 'pageview', '/virtualpage/name/');" placeholder="Имя" required="" type="text" />
 

, где pageview – событие просмотра страницы, а /virtualpage/name/ — это виртуальная страница для поля «Имя».

Аналогично для всех других полей:

Отслеживание заполнения полей формы с помощью Google Analytics

onblur и виртуальные страницы на все поля

Исключение составляет последний чекбокс «Принять пользовательское соглашение».

Отслеживание заполнения полей формы с помощью Google Analytics

Чекбокс

На него можно поставить событие onclick.

<input aria-required="true" class="form_checkbox" name="check_form" onclick="ga('send', 'pageview', '/virtualpage/checkboxclick/');" required="" type="checkbox" value="ok" />
 

Сохраняем изменения и загружаем их на сервер. Теперь нам необходимо создать составную цель.

Отслеживание заполнения полей формы с помощью Google Analytics

Составная цель

5 шагов последовательности (наши поля из формы) + последний завершающий шаг на странице «Спасибо», которая имеет URL — /thank-you.html.

Протестировать корректность передачи событий можно с помощью отчета «В режиме реального времени».

Отслеживание заполнения полей формы с помощью Google Analytics

В режиме реального времени

А результат в виде визуализированной воронки доступен в отчетах «Конверсии – Цели – Визуализация».

Отслеживание заполнения полей формы с помощью Google Analytics

Отслеживание заполнения полей формы

Благодаря данному способу вы легко сможете определить на каком из полей у вас есть «узкое место», где у пользователей возникают наибольшие затруднения, и оперативно внести правки.

От редакции. Советуем прочитать книги Якова Осипенкова «Google Analytics для googлят» и «Google Tag Manager для googлят». 

Оригинал статьи.

Если Вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter

Мнение редакции может не совпадать с мнением автора. Если у вас есть, что дополнить — будем рады вашим комментариям. Если вы хотите написать статью с вашей точкой зрения — прочитайте правила публикации на блоге WebPromoExperts.

Google Analytics, Веб-аналитика

Хотите стать автором?
Присылайте нам свои статьи!

Вопросы и комментарии:
Авторизуйтесь, чтобы оставлять комментарии

Рекомендуем курсы

Стоит посмотреть

Узнавайте обо всем первым!

Увага!

icon

Українська версія сайту знаходиться на стадії бета тестування.

Просимо вибачення за тимчасові незручності.

Зрозуміло Повернутися на російську версію