Добавлены функции отслеживания событий для аналитики в избранных пресетах, включая добавление и удаление из избранного. Создана документация по событиям аналитики для Google Analytics и Яндекс.Метрики. Оптимизирован код для определения окружения приложения.

GlebkaF · GlebkaF · commit c1a229794b63 · 2025-09-20T16:48:07.000+07:00
diff --git a/app/favorites/page.tsx b/app/favorites/page.tsx
@@ -16,13 +16,6 @@ export default function FavoritesPage(): ReactElement {
     favorites.includes(preset.id),
   );
 
-  // Отслеживаем просмотр страницы избранного
-  useEffect(() => {
-    if (isLoaded) {
-      trackViewFavorites(favoritePresets.length);
-    }
-  }, [isLoaded, favoritePresets.length]);
-
   return (
     <div className="min-h-screen flex flex-col bg-gray-900 text-white">
       <Header />
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,7 @@ import "../styles/globals.css";
 import { Metadata } from "next";
 import YandexMetrika from "../components/YandexMetrika";
 import { GoogleTagManager } from "../components/GoogleTagManager";
+import { isProduction } from "../lib/env";
 
 export const metadata: Metadata = {
   title: "NXRIG",
@@ -15,8 +16,6 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const isProduction = process.env.NODE_ENV === "production";
-
   return (
     <html lang="en">
       <head>
diff --git a/components/FavoriteButton.tsx b/components/FavoriteButton.tsx
@@ -2,6 +2,8 @@
 
 import { useFavorites } from "hooks/useFavorites";
 import { ReactElement } from "react";
+import { trackAddToFavorites, trackRemoveFromFavorites } from "lib/analytics";
+import { presets } from "lib/public/presets";
 
 interface FavoriteButtonProps {
   presetId: string;
@@ -18,6 +20,12 @@ export function FavoriteButton({
 
   const isInFavorites = isFavorite(presetId);
 
+  // Получаем информацию о пресете для аналитики
+  const preset = presets.find((p) => p.id === presetId);
+  const presetName = preset
+    ? `${preset.origin.artist.title} - ${preset.origin.song} ${preset.origin.part}`
+    : presetId;
+
   // Не показываем кнопку пока не загрузились данные из localStorage
   if (!isLoaded) {
     return (
@@ -30,6 +38,14 @@ export function FavoriteButton({
   const handleClick = (e: React.MouseEvent) => {
     e.preventDefault(); // Предотвращаем навигацию если кнопка внутри Link
     e.stopPropagation();
+
+    // Отправляем событие в аналитику перед изменением состояния
+    if (isInFavorites) {
+      trackRemoveFromFavorites(presetId, presetName);
+    } else {
+      trackAddToFavorites(presetId, presetName);
+    }
+
     toggleFavorite(presetId);
   };
 
diff --git a/docs/google-analytics-events.md b/docs/google-analytics-events.md
@@ -0,0 +1,116 @@
+# Analytics Events Documentation
+
+Система отслеживания событий для Google Analytics (через GTM) и Яндекс.Метрики.
+
+**Важно:** События отправляются только в production режиме (`NODE_ENV === "production"`). В режиме разработки события логируются в консоль браузера.
+
+## Настройка в Google Tag Manager
+
+Для правильного отслеживания событий в Google Analytics через Google Tag Manager нужно настроить следующие триггеры и теги:
+
+### 1. Триггер для пользовательских событий
+
+**Название:** Custom Event Trigger
+**Тип:** Пользовательское событие
+**Имя события:** `custom_event`
+
+### 2. Теги для отправки в Google Analytics
+
+**Название:** GA4 - Custom Events
+**Тип:** Google Analytics: GA4 Event
+**Event Name:** `{{event_action}}`
+**Parameters:**
+
+- `event_category`: `{{event_category}}`
+- `event_label`: `{{event_label}}`
+- `value`: `{{event_value}}`
+
+### 3. Переменные dataLayer
+
+Создайте следующие переменные типа "Переменная уровня данных":
+
+- `event_action` → `event_action`
+- `event_category` → `event_category`
+- `event_label` → `event_label`
+- `event_value` → `event_value`
+
+## Отслеживаемые события
+
+### Избранные пресеты
+
+#### add_to_favorites
+
+- **Категория:** engagement
+- **Действие:** add_to_favorites
+- **Метка:** Название пресета (например, "Metallica - Master of Puppets Rhythm")
+- **Значение:** 1
+
+#### remove_from_favorites
+
+- **Категория:** engagement
+- **Действие:** remove_from_favorites
+- **Метка:** Название пресета
+- **Значение:** 1
+
+## Примеры событий в dataLayer
+
+```javascript
+// Добавление в избранное
+window.dataLayer.push({
+  event: "custom_event",
+  event_category: "engagement",
+  event_action: "add_to_favorites",
+  event_label: "Metallica - Master of Puppets Rhythm",
+  event_value: 1,
+});
+
+// Удаление из избранного
+window.dataLayer.push({
+  event: "custom_event",
+  event_category: "engagement",
+  event_action: "remove_from_favorites",
+  event_label: "Metallica - Master of Puppets Rhythm",
+  event_value: 1,
+});
+```
+
+## Яндекс.Метрика
+
+События также отправляются в Яндекс.Метрику через метод `reachGoal`:
+
+```javascript
+// Пример отправки цели в Яндекс.Метрику
+ym(103809700, "reachGoal", "add_to_favorites", {
+  category: "engagement",
+  label: "Metallica - Master of Puppets Rhythm",
+  value: 1,
+});
+```
+
+### Настройка целей в Яндекс.Метрике
+
+В интерфейсе Яндекс.Метрики создайте цели типа "JavaScript-событие":
+
+1. **add_to_favorites** - добавление в избранное
+2. **remove_from_favorites** - удаление из избранного
+
+## Аналитика в Google Analytics 4
+
+После настройки GTM, события будут автоматически отправляться в GA4. Вы можете найти их в отчетах:
+
+1. **Realtime** → Events (для проверки в реальном времени)
+2. **Engagement** → Events (для анализа популярных событий)
+3. **Conversions** (если настроите события как конверсии)
+
+### Рекомендуемые конверсии
+
+Рекомендуется настроить как конверсии следующие события:
+
+- `add_to_favorites` - показатель вовлеченности пользователей
+
+### Настройка аудиторий
+
+Можно создать аудитории на основе событий:
+
+- Пользователи, которые добавляли пресеты в избранное
+- Активные пользователи (добавляли или удаляли из избранного)
diff --git a/lib/analytics.ts b/lib/analytics.ts
@@ -0,0 +1,110 @@
+import { isProduction, isDevelopment } from "./env";
+
+// Типы для Google Analytics событий
+interface GAEvent {
+  action: string;
+  category: string;
+  label?: string;
+  value?: number;
+}
+
+// Расширяем интерфейс Window для gtag и Яндекс.Метрики
+declare global {
+  interface Window {
+    gtag: (
+      command: string,
+      action: string,
+      parameters?: Record<string, any>,
+    ) => void;
+    dataLayer: any[];
+    ym: (counterId: number, method: string, ...params: any[]) => void;
+  }
+}
+
+/**
+ * Отправляет событие в Google Analytics через Google Tag Manager и Яндекс.Метрику
+ */
+export function trackEvent({ action, category, label, value }: GAEvent): void {
+  // Проверяем, что мы в браузере
+  if (typeof window === "undefined") return;
+
+  try {
+    if (isProduction) {
+      // Отправляем событие через dataLayer (GTM)
+      if (typeof window.dataLayer !== "undefined") {
+        window.dataLayer.push({
+          event: "custom_event",
+          event_category: category,
+          event_action: action,
+          event_label: label,
+          event_value: value,
+        });
+      }
+
+      // Также отправляем через gtag, если доступен
+      if (typeof window.gtag !== "undefined") {
+        window.gtag("event", action, {
+          event_category: category,
+          event_label: label,
+          value: value,
+        });
+      }
+
+      // Отправляем в Яндекс.Метрику
+      if (typeof window.ym !== "undefined") {
+        window.ym(103809700, "reachGoal", action, {
+          category: category,
+          label: label,
+          value: value,
+        });
+      }
+    }
+  } catch (error) {
+    // В продакшене не показываем ошибки аналитики
+    if (isDevelopment) {
+      console.warn("Analytics tracking error:", error);
+    }
+  }
+
+  // В режиме разработки логируем события в консоль
+  if (isDevelopment) {
+    console.log("🔍 Analytics Event:", {
+      action,
+      category,
+      label,
+      value,
+      timestamp: new Date().toISOString(),
+      note: "Events are only sent in production mode",
+    });
+  }
+}
+
+/**
+ * Отправляет событие добавления в избранное
+ */
+export function trackAddToFavorites(
+  presetId: string,
+  presetName?: string,
+): void {
+  trackEvent({
+    action: "add_to_favorites",
+    category: "engagement",
+    label: presetName || presetId,
+    value: 1,
+  });
+}
+
+/**
+ * Отправляет событие удаления из избранного
+ */
+export function trackRemoveFromFavorites(
+  presetId: string,
+  presetName?: string,
+): void {
+  trackEvent({
+    action: "remove_from_favorites",
+    category: "engagement",
+    label: presetName || presetId,
+    value: 1,
+  });
+}
diff --git a/lib/env.ts b/lib/env.ts
@@ -0,0 +1,19 @@
+/**
+ * Единый источник истины для определения окружения
+ * Single source of truth for environment detection
+ */
+
+/**
+ * Определяет, работает ли приложение в production режиме
+ */
+export const isProduction = process.env.NODE_ENV === "production";
+
+/**
+ * Определяет, работает ли приложение в development режиме
+ */
+export const isDevelopment = !isProduction;
+
+/**
+ * Определяет, работает ли приложение в test режиме
+ */
+export const isTest = process.env.NODE_ENV === "test";
