Google Analytics 4: полное руководство по настройке и использованию

Google Analytics является одним из самых мощных инструментов для анализа веб-сайтов и понимания поведения пользователей. С выходом Google Analytics 4 (GA4) система стала еще более гибкой и функциональной. В этой статье мы рассмотрим все аспекты настройки и использования GA4 для максимальной эффективности.

Важность веб-аналитики

Веб-аналитика является критически важным инструментом для понимания эффективности сайта. Правильно настроенная аналитика позволяет:

Понимать поведение пользователей
Отслеживать конверсии и цели
Оптимизировать пользовательский опыт
Принимать обоснованные решения о развитии сайта
Измерять ROI маркетинговых кампаний

Настройка Google Analytics 4

Создание аккаунта и ресурса

Переход в Google Analytics:
- Откройте analytics.google.com
- Войдите в Google аккаунт

Создание аккаунта:

Название аккаунта: Ваша компания
Название ресурса: Ваш сайт
URL: https://yoursite.com
Отрасль: Выберите подходящую
Часовой пояс: Ваш часовой пояс

Настройка потока данных:
- Выберите платформу (Web)
- Введите URL сайта
- Настройте расширенную отчетность

Установка кода отслеживания

Базовый код GA4:

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

  gtag('config', 'G-XXXXXXXXXX');
</script>

Установка в HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Ваш сайт</title>
  
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-XXXXXXXXXX');
  </script>
</head>
<body>
  <!-- Содержимое сайта -->
</body>
</html>

Установка в React:

// App.js
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Загрузка Google Analytics
    const script1 = document.createElement('script');
    script1.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
    script1.async = true;
    document.head.appendChild(script1);

    const script2 = document.createElement('script');
    script2.innerHTML = `
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-XXXXXXXXXX');
    `;
    document.head.appendChild(script2);
  }, []);

  return (
    <div className="App">
      {/* Содержимое приложения */}
    </div>
  );
}

Установка в Next.js:

// pages/_app.js
import { useEffect } from 'react';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    // Инициализация GA4
    const handleRouteChange = (url) => {
      gtag('config', 'G-XXXXXXXXXX', {
        page_path: url,
      });
    };

    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  return <Component {...pageProps} />;
}

Отслеживание событий

Базовые события

Отслеживание кликов:

// Отслеживание клика по кнопке
document.getElementById('cta-button').addEventListener('click', function() {
  gtag('event', 'click', {
    event_category: 'engagement',
    event_label: 'cta_button',
    value: 1
  });
});

Отслеживание форм:

// Отслеживание отправки формы
document.getElementById('contact-form').addEventListener('submit', function(e) {
  gtag('event', 'form_submit', {
    event_category: 'engagement',
    event_label: 'contact_form',
    form_name: 'contact'
  });
});

Отслеживание скролла:

