JS-событие в Яндекс.Метрике: как настроить цель на клик или действие

Коротко: для типовых кликов по кнопкам, телефону, мессенджеру и стандартных форм в Метрике есть готовые цели, которые настраивают в интерфейсе без кода. Цель «Целевое событие» нужна для нестандартного сценария JavaScript: например, асинхронной формы после успешного ответа сервера, SPA, передачи дохода или своих параметров. В интерфейсе создайте цель с идентификатором, а на сайте вызовите ym(COUNTER_ID, 'reachGoal', 'ID_ЦЕЛИ') в момент подтверждённого действия. В примерах ниже номер счётчика 12345678 фиктивный: замените его на свой.

Если сначала нужно разобраться с другими типами целей, откройте общую инструкцию по настройке целей в Яндекс.Метрике. Здесь — только код целей Метрики для действий без перехода на другую страницу.

1. Что такое цель «Целевое событие»

Это цель для онлайн- и офлайн-событий. В этой статье разобраны онлайн-события на сайте: нажатие кнопки, успешная отправка формы или другой запрограммированный сценарий. Она подходит, когда одной проверки URL недостаточно. Метрика получает вызов reachGoal и сопоставляет его с идентификатором цели, который задан в счётчике.

2. Как создать цель JavaScript-события в интерфейсе

Шаг 1. Откройте в Метрике раздел «Цели» в левом меню и нажмите «Добавить цель».

Шаг 2. Выберите тип «Целевое событие». Задайте понятное название — например, «Отправка формы консультации».

Шаг 3. Укажите условие и идентификатор. Для одного события обычно берут условие «совпадает» и один точный идентификатор, например consultation_sent. Этот текст должен совпасть с третьим аргументом reachGoal.

Шаг 4. Нажмите «Добавить цель», затем добавьте вызов на сайт и проверьте его. В идентификаторе нельзя использовать /, \, &, #, ?, = и кавычку. Символ + заменяют на %2B.

Дальше: в канале

Что запускаю, что получается, что сливаю

Причёсанные кейсы дозревают здесь, на сайте. А в канале работа идёт в моменте: цифры в тот же день, честные провалы, приколы из практики и шаблоны, которые я делаю себе и отдаю бесплатно.

Телеграм

Черновики кампаний и цифры в тот же день.

Подписаться в Телеграм

МАКС

Всё то же самое, если удобнее в МАКС.

Подписаться в МАКС

3. Как устроен вызов reachGoal

Синтаксис из справки Метрики: ym(XXXXXXXX, 'reachGoal', target[, params[, callback[, ctx]]]);. Для обычной цели достаточно первых трёх частей: номер счётчика, строка 'reachGoal' и идентификатор цели.

ym(12345678, 'reachGoal', 'consultation_sent');

12345678 здесь — фиктивный номер счётчика. В реальном коде замените его на номер своего счётчика. consultation_sent — не произвольная подпись, а тот же идентификатор, который вы сохранили в цели.

Аргументы передаются по порядку. Если нужен callback, но параметры визита передавать не нужно, четвёртым аргументом укажите пустой объект:

ym(12345678, 'reachGoal', 'consultation_sent', {}, function () {
  // Данные о просмотре отправлены.
});

Клик по кнопке

Вешайте событие на конкретную кнопку. Этот пример использует обработчик клика; он подходит, когда сам клик и есть измеряемое действие.

<button type="button" id="consultation-button">Получить консультацию</button>

<script>
document.getElementById('consultation-button').addEventListener('click', function () {
  ym(12345678, 'reachGoal', 'consultation_click');
});
</script>

Отправка формы: submit, а не click

Для заявки не ставьте цель только на click кнопки. Посетитель может нажать её при незаполненном обязательном поле, а форма не отправится. Для обычной формы без JavaScript можно настроить готовую цель «Отправка формы». Ниже — пример для асинхронной отправки: вызов reachGoal находится после успешного ответа сервера, поэтому ошибка не станет конверсией.

<form id="consultation-form" action="/send" method="post">
  <input name="name" required>
  <button type="submit">Отправить</button>
</form>

