124 lines
4.4 KiB
Markdown
124 lines
4.4 KiB
Markdown
# 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 счетчиков
|
||
```
|
||
|
||
## Конфигурация
|
||
|
||
### Статичные константы
|
||
|
||
```typescript
|
||
// 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` - геолокация
|
||
|
||
### Отслеживание событий
|
||
|
||
```typescript
|
||
import { analyticsService } from "@/services/analytics";
|
||
|
||
// Отправить событие в Yandex Metrika
|
||
analyticsService.trackEvent("button_click", {
|
||
button_name: "subscribe_now",
|
||
screen: "retaining"
|
||
});
|
||
```
|
||
|
||
### Доступ к данным пользователя
|
||
|
||
```typescript
|
||
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`:
|
||
|
||
```tsx
|
||
<YandexMetrika />
|
||
<AnalyticsProvider>
|
||
{/* ... */}
|
||
<PageViewTracker />
|
||
{/* ... */}
|
||
</AnalyticsProvider>
|
||
```
|
||
|
||
## Отличия от witlab-funnel
|
||
|
||
1. **Только Yandex Metrika** - без Google Analytics
|
||
2. **Статичный ID** - Яндекс Метрика использует статичный ID вместо динамического из воронки
|
||
3. **Параметры пользователя** - Автоматическая загрузка и установка параметров из `/me`
|
||
4. **Унифицированный сервис** - Единый `AnalyticsService` для управления
|
||
|
||
## Проверка работы
|
||
|
||
1. Откройте консоль разработчика в браузере
|
||
2. Перейдите между страницами приложения
|
||
3. Вы увидите сообщения об отправке событий в YM
|
||
4. Проверьте наличие cookies `_ym_uid`
|
||
|
||
## Совместимость
|
||
|
||
- ✅ TypeScript
|
||
- ✅ ESLint (без ошибок, только предупреждения о существующих `any`)
|
||
- ✅ Next.js 15
|
||
- ✅ Server-side rendering
|
||
- ✅ Динамические маршруты
|