w-funnel/docs/ENHANCED_LOGGING_GUIDE.md

📊 Улучшенное логирование 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

// В консоли браузера:
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-тестов

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

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

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

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

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

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

// Посмотреть все 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)