// Отслеживание глубины скролла
let maxScroll = 0;
window.addEventListener('scroll', function() {
  const scrollPercent = Math.round((window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100);
  
  if (scrollPercent > maxScroll) {
    maxScroll = scrollPercent;
    
    if (maxScroll >= 25 && maxScroll < 50) {
      gtag('event', 'scroll', {
        event_category: 'engagement',
        event_label: '25_percent'
      });
    } else if (maxScroll >= 50 && maxScroll < 75) {
      gtag('event', 'scroll', {
        event_category: 'engagement',
        event_label: '50_percent'
      });
    } else if (maxScroll >= 75) {
      gtag('event', 'scroll', {
        event_category: 'engagement',
        event_label: '75_percent'
      });
    }
  }
});

Пользовательские события

Отслеживание времени на странице:

// Отслеживание времени на странице
let startTime = Date.now();

window.addEventListener('beforeunload', function() {
  const timeOnPage = Math.round((Date.now() - startTime) / 1000);
  
  gtag('event', 'timing_complete', {
    event_category: 'engagement',
    event_label: 'time_on_page',
    value: timeOnPage
  });
});

Отслеживание видео:

// Отслеживание воспроизведения видео
const video = document.getElementById('video');

video.addEventListener('play', function() {
  gtag('event', 'video_start', {
    event_category: 'engagement',
    event_label: 'main_video'
  });
});

video.addEventListener('pause', function() {
  gtag('event', 'video_pause', {
    event_category: 'engagement',
    event_label: 'main_video'
  });
});

video.addEventListener('ended', function() {
  gtag('event', 'video_complete', {
    event_category: 'engagement',
    event_label: 'main_video'
  });
});

Настройка целей и конверсий

Создание целей

Переход в настройки:
- Администратор → Ресурс → Цели

Создание новой цели:

Название: Заявка с сайта
Тип: Событие
Условие: event_name equals form_submit

Настройка воронки:

Шаг 1: Просмотр страницы контактов
Шаг 2: Заполнение формы
Шаг 3: Отправка формы

Отслеживание конверсий

Отслеживание покупок:

// Отслеживание покупки
function trackPurchase(orderId, value, currency = 'RUB') {
  gtag('event', 'purchase', {
    transaction_id: orderId,
    value: value,
    currency: currency,
    items: [
      {
        item_id: 'product_123',
        item_name: 'Название продукта',
        price: value,
        quantity: 1
      }
    ]
  });
}

Отслеживание добавления в корзину:

// Отслеживание добавления в корзину
function trackAddToCart(productId, productName, price) {
  gtag('event', 'add_to_cart', {
    currency: 'RUB',
    value: price,
    items: [
      {
        item_id: productId,
        item_name: productName,
        price: price,
        quantity: 1
      }
    ]
  });
}

Расширенная настройка

Пользовательские параметры

Настройка пользовательских параметров:

// Отправка пользовательских параметров
gtag('config', 'G-XXXXXXXXXX', {
  custom_map: {
    'custom_parameter_1': 'user_type',
    'custom_parameter_2': 'subscription_level'
  }
});

// Использование пользовательских параметров
gtag('event', 'page_view', {
  user_type: 'premium',
  subscription_level: 'pro'
});

Отслеживание пользовательских событий:

// Отслеживание пользовательских событий
function trackCustomEvent(eventName, parameters = {}) {
  gtag('event', eventName, {
    event_category: 'custom',
    ...parameters
  });
}

// Пример использования
trackCustomEvent('feature_used', {
  feature_name: 'calculator',
  user_segment: 'business'
});

Enhanced Ecommerce

Настройка Enhanced Ecommerce:

// Включение Enhanced Ecommerce
gtag('config', 'G-XXXXXXXXXX', {
  'enhanced_ecommerce': true
});

// Отслеживание просмотра продукта
function trackProductView(productId, productName, price, category) {
  gtag('event', 'view_item', {
    currency: 'RUB',
    value: price,
    items: [
      {
        item_id: productId,
        item_name: productName,
        price: price,
        item_category: category
      }
    ]
  });
}

// Отслеживание начала оформления покупки
function trackBeginCheckout(items, totalValue) {
  gtag('event', 'begin_checkout', {
    currency: 'RUB',
    value: totalValue,
    items: items
  });
}

Анализ данных

Основные отчеты

Отчет "Аудитория":

Активные пользователи
Новые и возвращающиеся пользователи
Демографические данные
Географическое расположение

Отчет "Приобретение":

Источники трафика
Каналы привлечения
Эффективность кампаний
UTM-метки

Отчет "Поведение":

Популярные страницы
Время на сайте
Глубина просмотра
Скорость отказов

Отчет "Конверсии":

Достижение целей
Воронка конверсий
Эффективность каналов
ROI кампаний

Пользовательские отчеты

Создание пользовательского отчета:

Переход в "Настраиваемые отчеты"
Создание нового отчета
Выбор метрик и измерений
Настройка фильтров

Пример пользовательского отчета:

Название: Эффективность страниц
Метрики: Просмотры страниц, Время на странице, Отказы
Измерения: URL страницы, Источник трафика
Фильтры: Только органический трафик

Интеграция с другими инструментами

Google Ads

Связывание с Google Ads:

Настройки → Связанные аккаунты
Выбор Google Ads аккаунта
Подтверждение связи

Отслеживание конверсий:

// Отслеживание конверсии для Google Ads
gtag('event', 'conversion', {
  send_to: 'AW-CONVERSION_ID/CONVERSION_LABEL',
  value: 100,
  currency: 'RUB',
  transaction_id: 'order_123'
});

Google Search Console

Связывание с Search Console:

Настройки → Связанные аккаунты
Выбор Search Console
Подтверждение прав доступа

Google Tag Manager

Установка через GTM:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Оптимизация и A/B тестирование

Настройка экспериментов

Создание эксперимента:

Настройки → Эксперименты
Создание нового эксперимента
Настройка вариантов
Определение целей

Отслеживание экспериментов:

// Отслеживание участия в эксперименте
gtag('event', 'experiment_impression', {
  experiment_id: 'experiment_123',
  variant_id: 'variant_a'
});

// Отслеживание конверсии в эксперименте
gtag('event', 'experiment_conversion', {
  experiment_id: 'experiment_123',
  variant_id: 'variant_a'
});

Анализ производительности

Отслеживание Core Web Vitals:

// Отслеживание LCP
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    gtag('event', 'web_vitals', {
      event_category: 'Web Vitals',
      event_label: 'LCP',
      value: Math.round(entry.startTime),
      non_interaction: true
    });
  }
}).observe({entryTypes: ['largest-contentful-paint']});

