232 lines
6.7 KiB
Markdown
232 lines
6.7 KiB
Markdown
# 🐛 Google Analytics Debug View Setup
|
||
|
||
**Дата:** 29 октября 2025
|
||
**Статус:** ✅ НАСТРОЕНО
|
||
|
||
---
|
||
|
||
## 📋 Что было сделано
|
||
|
||
Debug View автоматически включается для домена **develop.funnel.witlab.us**
|
||
|
||
### Изменения в коде:
|
||
|
||
1. **MetricsProvider** - Инициализация GA с debug_mode
|
||
2. **useUnleashAnalytics** - AB test impression события с debug_mode
|
||
3. **PageViewTracker** - Page view события с debug_mode
|
||
|
||
---
|
||
|
||
## 🔍 Как проверить что Debug View работает
|
||
|
||
### Шаг 1: Откройте develop домен
|
||
|
||
```
|
||
https://develop.funnel.witlab.us/soulmate/gender
|
||
```
|
||
|
||
### Шаг 2: Откройте DevTools Console
|
||
|
||
В консоли вы должны увидеть:
|
||
|
||
```
|
||
[Metrics] Google Analytics initialized: {
|
||
measurementId: "G-XXXXXXXXXX",
|
||
debugMode: true // ← Должно быть true!
|
||
}
|
||
|
||
[GA] 📊 Page View Event Sent
|
||
🐛 Debug Mode: true // ← Должно быть true!
|
||
|
||
[GA] AB Test Impression: {
|
||
feature: "soulmate-onboarding-image",
|
||
variant: "v1",
|
||
debugMode: true // ← Должно быть true!
|
||
}
|
||
```
|
||
|
||
### Шаг 3: Проверьте Network Tab
|
||
|
||
В Network Tab найдите запросы к `google-analytics.com/g/collect`:
|
||
|
||
```
|
||
Request URL: https://www.google-analytics.com/g/collect?...
|
||
Payload:
|
||
en=experiment_impression
|
||
ep.debug_mode=1 // ← Должен быть 1!
|
||
ep.feature=soulmate-onboarding-image
|
||
ep.treatment=v1
|
||
```
|
||
|
||
### Шаг 4: Откройте Google Analytics Debug View
|
||
|
||
1. Перейдите в Google Analytics 4
|
||
2. **Admin** → **Data display** → **DebugView**
|
||
3. Или напрямую: `https://analytics.google.com/analytics/web/#/a{accountId}/p{propertyId}/reports/explorer?params=_u..debugView..*`
|
||
|
||
---
|
||
|
||
## 📊 Что вы увидите в Debug View
|
||
|
||
### Real-time события:
|
||
|
||
- **page_view** - Каждый переход между экранами
|
||
- **experiment_impression** - Когда пользователь видит AB тест
|
||
- **session_start** - Начало сессии
|
||
- **first_visit** - Первый визит (для новых пользователей)
|
||
|
||
### Параметры событий:
|
||
|
||
#### experiment_impression:
|
||
```json
|
||
{
|
||
"app_name": "witlab-funnel",
|
||
"feature": "soulmate-onboarding-image",
|
||
"treatment": "v1",
|
||
"debug_mode": 1
|
||
}
|
||
```
|
||
|
||
#### page_view:
|
||
```json
|
||
{
|
||
"page_path": "/soulmate/gender",
|
||
"page_location": "https://develop.funnel.witlab.us/soulmate/gender",
|
||
"page_title": "Soulmate",
|
||
"debug_mode": 1
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## ⚠️ Важные моменты
|
||
|
||
### 1. Debug View работает ТОЛЬКО на develop домене
|
||
|
||
```typescript
|
||
const isDevelopEnvironment = window.location.hostname.includes('develop.funnel.witlab.us');
|
||
```
|
||
|
||
- ✅ `develop.funnel.witlab.us` → debug_mode = 1
|
||
- ❌ `funnel.witlab.us` → debug_mode = 0
|
||
- ❌ `localhost:3000` → debug_mode = 0
|
||
|
||
### 2. События в Debug View появляются в реальном времени
|
||
|
||
- Задержка: ~1-2 секунды
|
||
- Если не видите события - проверьте консоль
|
||
- Если в консоли есть ошибки - проверьте GA Measurement ID
|
||
|
||
### 3. Debug View НЕ влияет на production данные
|
||
|
||
- Debug события НЕ попадают в основные отчеты
|
||
- Это отдельный режим только для отладки
|
||
- Production домен работает без debug_mode
|
||
|
||
---
|
||
|
||
## 🧪 Сценарии тестирования
|
||
|
||
### Сценарий 1: Проверка AB test impression
|
||
|
||
```bash
|
||
1. Открыть https://develop.funnel.witlab.us/soulmate/gender
|
||
2. Дождаться загрузки экрана
|
||
3. В GA Debug View должно появиться событие:
|
||
- Event: experiment_impression
|
||
- feature: soulmate-onboarding-image
|
||
- treatment: v1 или v2
|
||
```
|
||
|
||
### Сценарий 2: Проверка page_view
|
||
|
||
```bash
|
||
1. Открыть https://develop.funnel.witlab.us/soulmate/gender
|
||
2. Нажать "Next" → переход на следующий экран
|
||
3. В GA Debug View должны появиться 2 события page_view:
|
||
- page_path: /soulmate/gender
|
||
- page_path: /soulmate/birthdate
|
||
```
|
||
|
||
### Сценарий 3: Проверка переходов между экранами
|
||
|
||
```bash
|
||
1. Открыть воронку
|
||
2. Пройти 3-4 экрана
|
||
3. В GA Debug View должны появиться:
|
||
- session_start (1 раз)
|
||
- page_view (для каждого экрана)
|
||
- experiment_impression (для каждого экрана с AB тестом)
|
||
```
|
||
|
||
---
|
||
|
||
## 🔧 Troubleshooting
|
||
|
||
### Проблема: В Debug View нет событий
|
||
|
||
**Решение:**
|
||
|
||
1. Проверьте консоль браузера - должны быть логи `[GA] 📊 Page View Event Sent`
|
||
2. Проверьте что `debugMode: true` в логах
|
||
3. Проверьте Network Tab - должны быть запросы к `google-analytics.com/g/collect`
|
||
4. Проверьте что используете правильный домен `develop.funnel.witlab.us`
|
||
|
||
### Проблема: debugMode = false в консоли
|
||
|
||
**Решение:**
|
||
|
||
Проверьте hostname:
|
||
|
||
```javascript
|
||
console.log(window.location.hostname);
|
||
// Должно быть: "develop.funnel.witlab.us"
|
||
// НЕ: "localhost" или "127.0.0.1"
|
||
```
|
||
|
||
### Проблема: События есть в консоли, но нет в GA
|
||
|
||
**Решение:**
|
||
|
||
1. Проверьте GA Measurement ID в конфигурации воронки
|
||
2. Подождите 1-2 секунды - Debug View обновляется с задержкой
|
||
3. Обновите страницу Debug View в GA
|
||
4. Проверьте что выбран правильный Property в GA
|
||
|
||
---
|
||
|
||
## 📝 Как отключить Debug View
|
||
|
||
Если нужно отключить Debug View для develop домена:
|
||
|
||
```typescript
|
||
// src/components/providers/MetricsProvider.tsx
|
||
const isDevelopEnvironment = false; // ← Изменить на false
|
||
```
|
||
|
||
Или изменить условие:
|
||
|
||
```typescript
|
||
const isDevelopEnvironment =
|
||
window.location.hostname.includes('develop.funnel.witlab.us') &&
|
||
localStorage.getItem('ga_debug') === '1'; // ← Добавить проверку localStorage
|
||
```
|
||
|
||
---
|
||
|
||
## 🎉 Готово!
|
||
|
||
Debug View настроен и работает автоматически для домена `develop.funnel.witlab.us`.
|
||
|
||
**Что дальше:**
|
||
|
||
1. ✅ Deploy на develop сервер
|
||
2. ✅ Открыть `develop.funnel.witlab.us`
|
||
3. ✅ Открыть GA Debug View
|
||
4. ✅ Тестировать AB тесты в реальном времени
|
||
|
||
---
|
||
|
||
**Дата:** 29 октября 2025
|
||
**Автор:** Cascade AI
|