Большинство конверсий на современных сайтах - не просто переход на страницу «Спасибо», а действия без смены URL: кнопка «Отправить» в попапе, клик по WhatsApp, скачивание файла, просмотр видео до конца. Для всего этого нужны JavaScript-события. Это самый гибкий инструмент настройки целей в Яндекс Метрике.

Как работают JavaScript-события в Метрике

Яндекс Метрика устанавливает на сайт глобальный объект - функцию ym(). Эта функция принимает несколько параметров:

ym(XXXXXXXX, 'reachGoal', 'IDENTIFIER', { parameters });

Где: - XXXXXXXX - номер вашего счётчика Метрики - 'reachGoal' - тип вызова (достижение цели) - 'IDENTIFIER' - идентификатор цели (латиницей, без пробелов) - { parameters } - необязательные дополнительные данные

Когда этот код выполняется в браузере пользователя, Метрика получает сигнал и засчитывает достижение цели с привязкой к текущей сессии, источнику трафика и пользователю.

Создание цели для JavaScript-события

  1. Настройки счётчика - Цели - Добавить цель
  2. Тип: «JavaScript-событие»
  3. Идентификатор цели: введите строку латиницей (например, video_play или pdf_download)
  4. Название: человекочитаемое («Воспроизведение видео», «Скачивание PDF»)
  5. Сохраните

Важно: идентификатор в настройках Метрики и в коде на сайте должны совпадать точно, включая регистр. form_submit и Form_Submit - это разные цели.

Примеры JavaScript-событий для типичных сценариев

Отправка формы через AJAX

// После успешного ответа сервера
fetch('/api/submit/', { method: 'POST', body: formData })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            ym(XXXXXXXX, 'reachGoal', 'form_submit');
        }
    });

Клик по номеру телефона

document.querySelectorAll('a[href^="tel:"]').forEach(link => {
    link.addEventListener('click', () => {
        ym(XXXXXXXX, 'reachGoal', 'phone_click');
    });
});

Клик по мессенджеру (WhatsApp, Telegram)

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

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

Скачивание файла

document.querySelectorAll('a[href$=".pdf"], a[href$=".xlsx"]').forEach(link => {
    link.addEventListener('click', function() {
        ym(XXXXXXXX, 'reachGoal', 'file_download', {
            file: this.getAttribute('href')
        });
    });
});

Просмотр видео

// Для YouTube iFrame API
player.addEventListener('onStateChange', function(event) {
    if (event.data === YT.PlayerState.PLAYING) {
        ym(XXXXXXXX, 'reachGoal', 'video_start');
    }
    if (event.data === YT.PlayerState.ENDED) {
        ym(XXXXXXXX, 'reachGoal', 'video_complete');
    }
});

Достижение глубины прокрутки (scroll depth)

var scrollGoalSent = { '50': false, '90': false };

window.addEventListener('scroll', function() {
    var scrollPercent = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;

    if (scrollPercent >= 50 && !scrollGoalSent['50']) {
        ym(XXXXXXXX, 'reachGoal', 'scroll_50');
        scrollGoalSent['50'] = true;
    }
    if (scrollPercent >= 90 && !scrollGoalSent['90']) {
        ym(XXXXXXXX, 'reachGoal', 'scroll_90');
        scrollGoalSent['90'] = true;
    }
});

Передача параметров с событием

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

Структура параметров - вложенный объект:

ym(XXXXXXXX, 'reachGoal', 'form_submit', {
    form: {
        type: 'consultation',
        source: 'popup',
        city: 'moscow'
    }
});

Это позволяет сегментировать одну цель по разным параметрам. Например, цель form_submit одна, но в отчёте вы видите: 40 заявок с type=consultation, 25 заявок с type=price_request, 15 заявок с type=callback.

В Метрике перейдите: Отчёты - Параметры - Параметры визитов - разверните структуру до нужного уровня.

Отладка JavaScript-событий

Перед запуском рекламы обязательно проверьте, что события срабатывают корректно.

Метод 1. Параметр отладки в URL

Добавьте к URL страницы ?_ym_debug=1 и откройте консоль разработчика (F12 - вкладка Console). При срабатывании события вы увидите запись:

[Метрика] Goal: form_submit

Метод 2. Расширение Яндекс Метрика для браузера

Установите официальное расширение Яндекс Метрика для Chrome или Firefox. Оно показывает все срабатывания счётчика и событий в реальном времени на любой странице.

Метод 3. Проверка через Network

В инструментах разработчика перейдите на вкладку Network, отфильтруйте по watch. При срабатывании цели должен появляться запрос к mc.yandex.ru с параметрами цели.

Частые ошибки при настройке JavaScript-событий

Ошибка 1. Код выполняется до загрузки счётчика

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

Ошибка 2. Несовпадение идентификатора

reachGoal('FormSubmit') в коде и цель с идентификатором formsubmit в Метрике - разные вещи. Регистр важен. Рекомендация: всегда используйте строчные буквы и подчёркивания: form_submit.

Ошибка 3. Событие не передаётся при закрытии страницы

Если пользователь кликнул на ссылку (например, на внешний сайт) и в обработчике клика стоит reachGoal - браузер может закрыть страницу раньше, чем событие отправится.

Решение: добавьте небольшую задержку:

link.addEventListener('click', function(e) {
    e.preventDefault();
    ym(XXXXXXXX, 'reachGoal', 'external_link');
    setTimeout(function() {
        window.location.href = link.href;
    }, 300);
});

Ошибка 4. Событие срабатывает несколько раз

Если обработчик события навешивается несколько раз (например, при использовании React или Vue без правильной очистки), событие может срабатывать 2-3 раза за одно действие. Используйте флаги или { once: true } в addEventListener.

Интеграция через Google Tag Manager

Если на сайте установлен GTM или Яндекс Тег Менеджер, JavaScript-события проще настроить без вмешательства в код:

  1. Создайте тег типа «Пользовательский HTML»
  2. Вставьте код с ym(XXXXXXXX, 'reachGoal', 'event_id')
  3. Создайте триггер (клик на элемент, отправка формы, custom event)
  4. Опубликуйте

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

Заключение

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