Не каждое важное действие на сайте меняет адрес страницы. Форма отправляется без перезагрузки, чат открывается во всплывающем окне, калькулятор считает стоимость прямо на странице.
Цель «Посещение страниц» такие действия не увидит. Для них в Метрике есть специальный тип, который срабатывает по команде из кода.
Раньше этот тип назывался «JavaScript-событие», в обновлённом интерфейсе — «Целевое событие».
Разберём, как его создать, как вызвать из кода, как передать доход и как проверить, что всё работает. Примеры — из настроек нашего сайта.
Коротко:
- Событие создаётся в Метрике, а срабатывает по вызову ym(номер, ‘reachGoal’, ‘идентификатор’) на сайте.
- Идентификатор в коде и в настройках должен совпадать — или подходить под условие «содержит» или регулярное выражение.
- Код можно поставить в шаблон сайта или через тег-менеджер без правки исходников.
- Проверять срабатывание удобно в панели отладки с параметром _ym_debug=2.
Когда нужно событие через код
Для большинства простых задач хватает готовых типов целей: «Отправка формы», «Клик по кнопке», «Клик по номеру телефона», «Переход в мессенджер».
Многие из них Метрика создаёт автоматически. Целевое событие нужно, когда готовые варианты не справляются.
- Форма без страницы «Спасибо». Заявка уходит через AJAX, адрес не меняется, а автоцель «Отправка формы» срабатывает и на неудачные попытки.
- Виджеты. Онлайн-чаты, квизы и калькуляторы генерируют свои события — их можно транслировать в Метрику.
- Сложные условия. Например, «качественный визит»: больше 40 секунд, 2 страницы и прокрутка половины страницы.
- Передача дохода. Вместе с событием можно отправить сумму заявки или заказа.
На нашем сайте целевыми событиями настроены действия в чате Jivo, копирование текста и «качественный визит».
Шаг 1. Создайте цель в Метрике
- Откройте раздел «Цели» в левом меню и нажмите «Добавить цель».
- В группе «Пользовательские события» выберите «Целевое событие · ex JS-событие».
- Введите название — так событие будет называться в отчётах.
- Выберите условие и укажите идентификатор, например form_order.
- Нажмите «Добавить цель».
Условие идентификатора
Метрика сравнивает идентификатор из кода с заданным условием. Доступны три варианта, и они объединяются логическим ИЛИ: конверсия засчитывается, если выполнено хотя бы одно.
| Условие | Как работает | Когда использовать |
|---|---|---|
| Совпадает | Только идентификатор целиком | Одно конкретное действие |
| Содержит | Любой идентификатор с этой частью | Группа похожих событий, например все кнопки |
| Регулярное выражение | Идентификаторы по шаблону | Сложные наборы событий |
С условием «содержит» будьте осторожны: по примеру из справки, условие button сработает и для goal-button, и для button-goal, и для goal-buy-button. Указывайте как можно большую часть идентификатора.
Правила для идентификатора
- не используйте символы / \ & # ? = «;
- если нужен плюс, пишите вместо него %2B;
- используйте латиницу и понятные имена: form_order, call_click, quiz_done;
- для одного и того же действия в разных местах сайта используйте одну настройку и один идентификатор.
Шаг 2. Добавьте вызов на сайт
Конверсия фиксируется, когда на странице выполняется вызов метода reachGoal:
ym(XXXXXXXX, 'reachGoal', 'form_order');Где XXXXXXXX — номер вашего счётчика, а form_order — идентификатор из настроек.
Код счётчика при этом уже должен стоять на странице — пошагово в статье как установить Метрику.
На кнопке
<button type="button" onclick="ym(XXXXXXXX, 'reachGoal', 'call_click'); return true;"> Заказать звонок </button>На отправке формы
<form action="/send/" method="post" onsubmit="ym(XXXXXXXX, 'reachGoal', 'form_order'); return true;"> ... </form>Учтите: событие onsubmit срабатывает при нажатии кнопки отправки, даже если поля заполнены с ошибкой и форма не ушла. Надёжнее вызывать reachGoal после успешного ответа сервера.
После успешной отправки через AJAX
fetch('/send/', {method: 'POST', body: new FormData(form)}) .then(function (r) { if (r.ok) { ym(XXXXXXXX, 'reachGoal', 'form_order'); } });Так конверсия засчитается, только когда заявка действительно дошла. Для популярных плагинов форм есть свои сигналы успешной отправки — например, у Contact Form 7 это wpcf7mailsent.
Передача дохода и параметров
Метод reachGoal принимает необязательный объект params. В нём можно передать стоимость конверсии и валюту:
ym(XXXXXXXX, 'reachGoal', 'order_paid', { order_price: 4990, currency: 'RUB' });
- order_price или price — доход в валюте или условных единицах;
- currency — трёхбуквенный код по ISO 4217, например RUB. Если передать неизвестную валюту, вместо суммы придут нули.
Переданный доход виден в отчётах и помогает считать окупаемость рекламы. Для полноценного интернет-магазина вместо этого лучше настроить электронную коммерцию.
Установка через тег-менеджер
Если править код сайта неудобно, вызов можно добавить через тег-менеджер — Яндекс Тег Менеджер или Google Tag Manager.
Создаётся тег «Пользовательский HTML» с вызовом reachGoal и триггер, который его запускает.
На скриншоте — тег с нашего сайта. Он отправляет событие «качественного визита», когда одновременно выполняются три условия: человек провёл на сайте 40 секунд, открыл 2 страницы и прокрутил страницу до половины.
Такое событие удобно использовать в Директе для оптимизации на ранних этапах, когда заявок ещё мало.
Тот же подход работает для виджетов: чат Jivo, например, умеет вызывать функции при открытии окна, отправке первого сообщения или вводе контактов, и каждую можно связать со своей целью.
Шаг 3. Проверьте срабатывание
- Откройте страницу с параметром ?_ym_debug=2.
- Нажмите значок Метрики в правом нижнем углу — откроется панель отладки.
- Выполните действие: нажмите кнопку или отправьте тестовую форму.
- На вкладке Console или Events должна появиться запись reachGoal с вашим идентификатором.
Через некоторое время конверсия появится и в отчёте «Конверсии». Подробнее о панели отладки — в статье как проверить счётчик.
Пример: событие для формы на WordPress
Разберём типичный случай. На сайте на WordPress стоит форма Contact Form 7. Она отправляется без перезагрузки, страницы «Спасибо» нет.
Автоцель «Отправка формы» здесь не лучший выбор. Она срабатывает при нажатии кнопки, даже если человек не заполнил телефон и получил ошибку.
Решение — слушать событие успешной отправки, которое генерирует сам плагин:
document.addEventListener('wpcf7mailsent', function () { ym(XXXXXXXX, 'reachGoal', 'form_order'); });Код можно добавить в шаблон темы или в тег-менеджер с триггером на все страницы. Теперь конверсия засчитывается только тогда, когда письмо действительно ушло.
Если форм несколько, а считать их нужно раздельно, проверяйте идентификатор формы внутри обработчика и отправляйте разные события: form_order, form_callback, form_question.
Порядок внедрения
- Составьте список действий, которые важны для бизнеса: заявка, звонок, сообщение в чат.
- Для каждого придумайте понятный идентификатор латиницей.
- Создайте события в Метрике до того, как добавлять код, — иначе первые срабатывания не попадут в отчёты.
- Добавьте вызовы на сайт или в тег-менеджер.
- Проверьте каждое событие в панели отладки и запишите результат.
Проверку повторяйте после каждого обновления сайта: смена темы или плагина форм легко ломает вызовы.
Удобно вести таблицу: действие, идентификатор, где стоит код, кто проверил и когда. Через полгода, когда сайт переделают, она сэкономит часы поиска.
Если программиста нет
Писать код не обязательно. Есть три пути попроще.
Готовые типы целей. «Отправка формы», «Клик по кнопке» и «Переход в мессенджер» настраиваются мышкой прямо в интерфейсе Метрики.
Интеграции. Многие сервисы — онлайн-чаты, квизы, коллтрекинг — сами передают свои действия в Метрику после подключения в разделе «Интеграции».
Тег-менеджер. Шаблоны тегов и триггеры по кликам позволяют обойтись без правки шаблона сайта. Достаточно один раз поставить контейнер.
Код понадобится, когда нужна точность: засчитывать только успешные заявки, передавать доход или объединять несколько условий.
Ограничения
- до 200 целей на один счётчик;
- одно и то же событие от одного посетителя засчитывается не чаще раза в секунду;
- за визит фиксируется до 400 достижений онлайн-целей;
- изменение настроек не пересчитывает уже собранные данные;
- при удалении цели данные по ней пропадают из отчётов.
Сколько ждать данных
Первые срабатывания видно в панели отладки сразу. В отчётах конверсии появляются с небольшой задержкой — обычно в течение нескольких минут.
Для рекламы важна не скорость, а объём. Автостратегиям Директа нужно накопить достаточно конверсий, чтобы начать обучение.
Поэтому на старте можно выбрать для оптимизации более частое действие — например, «качественный визит» или клик по телефону — и перейти на заявки, когда их станет больше.
Старые данные при этом не теряются: все настроенные конверсии продолжают собираться параллельно, и их можно сравнивать в отчётах.
Частые ошибки
- Идентификатор не совпадает. Лишний пробел, другая буква или регистр — и событие не засчитывается. Копируйте идентификатор прямо из настроек.
- Неверный номер счётчика. В вызове стоит номер старого или чужого счётчика.
- Вызов раньше загрузки счётчика. Если reachGoal вызывается до кода Метрики, событие может потеряться — ставьте код счётчика как можно выше.
- Вызов на нажатие, а не на успех. В отчётах больше заявок, чем пришло менеджеру.
- Двойной счётчик. Код Метрики стоит дважды, и событие уходит два раза.
- Код в кавычках разного типа. При вставке в атрибут onclick одинарные кавычки внутри двойных — обязательное условие.
Как использовать события дальше
Целевые события ведут себя как любые другие конверсии. Их можно смотреть в отчётах по источникам и устройствам, строить сегменты посетителей, достигших цели, и считать конверсию.
Главное применение — реклама. Если счётчик связан с Директом, цели можно выбрать в автостратегиях, и система будет искать людей, которые чаще их достигают.
Поэтому важно, чтобы событие срабатывало только на реальные заявки: ошибка в настройке обучает рекламу на неправильных действиях.
Если заявки дальше уходят в CRM и превращаются в продажи, следующий шаг — сквозная аналитика и передача офлайн-конверсий.
