Генератор событий Яндекс.Метрики

Что умеет генератор событий Метрики

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

С помощью генератора можно создать JS-код для следующих целей:

• клик по кнопке;
• отправка формы;
• клик по номеру телефона;
• клик по email;
• переход в Telegram;
• переход в WhatsApp;
• скачивание файла (PDF, DOC, XLS);
• любой CSS-селектор — кнопка, ссылка, блок.

На выходе вы получаете готовый <script>-блок и инструкцию по установке.

Когда нужны события, а не обычные цели

В Яндекс.Метрике есть разные типы целей. Для простых сценариев достаточно цели на посещение страницы: пользователь попал на /thanks/ после отправки формы. Но на многих сайтах важное действие происходит без смены URL. В этом случае нужна цель типа JavaScript-событие.

Как работает событие Яндекс.Метрики

Событие состоит из двух частей.

Часть 1 — цель в интерфейсе Метрики. Создайте цель типа «JavaScript-событие» и укажите идентификатор, например:

lead_form_submit

Часть 2 — код на сайте. Этот код вызывается в нужный момент:

<script>
ym(12345678, 'reachGoal', 'lead_form_submit');
</script>

Где 12345678 — номер счетчика, reachGoal — метод передачи цели, lead_form_submit — идентификатор, который должен точно совпадать с идентификатором в Метрике.

Важно: если идентификатор в коде и в Метрике отличается хотя бы одним символом — цель не будет засчитываться.

Как создать цель в Яндекс.Метрике

Перед тем как вставлять JS-код на сайт, создайте цель в интерфейсе Метрики.

1. Откройте нужный счетчик Яндекс.Метрики.
2. Перейдите в раздел Цели.
3. Нажмите Добавить цель.
4. Выберите тип цели JavaScript-событие.
5. Укажите понятное название, например «Клик по кнопке заявки».
6. Укажите идентификатор, например lead_button_click.
7. Сохраните цель.
8. Скопируйте идентификатор — он нужен в генераторе.

Как правильно назвать идентификатор

Используйте короткие понятные названия на латинице:

lead_submit
phone_click
email_click
telegram_click
price_download
order_success

Не используйте пробелы, кириллицу и случайные символы — через несколько месяцев будет непонятно, что отслеживает каждая цель.

Примеры кода для разных событий

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

Найдите кнопку по CSS-селектору и повесьте обработчик клика:

<script>
document.addEventListener('DOMContentLoaded', function () {
  var button = document.querySelector('.js-lead-button');

  if (button) {
    button.addEventListener('click', function () {
      ym(12345678, 'reachGoal', 'lead_button_click');
    });
  }
});
</script>

Отправка формы

Для форм без перехода на страницу благодарности:

<script>
document.addEventListener('DOMContentLoaded', function () {
  var form = document.querySelector('.js-lead-form');

  if (form) {
    form.addEventListener('submit', function () {
      ym(12345678, 'reachGoal', 'form_submit');
    });
  }
});
</script>

Частая ошибка: для AJAX-форм лучше вызывать reachGoal после успешного ответа сервера, а не просто при нажатии кнопки.

Клик по телефону и email

<script>
document.addEventListener('DOMContentLoaded', function () {
  // Телефон
  document.querySelectorAll('a[href^="tel:"]').forEach(function (link) {
    link.addEventListener('click', function () {
      ym(12345678, 'reachGoal', 'phone_click');
    });
  });
  // Email
  document.querySelectorAll('a[href^="mailto:"]').forEach(function (link) {
    link.addEventListener('click', function () {
      ym(12345678, 'reachGoal', 'email_click');
    });
  });
});
</script>

Переход в Telegram и WhatsApp

<script>
document.addEventListener('DOMContentLoaded', function () {
  // Telegram
  document.querySelectorAll('a[href*="t.me"], a[href*="telegram.me"]').forEach(function (link) {
    link.addEventListener('click', function () {
      ym(12345678, 'reachGoal', 'telegram_click');
    });
  });
  // WhatsApp
  document.querySelectorAll('a[href*="wa.me"], a[href*="api.whatsapp.com"]').forEach(function (link) {
    link.addEventListener('click', function () {
      ym(12345678, 'reachGoal', 'whatsapp_click');
    });
  });
});
</script>

Куда вставить код события Яндекс.Метрики

Размещайте код события после основного кода счетчика Яндекс.Метрики — тогда метод ym() будет доступен к моменту клика.

Как проверить, что событие работает

Режим отладки

Добавьте параметр к URL страницы:

https://example.com/?_ym_debug=2

Выполните целевое действие. В консоли браузера появится информация о вызове события. Если цель настроена правильно — увидите reachGoal с вашим идентификатором.

Чек-лист перед запуском рекламы

• Код счетчика Метрики установлен на странице.
• Номер счетчика в коде события совпадает с номером в Метрике.
• Идентификатор цели в коде совпадает с идентификатором в Метрике.
• CSS-селектор найден на странице — проверьте через DevTools.
• Событие не отправляется дважды (код не задублирован).
• Adblock и cookie-баннер не блокируют счетчик.
• Цель появилась в отчетах Метрики после тестового клика.

Почему событие Яндекс.Метрики не работает

Готовые шаблоны идентификаторов целей

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

Частые вопросы о событиях Яндекс.Метрики

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

Событие — это фиксируемое действие пользователя на сайте: клик, отправка формы, переход по ссылке, скачивание файла или другое действие без перехода на новую страницу. Передаётся в Метрику через метод ym(ID, 'reachGoal', 'GOAL').

Чем событие отличается от цели?

Событие — действие на сайте. Цель — правило в Метрике, которое засчитывает это действие как конверсию. Для JavaScript-событий цель создаётся в интерфейсе Метрики, а событие отправляется с сайта через код.

Где взять номер счетчика?

Числовой ID есть в списке счетчиков Яндекс.Метрики и в настройках каждого счетчика. Он же используется в коде Метрики, который установлен на сайте.

Куда вставить код события?

Обычно перед закрывающим </body>, в общий JS-файл, через CMS, Tilda HTML-блок, WordPress-плагин или Google Tag Manager.

Почему цель не срабатывает?

Самые частые причины: неверный номер счетчика, ошибка в идентификаторе цели, неправильный CSS-селектор, событие вызывается до загрузки счетчика или Метрика заблокирована cookie-баннером.

Можно ли настроить событие без программиста?

Да, если на сайте простые кнопки, формы и ссылки — используйте генератор и вставьте готовый код. Для AJAX-форм, SPA-сайтов, квизов и CRM-виджетов может понадобиться разработчик.

Можно ли отслеживать переходы в Telegram и WhatsApp?

Да. Создайте цель типа JavaScript-событие, а код будет отслеживать клики по ссылкам t.me, telegram.me, wa.me или api.whatsapp.com.

Как проверить событие перед запуском рекламы?

Откройте страницу с параметром ?_ym_debug=2, выполните целевое действие и проверьте вывод в консоли. Также стоит проверить отчёт по целям в Метрике после тестового клика.