Analytics System Implementation

Обзор

В проект witlab-app была добавлена система аналитики на основе Yandex Metrika по аналогии с witlab-funnel:

Yandex Metrika - отслеживание просмотров страниц и событий
PageViewTracker - автоматическая отслежка переходов между страницами
AnalyticsService - управление параметрами пользователя и событиями

Структура файлов

src/
├── components/analytics/
│   ├── PageViewTracker.tsx       # Отслеживание переходов
│   ├── YandexMetrika/
│   │   ├── YandexMetrika.tsx     # Компонент Яндекс Метрики
│   │   └── index.ts
│   └── index.ts                  # Экспорты аналитики
├── providers/
│   └── analytics-provider.tsx    # Провайдер аналитики
├── services/analytics/
│   ├── analyticsService.ts       # Сервис аналитики
│   └── index.ts
└── shared/constants/
    └── analytics.ts              # Константы ID счетчиков

Конфигурация

Статичные константы

// src/shared/constants/analytics.ts
export const YANDEX_METRIKA_ID = "103412914";

Использование

Автоматическая отслежка страниц

Система автоматически отслеживает все переходы между страницами через PageViewTracker.

Параметры пользователя

При инициализации система автоматически загружает данные пользователя через /users/me и устанавливает параметры в Yandex Metrika:

user_id - ID пользователя
email - email пользователя
locale - язык пользователя
timezone - часовой пояс
profile_name, profile_gender, profile_age, profile_sign - данные профиля
partner_gender, partner_age, partner_sign - данные партнера
country, region, city - геолокация

Отслеживание событий

import { analyticsService } from "@/services/analytics";

// Отправить событие в Yandex Metrika
analyticsService.trackEvent("button_click", {
  button_name: "subscribe_now",
  screen: "retaining"
});

Доступ к данным пользователя

import { analyticsService } from "@/services/analytics";

if (analyticsService.isReady()) {
  const user = analyticsService.getUser();
  console.log("Current user:", user);
}

Логирование

Система предоставляет детальное логирование в консоли:

✅ [YM] Page View Event Sent
✅ [Analytics] Service initialized with user data
✅ [YM] User parameters set

Интеграция в layout

Компоненты аналитики добавлены в src/app/[locale]/layout.tsx:

<YandexMetrika />
<AnalyticsProvider>
  {/* ... */}
  <PageViewTracker />
  {/* ... */}
</AnalyticsProvider>

Отличия от witlab-funnel

Только Yandex Metrika - без Google Analytics
Статичный ID - Яндекс Метрика использует статичный ID вместо динамического из воронки
Параметры пользователя - Автоматическая загрузка и установка параметров из /me
Унифицированный сервис - Единый AnalyticsService для управления

Проверка работы

Откройте консоль разработчика в браузере
Перейдите между страницами приложения
Вы увидите сообщения об отправке событий в YM
Проверьте наличие cookies _ym_uid

Совместимость

✅ TypeScript
✅ ESLint (без ошибок, только предупреждения о существующих any)
✅ Next.js 15
✅ Server-side rendering
✅ Динамические маршруты

4.4 KiB Raw Blame History Unescape Escape