// Отслеживание FID
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    gtag('event', 'web_vitals', {
      event_category: 'Web Vitals',
      event_label: 'FID',
      value: Math.round(entry.processingStart - entry.startTime),
      non_interaction: true
    });
  }
}).observe({entryTypes: ['first-input']});

// Отслеживание CLS
new PerformanceObserver((entryList) => {
  let clsValue = 0;
  for (const entry of entryList.getEntries()) {
    clsValue += entry.value;
  }
  gtag('event', 'web_vitals', {
    event_category: 'Web Vitals',
    event_label: 'CLS',
    value: Math.round(clsValue * 1000) / 1000,
    non_interaction: true
  });
}).observe({entryTypes: ['layout-shift']});

Безопасность и конфиденциальность

GDPR и CCPA

Настройка согласия:

// Отслеживание согласия пользователя
gtag('consent', 'default', {
  'analytics_storage': 'denied',
  'ad_storage': 'denied'
});

// Обновление согласия
function updateConsent(analytics, ads) {
  gtag('consent', 'update', {
    'analytics_storage': analytics ? 'granted' : 'denied',
    'ad_storage': ads ? 'granted' : 'denied'
  });
}

Блокировка отслеживания:

// Проверка Do Not Track
if (navigator.doNotTrack === '1') {
  // Отключить отслеживание
  return;
}

// Проверка согласия
if (!hasUserConsent()) {
  // Отключить отслеживание
  return;
}

Фильтрация данных

Исключение внутреннего трафика:

Настройки → Фильтры
Создание нового фильтра
Исключение IP-адресов

Фильтрация спама:

// Фильтрация ботов
if (navigator.userAgent.includes('bot')) {
  return;
}

// Фильтрация по времени на странице
let minTimeOnPage = 5000; // 5 секунд

Лучшие практики

1. Планирование

Определите ключевые метрики
Создайте план отслеживания
Настройте цели и конверсии
Определите сегменты аудитории

2. Реализация

Используйте правильные события
Настройте Enhanced Ecommerce
Отслеживайте пользовательские события
Настройте фильтры

3. Анализ

Регулярно проверяйте данные
Создавайте пользовательские отчеты
Анализируйте воронки конверсий
Отслеживайте тренды

4. Оптимизация

Проводите A/B тесты
Оптимизируйте на основе данных
Отслеживайте Core Web Vitals
Улучшайте пользовательский опыт

Заключение

Google Analytics 4 является мощным инструментом для анализа веб-сайтов. Правильная настройка и использование GA4 позволяет получать ценные данные о поведении пользователей и эффективности сайта.

Ключевые моменты для запоминания:

Правильно настройте GA4 с самого начала
Отслеживайте важные события для понимания поведения пользователей
Настройте цели и конверсии для измерения эффективности
Используйте пользовательские отчеты для глубокого анализа
Соблюдайте требования конфиденциальности (GDPR, CCPA)
Регулярно анализируйте данные и оптимизируйте сайт

Следуя этим рекомендациям, вы сможете получить максимальную пользу от Google Analytics 4 и использовать данные для улучшения вашего веб-сайта.

Важность веб-аналитики

Понимать поведение пользователей
Отслеживать конверсии и цели
Оптимизировать пользовательский опыт
Принимать обоснованные решения о развитии сайта
Измерять ROI маркетинговых кампаний

Настройка Google Analytics 4

Создание аккаунта и ресурса

Переход в Google Analytics:
- Откройте analytics.google.com
- Войдите в Google аккаунт

Создание аккаунта:

Название аккаунта: Ваша компания
Название ресурса: Ваш сайт
URL: https://yoursite.com
Отрасль: Выберите подходящую
Часовой пояс: Ваш часовой пояс

Настройка потока данных:
- Выберите платформу (Web)
- Введите URL сайта
- Настройте расширенную отчетность

