Просмотров: 6 518

Яндекс Метрика. Настройка цели на отправку формы.

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

Это может быть:

+ форма регистрации на сайте.

+ форма, которая запрашивает email или имя пользователя.

+ форма оформления заказа на сайте
+ и.т.д.

Заполнение формы на сайте — это очень важный конверсионный шаг посетителя, который частно нужно отслеживать с помощью систем веб-аналитики.

В этой статье, я бы хотел рассказать, как можно настроить передачу данных в Яндекс Метрику об отправке формы. Как можно настроить цель Яндекс Метрики на это событие.

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

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

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

Для всех сложных ситуаций, куда проще производить настройки с помощью Google Tag Manager.

Как это все можно там настроить, я рассказываю в своем курсе «Яндекс Метрика. Работа с целями.».

Итак, вернемся к нашему простому примеру.

Предположим на какой-то странице нашего сайта есть примерно вот такая веб-форма.

HTML-код:

<form action="#" method="post"> 
<input name="lead_name" type="text" placeholder="Введите ваше имя">
<input name="lead_email" type="text" placeholder="Введите ваш e-mail">
<input type="submit" value="Отправить">
</form>

Первым делом, в интерфейсе Яндекс Метрики, нам нужно будет создать новую Javascript цель для события отправки данных с данной формы.

Делается это в меню «Настройка — Цели — Добавить цель».

Создаем новую цель типа Javascript-событие и придумываем для нее идентификатор. Этот идентификатор нам понадобиться ниже. Пока скопируйте его.

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

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

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

Добавлять этот атрибут нужно к элементу form.

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

Действие, которое нужно выполнить, довольно простое: отправка данных о выполнении цели в систему Яндекс Метрика. Делается это с помощью метода reachGoal.

В итоге, HTML-код нашей формы примет следующий вид:

<form action="#" method="post" onSubmit="yaCounterXXXXXX.reachGoal("TARGET_NAME");"> 
<input name="lead_name" type="text" placeholder="Введите ваше имя">
<input name="lead_email" type="text" placeholder="Введите ваш e-mail">
<input type="submit" value="Отправить">
</form>

yaCounterXXXXXX — вместо XXXXXX необходимо указать идентификатор вашего счетчика. О том, как его узнать, можно почитать здесь.

TARGET_NAME — это идентификатор вашей цели, который вы скопировали выше из интерфейса Яндекс Метрики.

C помощью метода reachGoal происходит передача данных в Яндекс Метрику о том, что была выполнена та или иная цель.

Вот, собственно говоря, и вся настройка.

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

Попробуйте провести тестовую отправку формы и посмотреть в меню «Отчеты — Стандартные отчеты — Конверсии», что данная цель будет выполнена.