JavaScript-события Яндекс Метрики: настройка без знания JS

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

Как установить счётчик Яндекс Метрики - если счётчик ещё не добавлен, начните с этого.

Что такое JS-событие в Метрике

Чем JS-событие отличается от цели по URL

Цель по URL срабатывает, когда пользователь переходит на конкретный адрес - например, /thank-you. Это удобно, но ненадёжно: стоит кому-то сохранить страницу в закладки и зайти снова через 31 минуту - Метрика запишет новую конверсию и Директ её оплатит. JavaScript-событие работает иначе: оно фиксирует конкретное действие пользователя в момент его совершения - клик, отправку формы, скачивание файла. Перезагрузка страницы не дублирует цель, потому что код reachGoal вызывается только при реальном взаимодействии.

Визит в Метрике - это все действия пользователя в течение 30 минут. Если он открыл страницу, закрыл и вернулся через час - это уже второй визит, и цель по URL засчитается ещё раз. JS-событие от этого не зависит.

Когда нужно JS-событие, а когда хватит автоцели

Яндекс Метрика умеет настраивать некоторые цели автоматически - клики по телефону, email, кнопки. Автоцели - хорошее начало, но у них нет гибкости: нельзя выбрать конкретную кнопку среди нескольких одинаковых, нельзя передать дополнительные данные (цену, категорию товара). Когда нужна точность - используйте JS-событие.

Используйте JS-событие, если:

Форма отправляется без перехода на другую страницу
Нужно отслеживать конкретную кнопку, а не все кнопки подряд
Хотите передавать параметры (цену, тип товара) вместе с конверсией
На сайте AJAX - URL не меняется при любых действиях

Создаём цель в интерфейсе Метрики

Пошаговая инструкция

Весь процесс занимает 2–3 минуты.

Откройте нужный счётчик в Яндекс Метрике.
В левом меню выберите «Цели» → нажмите «Добавить цель».
Введите название цели - понятное вам: например, Клик на кнопку Заказать.
В поле «Тип условия» выберите «JavaScript-событие».
Выберите условие отслеживания (подробнее ниже) и введите идентификатор.
Нажмите «Добавить цель» - Метрика сгенерирует код reachGoal для вставки на сайт.

После сохранения скопируйте готовый код - он выглядит так:

ym(XXXXXXXX, "reachGoal", "your_identifier");

Здесь XXXXXXXX - номер вашего счётчика, your_identifier - идентификатор, который вы задали.

Правила идентификатора и условия совпадения

Идентификатор - это метка, по которой Метрика «узнаёт» цель. Правила жёсткие: только латинские буквы, цифры и нижнее подчёркивание, никаких пробелов и кириллицы. Хорошие примеры: click_order_btn, form_submit_main, download_price.

Условие	Когда использовать
Совпадает	Одна цель, идентификатор точный
Содержит	Несколько целей с общей частью в названии
Регулярное выражение	Сложные сценарии, группы событий

⚠️ Символы /, \, &, #, ?, =, " в идентификаторе запрещены. Знак + заменяйте на %2B.

Добавляем код на сайт - 3 способа

Способ 1: HTML-атрибуты (onclick / onsubmit)

Самый прямой способ - вставить вызов reachGoal прямо в HTML-элемент. Не нужно знать JavaScript глубоко - достаточно найти кнопку в коде и добавить атрибут.

Кнопка → отслеживаем клик:

<button onclick="ym(XXXXXXXX, 'reachGoal', 'click_order_btn')">Заказать</button>

Форма → отслеживаем отправку:

<form onsubmit="ym(XXXXXXXX, 'reachGoal', 'form_submit_main')">...</form>

Замените XXXXXXXX на номер своего счётчика, click_order_btn - на ваш идентификатор. Именно onclick и onsubmit - два атрибута, которые чаще всего нужны новичкам.

Личный опыт: Этот способ работает на WordPress-сайте с плагином-редактором блоков. Достаточно открыть редактор кнопки, переключиться в режим HTML и добавить onclick. Без плагинов, без разработчика - 5 минут.

Способ 2: Google Tag Manager без JS-кода

Если на сайте стоит GTM, вы можете настроить JS-цель вообще без доступа к исходному коду.

Шаги в GTM:

Перейдите в «Теги» → «Создать».
Выберите тип тега «Пользовательский HTML».

Вставьте в поле HTML код цели из Метрики:

<script>
  ym(XXXXXXXX, "reachGoal", "your_identifier");
