w-funnel/docs/GA_DEBUG_VIEW_SETUP.md

# 🐛 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