Подключение Яндекс.Метрики к Next.js 15 с App Router

В этом руководстве мы разберём, как подключить Яндекс.Метрику к приложению на Next.js 15 с использованием App Router и TypeScript. Настроим инициализацию счётчика, отслеживание переходов между страницами и проверим, что данные отправляются корректно.

Зачем нужна Яндекс.Метрика?

Яндекс.Метрика — это система веб-аналитики, которая помогает:

отслеживать посещаемость и источники трафика;
анализировать поведение пользователей (клики, переходы, глубину просмотров);
измерять эффективность рекламных кампаний;
собирать данные для улучшения конверсии.

В приложениях на Next.js 15 (App Router) есть особенности клиентских компонентов, которые нужно учитывать при интеграции.

Шаг 1. Устанавливаем библиотеку

Для удобной интеграции используем пакет react-yandex-metrika:

$npm install react-yandex-metrika

Шаг 2. Создаём компонент для Метрики

В Next.js 15 все клиентские компоненты должны быть помечены директивой "use client". Создадим отдельный компонент для подключения Яндекс.Метрики.

tsx
// components/YandexMetrika.tsx
"use client";

import { usePathname } from "next/navigation";
import { useEffect } from "react";
import ym, { YMInitializer } from "react-yandex-metrika";

const YM_COUNTER_ID = 12345678; // замените на ваш ID счётчика

const YandexMetrika: React.FC = () => {
  const pathname = usePathname();

  // Отправляем событие "hit" при изменении маршрута
  useEffect(() => {
    if (pathname) {
      ym("hit", pathname);
    }
  }, [pathname]);

  return (
    <YMInitializer
      accounts={[YM_COUNTER_ID]}
      options={{
        defer: true,
        webvisor: true,
        clickmap: true,
        trackLinks: true,
        accurateTrackBounce: true,
      }}
      version="2"
    />
  );
};

export default YandexMetrika;

Что делает компонент?

YMInitializer загружает скрипт Метрики и инициализирует счётчик.
usePathname отслеживает переходы между страницами.
При каждом изменении маршрута отправляется событие hit.

Шаг 3. Подключаем в RootLayout

Чтобы Метрика работала на всех страницах, добавим компонент в app/layout.tsx.

tsx
// app/layout.tsx
import type { ReactNode } from "react";
import YandexMetrika from "@/components/YandexMetrika";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="ru">
      <body>
        {children}
        <YandexMetrika />
      </body>
    </html>
  );
}

📌 Почему внутри <body>?
Скрипт Метрики должен выполняться в браузере. Размещение компонента внутри <body> гарантирует корректную загрузку.

Шаг 4. Проверяем работу

Запускаем проект:
$npm run dev
Открываем сайт в браузере и переходим по разным страницам.
В инструментах разработчика (F12 → Network) проверяем запросы к mc.yandex.ru.
Смотрим «Реальное время» в интерфейсе Яндекс.Метрики.

Дополнительные настройки (опционально)

Метрика позволяет отслеживать не только посещения, но и цели и пользовательские параметры.

Примеры:

tsx
// Отправка события-цели
ym("reachGoal", "goal_name");

// Передача пользовательских параметров
ym("userParams", { userId: 123 });

Итог

Теперь ваш счётчик Яндекс.Метрики подключён к Next.js 15 (App Router) с TypeScript и работает корректно:

✅ инициализация при загрузке сайта;
✅ отслеживание переходов между страницами;
✅ отправка данных в Метрику без лишних настроек.

Это простой и удобный способ добавить аналитику в ваше приложение 🚀

Полезные ссылки

Если вы используете Next.js 16 способ подключения будет немного отличаться. Смотри эту статью: Подключение Яндекс.Метрики к Next.js 16 (App Router) + TypeScript

Подключение Яндекс.Метрики к Next.js 15