Перейти к основному содержимому

Настройка аналитики

Руководство по интеграции и настройке систем аналитики для маркетплейса.

Google Analytics 4​

Базовая настройка​

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

E-commerce события​

// Просмотр товара
gtag('event', 'view_item', {
  currency: 'RUB',
  value: 15.25,
  items: [{
    item_id: 'SKU123',
    item_name: 'Название товара',
    category: 'Электроника',
    quantity: 1,
    price: 15.25
  }]
});

// Добавление в корзину
gtag('event', 'add_to_cart', {
  currency: 'RUB',
  value: 15.25,
  items: [{
    item_id: 'SKU123',
    item_name: 'Название товара',
    category: 'Электроника',
    quantity: 1,
    price: 15.25
  }]
});

// Начало оформления заказа
gtag('event', 'begin_checkout', {
  currency: 'RUB',
  value: 35.25,
  items: [
    {
      item_id: 'SKU123',
      item_name: 'Товар 1',
      category: 'Электроника',
      quantity: 1,
      price: 15.25
    },
    {
      item_id: 'SKU456',
      item_name: 'Товар 2',
      category: 'Одежда',
      quantity: 2,
      price: 10.00
    }
  ]
});

// Покупка
gtag('event', 'purchase', {
  transaction_id: '12345',
  value: 35.25,
  currency: 'RUB',
  items: [
    {
      item_id: 'SKU123',
      item_name: 'Товар 1',
      category: 'Электроника',
      quantity: 1,
      price: 15.25
    }
  ]
});

Yandex Metrica​

Установка счетчика​

<!-- Yandex.Metrika counter -->
<script type="text/javascript">
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(COUNTER_ID, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true,
        ecommerce:"dataLayer"
   });
</script>

E-commerce события​

// Просмотр товара
ym(COUNTER_ID, 'reachGoal', 'view_product', {
  ecommerce: {
    detail: {
      products: [{
        id: 'SKU123',
        name: 'Название товара',
        category: 'Электроника',
        price: 1525,
        brand: 'Бренд'
      }]
    }
  }
});

// Добавление в корзину
ym(COUNTER_ID, 'reachGoal', 'add_to_cart', {
  ecommerce: {
    add: {
      products: [{
        id: 'SKU123',
        name: 'Название товара',
        category: 'Электроника',
        price: 1525,
        quantity: 1
      }]
    }
  }
});

// Покупка
ym(COUNTER_ID, 'reachGoal', 'purchase', {
  ecommerce: {
    purchase: {
      actionField: {
        id: '12345'
      },
      products: [{
        id: 'SKU123',
        name: 'Название товара',
        category: 'Электроника',
        price: 1525,
        quantity: 1
      }]
    }
  }
});

Facebook Pixel​

Базовая настройка​

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'PIXEL_ID');
  fbq('track', 'PageView');
</script>

События конверсии​

// Просмотр контента
fbq('track', 'ViewContent', {
  content_ids: ['SKU123'],
  content_type: 'product',
  value: 15.25,
  currency: 'RUB'
});

// Добавление в корзину
fbq('track', 'AddToCart', {
  content_ids: ['SKU123'],
  content_type: 'product',
  value: 15.25,
  currency: 'RUB'
});

// Начало оформления заказа
fbq('track', 'InitiateCheckout', {
  value: 35.25,
  currency: 'RUB',
  num_items: 2
});

// Покупка
fbq('track', 'Purchase', {
  value: 35.25,
  currency: 'RUB',
  transaction_id: '12345'
});

Настройка целей​

Google Analytics цели​

  1. Цель "Покупка"

    • Тип: Событие
    • Категория: ecommerce
    • Действие: purchase

  2. Цель "Добавление в корзину"

    • Тип: Событие
    • Категория: ecommerce
    • Действие: add_to_cart

  3. Цель "Регистрация"

    • Тип: Целевая страница
    • URL: /registration/success

Yandex Metrica цели​

// Настройка целей в интерфейсе Метрики
const goals = {
  purchase: 'GOAL_ID_1',
  registration: 'GOAL_ID_2',
  newsletter_signup: 'GOAL_ID_3'
};

// Отправка событий
ym(COUNTER_ID, 'reachGoal', 'purchase');
ym(COUNTER_ID, 'reachGoal', 'registration');

UTM-метки​

Автоматическое отслеживание​

// Функция для парсинга UTM-меток
function parseUTMParams() {
  const urlParams = new URLSearchParams(window.location.search);
  return {
    source: urlParams.get('utm_source'),
    medium: urlParams.get('utm_medium'),
    campaign: urlParams.get('utm_campaign'),
    term: urlParams.get('utm_term'),
    content: urlParams.get('utm_content')
  };
}

// Сохранение UTM-меток в localStorage
const utmParams = parseUTMParams();
if (Object.values(utmParams).some(param => param !== null)) {
  localStorage.setItem('utm_params', JSON.stringify(utmParams));
}

// Добавление UTM-меток к событиям
function trackEventWithUTM(eventName, eventParams = {}) {
  const savedUTM = JSON.parse(localStorage.getItem('utm_params') || '{}');
  
  gtag('event', eventName, {
    ...eventParams,
    ...savedUTM
  });
}

Heatmaps и записи сессий​

Hotjar​

<!-- Hotjar Tracking Code -->
<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:HOTJAR_ID,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

Microsoft Clarity​

<!-- Microsoft Clarity -->
<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "CLARITY_ID");
</script>

Кастомная аналитика​

Собственная система событий​

class AnalyticsManager {
  constructor() {
    this.providers = [];
    this.queue = [];
    this.isReady = false;
  }
  