Установка кода отслеживания

Базовый код GA4:

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

  gtag('config', 'G-XXXXXXXXXX');
</script>

Установка в HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Ваш сайт</title>
  
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-XXXXXXXXXX');
  </script>
</head>
<body>
  <!-- Содержимое сайта -->
</body>
</html>

Установка в React:

// App.js
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Загрузка Google Analytics
    const script1 = document.createElement('script');
    script1.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
    script1.async = true;
    document.head.appendChild(script1);

    const script2 = document.createElement('script');
    script2.innerHTML = `
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-XXXXXXXXXX');
    `;
    document.head.appendChild(script2);
  }, []);

  return (
    <div className="App">
      {/* Содержимое приложения */}
    </div>
  );
}

Установка в Next.js:

// pages/_app.js
import { useEffect } from 'react';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    // Инициализация GA4
    const handleRouteChange = (url) => {
      gtag('config', 'G-XXXXXXXXXX', {
        page_path: url,
      });
    };

    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  return <Component {...pageProps} />;
}

Отслеживание событий

Базовые события

Отслеживание кликов:

// Отслеживание клика по кнопке
document.getElementById('cta-button').addEventListener('click', function() {
  gtag('event', 'click', {
    event_category: 'engagement',
    event_label: 'cta_button',
    value: 1
  });
});

Отслеживание форм:

// Отслеживание отправки формы
document.getElementById('contact-form').addEventListener('submit', function(e) {
  gtag('event', 'form_submit', {
    event_category: 'engagement',
    event_label: 'contact_form',
    form_name: 'contact'
  });
});

Отслеживание скролла:

