Друзья, привет.

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

Вот код, кому нужно быстрое решение. То, что нужно вставить, выделено полужирным.

<form action="#" method="post" onSubmit="ym('XXXXXX','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 - это идентификатор вашей цели, который вы скопировали выше из интерфейса Яндекс Метрики.

НО, есть масса ситуаций, где это работать не будет. 

Кому интересно, читайте и смотрите ниже.

Услуга настройки веб-аналитики
Обучающий курс

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

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

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

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

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

+ и.т.д.

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

В этой заметке мы рассмотрим основные этапы и особенность настройки целей на отправку форм. 

Важно! Прежде чем начать.

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

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

В общем, ситуаций может быть масса.

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

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

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

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

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

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

Отсюда, главная проблема: мы не можем назначить срабатывание цели при нажатии на кнопку "Отправить" форму. Клик по этой кнопке не означает, что форма была успешно отправлена, т.к. кликая по этой кнопке данные пользователем могли быть введены не все или не правильно и срабатывание цели в таком случае не должна происходить. 

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

1 случай. У формы нет валидации данных.

Это самая простая ситуация. Если у вас есть доступ к исходному HTML-коду формы, достаточно просто добавить к элементу формы один HTML-атрибут.

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

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.

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

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

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

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

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

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

<form action="#" method="post" onSubmit="ym('XXXXXX','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 - это идентификатор вашей цели, который вы скопировали выше из интерфейса Яндекс Метрики.

Если у вас нет доступа к исходному HTML коду формы, в этом случае вам может помочь Google Tag Manager и триггер на отслеживание отправки форм. 


2 случай. У формы есть валидация данных, но она реализована средствами Javascript или HTML5.

Если у формы есть валидация данных, которая реализована на стороне клиента (браузера) средствами Javascript, у нас есть 2 варианта:

1) Написать специальный скрипт на языке Javascript, который будет следить за всеми реальными отправками форм, которые прошли валидацию и отправлять событие достижения цели только при успешной отправки формы.

2) Воспользоваться Google Tag Manager и триггером на отслеживание успешной отправки форм. Этот вариант намного более простой и гибкий и не требует от вас знаний языков веб-программирования.

3 случай. У формы есть серверная валидация данных.

Если у формы проверяется правильность заполнения полей на стороне сервера - это самый сложный случай в отслеживании отправки таких форм. Проблема в том, что Javascript и Google Tag Manager не могут контролировать процессы, которые происходят на стороне сервера. У них нет туда доступа. 

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

Отслеживание отправки форм не всегда является простой задачей. Иногда для этого нужен навык программирования и понимание самого процесса.

В разных ситуациях это может настраиваться по разному. 

Присоединяйтесь к моей обучающей программе по настройке целей Яндекс Метрики. Давайте настроим цели на вашем сайте вместе.