  // Добавление провайдера аналитики
  addProvider(provider) {
    this.providers.push(provider);
  }
  
  // Инициализация
  init() {
    this.isReady = true;
    this.flushQueue();
  }
  
  // Отправка события
  track(eventName, properties = {}) {
    const event = {
      name: eventName,
      properties: {
        ...properties,
        timestamp: Date.now(),
        url: window.location.href,
        userAgent: navigator.userAgent
      }
    };
    
    if (this.isReady) {
      this.sendToProviders(event);
    } else {
      this.queue.push(event);
    }
  }
  
  // Отправка во все провайдеры
  sendToProviders(event) {
    this.providers.forEach(provider => {
      try {
        provider.track(event);
      } catch (error) {
        console.error('Analytics provider error:', error);
      }
    });
  }
  
  // Очистка очереди
  flushQueue() {
    this.queue.forEach(event => this.sendToProviders(event));
    this.queue = [];
  }
}

// Провайдеры
const googleAnalyticsProvider = {
  track: (event) => {
    gtag('event', event.name, event.properties);
  }
};

const yandexMetricaProvider = {
  track: (event) => {
    ym(COUNTER_ID, 'reachGoal', event.name, event.properties);
  }
};

// Инициализация
const analytics = new AnalyticsManager();
analytics.addProvider(googleAnalyticsProvider);
analytics.addProvider(yandexMetricaProvider);
analytics.init();

// Использование
analytics.track('product_view', {
  product_id: 'SKU123',
  category: 'electronics',
  value: 15.25
});

Server-side аналитика​

Node.js интеграция​

const { GoogleAnalytics } = require('@google-analytics/admin');
const axios = require('axios');

class ServerAnalytics {
  constructor() {
    this.ga = new GoogleAnalytics();
  }
  
  // Отправка события на сервер
  async trackServerEvent(eventName, properties, clientId) {
    try {
      // Google Analytics Measurement Protocol
      await axios.post('https://www.google-analytics.com/mp/collect', {
        client_id: clientId,
        events: [{
          name: eventName,
          params: properties
        }]
      }, {
        params: {
          measurement_id: process.env.GA_MEASUREMENT_ID,
          api_secret: process.env.GA_API_SECRET
        }
      });
      
      // Сохранение в базу данных
      await this.saveToDatabase(eventName, properties, clientId);
      
    } catch (error) {
      console.error('Server analytics error:', error);
    }
  }
  
  async saveToDatabase(eventName, properties, clientId) {
    // Сохранение события в БД для дальнейшего анализа
    const event = {
      name: eventName,
      properties: JSON.stringify(properties),
      client_id: clientId,
      timestamp: new Date(),
      ip_address: properties.ip_address,
      user_agent: properties.user_agent
    };
    
    // Здесь код для сохранения в вашу БД
  }
}

Отчеты и дашборды​

Google Data Studio​

// Подключение к Google Analytics через API
const { BetaAnalyticsDataClient } = require('@google-analytics/data');

const analyticsDataClient = new BetaAnalyticsDataClient();

async function generateReport() {
  const [response] = await analyticsDataClient.runReport({
    property: `properties/${GA_PROPERTY_ID}`,
    dateRanges: [
      {
        startDate: '30daysAgo',
        endDate: 'today',
      },
    ],
    dimensions: [
      { name: 'eventName' },
      { name: 'date' }
    ],
    metrics: [
      { name: 'eventCount' },
      { name: 'totalRevenue' }
    ],
  });
  
  return response.rows;
}

Кастомный дашборд​

// API для получения аналитики
app.get('/api/analytics/dashboard', async (req, res) => {
  try {
    const { startDate, endDate } = req.query;
    
    const data = await db.query(`
      SELECT 
        DATE(timestamp) as date,
        event_name,
        COUNT(*) as event_count,
        SUM(CASE WHEN event_name = 'purchase' THEN 
          CAST(properties->>'value' AS DECIMAL) ELSE 0 END) as revenue
      FROM analytics_events 
      WHERE timestamp BETWEEN $1 AND $2
      GROUP BY DATE(timestamp), event_name
      ORDER BY date DESC
    `, [startDate, endDate]);
    
    res.json({
      events: data.rows,
      summary: {
        totalEvents: data.rows.reduce((sum, row) => sum + row.event_count, 0),
        totalRevenue: data.rows.reduce((sum, row) => sum + parseFloat(row.revenue || 0), 0)
      }
    });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

GDPR и приватность​

Управление согласием​

// Cookie consent manager
class ConsentManager {
  constructor() {
    this.consent = this.getStoredConsent();
  }
  
  getStoredConsent() {
    const stored = localStorage.getItem('analytics_consent');
    return stored ? JSON.parse(stored) : {
      necessary: true,
      analytics: false,
      marketing: false
    };
  }
  
  updateConsent(newConsent) {
    this.consent = { ...this.consent, ...newConsent };
    localStorage.setItem('analytics_consent', JSON.stringify(this.consent));
    this.applyConsent();
  }
  
  applyConsent() {
    // Включение/отключение аналитики на основе согласия
    if (this.consent.analytics) {
      this.enableAnalytics();
    } else {
      this.disableAnalytics();
    }
    
    if (this.consent.marketing) {
      this.enableMarketing();
    } else {
      this.disableMarketing();
    }
  }
  
  enableAnalytics() {
    // Инициализация Google Analytics
    gtag('consent', 'update', {
      analytics_storage: 'granted'
    });
  }
  
  disableAnalytics() {
    gtag('consent', 'update', {
      analytics_storage: 'denied'
    });
  }
}

const consentManager = new ConsentManager();