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