Клуб Яндекс.Метрики

Гид по Метрике: как правильно настроить reachGoal в формах

Обратите внимание!

На данный момент метод reachGoal имеет несколько другой вид: ym(XXXXXX, 'reachGoal', 'TARGET_NAME'); Новый метод будет работать только с новым кодом. Подробнее: https://yandex.ru/blog/metrika/novyy-kod-v-nastroykakh-schetchika 
В остальном принцип работы JS-целей не поменялся. 

Нам часто задают вопросы про использование reachGoal в формах. Например,

«Я установил цель на форму, но она достигается при нажатии на кнопку «Отправить», даже если не заполнены поля».

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

Вот пример, как делать не стоит:
 

<form action="" method="POST" type="submit">

    <input name="name" placeholder="Ваше имя" required> <br>

    <input type="email" name="mail" placeholder="Ваш email" required> <br>

    <input type="button" onclick="yaCounterXXXXXX.reachGoal('form2'); return=true;" value="Отправить">

</form>

В этом случае в Метрику будет отправлена информация по всем кликам, совершенным по кнопке “Отправить” — даже если посетитель не заполнил форму.

Таким образом, для того, чтобы цель достигалась непосредственно при отправке формы, её необходимо установить на событие, отвечающее за отправку формы. В простейшем случае, это событие onsubmit.

Корректный код может выглядеть так: 
 

<form action="" method="POST" type="submit" onsubmit="yaCounterXXXXXX.reachGoal ('form1')">

    <input name="name" placeholder="Ваше имя" required> <br>

    <input type="email" name="mail" placeholder="Ваш email" required="Введите Ваш email"> <br>

    <button>Отправить</button>

</form>

При использовании reachGoal в формах, следите за тем, чтобы событие, отвечающее за отправку формы,  совершалось именно в момент отправки формы. В таком случае вы будете иметь корректный сбор данных. 

Проверить корректность работы цели можно с помощью инструкции: https://yandex.ru/support/metrika/reports/add-goals.html#check-goal 

Подробнее про reachGoal можно почитать в нашей Помощи: https://yandex.ru/support/metrika/objects/reachgoal.html

Для работы с JavaScript API необходимы навыки работы с HTML и JavaScript, поэтому мы настоятельно рекомендуем обращаться за помощью к вебмастеру, если у вас возникают трудности при использовании reachGoal. 

15 комментариев
Василий
Сотрудник Яндекса30 января 2018, 11:21
Всем привет!

Сегодня мы начинаем серию постов, которые призваны помочь начинающим пользователям разобраться в возможностях Яндекс.Метрики. Будем рады получить от вас обратную связь, а также пожелания к следующим постам. 

Хорошего дня и отличного настроения!


Добавлю, что сейчас часто используют аяксовые формы, на которых onsubmit не сработает. В этом случае reachGoal следует вставлять в скрипт, который проводит валидацию и/или отправляет форму.
Вот пример такого внедрения простым языком: https://medium.com/@inache/настраиваем-цель-на-отправку-ajax-формы-в-т-ч-с-помощью-gtm-d8c38fd03861
inache-su,
спасибо за статью
ennergiia,
пожалуйста!
Дмитрий Миронский
22 февраля 2019, 12:59
ennergiia,
https://exiterra.com/blog/prodvizhenie-sajta/nastroyka-schetchika-yandeks-metriki-ustanovka-nastroyka-tseley-i-otchetov/  Вот еще статья хорошая. Подробно рассказывают, видосики тоже есть
Обновлено 22 февраля 2019, 13:00
еще бы описали, как это сделать через GTM
Константин Разинкин
4 сентября 2019, 06:27
<input type="button" onclick="yaCounterXXXXXX.reachGoal('form2'); return=true;" value="Отправить">


Uncaught SyntaxError: Unexpected token =
Анастасия Арефьева
27 сентября 2019, 14:40
Добрый день. Подскажите пожалуйста. У меня нет доступа к коду сайта.
Через систему управления сайтом могу добавить только скрипт. Но цели почему то не срабатывают.

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#yw1').attr("onsubmit","yaCounter46372170.reachGoal('zakazbistr'); return true;");
});
</script>
Проблема еще в том, что к классу кнопки нет смысла добавлять, так как кнопка с классами не одна. Поэтому вызывала по id формы.
Василий, добрый день !
ВОПРОС:
Подскажите, пожалуйста, как настроить на сайте отслеживание цели в Метрике по нажатию кнопки ПЕРЕВЕСТИ в iframe форме сбора денег Яндекс.Деньги ?.. - https://money.yandex.ru/quickpay/form?_openstat=iget%3Bshop%3Bicon&from=iget


Заранее благодарю !..


С уважением,
Василий
Сотрудник Яндекса29 ноября 2019, 09:44
profbrusdom.ru,
обратитесь в поддержку Яндекс.Денег для уточнения данной информации. 
Василий,
Добрый день, Василий !  
Обращался уже в техподдержку Яндекс.Деньги,  сказали, что " у нас нет технической возможности сделать то, о чем вы пишите"... 
Василий, я нашел статью, в которой описывается, как настроить ЦЕЛЬ на iframe youtube, а в моем случае с iframe Яндекс.Деньги будет ли работать такое решение ?.. Ссылка на статью ( см. последний абзац Цель на Youtube )
https://clck.ru/KVEaR


С уважением,
Василий
Сотрудник Яндекса29 ноября 2019, 10:16
profbrusdom.ru,
с нашей стороны отсутствует решение на установку цели на кнопку Яндекс.Денег. 


Если Яндекс.Деньги не позволяют этого сделать, значит, скорее всего, этого сделать нельзя. 
надо ли задавать вопрос почему в яндекс саппорте нет этой информации???
yuiyui
Роман Буш
21 мая, 12:03
"Цели" - это здорово. По всему инету куча объяснений, как с ними работать. Но я третий день не могу найти информацию о том, как мне отправить  события электронной коммерции "товар добавлен в корзину" и "товар удалён из корзины". Мне нужно этот процесс повесить на переход на другую страницу.
Техподдержка делится ссылками на то, что мол надо делать window.dataLayer.push() - но вопрос в том, что это действие просто запихивает данные в массив. А где-то на фоне уже происходит обработка этих данных и передача в яндекс. А мне надо организовать всё так, чтобы вручную запустить процесс отправки, чтобы дождаться его окончания. И чтобы пользователь уходил на следующую страницу ТОЛЬКО после того, как процесс передачи прошёл. То есть - не в момент, когда данные записались в массив, а в момент, когда этот массив ушёл в яндекс.
Вот для всех событий есть команда типа:
ym(XXXXXXX, 'reachGoal', <datas>)
А как это сделать для целей "электронной коммерции"? Нигде нет этой инфы. Я хочу запустить этот процесс, чтобы функция отработала и только после этого пошёл редирект на следующую страницу.