Загрузка...
Загрузка...
Подробное руководство по настройке Google Analytics 4 для веб-сайтов. Отслеживание событий, пользователей, конверсий и анализ данных для улучшения сайта.
Поделитесь с коллегами или изучите другие материалы блога
Google Analytics является одним из самых мощных инструментов для анализа веб-сайтов и понимания поведения пользователей. С выходом Google Analytics 4 (GA4) система стала еще более гибкой и функциональной. В этой статье мы рассмотрим все аспекты настройки и использования GA4 для максимальной эффективности.
Веб-аналитика является критически важным инструментом для понимания эффективности сайта. Правильно настроенная аналитика позволяет:
Переход в Google Analytics:
Создание аккаунта:
Название аккаунта: Ваша компания
Название ресурса: Ваш сайт
URL: https://yoursite.com
Отрасль: Выберите подходящую
Часовой пояс: Ваш часовой пояс
Настройка потока данных:
Базовый код 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
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
});
}
Отчет "Аудитория":
Отчет "Приобретение":
Отчет "Поведение":
Отчет "Конверсии":
Создание пользовательского отчета:
Пример пользовательского отчета:
Название: Эффективность страниц
Метрики: Просмотры страниц, Время на странице, Отказы
Измерения: URL страницы, Источник трафика
Фильтры: Только органический трафик
Связывание с Google Ads:
Отслеживание конверсий:
// Отслеживание конверсии для Google Ads
gtag('event', 'conversion', {
send_to: 'AW-CONVERSION_ID/CONVERSION_LABEL',
value: 100,
currency: 'RUB',
transaction_id: 'order_123'
});
Связывание с Search Console:
Установка через 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 -->
Создание эксперимента:
Отслеживание экспериментов:
// Отслеживание участия в эксперименте
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']});
Настройка согласия:
// Отслеживание согласия пользователя
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;
}
Исключение внутреннего трафика:
Фильтрация спама:
// Фильтрация ботов
if (navigator.userAgent.includes('bot')) {
return;
}
// Фильтрация по времени на странице
let minTimeOnPage = 5000; // 5 секунд
Google Analytics 4 является мощным инструментом для анализа веб-сайтов. Правильная настройка и использование GA4 позволяет получать ценные данные о поведении пользователей и эффективности сайта.
Ключевые моменты для запоминания:
Следуя этим рекомендациям, вы сможете получить максимальную пользу от Google Analytics 4 и использовать данные для улучшения вашего веб-сайта.