<script>
document.getElementById('consultation-form').addEventListener('submit', async function (event) {
  event.preventDefault();

  const form = event.currentTarget;
  const response = await fetch(form.action, {
    method: form.method,
    body: new FormData(form)
  });

  if (response.ok) {
    ym(12345678, 'reachGoal', 'consultation_sent');
  }
});
</script>

Клик по телефону или мессенджеру

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

<a id="phone-link" href="tel:+70000000000">Позвонить</a>
<a id="messenger-link" href="https://example.invalid/messenger">Написать</a>

<script>
document.getElementById('phone-link').addEventListener('click', function () {
  ym(12345678, 'reachGoal', 'phone_click');
});

document.getElementById('messenger-link').addEventListener('click', function () {
  ym(12345678, 'reachGoal', 'messenger_click');
});
</script>

А что с формами Tilda и WordPress?

В проверенной справке Метрики нет универсальной инструкции, которая подтверждала бы одинаковую установку reachGoal для Tilda или конкретного плагина WordPress. Поэтому не вставляйте чужой код наугад. Найдите в документации вашей формы точку «после успешной отправки» и передайте туда тот же вызов reachGoal; если такой точки нет, поручите интеграцию разработчику.

4. Как передать параметры визита в reachGoal

Четвёртый аргумент reachGoal — объект параметров визита. Метрика разрешает передавать параметры события этим аргументом; затем их используют в отчётах, группировках и сегментации. Для такого сценария создайте отдельную JavaScript-цель, а не только шаг внутри составной цели.

const goalParams = {
  form_variant: 'short',
  page_section: 'header'
};

ym(12345678, 'reachGoal', 'consultation_sent', goalParams);

Для дохода по цели справка приводит поля order_price и currency. Валюта указывается трёхбуквенным кодом ISO 4217.

ym(12345678, 'reachGoal', 'order_paid', {
  order_price: '1000.35',
  currency: 'RUB'
});

5. Как проверить цель JS-события

Проверяйте событие до того, как начнёте ориентироваться на него в рекламе. Для нового кода счётчика добавьте к адресу страницы ?_ym_debug=2, а если в адресе уже есть параметры — &_ym_debug=2. Перезагрузите страницу, выполните действие и откройте нижнюю панель отладки. Достижение цели видно во вкладках Events и Console.

Если панели нет или нужен вариант через консоль, добавьте ?_ym_debug=1, откройте инструменты разработчика браузера и выполните действие. Для целевого события в консоли появляется строка Reach goal, которая сообщает о вызове reachGoal.

Если включена опция «Не учитывать мои визиты», проверяйте цель в приватном окне браузера. Если в отладчике тишина, проверьте три вещи: код счётчика установлен на странице, номер счётчика в вызове верный и идентификатор точно совпадает с идентификатором цели. Данные в отчёте «Конверсии» появляются через несколько минут после создания цели.

6. Ограничения Яндекс.Метрики для событий

• Для одного счётчика можно создать до 200 целей.
• Одну и ту же цель на одном счётчике сервис фиксирует не чаще одного раза в секунду.
• За один визит учитывается до 400 достижений онлайн-целей и до 1000 достижений офлайн-целей.
• Запрос с параметрами занимает не более 8 КБ (8192 символов), поддерживает до 10 уровней вложенности и до 512 параметров за визит.

7. Частые ошибки при настройке события

Идентификатор в коде не совпадает с целью. consultation_sent и consultation-send — разные строки. Название цели можно сделать читаемым, но в коде сверяйте именно идентификатор.

Цель стоит на click у формы. Такой вызов считает нажатия, включая те, после которых форма не ушла. Для обычной формы берите submit; для асинхронной — подтверждённое успешное завершение.

Цель стоит на автоматическом открытии поп-апа. Поп-ап может открыться сам, без действия посетителя. Вызов reachGoal в этот момент создаст фантомную конверсию: в отчёте будет достижение, хотя заявки нет. Не выбирайте такую цель как целевую для автостратегии — ей нужен сигнал о реальном действии, а не о показе окна.

Событие не проверили. Сначала отладчик, затем тестовое действие, и только потом решение использовать цель в отчётах. Это быстрее, чем объяснять расхождение в данных после запуска.

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