// Отслеживание глубины скролла
let maxScroll = 0;
window.addEventListener('scroll', function() {
  const scrollPercent = Math.round((window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100);
  
  if (scrollPercent > maxScroll) {
    maxScroll = scrollPercent;
    
    if (maxScroll >= 25 && maxScroll < 50) {
      gtag('event', 'scroll', {
        event_category: 'engagement',
        event_label: '25_percent'
      });
    } else if (maxScroll >= 50 && maxScroll < 75) {
      gtag('event', 'scroll', {
        event_category: 'engagement',
        event_label: '50_percent'
      });
    } else if (maxScroll >= 75) {
      gtag('event', 'scroll', {
        event_category: 'engagement',
        event_label: '75_percent'
      });
    }
  }
});

Пользовательские события

Отслеживание времени на странице:

// Отслеживание времени на странице
let startTime = Date.now();

window.addEventListener('beforeunload', function() {
  const timeOnPage = Math.round((Date.now() - startTime) / 1000);
  
  gtag('event', 'timing_complete', {
    event_category: 'engagement',
    event_label: 'time_on_page',
    value: timeOnPage
  });
});

Отслеживание видео:

// Отслеживание воспроизведения видео
const video = document.getElementById('video');

video.addEventListener('play', function() {
  gtag('event', 'video_start', {
    event_category: 'engagement',
    event_label: 'main_video'
  });
});

video.addEventListener('pause', function() {
  gtag('event', 'video_pause', {
    event_category: 'engagement',
    event_label: 'main_video'
  });
});

video.addEventListener('ended', function() {
  gtag('event', 'video_complete', {
    event_category: 'engagement',
    event_label: 'main_video'
  });
});

Настройка целей и конверсий

Создание целей

Переход в настройки:
- Администратор → Ресурс → Цели

Создание новой цели:

Название: Заявка с сайта
Тип: Событие
Условие: event_name equals form_submit

Настройка воронки:

Шаг 1: Просмотр страницы контактов
Шаг 2: Заполнение формы
Шаг 3: Отправка формы

Отслеживание конверсий

Отслеживание покупок:

// Отслеживание покупки
function trackPurchase(orderId, value, currency = 'RUB') {
  gtag('event', 'purchase', {
    transaction_id: orderId,
    value: value,
    currency: currency,
    items: [
      {
        item_id: 'product_123',
        item_name: 'Название продукта',
        price: value,
        quantity: 1
      }
    ]
  });
}

Отслеживание добавления в корзину:

// Отслеживание добавления в корзину
function trackAddToCart(productId, productName, price) {
  gtag('event', 'add_to_cart', {
    currency: 'RUB',
    value: price,
    items: [
      {
        item_id: productId,
        item_name: productName,
        price: price,
        quantity: 1
      }
    ]
  });
}

Расширенная настройка

Пользовательские параметры

Настройка пользовательских параметров:

// Отправка пользовательских параметров
gtag('config', 'G-XXXXXXXXXX', {
  custom_map: {
    'custom_parameter_1': 'user_type',
    'custom_parameter_2': 'subscription_level'
  }
});

// Использование пользовательских параметров
gtag('event', 'page_view', {
  user_type: 'premium',
  subscription_level: 'pro'
});

Отслеживание пользовательских событий:

// Отслеживание пользовательских событий
function trackCustomEvent(eventName, parameters = {}) {
  gtag('event', eventName, {
    event_category: 'custom',
    ...parameters
  });
}

// Пример использования
trackCustomEvent('feature_used', {
  feature_name: 'calculator',
  user_segment: 'business'
});

Enhanced Ecommerce

Настройка Enhanced Ecommerce:

// Включение Enhanced Ecommerce
gtag('config', 'G-XXXXXXXXXX', {
  'enhanced_ecommerce': true
});

// Отслеживание просмотра продукта
function trackProductView(productId, productName, price, category) {
  gtag('event', 'view_item', {
    currency: 'RUB',
    value: price,
    items: [
      {
        item_id: productId,
        item_name: productName,
        price: price,
        item_category: category
      }
    ]
  });
}

// Отслеживание начала оформления покупки
function trackBeginCheckout(items, totalValue) {
  gtag('event', 'begin_checkout', {
    currency: 'RUB',
    value: totalValue,
    items: items
  });
}

Анализ данных

Основные отчеты

Отчет "Аудитория":

Активные пользователи
Новые и возвращающиеся пользователи
Демографические данные
Географическое расположение

Отчет "Приобретение":

Источники трафика
Каналы привлечения
Эффективность кампаний
UTM-метки

Отчет "Поведение":

Популярные страницы
Время на сайте
Глубина просмотра
Скорость отказов

Отчет "Конверсии":

Достижение целей
Воронка конверсий
Эффективность каналов
ROI кампаний

Пользовательские отчеты

Создание пользовательского отчета:

Переход в "Настраиваемые отчеты"
Создание нового отчета
Выбор метрик и измерений
Настройка фильтров

Пример пользовательского отчета:

Название: Эффективность страниц
Метрики: Просмотры страниц, Время на странице, Отказы
Измерения: URL страницы, Источник трафика
Фильтры: Только органический трафик

Интеграция с другими инструментами

Google Ads

Связывание с Google Ads:

Настройки → Связанные аккаунты
Выбор Google Ads аккаунта
Подтверждение связи

Отслеживание конверсий:

// Отслеживание конверсии для Google Ads
gtag('event', 'conversion', {
  send_to: 'AW-CONVERSION_ID/CONVERSION_LABEL',
  value: 100,
  currency: 'RUB',
  transaction_id: 'order_123'
});

Google Search Console

Связывание с Search Console:

Настройки → Связанные аккаунты
Выбор Search Console
Подтверждение прав доступа

Google Tag Manager

Установка через GTM:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Оптимизация и A/B тестирование

Настройка экспериментов

Создание эксперимента:

Настройки → Эксперименты
Создание нового эксперимента
Настройка вариантов
Определение целей

Отслеживание экспериментов:

// Отслеживание участия в эксперименте
gtag('event', 'experiment_impression', {
  experiment_id: 'experiment_123',
  variant_id: 'variant_a'
});

// Отслеживание конверсии в эксперименте
gtag('event', 'experiment_conversion', {
  experiment_id: 'experiment_123',
  variant_id: 'variant_a'
});

Анализ производительности

Отслеживание Core Web Vitals:

// Отслеживание LCP
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    gtag('event', 'web_vitals', {
      event_category: 'Web Vitals',
      event_label: 'LCP',
      value: Math.round(entry.startTime),
      non_interaction: true
    });
  }
}).observe({entryTypes: ['largest-contentful-paint']});

// Отслеживание FID
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    gtag('event', 'web_vitals', {
      event_category: 'Web Vitals',
      event_label: 'FID',
      value: Math.round(entry.processingStart - entry.startTime),
      non_interaction: true
    });
  }
}).observe({entryTypes: ['first-input']});

// Отслеживание CLS
new PerformanceObserver((entryList) => {
  let clsValue = 0;
  for (const entry of entryList.getEntries()) {
    clsValue += entry.value;
  }
  gtag('event', 'web_vitals', {
    event_category: 'Web Vitals',
    event_label: 'CLS',
    value: Math.round(clsValue * 1000) / 1000,
    non_interaction: true
  });
}).observe({entryTypes: ['layout-shift']});

