Подключение Метрики к общим шаблонам

В предыдущем уроке страница формировала локальные события. Теперь добавим явный приёмник Метрики, сохранив определения действий и постоянные ID материалов. Получится полезное разделение: страница знает, что сделал читатель, а адаптер знает, как сообщить об этом выбранному сервису.

Действия в панели относятся к владельцу собственного учебного сайта. Номер счётчика вы получаете в своей учётной записи; в наших файлах настоящего номера нет. Вымышленная библиотека analytics-lab не является установленной Метрикой на ProfessorWeb. Интерфейс и методы ниже сверены с официальной документацией на 10 октября 2026 года.

Счётчик и область наблюдения

Счётчик собирает сведения о страницах, на которых установлен его код. Он не начинает видеть всю библиотеку только потому, что в настройке указан домен. Если подключение появилось исключительно на главной, открытие старого XML-урока может остаться без наблюдения. Поэтому сначала определите набор шаблонов, через которые создаются нужные страницы.

В нашем проекте общая оболочка применяется к Markdown и сохранённому адресу /my/LINQ/linq_xml/level7/7_1.php. Подключение размещается в исходнике этой оболочки, а не в двух готовых HTML-файлах. Иначе следующая сборка удалит ручное изменение. Такой приём знаком по сохранению подтверждения вебмастера, но объект здесь другой: код сбора действий, а не доказательство владения сайтом.

В справке Метрики создание начинается с добавления счётчика и указания адреса, часового пояса и нужных настроек. Адрес вводится по формату текущей панели; в проверенной документации основной домен задаётся без префикса протокола. Код получают на вкладке счётчика и копируют в сайт. Следуйте коду именно своей панели, чтобы не собирать чужую статистику случайным номером. Создание и установка счётчика.

Часовой пояс запишите в заметке проекта. Семь календарных дней в разных поясах могут включать разные крайние события. Эта деталь важна позже, при сравнении экспортов. Настройка адресов и фильтров также входит в условия наблюдения: тестовое окружение не должно незаметно смешиваться с рабочими посещениями.

Не включайте все дополнительные функции только ради наличия переключателей. Для начала нам нужны открытия и три определённых действия. Запись взаимодействий и другие инструменты требуют собственной задачи и выбранных условий обработки данных. Они не устраняют ограничения событий: даже подробное наблюдение браузера не подтверждает, что читатель понял LINQ или успешно выполнил пример.

Место подключения в сборке

Для отдельного учебного проекта можно использовать фрагмент layouts/analytics.html, который подключается общей оболочкой. В него помещается полный код, выданный вашей панелью. Здесь мы не заменяем vendor-код сокращённым похожим листингом: необходимые части могут меняться, а вручную склеенный фрагмент трудно сопоставить с официальной установкой.

Сначала проверьте HTML, который должен получиться у обеих статей. Нужен один экземпляр подключения и правильный номер. Затем выясните, нет ли того же счётчика в менеджере тегов, старой оболочке или дополнительном плагине. Два способа подключения одного сервиса способны создавать повторы; одинаковый внешний вид страниц этого не показывает.

Для ProfessorWeb общие шаблоны уже позволяют централизовать подключение. Однако урок не предлагает немедленно менять действующий head сайта. Учебный пример отделён от него, а состав и режим будущей установки выбираются владельцем. Перенос самого кода между файлами не должен менять публичные URL или скрывать защищённые материалы.

Стандартный код может содержать noscript. По документации такой элемент размещают в body; нельзя механически переносить весь выданный фрагмент внутрь head, если он включает элементы другого назначения. Сверка итогового HTML нужна не только для количества скриптов, но и для правильного размещения частей установки.

Цель и сообщение из статьи

В договоре версии 1 событие продолжения называется lesson_next. Создайте для своей практики цель типа «Целевое событие» с точным идентификатором. Условие полного совпадения удобно для нашего маленького набора: оно не объединяет случайные имена, содержащие похожую часть строки. Аналогично определяются нужные цели открытия и активации исходника.

Официальный метод передачи цели — reachGoal. Параметры можно передать вместе с вызовом. Сохраните файл assets/metrica-sink.js; ниже он дан полностью. Функция получает номер явно и возвращает адаптер для интерфейса setAnalyticsSink из второго урока.

export function makeMetricaSink(counterId) {
  if (!Number.isInteger(counterId) || counterId <= 0) {
    throw new TypeError("Use your own counter ID");
  }
  return event => {
    if (typeof window.ym !== "function") {
      throw new Error("Metrica bootstrap is unavailable");
    }
    const {event_name, ...parameters} = event;
    window.ym(counterId, "reachGoal", event_name, parameters);
  };
}

Объект параметров содержит ID статьи, версию схемы и место действия. Он не формируется из всех атрибутов DOM. При переходе из Markdown в XML добавится target_article_id, поэтому редактор сможет отличить разные назначения. Сам вызов ym ещё не является отчётом о принятом событии: стандартная функция может сначала помещать вызовы в очередь загрузки.

Подключение адаптера — отдельный фрагмент инициализации после официального bootstrap. В нём импортируются setAnalyticsSink из events.js и makeMetricaSink из этого файла. Переменная counterId берётся из настройки вашего учебного проекта, затем вызывается setAnalyticsSink(makeMetricaSink(counterId)). Нельзя подставлять условный ноль как работающий номер: проверка намеренно остановит такой вариант.

После установки приёмника загрузите article-events.js из второго урока. Этот модуль сразу формирует lesson_open, поэтому порядок здесь влияет на первое открытие: bootstrap → setAnalyticsSink → обработчики статьи. Удобно использовать один входной модуль и выполнить await import("./article-events.js") после вызова setAnalyticsSink. Статический import "./article-events.js" в начале того же файла выполнится до его основного тела и не обеспечит нужный порядок. Уберите прежнее отдельное подключение обработчиков из HTML, чтобы инициализация оставалась единственной.

Если цель не заведена или её условие отличается, локальный объект останется правильным, но ожидаемое отражение цели может отсутствовать. Это не повод менять имя события в каждом обработчике. Сначала сопоставьте договор, параметры адаптера и настройку панели. Целевое событие Метрики, передача данных о событиях.

Наблюдение без поспешного вывода

Возьмём один контрольный переход Markdown → XML. До действия очистите только свой локальный диагностический журнал, чтобы старые записи не выглядели повторной отправкой. После активации ожидаются сообщение lesson_next и обычный переход. Если вкладка назначения не открылась из-за сети, исходное действие всё равно могло сформировать событие.

Дальше проверяются разные уровни: готовый HTML содержит установку, в браузере существует функция, локальный договор создаёт объект, адаптер вызывает платформу, сеть передаёт запрос, сервис показывает сведения. Не все уровни обновляются одновременно. Отсутствие строки в обычном отчёте сразу после нажатия нельзя автоматически трактовать как отсутствие самого вызова.

Сохраните в рабочей заметке дату, номер собственного тестового счётчика, страницу и источник проверки. Не публикуйте приватные данные посетителей вместе с упражнением. Для пояснения результата достаточно структуры сообщения и описания состояния. Наши учебные таблицы останутся вымышленными даже после того, как читатель получит собственные реальные наблюдения.

Если установка выполнена правильно, изменять договор при переходе на другую платформу не потребуется. Общая оболочка отвечает за присутствие кода, адаптер — за способ передачи, событие — за значение действия. В следующем уроке построим аналогичный приёмник GA4 и отдельно рассмотрим событие, ключевое событие и автоматически собираемый просмотр страницы.