Подключение Яндекс.Метрики и целей на HTML-лендинг: пошаговая инструкция

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

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

Зачем метрика на лендинге

Яндекс.Метрика отвечает на основные вопросы любого владельца сайта:

Сколько людей заходит и откуда (реклама, поиск, прямые заходы, соцсети).
На каких устройствах (мобильные vs десктоп) и в каких браузерах.
Сколько времени проводят на сайте, до какого блока доскроливают.
Какой процент уходит сразу (показатель отказов).
Сколько конверсий — заполнили форму, нажали на кнопку, кликнули по телефону.
С какой страницы и с какой рекламной кампании конверсия дороже или дешевле.
Где пользователи кликают (карта кликов), куда смотрят (карта внимания), как двигают мышью (вебвизор).

Без этих данных любая оптимизация — гадание. С данными — точная работа над слабыми местами.

Шаг 1. Создание счётчика

Открываете metrika.yandex.ru.
Логинитесь в Яндекс-аккаунт (или создаёте новый).
Нажимаете «Добавить счётчик».
Заполняете поля:
- Имя счётчика. Любое, например «Лендинг ремонт ванных».
- Адрес сайта. https://yourdomain.ru без слэша в конце.
- Часовой пояс. Для РФ — Москва.
- Принимаете условия использования.
Включаете дополнительные опции (рекомендую все):
- Вебвизор, карты, аналитика форм — записывают сессии пользователей.
- Точный показатель отказов — точнее определяет «отказников».
- Отправка хитов в Яндекс.Директ — для рекламы.
- Сохранение POST-параметров — для анализа форм.
Нажимаете «Создать счётчик».

Получаете номер счётчика (8 цифр, например 92345678) и код для вставки на сайт.

Шаг 2. Установка кода на сайт

Код Метрики выглядит примерно так:

<!-- Yandex.Metrika counter -->
<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();
   for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
   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(92345678, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
   });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/92345678" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

Этот код нужно вставить на каждую страницу сайта в секцию <head> — как можно ближе к открывающему тегу.

Куда вставлять

Открываете файл index.html (и каждый дополнительный about.html, contact.html и т.д.) в текстовом редакторе. Находите тег <head> и вставляете код Метрики сразу после него:

<head>
  <meta charset="UTF-8">
  <title>Ваш лендинг</title>

  <!-- Yandex.Metrika counter -->
  ... код метрики ...
  <!-- /Yandex.Metrika counter -->

  <link rel="stylesheet" href="css/style.css">
</head>

Загружаете обновлённые файлы

Через FTP или панель управления хостинга заливаете изменённые HTML-файлы на сервер, заменяя старые.

Шаг 3. Проверка работы

Через несколько минут после установки:

Откройте сайт в браузере (с компьютера или телефона).
Зайдите в Метрику → ваш счётчик → раздел «Сводка».
В правом верхнем углу — счётчик «Сейчас на сайте». Должно показать минимум 1.
В разделе «Посетители онлайн» виден ваш визит с указанием браузера, ОС и устройства.

Если ничего не отображается через 10 минут — проверьте:

Код Метрики на странице (откройте «Просмотр кода» → Ctrl+F → найдите «ym»).
Нет ли блокировщика рекламы — он мешает счётчику.
Правильный номер счётчика подставлен в коде.

Цели: что это и зачем

Цель в Метрике — это действие пользователя на сайте, которое вы считаете «конверсией». Например:

Заполнил форму заявки.
Нажал на кнопку «Позвонить».
Кликнул по номеру телефона.
Доскроллил до блока с ценами.
Провёл на сайте более 2 минут.
Открыл более 3 страниц.

Когда цель достигнута, Метрика фиксирует это как конверсию. Дальше вы можете:

Видеть конверсию в реальном времени;
Сравнивать конверсию по источникам трафика (Директ, поиск, прямые);
Передавать конверсии в Яндекс.Директ для автостратегий.

Типы целей в Метрике

Количество просмотров. Пользователь посмотрел N или больше страниц.
Посещение страниц. Открыл страницу с определённым URL (например, /thank-you.html).
JavaScript-событие. Срабатывает при вызове функции ym(ID, 'reachGoal', 'NAME') из вашего JS-кода. Самый гибкий вариант.
Клик по кнопке. С использованием атрибута data-yagoals в HTML.
Время на сайте. Провёл N или больше секунд.
Составная цель. Цепочка из нескольких целей подряд.

Цель на отправку формы

Самый важный тип цели — конверсия в заявку.

Способ 1. JavaScript-событие в обработчике формы

В JS-коде, который обрабатывает форму, после успешной отправки добавляете строчку:

ym(92345678, 'reachGoal', 'form_submit');

Где 92345678 — номер вашего счётчика, 'form_submit' — название цели (любое латиницей).

Пример с Telegram-формой:

if (response.ok) {
  document.getElementById('success').style.display = 'block';
  ym(92345678, 'reachGoal', 'form_submit');
}

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

В Метрике → ваш счётчик → Настройки → Цели → Добавить цель.
Имя: «Отправка формы заявки».
Тип: JavaScript-событие.
Идентификатор: form_submit (тот же, что в коде).
Сохранить.

Способ 2. Через страницу благодарности

После отправки формы перенаправляете пользователя на thank-you.html. В Метрике создаёте цель:

Тип: Посещение страниц.
Условие: URL содержит /thank-you.html.

Проще в реализации, но требует отдельной страницы.

Цель на клик по кнопке

Полезно для кнопок «Заказать звонок», «Получить расчёт» и т.п.

Через JavaScript-событие

<button onclick="ym(92345678, 'reachGoal', 'call_request_click'); openCallModal()">
  Заказать звонок
</button>

Через addEventListener

document.querySelectorAll('.cta-button').forEach(btn => {
  btn.addEventListener('click', () => {
    ym(92345678, 'reachGoal', 'cta_click');
  });
});

Цель на скролл до блока

Понимать, доскроливают ли пользователи до блока с ценами или формой:

const targetBlock = document.getElementById('prices');
const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    ym(92345678, 'reachGoal', 'scrolled_to_prices');
    observer.disconnect(); // считаем один раз
  }
});
observer.observe(targetBlock);

Цель на клик по телефону

На мобильных пользователи часто кликают на номер телефона для звонка. Это важный показатель.

<a href="tel:+71234567890" onclick="ym(92345678, 'reachGoal', 'phone_click')">
  +7 (123) 456-78-90
</a>

Цель в Метрике — JavaScript-событие с идентификатором phone_click.

Вебвизор и карты

Уникальные инструменты Метрики, которых нет в Google Analytics.

Вебвизор

Записывает реальные сессии пользователей — как они двигают мышью, что кликают, что заполняют. Можно смотреть как видео. Бесценно для понимания, где люди «застревают».

Метрика → Вебвизор → выберите запись по фильтрам (источник, продолжительность, цель).

Карта кликов

Тепловая карта: какие места на странице кликают больше всего. Полезно увидеть, что люди пытаются кликать на не-кликабельные элементы (например, на иконку, которая не ссылка) — это сигнал доработать дизайн.

Карта скроллинга

Показывает, до какого процента страницы доскроливает каждый процент посетителей. Если 80% уходит до блока с формой — форма стоит слишком низко, надо поднять.

Аналитика форм

Видно, какие поля формы пользователи заполняют, какие пропускают, на каком поле уходят. Помогает упростить форму и поднять конверсию.

Интеграция с Яндекс.Директ

Если запускаете рекламу в Директе:

В настройках счётчика Метрики разрешите «Отправка хитов в Директ».
В рекламных кампаниях Директа подключите счётчик Метрики.
Включите автоцель «Заявка» — Директ научится оптимизировать показы на конверсию.

Без этого реклама работает «вслепую» — Директ не знает, какие клики приводят к заявкам, какие нет.

FAQ

Метрика бесплатная?

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

Можно ли установить и Метрику, и Google Analytics?

Да, без проблем. Обычно ставят оба: Метрика — для российской аудитории (вебвизор, карты), GA4 — для общей аналитики и западных рекламных систем.

Сколько времени собираются данные после установки?

Первые посетители — сразу. Полноценная статистика накапливается за неделю-две. Для надёжных выводов о конверсии нужно минимум 100 заявок — это от 1000 посетителей при конверсии 10%.

Влияет ли Метрика на скорость загрузки сайта?

Минимально. Скрипт загружается асинхронно, не блокирует отрисовку. Влияние на Core Web Vitals — в пределах погрешности.

Можно ли смотреть Метрику на мобильном?

Да, есть приложения «Яндекс.Метрика» для iOS и Android с большинством отчётов.

Как поставить Метрику, если у меня уже стоят другие скрипты?

Метрика совместима с большинством других скриптов (jQuery, AOS, popup-библиотеки). Просто добавьте её код в <head> отдельным блоком — конфликтов обычно нет.

Как настроить цели без программирования?

Через тип «Посещение страниц» — после отправки формы перенаправляйте на /thank-you.html и создавайте цель на эту страницу. Без JS-кода.

Что делать, если показывает 100% отказов?

Метрика считает отказом визит короче 15 секунд с одной страницей. Включите «Точный показатель отказов» в настройках счётчика — будет точнее. Лендинги в принципе имеют высокий отказ (часто 50–70%), это норма для одностраничников.

Чек-лист настройки

☐ Создан счётчик Метрики
☐ Включены вебвизор, карты, точный отказ
☐ Код Метрики вставлен на все страницы
☐ Загружены обновлённые файлы на хостинг
☐ Проверена работа через раздел «Посетители онлайн»
☐ Создана цель на отправку формы
☐ Код ym(..., 'reachGoal', '...') вызывается после успешной отправки
☐ Создана цель на клик по кнопке
☐ Создана цель на клик по телефону
☐ Создана цель на скролл (если важно)
☐ Сделан тестовый визит — цель засчиталась
☐ Интегрировано с Яндекс.Директ (если есть реклама)
☐ Настроены email-уведомления о достижении целей

Заключение

Яндекс.Метрика на лендинге — обязательный минимум. 15 минут установки, и вы получаете полную картину работы сайта: трафик, конверсии, поведение пользователей, эффективность рекламы. Без этого любые попытки оптимизации — стрельба по площадям.

Если ещё ищете готовый HTML-шаблон с местом под код Метрики — посмотрите подборку шаблонов на Zettabyte. А под размещение лендинга подойдёт самый недорогой тариф из каталога хостингов.