Безопасность и конфиденциальность

GDPR и CCPA

Настройка согласия:

// Отслеживание согласия пользователя
gtag('consent', 'default', {
  'analytics_storage': 'denied',
  'ad_storage': 'denied'
});

// Обновление согласия
function updateConsent(analytics, ads) {
  gtag('consent', 'update', {
    'analytics_storage': analytics ? 'granted' : 'denied',
    'ad_storage': ads ? 'granted' : 'denied'
  });
}

Блокировка отслеживания:

// Проверка Do Not Track
if (navigator.doNotTrack === '1') {
  // Отключить отслеживание
  return;
}

// Проверка согласия
if (!hasUserConsent()) {
  // Отключить отслеживание
  return;
}

Фильтрация данных

Исключение внутреннего трафика:

Настройки → Фильтры
Создание нового фильтра
Исключение IP-адресов

Фильтрация спама:

// Фильтрация ботов
if (navigator.userAgent.includes('bot')) {
  return;
}

// Фильтрация по времени на странице
let minTimeOnPage = 5000; // 5 секунд

Лучшие практики

1. Планирование

Определите ключевые метрики
Создайте план отслеживания
Настройте цели и конверсии
Определите сегменты аудитории

2. Реализация

Используйте правильные события
Настройте Enhanced Ecommerce
Отслеживайте пользовательские события
Настройте фильтры

3. Анализ

Регулярно проверяйте данные
Создавайте пользовательские отчеты
Анализируйте воронки конверсий
Отслеживайте тренды

4. Оптимизация

Проводите A/B тесты
Оптимизируйте на основе данных
Отслеживайте Core Web Vitals
Улучшайте пользовательский опыт

Заключение

Ключевые моменты для запоминания:

Правильно настройте GA4 с самого начала
Отслеживайте важные события для понимания поведения пользователей
Настройте цели и конверсии для измерения эффективности
Используйте пользовательские отчеты для глубокого анализа
Соблюдайте требования конфиденциальности (GDPR, CCPA)
Регулярно анализируйте данные и оптимизируйте сайт

Google Analytics 4: полное руководство по настройке и использованию

Важность веб-аналитики

Настройка Google Analytics 4

Создание аккаунта и ресурса

Установка кода отслеживания

Отслеживание событий

Базовые события

Пользовательские события

Настройка целей и конверсий

Создание целей

Отслеживание конверсий

Расширенная настройка

Пользовательские параметры

Enhanced Ecommerce

Анализ данных

Основные отчеты

Пользовательские отчеты

Интеграция с другими инструментами

Google Ads

Google Search Console

Google Tag Manager

Оптимизация и A/B тестирование

Настройка экспериментов

Анализ производительности

Безопасность и конфиденциальность

GDPR и CCPA

Фильтрация данных

Лучшие практики

1. Планирование

2. Реализация

3. Анализ

4. Оптимизация

Заключение

Web Vitals

Контроль SEO-изменений

Core Web Vitals: что это и как улучшить

FID (First Input Delay): что это и устарела ли метрика

LCP (Largest Contentful Paint): что это и как улучшить

SEO-аудит: что это и как провести

Чат-боты на сайте: как они влияют на поведенческие факторы и SEO

Анализ выдачи (SERP): что показывает поисковик и как это использовать

ИКС Яндекса в 2026 году: что это, как считается и как поднять без накрутки

Мониторинг упоминаний бренда: зачем следить за Google News и как это делать

Продолжить работу

Обратная связь

Google Analytics 4: полное руководство по настройке и использованию

Важность веб-аналитики

Настройка Google Analytics 4

Создание аккаунта и ресурса

Установка кода отслеживания

Отслеживание событий

Базовые события

Пользовательские события

Настройка целей и конверсий

Создание целей

Отслеживание конверсий

Расширенная настройка

Пользовательские параметры

Enhanced Ecommerce

Анализ данных

Основные отчеты

Пользовательские отчеты

Интеграция с другими инструментами

Google Ads

Google Search Console

Google Tag Manager

Оптимизация и A/B тестирование

Настройка экспериментов

Анализ производительности

Безопасность и конфиденциальность

GDPR и CCPA

Фильтрация данных

Лучшие практики

1. Планирование

2. Реализация

3. Анализ

4. Оптимизация

Заключение

Web Vitals

Контроль SEO-изменений