362 lines
11 KiB
Markdown
362 lines
11 KiB
Markdown
# 📊 Улучшенное логирование 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)
|