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

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

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

Яндекс.Метрика — это мощный инструмент для анализа посещаемости вашего сайта. С ее помощью вы можете:

  • Отслеживать количество посетителей.
  • Анализировать поведение пользователей (клики, переходы по ссылкам).
  • Оценивать эффективность рекламных кампаний.

Для Next.js приложений, особенно с использованием App Router, есть несколько нюансов, которые нужно учесть при подключении счетчика.

Шаг 1: Установка библиотеки react-yandex-metrika

Для удобства работы с Яндекс.Метрикой в React-приложениях существует библиотека react-yandex-metrika. Установим ее:

npm install react-yandex-metrika

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

В Next.js 15 с App Router все клиентские компоненты должны быть помечены директивой "use client". Создадим компонент YandexMetrika, который будет отвечать за инициализацию счетчика и отслеживание переходов между страницами.

// components/YandexMetrika.js
"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 = () => {
  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;

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

  1. Инициализация счетчика: Компонент YMInitializer загружает скрипт Яндекс.Метрики и инициализирует счетчик.
  2. Отслеживание переходов: С помощью хука usePathname из next/navigation мы отслеживаем изменения маршрута и отправляем событие hit в Яндекс.Метрику.

Шаг 3: Добавление компонента в RootLayout

Теперь добавим компонент YandexMetrika в корневой layout.js. Это гарантирует, что счетчик будет работать на всех страницах приложения.

// app/layout.js
import YandexMetrika from "@/components/YandexMetrika";

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

Почему внутри <body>?

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

Шаг 4: Проверка работы счетчика

После выполнения всех шагов:

  1. Запустите приложение: 
    npm run dev
  2. Откройте приложение в браузере и перейдите на несколько страниц.
  3. Проверьте, отправляются ли данные в Яндекс.Метрику:
    • Откройте инструменты разработчика в браузере (F12) и найдите запросы к mc.yandex.ru.
    • Проверьте данные в реальном времени в интерфейсе Яндекс.Метрики.

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

Если вам нужно добавить дополнительные параметры для отслеживания (например, цели или пользовательские события), вы можете использовать методы из библиотеки react-yandex-metrika. Например:

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

Итог

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

  • Инициализироваться при загрузке страницы.
  • Отслеживать переходы между страницами.
  • Отправлять данные в Яндекс.Метрику.

Этот подход прост, эффективен и не требует сложных настроек. Удачи с аналитикой вашего приложения! 🚀

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

nextjsyandex-metrikaаналитика
Обсудим ваш проект?
Не ждите идеального момента или подходящего времени — начинайте прямо сейчас! Свяжитесь со мной, и я помогу воплотить ваши идеи в реальность.