Как настроить цели в Метрике через JavaScript-события

Привлечение пациентов через сайт клиники примерно в 4 раза дешевле обычной рекламы.

Запрет о рекламе медицинских услуг повысил актуальность интернет-продвижения медицинских услуг. Ищите пациентов в интернете, не боясь попасть под законодательные запреты.

Пожалуй, начнем с простого вопроса: почему вообще вам нужно отслеживать события через JavaScript? Всё просто — базовой настройки целей в Яндекс.Метрике бывает недостаточно. Да, если вы хотите лишь отследить визиты на страницы или отправку форм, стандартные цели работают нормально. Но вот как только требуется больше гибкости — например, отслеживать клики по кнопкам, активацию всплывающих окон, скроллы или взаимодействия с конкретными элементами, — тут и появляется необходимость интегрировать JS.

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

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

Пример типичных событий:

Клик по элементу (click);
Наведение курсора на объект (mouseover);
Отправка формы (submit);
Нажатие клавиши (keydown, keypress, keyup);
Скроллинг (scroll).

Допустим, пользователь кликает на кнопку «Купить сейчас». В этот момент браузер фиксирует событие клика. JS фиксирует, обрабатывает, и передает действие в Метрику как цель.

Как JavaScript-событие интегрируется с Яндекс Метрикой

Для передачи события в системы аналитики используется специальная функция ym(), которая «сообщает» системе, что произошло какое-то важное действие.

Функция ym() выглядит так:

ym(ИД_СЧЕТЧИКА, 'reachGoal', 'имя_цели');

где:

ИД_СЧЕТЧИКА — это идентификатор вашего счетчика;
'reachGoal' — команда, которая говорит Метрике: «Засчитай цель»;
'имя_цели' — уникальное название цели для отслеживания конкретного действия.

Теперь давайте посмотрим на это на примере. Есть кнопка «Купить», и мы хотим, чтобы каждый клик по ней фиксировался как достижение цели.

<button id="buy-now">Купить сейчас</button>

JS-код, который будет отслеживать клик и передавать его в Метрику:

document.getElementById('buy-now').addEventListener('click', function() {
    ym(12345678, 'reachGoal', 'button_click'); // 'button_click' - это название цели
});

Что произойдет, когда пользователь кликнет на кнопку:

Событие клика (click) произойдет, браузер зарегистрирует действие.
JavaScript-код «подслушает» событие и выполнит функцию.
Функция ym() передаст событие в сервис как достижение цели button_click.

Такое взаимодействие можно сравнить с кнопкой на старом фотоаппарате: нажали — сделали снимок (зафиксировали действие). Инструмент аналитики как раз фиксирует «снимок» и сохраняет его в отчете для дальнейшего анализа.

Зачем нужны такие цели

Теперь вы, возможно, зададитесь вопросом: «Зачем мне это нужно? Разве нельзя просто отслеживать стандартные цели?». Стандарт— это, конечно, хорошо, но JS-события позволяют:

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

В этом и заключается магия интеграции JS с Метрикой: вы не просто собираете сырые данные, а создаете структурированные отчеты, которые помогают принимать более взвешенные решения по оптимизации стратегии.

Подключение Яндекс Метрики на сайт

Прежде чем вы начнете настраивать JS-цели, необходимо убедиться, что счетчик корректно установлен. Как это сделать:

Зарегистрируйтесь в Метрике и создайте новый счетчик по инструкции.
Получите код счетчика. Пример HTML-кода:

<!-- Код Яндекс.Метрики -->
<script type="text/javascript" >
   (function(m,e,t,r,i,k,a){ m[i]=m[i]||function(){ (m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0];k.async=1;k.src=r;a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(YOUR_COUNTER_ID, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true
   });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/YOUR_COUNTER_ID" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Код Яндекс.Метрики -->

Не забудьте заменить YOUR_COUNTER_ID на уникальный идентификатор вашего счетчика.

Куда вставлять код счетчика

Чтобы Метрика фиксировала все действия на сайте, нужно вставить данные в HTML-код в блок <head>. Код будет загружаться при загрузке страницы и начнет фиксировать все важные события. Вставка в <head> также гарантирует, что счетчик загрузится до основного контента, что важно для точного трекинга.

<html>
<head>
   <!-- Другие теги head, например, мета-теги, стили, скрипты -->
   
   <!-- Вставляем код Яндекс.Метрики сюда -->
   <script type="text/javascript" >
      (function(m,e,t,r,i,k,a){ m[i]=m[i]||function(){ (m[i].a=m[i].a||[]).push(arguments)};
      m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0];k.async=1;k.src=r;a.parentNode.insertBefore(k,a)})
      (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

      ym(YOUR_COUNTER_ID, "init", {
           clickmap:true,
           trackLinks:true,
           accurateTrackBounce:true
      });
   </script>
   
   <!-- Это тег для работы с браузерами без поддержки JavaScript -->
   <noscript><div><img src="https://mc.yandex.ru/watch/YOUR_COUNTER_ID" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

   <!-- Остальные теги, например, стили или другие скрипты -->
</head>
<body>
   <!-- Содержимое страницы: текст, изображения, формы и т.д. -->
</body>
</html>

Теперь счетчик установлен, можно переходить к следующему шагу — настройке событий.

Настройка JS-события как цели

Когда счетчик активен, можно настроить отслеживание конкретных действий с помощью JavaScript. Рассмотрим несколько примеров:

Пример 1. Отслеживание клика по кнопке

Допустим, на сайте есть кнопка с призывом к действию, и мы хотим фиксировать каждый клик по ней, как цель. Для этого необходимо:

Найти кнопку в HTML-коде. Пример:

<button id="cta-button">Купить сейчас</button>

Добавить JS-код, который будет отслеживать событие:

document.getElementById('cta-button').addEventListener('click', function() {
    ym(YOUR_COUNTER_ID, 'reachGoal', 'button_click'); // 'button_click' – это название цели
});

Теперь каждый раз, когда пользователь кликнет по этой кнопке, Метрика зафиксирует событие button_click.

Пример 2. Отслеживание отправки формы

Формы — ключевые элементы конверсии на любом сайте. Если вы хотите отслеживать их отправку, процесс будет похож на отслеживание клика, только мы будем использовать событие submit.

Например, форма выглядит так:

<form id="lead-form">
   <input type="text" name="name" required />
   <input type="email" name="email" required />
   <button type="submit">Отправить</button>
</form>

Добавляем код отслеживания:

document.getElementById('lead-form').addEventListener('submit', function() {
    ym(YOUR_COUNTER_ID, 'reachGoal', 'form_submit'); // 'form_submit' – это цель для отправки формы
});

Теперь, каждая отправка формы будет попадать в сервис аналитики за счет настроенного события form_submit.

Важные нюансы и проверка работы целей

Как понять, что всё настроено правильно? Вот несколько советов:

Тестируйте события вручную. Попробуйте сами кликнуть по кнопке или отправить форму. Если всё работает корректно, Метрика отобразит событие в отчете «Конверсии».
Проверяйте работу через «Инспектор кода». Откройте консоль разработчика в браузере (обычно F12) и следите за отправляемыми событиями.
Убедитесь, что события уникальны. Чтобы не запутаться в отчетах, где события называются однотипно, вроде «клик1», «клик2». Придумывайте логичные и понятные названия для каждой цели.

Делаем данные полезными

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

Настройка цели как Javascript-события в Метрике