# 📊 Улучшенное логирование Google Analytics событий

## ✨ Что изменилось

Все события Google Analytics теперь логируются с **детальной информацией** в консоли браузера:

### 1. **Page View события** (просмотры страниц)
### 2. **AB Test Impression события** (показы AB-тестов)

Все логи используют **console.group** для структурированного отображения и поддерживают цветное форматирование.

---

## 📊 Page View события

### ✅ Успешная отправка

```
▼ [GA] 📊 Page View Event Sent
    🕐 Timestamp: 2025-10-23T19:15:42.123Z
    📍 URL: /soulmate/partner-age
    🌐 Full Location: http://localhost:3000/soulmate/partner-age
    📄 Page Title: Soulmate Portrait - Partner Age
    📦 Payload: {
      page_path: "/soulmate/partner-age",
      page_location: "http://localhost:3000/soulmate/partner-age",
      page_title: "Soulmate Portrait - Partner Age"
    }
    ✅ Status: Successfully sent to Google Analytics
```

### ⚠️ Google Analytics не доступен

```
⚠️ [GA] ⚠️ Page View NOT Sent
   Reason: Google Analytics not available (window.gtag is undefined)
```

---

## 🧪 AB Test Impression события

### ✅ Успешная отправка (первый раз)

```
▼ [GA] 🧪 AB Test Impression Event Sent
    🕐 Timestamp: 2025-10-23T19:15:42.456Z
    🏷️ Flag: soulmate-onboarding-image
    🎯 Variant: v1
    📦 Event Name: experiment_impression
    📦 Payload: {
      app_name: "witlab-funnel",
      feature: "soulmate-onboarding-image",
      treatment: "v1"
    }
    💾 Storage Key: unleash_impression_soulmate-onboarding-image_v1
    ✅ Status: Successfully sent to Google Analytics
    🔍 Verify in Network tab: Look for /g/collect requests
```

### ⚠️ Пропущено (уже отправлялось)

```
▼ [GA] 🧪 AB Test Impression SKIPPED (Already Sent)
    🕐 Timestamp: 2025-10-23T19:16:10.789Z
    🏷️ Flag: soulmate-onboarding-image
    🎯 Variant: v1
    💾 Storage Key: unleash_impression_soulmate-onboarding-image_v1
    ⚠️ Reason: Already sent in this session
    📊 Check sessionStorage to verify
```

### ⚠️ Пропущено (невалидный вариант)

```
▼ [GA] 🧪 AB Test Impression SKIPPED
    🕐 Timestamp: 2025-10-23T19:15:40.123Z
    🏷️ Flag: some-test-flag
    🎯 Variant: disabled
    ⚠️ Reason: Invalid variant (disabled or undefined)
```

### ❌ Ошибка (GA не загружен)

```
▼ [GA] 🧪 AB Test Impression NOT Sent
    🕐 Timestamp: 2025-10-23T19:15:42.456Z
    🏷️ Flag: soulmate-trial-grid
    🎯 Variant: grid
    ❌ Error: Google Analytics not available (window.gtag is undefined)
    💡 Solution: Check that GoogleAnalytics component is loaded with measurementId
```

---

## 🧹 Очистка истории AB-тестов

```
▼ [GA] 🧪 AB Test Impressions Cleared
    🕐 Timestamp: 2025-10-23T19:20:15.234Z
    🧹 Keys Removed: 2
    📋 Removed Keys: [
      "unleash_impression_soulmate-onboarding-image_v1",
      "unleash_impression_soulmate-trial-grid_grid"
    ]
    ✅ Status: All AB test impression history cleared
    💡 New impressions will be sent on next screen view
```

---

## 📋 Yandex Metrika события

### ✅ Успешная отправка

```
▼ [YM] 📊 Page View Event Sent
    🕐 Timestamp: 2025-10-23T19:15:42.123Z
    📍 URL: /soulmate/partner-age
    🔢 Counter ID: 104471567
    ✅ Status: Successfully sent to Yandex Metrika
```

### ⚠️ Counter ID не найден

```
⚠️ [YM] ⚠️ Page View NOT Sent
   Reason: Counter ID not found
```

---

## 🎨 Цветовая схема

Логи используют цветовое кодирование для быстрой идентификации:

| Тип события | Цвет | Значок |
|-------------|------|--------|
| **GA Page View** | 🔵 Синий (`#4285F4`) | 📊 |
| **YM Page View** | 🔴 Красный (`#FF0000`) | 📊 |
| **AB Test Sent** | 🔵 Синий (`#4285F4`) | 🧪 |
| **AB Test Skipped** | ⚪ Серый (`#9E9E9E`) | 🧪 |
| **AB Test Cleared** | 🟠 Оранжевый (`#FF9800`) | 🧪 |
| **Warnings** | 🟡 Желтый (`#FFA500`) | ⚠️ |
| **Errors** | 🔴 Красный (`#FF0000`) | ❌ |

---

## 🔍 Как использовать

### 1. Открыть DevTools Console

```
Chrome/Edge: F12 → Console tab
Firefox: F12 → Console tab
Safari: Cmd+Option+C
```

### 2. Просмотреть события

Все события логируются **автоматически**:

- При каждом переходе между экранами → **Page View**
- При попадании на экран с AB-тестом → **AB Test Impression**

### 3. Развернуть группу

Клик на `▼` (или стрелку) чтобы увидеть детали:

```
▼ [GA] 📊 Page View Event Sent  ← Клик здесь
    🕐 Timestamp: ...
    📍 URL: ...
    ...
```

### 4. Проверить Network Tab

После каждого лога проверьте Network tab:

```
DevTools → Network → Filter: "collect"

Должны появиться POST запросы:
POST /g/collect?v=2&tid=G-XXX&en=page_view...
POST /g/collect?v=2&tid=G-XXX&en=experiment_impression...
```

### 5. Проверить sessionStorage

```javascript
// В консоли браузера:
Object.keys(sessionStorage)
  .filter(key => key.startsWith("unleash_impression_"))
  .forEach(key => console.log(key, sessionStorage.getItem(key)));

// Вывод:
// unleash_impression_soulmate-onboarding-image_v1 "true"
// unleash_impression_soulmate-trial-grid_grid "true"
```

---

## 🧪 Тестирование AB-тестов

### Очистить историю и переотправить

```javascript
// В консоли браузера:
import { clearUnleashImpressions } from "@/lib/funnel/unleash";

// Очистить все impression события
clearUnleashImpressions();

// Перезагрузить страницу
window.location.reload();

// События отправятся заново!
```

### Вручную проверить ключи sessionStorage

```javascript
// Посмотреть все AB test ключи:
Object.keys(sessionStorage)
  .filter(key => key.startsWith("unleash_impression_"));

// Удалить конкретный ключ:
sessionStorage.removeItem("unleash_impression_soulmate-onboarding-image_v1");

// Удалить все impression ключи:
Object.keys(sessionStorage)
  .filter(key => key.startsWith("unleash_impression_"))
  .forEach(key => sessionStorage.removeItem(key));
```

---

## 📊 Пример полного flow

### Сценарий: Пользователь проходит воронку Soulmate

```
1. Открытие /soulmate/onboarding
   ↓
   [GA] 📊 Page View Event Sent
   🕐 2025-10-23T19:15:40.000Z
   📍 /soulmate/onboarding
   
   [GA] 🧪 AB Test Impression Event Sent
   🏷️ soulmate-onboarding-image
   🎯 v1

2. Переход на /soulmate/gender
   ↓
   [GA] 📊 Page View Event Sent
   🕐 2025-10-23T19:16:05.000Z
   📍 /soulmate/gender

3. Переход на /soulmate/partner-age
   ↓
   [GA] 📊 Page View Event Sent
   🕐 2025-10-23T19:16:30.000Z
   📍 /soulmate/partner-age

...18 экранов спустя...

4. Переход на /soulmate/email
   ↓
   [GA] 📊 Page View Event Sent
   🕐 2025-10-23T19:20:15.000Z
   📍 /soulmate/email
   
   [GA] 🧪 AB Test Impression Event Sent
   🏷️ soulmate-trial-grid
   🎯 grid

5. Возврат назад на /soulmate/onboarding
   ↓
   [GA] 📊 Page View Event Sent
   🕐 2025-10-23T19:21:00.000Z
   📍 /soulmate/onboarding
   
   [GA] 🧪 AB Test Impression SKIPPED (Already Sent)
   🏷️ soulmate-onboarding-image
   🎯 v1
   ⚠️ Already sent in this session
```

---

## 🎯 Преимущества новых логов

### ✅ Уверенность в отправке

Теперь вы **точно видите**:
- ✅ Событие отправлено в GA
- ⏰ Когда именно (timestamp)
- 📦 Какие данные (payload)
- 💾 Сохранено в sessionStorage

### ✅ Легкая отладка

При проблемах сразу видно:
- ❌ GA не загружен
- ⚠️ Событие уже отправлялось
- ⚠️ Невалидный вариант AB-теста

### ✅ Удобная навигация

- Логи сгруппированы (не захламляют консоль)
- Цветное кодирование для быстрой идентификации
- Эмодзи для визуальных маркеров

### ✅ Полная трассируемость

Каждый лог содержит:
- 🕐 Timestamp (ISO 8601)
- 📍 URL / Flag / Variant
- 📦 Полный payload
- ✅ Статус отправки
- 💡 Подсказки при ошибках

---

## 🔗 Связанные документы

- `GA_AB_TEST_ANALYSIS.md` - Техническая документация системы
- `SOULMATE_AB_TESTS_TIMELINE.md` - Детальный анализ AB-тестов Soulmate
- `SOULMATE_AB_QUICK_REFERENCE.md` - Быстрая справка по AB-тестам

---

## 📝 Примечания

### Production vs Development

✅ **Логи работают ОДИНАКОВО в обоих режимах:**

- **Development** (`npm run dev`): Все логи показываются
- **Production** (`npm run build && npm run start`): Все логи показываются

**Гарантия:** Код не содержит условий на `process.env.NODE_ENV`, и Next.js конфигурация не удаляет console.log при сборке.

**Результат:** Вы видите одинаковые логи в обеих средах для проверки отправки событий в реальном времени.

📋 **Детали:** См. `LOGGING_DEV_VS_PROD.md` для полного объяснения и верификации.

### Производительность

**console.groupCollapsed** не влияет на производительность:
- Группа свернута по умолчанию
- Содержимое вычисляется только при раскрытии
- Минимальный overhead

### Browser Support

Логи работают во всех современных браузерах:
- ✅ Chrome/Edge (полная поддержка)
- ✅ Firefox (полная поддержка)
- ✅ Safari (полная поддержка, без цветов в groupCollapsed)
