AdPump — Основы HTML и JavaScript для установки счётчика и настройки целей

Директологу не нужно быть программистом, но минимум HTML/JS полезен, чтобы самостоятельно проверить установку счётчика, поставить простую цель по клику и не ждать разработчика для каждой мелочи.

Коротко: Код счётчика вставляется в <head> страницы. JS-события (клик, отправка формы) можно повесить через onclick или addEventListener, а проверить их срабатывание — прямо в консоли браузера, без обращения к разработчику.

← Каталог: Метрика · Введение · Системы аналитики · Счётчик и код · Безопасность данных · Карта настройки · Типы целей · Цели · Автоцели и ecommerce · ЯТМ на практике · Тег Менеджер · Фильтры и операции · Доступы и роли · Вебвизор и карты · Карты и формы · Семплирование · Отчёты · Стандартные отчёты · Атрибуция · Сегментация · Офлайн-конверсии · ClientID и идентификаторы · Measurement Protocol · CRM и интеграции · Битрикс24 и Albato · Мессенджеры · Воронки · AppMetrica · API: введение · API: возможности · API: архитектура · API: окружение · API: отчёты на практике · API: Logs · DataLens · Чек-лист · Справка Яндекс Метрики

Содержание

Где на странице должен быть код счётчика
JS-события для целей: минимальный набор
Как проверить событие без разработчика
Когда лучше не писать код руками
Частые ошибки новичков

Где на странице должен быть код счётчика

HTML-страница состоит из <head> (метаданные, скрипты) и <body> (видимый контент). Код счётчика Метрики ставится в <head>, максимально ближе к его началу — это гарантирует, что счётчик инициализируется раньше, чем пользователь успеет покинуть страницу.

Важно: Частая ошибка — код счётчика оказывается вставлен в <body> или продублирован в двух местах шаблона (например, в общем футере и в отдельном шаблоне лендинга). Проверяйте исходный код страницы, а не только визуальный результат.

JS-события для целей: минимальный набор

Для цели типа «JavaScript-событие» (см. Типы целей) нужно, чтобы при действии пользователя вызывался специальный код счётчика. Базовый паттерн — обработчик клика:

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

Здесь COUNTER_ID — номер счётчика, а 'ORDER_BUTTON_CLICK' — идентификатор цели, который затем указывается в настройках цели в интерфейсе Метрики.

Как проверить событие без разработчика

Откройте страницу сайта, нажмите F12 (или правой кнопкой -> «Просмотреть код») и перейдите на вкладку «Консоль». Если на сайте есть ошибки JS, которые мешают счётчику, они будут видны там же красным текстом. Дополнительно Метрика поддерживает режим отладки через параметр адреса ?_ym_debug=2 — он показывает в консоли, какие события и цели фактически отправляются.

Когда лучше не писать код руками

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

Частые ошибки новичков

Код цели вызывается до того, как загрузился сам счётчик — событие «улетает в пустоту».
Неверно указан номер счётчика (COUNTER_ID) — часто путают с номером другого проекта.
Обработчик навешен на элемент, который на странице добавляется динамически позже (нужна делегация событий или инициализация после отрисовки блока).
Название цели в коде не совпадает буквально с идентификатором, указанным в настройках цели в интерфейсе.

Комментарий эксперта

Роман Скороходов «Директ — мой вайб»
Руководитель отдела контекстной рекламы Monster Context, рекомендованный специалист Яндекса.

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

Частые вопросы

Нужно ли директологу уметь программировать?
Нет, достаточно понимать структуру HTML-страницы и базовый синтаксис одного JS-вызова для целей — этого хватает для 90% самостоятельных проверок.

Как посмотреть код текущего сайта без доступа к CMS?
Через «Просмотреть код страницы» в браузере (Ctrl+U) можно увидеть отданный HTML, включая место установки счётчика.

Что делать, если правка кода требует релиза, а нужно быстро?
Использовать Тег Менеджер — теги публикуются из интерфейса без релиза кода сайта.

Дальше: Типы целей, ЯТМ на практике.

Материал подготовлен редакцией AdPump совместно со специалистами Monster Context (m-context.ru) на основе практики ведения аккаунтов Яндекс Директа и обновлений Яндекс Метрики 2026 года.

Перейти в инструмент