</script>

Нажмите «Триггеры» → создайте новый триггер.
Тип триггера - «Отправка формы» (или «Клик по ссылке» / «Клик по всем элементам»).
Укажите условие: например, Form ID → равно → main-form.
Сохраните триггер и тег, опубликуйте контейнер.

GTM - хороший вариант, если вы боитесь трогать код сайта напрямую: все изменения можно откатить одной кнопкой.

Как установить счётчик Метрики через Google Tag Manager

Способ 3: jQuery

jQuery нужен, если на сайте уже подключена эта библиотека и события вешаются через $(selector).on('click', ...). Для большинства новичков этот путь избыточен - начинайте с HTML-атрибутов или GTM.

Проверяем, что цель работает

Проверка через браузерную консоль

Установили код - проверьте сразу, не дожидаясь данных в отчёте.

В адресной строке браузера добавьте к адресу страницы параметр _ym_debug=1 и загрузите страницу.
Нажмите Ctrl+Shift+J (Windows) или ⌥+⌘+J (Mac) - откроется консоль разработчика.
Перейдите на вкладку Console.
Совершите целевое действие на сайте: нажмите кнопку или отправьте форму.
Если в консоли появилась строка Reach goal - всё работает.

Данные в отчёте «Конверсии» в Метрике появятся в течение 15–30 минут после первого срабатывания.

Яндекс.Метрика - проверка цели

Типичные ошибки новичков

Ошибки в идентификаторе

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

Неверно	Верно
Клик заказать	click_order
form.submit	form_submit
btn-order	btn_order
click+order	click%2Border

Форма на AJAX - особый случай

Если форма отправляется через AJAX (без перезагрузки страницы), стандартный onsubmit может не сработать - браузер передаёт событие до того, как AJAX-запрос завершится. В таком случае вызывайте reachGoal в callback-функции AJAX-запроса - внутри success или done. Если не уверены, как это сделать, используйте GTM с триггером на успешную отправку формы - там можно настроить условие на появление элемента-подтверждения.

Счётчик не установлен или не загружен

Метод ym() существует только если счётчик Метрики загружен на странице. Если счётчик стоит внизу страницы через async, а кнопка нажата раньше - вызов reachGoal уйдёт в пустоту. Решение - оберните вызов в проверку:

if (typeof ym !== "undefined") {
  ym(XXXXXXXX, "reachGoal", "your_identifier");
}

Или убедитесь, что счётчик загружается в <head>.

Альтернативное мнение

Некоторые аналитики считают, что для небольших сайтов автоцели Метрики полностью закрывают потребности - без единой строки кода. Действительно, автоматические цели на клик по телефону, email и кнопки покрывают типовые сценарии. Минус: нет возможности передать параметры события (стоимость заказа, категорию), а значит, считать ROMI и ROI по каждому продукту не получится. Для простого лендинга автоцели подойдут; для интернет-магазина или SaaS - нужны JS-события.

Нетривиальный факт

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

Как передавать параметры визита вместе с JS-событием

FAQ

Что такое JavaScript-событие в Яндекс Метрике?

Тип цели, который фиксирует действие пользователя - клик, отправку формы, скачивание - без смены URL страницы. Работает через метод reachGoal счётчика Метрики.

Можно ли настроить JS-событие без знания JavaScript?

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

Как быстро данные появятся в отчёте «Конверсии»?

В течение 15–30 минут после первого срабатывания цели. Если данных нет сутки - перепроверьте настройки или обратитесь в поддержку Метрики.

Какой идентификатор выбрать для цели?

Только латиница, цифры, нижнее подчёркивание. Пример: click_order_btn, form_submit_contact. Идентификатор в коде сайта должен точно совпадать с заданным в интерфейсе (при условии «Совпадает»).

Чем JS-событие лучше автоцели Метрики?

Автоцели настраиваются без кода, но не позволяют передавать дополнительные параметры (цену, категорию) и выбирать конкретный элемент среди одинаковых. JS-события дают полный контроль и нужны для точного ROMI/ROI-анализа.

Что делать, если форма работает через AJAX?

Стандартный onsubmit не поймает AJAX-отправку. Вызовите reachGoal внутри callback-функции запроса (success / done) или настройте триггер в GTM на появление элемента-подтверждения.

Сколько целей можно создать в Метрике?

Актуальную информацию смотрите на официальном сайте: yandex.ru/support/metrica.

Как настроить JavaScript-события в Яндекс Метрике: гайд для новичка