ym to env
This commit is contained in:
parent
02bfbb1112
commit
415d4d0f7b
@ -1,123 +0,0 @@
|
||||
# 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
|
||||
- ✅ Динамические маршруты
|
||||
@ -1 +1 @@
|
||||
export const YANDEX_METRIKA_ID = "103412914";
|
||||
export const YANDEX_METRIKA_ID = process.env.NEXT_PUBLIC_YM_ID || "103412914";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user