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:

{
  "app_name": "witlab-funnel",
  "feature": "soulmate-onboarding-image",
  "treatment": "v1",
  "debug_mode": 1
}

page_view:

{
  "page_path": "/soulmate/gender",
  "page_location": "https://develop.funnel.witlab.us/soulmate/gender",
  "page_title": "Soulmate",
  "debug_mode": 1
}

---

⚠️ Важные моменты

1. Debug View работает ТОЛЬКО на develop домене

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

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

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: Проверка переходов между экранами

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:

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 домена:

// src/components/providers/MetricsProvider.tsx
const isDevelopEnvironment = false; // ← Изменить на false

Или изменить условие:

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