Как сделать цели в Метрике: от кнопки до отправки формы

Почему кнопка — это не то же самое, что страница «Спасибо»

Цель на посещение страницы работает по принципу «изменился адрес в браузере — цель засчитана». Клик по кнопке или отправка формы через AJAX адрес страницы не меняют: посетитель нажал «Заказать» или «Отправить», получил всплывающее сообщение об успехе, но URL остался тем же самым. Для Метрики с точки зрения адреса ничего не произошло, и цель на посещение страницы такое действие не увидит никогда, сколько ни жди. Единственный способ поймать подобное действие — явно сообщить о нём через JavaScript-событие в момент, когда оно происходит.

Идентификатор события: что это и как его выбрать

Идентификатор — это произвольное имя, которое связывает код на сайте с целью в интерфейсе Метрики: имена вроде click_order_button или form_send подойдут не хуже других, лишь бы совпадали в обеих частях настройки. Практический совет — не использовать пробелы и кириллицу, брать латиницу и подчёркивания, и заранее выписать список из 3-5 событий, которые реально нужны (клик по кнопке заказа, клик по номеру телефона, отправка формы, клик по WhatsApp) — так проще не запутаться, когда цели множатся.

Вариант А: код на сайте вручную

Для кнопки без формы, если у неё есть уникальный класс или id, событие вешается через JavaScript:

document.querySelector('.btn-order').addEventListener('click', function () {
  ym(XXXXXXXX, 'reachGoal', 'click_order_button');
});

Для формы, которая отправляется через AJAX, аналогичный код вешается на событие отправки:

document.querySelector('#order-form').addEventListener('submit', function () {
  ym(XXXXXXXX, 'reachGoal', 'form_send');
});

Вместо XXXXXXXX подставляется номер счётчика Метрики. Этот код добавляется в футер сайта или в файл скриптов темы — прямая правка требует доступа к CMS или хостингу, поэтому для сайтов без штатного разработчика это обычно задача для подрядчика на 20-40 минут, включая проверку.

Вариант Б: та же цель через Google Tag Manager без кода

Если на сайте уже стоит контейнер GTM, событие настраивается без единой правки файлов сайта: в GTM создаётся тег «Пользовательский HTML» с вызовом ym(XXXXXXXX,'reachGoal','имя_события'), а к нему привязывается встроенный триггер «Клик — все элементы» с условием по CSS-классу кнопки или триггер «Отправка формы». GTM сам отслеживает клики и отправки на странице, разметка кода вручную не нужна — этот способ обычно быстрее и доступен маркетологу без разработчика, если контейнер GTM уже установлен и настроен на сайте.

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

После того как событие отправляется с сайта одним из двух способов, в Метрике: «Настройка» → «Цели» → «Добавить цель» → тип «JS-событие» → в поле идентификатора вписывается то же самое имя, что и в коде, без опечаток и лишних символов. Регистр и точное совпадение имени критичны: form_send и Form_Send Метрика считает разными идентификаторами, и цель просто не сработает при малейшем расхождении.

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

Самый быстрый способ — открыть сайт, нажать F12 (консоль разработчика), перейти на вкладку Console и вручную выполнить ym(XXXXXXXX,'reachGoal','form_send') — если ошибок нет, значит счётчик и синтаксис в порядке, дело за срабатыванием на реальном клике. Дальше нужно физически нажать на кнопку или отправить форму и открыть в Метрике режим реального времени через бесплатное расширение «Яндекс.Метрика: Инспектор сайтов» — оно показывает срабатывание целей сразу, без ожидания суток, которое нужно официальным отчётам для обновления данных.

Частые ошибки, из-за которых кнопка «не считается»

Событие в коде и идентификатор цели в Метрике написаны с расхождением в регистре или с лишним пробелом — самая частая причина нулевых конверсий при вроде бы правильно настроенной цели. Вторая ошибка — код события повесили на кнопку, но кнопка на сайте генерируется динамически (например, через конструктор форм), и обработчик клика вешается раньше, чем кнопка появляется на странице — в этом случае события не будет вообще. Третья — забыли, что на мобильной версии сайта та же кнопка может иметь другой класс или вёрстку, из-за чего событие срабатывает только на десктопе. Если после проверки в консоли событие долетает, а цель в Метрике всё равно показывает ноль — почти всегда дело в опечатке идентификатора при создании цели, а не в коде на сайте.