JavaScript-события в Яндекс Метрике: как отслеживать формы, квизы и кнопки без ошибок

Большинство современных сайтов отправляют формы без перезагрузки страницы, показывают квизы во всплывающих окнах и считают стоимость в калькуляторах. Цель «Посещение страницы» такие действия не видит. Единственный надёжный способ фиксировать их в Яндекс Метрике — JavaScript-события. В этой статье разберём, как они устроены, где их вызывать, как проверить и что написать в техническом задании разработчику.

Как работает JavaScript-цель

Схема простая. В Метрике вы создаёте цель типа «JavaScript-событие» и задаёте ей идентификатор, например lead_form. На сайте в нужный момент выполняется вызов метода reachGoal счётчика с этим идентификатором. Счётчик отправляет событие на сервер Метрики, и в отчётах появляется конверсия, привязанная к текущему визиту и его источнику.

Общий вид вызова такой: ym(XXXXXXXX, 'reachGoal', 'lead_form'), где вместо XXXXXXXX стоит номер вашего счётчика. Если на странице используется старая версия кода, вызов выглядит как обращение к объекту счётчика с методом reachGoal — смысл тот же.

Важно понимать: Метрика не знает, что происходит на сайте, пока ей об этом не сообщили. Цель сработает ровно тогда, когда выполнится вызов, — ни раньше, ни позже. Поэтому вся точность JS-цели определяется тем, в каком месте кода стоит вызов.

Где вызывать событие: клик или успешная отправка

Это главный вопрос, на котором ошибаются чаще всего. Есть три варианта.

Правильный вариант — третий: вызывать reachGoal в обработчике успешного ответа, когда сервер подтвердил, что заявка сохранена или отправлена на почту. Тогда число конверсий в Метрике будет близко к числу заявок в CRM, а автостратегия Директа будет учиться на настоящих лидах.

Представим магазин мебели, где кнопка «Купить в один клик» открывает форму телефона. Если цель висит на клике по кнопке, Метрика считает открытия формы, а не заказы. Стратегия «Максимум конверсий» начнёт приводить людей, которые охотно нажимают кнопку, но не оставляют телефон. Стоимость конверсии в отчётах выглядит прекрасно, а продаж нет.

Какие события стоит отслеживать

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

Основные (макроконверсии)

• form_callback_success — успешная заявка на обратный звонок;
• form_calc_success — отправка контактов из калькулятора;
• quiz_success — завершение квиза с контактами;
• order_success — оформленный заказ в магазине;
• oneclick_success — заказ в один клик.

Вспомогательные (микроконверсии)

• form_open — открытие всплывающей формы;
• quiz_start и шаги квиза;
• calc_used — пользователь изменил параметры в калькуляторе;
• add_to_cart — добавление в корзину;
• price_download — скачивание прайса.

Отдельные идентификаторы для каждой формы позволяют понять, какая форма приносит больше заявок, а составная цель «Все обращения» объединит их для оптимизации рекламы.

Передача параметров визита вместе с событием

Метод reachGoal позволяет передать вместе с целью дополнительные параметры: тип услуги, выбранный тариф, сумму расчёта в калькуляторе. Параметры передаются третьим аргументом в виде объекта и затем доступны в отчёте «Параметры визитов».

Кроме того, можно передать доход — тогда Метрика будет показывать не только число конверсий, но и сумму. Для калькулятора стоимости это очень удобно: в отчёте видно, какая кампания приводит заявки на крупные проекты, а какая — на мелкие.

Пример логики для компании, которая строит загородные дома: при отправке формы из калькулятора передаются параметры «площадь дома» и «материал», а в качестве дохода — расчётная стоимость. Через месяц выясняется, что кампания по запросам «дом из бруса» приводит в два раза больше заявок, чем «дом из газобетона», но средний расчёт там в 1,8 раза ниже. Без параметров эту разницу не увидеть.

Установка через код сайта или менеджер тегов

Вызов события можно встроить двумя способами.

Напрямую в код сайта

Разработчик добавляет вызов в JavaScript-обработчик формы. Плюс — максимальная точность: вызов стоит именно в обработчике успешного ответа. Минус — каждое изменение требует участия разработчика, и при редизайне вызовы легко потерять.

Через менеджер тегов

В менеджере тегов настраивается триггер, например на появление сообщения об успешной отправке или на событие в уровне данных, и тег, вызывающий reachGoal. Плюс — маркетолог может сам добавлять и менять цели. Минус — триггеры по элементам страницы хрупкие: изменился класс кнопки или текст сообщения — цель перестала работать.

Лучший компромисс — разработчик один раз отправляет в уровень данных событие «заявка успешно отправлена» с параметрами, а маркетолог уже в менеджере тегов связывает его с целями Метрики и других систем. Так техническое событие остаётся стабильным, а цели можно менять без релизов.

Как отладить JavaScript-цели

Перед запуском рекламы каждую цель нужно проверить вручную.

1. Откройте сайт с параметром _ym_debug=1 в адресе.
2. Откройте консоль разработчика в браузере.
3. Выполните целевое действие: отправьте форму с корректными данными.
4. Убедитесь, что в консоли появилось сообщение о достижении цели с правильным идентификатором.
5. Повторите действие с ошибкой: пустое поле, некорректный телефон. Цель срабатывать не должна.
6. Нажмите кнопку дважды быстро. Цель должна сработать один раз.
7. Проверьте на мобильном устройстве и в разных браузерах.

Если в консоли ничего не появляется, частые причины такие: вызов стоит до загрузки счётчика, указан неверный номер счётчика, опечатка в идентификаторе, вызов находится в ветке кода, которая не выполняется, или сайт загружает форму в iframe с другого домена, где нет счётчика.

Типичные ошибки и как их избежать

• Регистр и пробелы в идентификаторе. «Lead_form» и «lead_form» — разные цели. Пробел в конце идентификатора делает цель недостижимой.
• Несколько счётчиков на странице. Вызов уходит не в тот счётчик, который подключён к Директу.
• Форма во внешнем виджете. Сторонние виджеты обратного звонка и чатов работают в iframe. Нужно использовать встроенную интеграцию виджета с Метрикой или его собственные события.
• Двойной вызов. Цель вызывается и в коде, и в менеджере тегов. Конверсии удваиваются.
• Цель на открытие формы выбрана в стратегии. Стратегия оптимизируется на любопытных, а не на клиентов.
• Нет проверки после релиза. Обновили шаблон — потеряли вызовы. Добавьте проверку целей в чек-лист каждого релиза.

Шаблон ТЗ разработчику

Чтобы не объяснять задачу каждый раз заново, используйте шаблон:

Для счётчика Метрики XXXXXXXX добавить вызов reachGoal с идентификатором form_callback_success в обработчик успешного ответа сервера формы «Обратный звонок» во всех местах её появления: шапка, всплывающее окно, футер. Вызов не должен срабатывать при ошибках валидации и ошибках сервера. При повторном нажатии вызов выполняется один раз. Передать параметр form_place со значением места формы. Проверить с параметром _ym_debug=1 на десктопе и мобильном.

Такое ТЗ закрывает все типовые проблемы: момент вызова, все экземпляры формы, защиту от дублей и способ проверки.

Итог

JavaScript-события — основа точной аналитики на сайтах с динамическими формами. Правильно расставленные вызовы дают автостратегиям Директа чистые данные, а вам — понимание, какие формы и кампании работают. Мы внедряем и проверяем цели в рамках комплексной настройки рекламы, а если нужна связка с продажами и CRM — переходим к сквозной аналитике.