← Назад к блогу
4 мин чтенияnextjstutorial

Добавление аналитики с приоритетом конфиденциальности в приложение Next.js

Пошаговое руководство по интеграции Monoid в Next.js без cookie, баннеров согласия или головной боли соответствия.

Приложения Next.js имеют несколько распространённых подходов к аналитике, и большинство из них включают либо баннер cookie, либо тяжёлый сторонний скрипт, который замедляет ваши Core Web Vitals. Вот как добавить аналитику с приоритетом конфиденциальности в реальном времени без того и другого.

Что вы получите

  • Отслеживание просмотров страниц при каждом изменении маршрута, включая клиентскую навигацию
  • Подсчёты посетителей, источники переходов, страны, семейства браузеров и типы устройств
  • Никаких cookie, никакого fingerprinting, никакого согласия GDPR не требуется
  • Один асинхронный тег script — никакого npm-пакета для поддержки

Шаг 1: Создайте аккаунт Monoid

Зарегистрируйтесь на monoid.website и создайте новый сайт. Вы получите site_id — короткий буквенно-цифровой идентификатор для вашего ресурса.

Шаг 2: Добавьте трекер в ваш макет

В Next.js 13+ с App Router добавьте скрипт трекера в корневой layout.tsx:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://api.monoid.website/tracker.min.js"
          data-site-id="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Использование strategy="afterInteractive" загружает скрипт после того, как страница становится интерактивной, сохраняя ваш показатель Largest Contentful Paint неизменным.

Шаг 3: Обработка клиентской навигации

Встроенный хук history.pushState трекера срабатывает автоматически при каждом событии навигации как в Pages Router, так и в App Router. Вам не нужно добавлять ничего дополнительного.

Если вы хотите отправлять пользовательские события — например, когда пользователь завершает оформление заказа или нажимает определённую кнопку — вызывайте глобальный помощник напрямую:

window.monoid('event', 'checkout_complete')

Шаг 4: Проверьте в дашборде

Откройте свой дашборд Monoid и перейдите на страницу вашего сайта. Вы должны увидеть, как живой посетитель появляется в реальном времени в течение нескольких секунд. Если у вас настроена staging-среда, убедитесь, что она использует отдельный site_id, чтобы трафик разработки не загрязнял ваши метрики продакшена.

Что не требуется

Вам не нужно устанавливать менеджер согласия на cookie. Вам не нужно обновлять вашу политику конфиденциальности, чтобы упомянуть аналитические cookie (потому что их нет). И вам не нужен npm-пакет — трекер представляет собой один файл vanilla JavaScript, обслуживаемый из глобальной сети на краю.

Семейство браузеров и тип устройства определяются на стороне сервера из обычного User-Agent запроса для агрегированной отчётности. Полные строки User-Agent, версии браузеров, cookie, постоянные идентификаторы и отпечатки устройств никогда не сохраняются.

Для большинства проектов Next.js это занимает менее двух минут от регистрации до живых данных.