Як підключити GA4 до сайту: покрокова інструкція

Підключити GA4 до сайту — перший крок у веб-аналітиці. Без нього у вас немає даних: хто приходить на сайт, з яких каналів, що робить і куди йде. Google Analytics 4 (GA4) — поточна версія безкоштовного інструменту веб-аналітики від Google, який прийшов на зміну Universal Analytics у 2023 році.

Ця інструкція показує весь шлях: від створення акаунту та ресурсу до встановлення тега на сайті і перевірки перших даних. Кожен крок підкріплений скриншотом з нашого реального налаштування. Знадобиться 20–30 хвилин.

Що ви отримаєте після підключення

Після того як налаштувати GA4 і дати йому кілька днів для накопичення даних, у вас будуть:

• точна кількість відвідувачів і сеансів на сайті
• джерела трафіку: органічний пошук, прямий трафік, соцмережі, реферали
• поведінка користувачів: які сторінки переглядають, скільки часу проводять, де йдуть
• технічні дані: пристрої, браузери, географія аудиторії
• базові події: перегляди сторінок, прокрутка, кліки по зовнішніх посиланнях — GA4 збирає їх автоматично

Для більш складних цілей — відстеження конверсій, подій форм, покупок — потрібні додаткові налаштування, але база починається тут.

Крок 1. Створення акаунту та ресурсу GA4

Відкрийте analytics.google.com і увійдіть через Google-акаунт. Якщо GA-акаунту ще немає — натисніть Start measuring.

Перший екран — Account name: назва акаунту, це контейнер для всіх ваших сайтів. Якщо у вас один сайт і ви керуєте ним самостійно, зазвичай пишуть назву бізнесу або домен.

Нижче — Property name: назва ресурсу. Ресурс відповідає конкретному сайту (або додатку). Для нашого сайту ми вказали analytics.net.ua.

Далі два важливих параметри:

• Часовий пояс звітності: вибирайте той, де живе ваша аудиторія. Ми вибрали Україна (GMT+3 Київ) — тоді дні в GA4 збігаються з місцевим часом, а не нічними годинами UTC.
• Валюта: гривня (UAH). Якщо плануєте відстежувати доходи в e-commerce — тут має бути та сама валюта, що й у вашій системі замовлень.

Натисніть Next.

Крок 2. Бізнес-деталі

Google запитує два поля: галузь і розмір компанії. Ці дані потрібні Google для формування орієнтирів у звітах (наприклад, порівняння показника відмов із середнім по галузі). На технічне функціонування GA4 вони не впливають — вибирайте найближче до реального.

Для analytics.net.ua ми вибрали:

• Industry category: Computers & Electronics (або Business & Industrial Markets — обидва підходять для інфосайту про аналітику)
• Business size: Small (1–10 employees)

Натисніть Next.

Крок 3. Бізнес-цілі

Наступний екран — Business objectives: Google пропонує вибрати мету, під яку хоче попередньо налаштувати шаблони звітів. Варіанти:

• Generate leads (генерація лідів)
• Drive online sales (продажі онлайн)
• Raise brand awareness (впізнаваність бренду)
• Examine user behavior (аналіз поведінки)
• Get baseline reports (базова аналітика)

Для більшості контентних або інформаційних сайтів підходить Examine user behavior або Get baseline reports. Вибір тут не остаточний — потім можна змінити в налаштуваннях ресурсу.

Виберіть мету і натисніть Create.

Крок 4. Прийняття умов використання

З’явиться модальне вікно з Terms of Service. Виберіть країну Ukraine у випадаючому списку.

Нижче є два чекбокси для GDPR (Data Processing Terms — DPA між вами і Google). Вони стосуються обробки персональних даних користувачів відповідно до GDPR:

• Google Measurement Controller-Controller Data Protection Terms — стандартне DPA, має бути відмічено
• I accept the Google Measurement DPA — підтвердження умов

Якщо ваш сайт орієнтований на аудиторію ЄС або ви хочете відповідати GDPR — відмічайте обидва. Для суто українського сайту без EU-трафіку це не критично, але краще підписати: це не змінює функціональності GA4.

Натисніть I Accept.

Крок 5. Веб-потік даних

Після прийняття умов відкриється вікно Choose a platform — вибір платформи для потоку даних.

Виберіть Web (якщо підключаєте сайт, не мобільний додаток).

Заповніть два поля:

• Website URL: введіть адресу сайту з протоколом, наприклад https://analytics.net.ua. Переконайтеся, що вибрали https://, а не http://.
• Stream name: назва потоку. Ми вказали analytics.net.ua Web — просто і зрозуміло, якщо потоків буде кілька.

Опція Enhanced Measurement залишається включеною — вона автоматично збирає стандартні події без додаткового коду: page views, scrolls, outbound clicks, site search, video engagement, file downloads. Якщо не знаєте, чи вона вам потрібна — залишайте увімкненою.

Натисніть Create stream.

Крок 6. Ваш Measurement ID

Після створення потоку відкривається панель з деталями веб-потоку — це найважливіший екран у всьому налаштуванні.

У верхній частині — Measurement ID формату G-XXXXXXXXX. Саме цей ідентифікатор вставляється в код тега на сайті і зв’язує ваш сайт із цим конкретним потоком даних у GA4.

Збережіть цей ID — він знадобиться на наступному кроці. Знайти його пізніше можна тут: GA4 → Admin → Data Streams → вибрати потік → поле Measurement ID вгорі праворуч.

На цьому екрані також є розділ Tagging instructions — посилання на інструкції зі встановлення тега різними способами. Переходимо до наступного кроку.

Крок 7. Встановлення тега на сайт

Є два рівноцінних способи встановити GA4 на сайт. Вибирайте залежно від вашої ситуації.

Спосіб А: тег gtag.js вручну в <head>

Це прямий, без посередників варіант. Підходить для статичних сайтів, Hugo, Jekyll та будь-якого сайту, де є доступ до HTML-шаблону або <head>.

Скопіюйте наступний фрагмент і вставте його одразу після <head> у вашому шаблоні. Замініть G-XXXXXXXXX на ваш реальний Measurement ID:

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

Важливо: тег має бути саме в <head>, а не перед </body>. GA4 потребує ранньої ініціалізації, щоб правильно відстежувати всі взаємодії на сторінці.

Для Hugo: зазвичай цей фрагмент додають у themes/<your-theme>/layouts/partials/head.html або аналогічний partial, який підключається глобально.

Спосіб Б: через Google Tag Manager (GTM)

Якщо у вас вже встановлений GTM на сайт — GA4 додається без торкання коду.

У GTM:

1. Tags → New → тип тега Google Analytics: GA4 Configuration
2. Введіть ваш Measurement ID у поле Measurement ID
3. Trigger: All Pages
4. Збережіть і опублікуйте контейнер

GTM потім сам підтягує і запускає тег GA4 на кожній сторінці. Цей підхід зручний, якщо поряд є інші теги — Google Ads, Facebook Pixel, Hotjar — усе управляється з одного місця без окремих правок коду.

Детальніше про те, як налаштувати події в GTM для GA4, є в окремій статті.

Як перевірити, що GA4 працює

Після встановлення тега (і деплою, якщо ви правили шаблони) одразу перевіряйте.

Realtime-звіт

У GA4 відкрийте Reports → Realtime. Зайдіть на свій сайт у другій вкладці. Якщо через кілька секунд у Realtime з’явився хоча б один активний користувач — тег спрацював.

Realtime — найшвидший індикатор. Він оновлюється кожні 30 секунд і показує активних користувачів за останні 30 хвилин.

DebugView

Для детальнішого аналізу є DebugView: GA4 → Admin → DebugView.

DebugView показує кожну подію у реальному часі з усіма параметрами. Щоб активувати його для вашого браузера, встановіть розширення Google Analytics Debugger (Chrome) або додайте параметр ?_debug=1 в URL сайту.

У DebugView ви побачите події page_view, session_start, first_visit та інші. Якщо подій немає — перевірте: чи є розширення-блокувальники реклами, які блокують googletagmanager.com.

Tag Assistant

Розширення Google Tag Assistant для Chrome дозволяє бачити, які теги завантажуються на сторінці. Відкрийте сайт із включеним Tag Assistant — він покаже ваш GA4 тег із зеленою іконкою і правильним Measurement ID, якщо все гаразд.

Типові помилки при підключенні

Тег не в <head>, а перед </body>

GA4 рекомендує розміщувати тег якомога вище в <head>, а не внизу сторінки. Якщо тег перед </body> — він завантажується останнім і може пропустити деякі події, що відбуваються під час завантаження сторінки.

Дублювання тега

Якщо ви встановили gtag.js вручну і паралельно підключили GA4 через GTM — тег запускається двічі. Результат: подвійні хіти, завищені показники переглядів і подій. Виберіть один спосіб і видаліть інший. Перевірити дублювання можна в Tag Assistant — він показує кілька спрацьовувань одного тега.

Неправильний Measurement ID

Часта помилка: скопіювати ID з іншого ресурсу або з тестового оточення. Measurement ID прив’язаний до конкретного веб-потоку — якщо вставити чужий, ваші дані підуть у чужий GA4-ресурс (або нікуди, якщо ресурс з таким ID не існує). Завжди перевіряйте: GA4 → Admin → Data Streams → ваш потік → Measurement ID.

Власний трафік не відфільтрований

За замовчуванням GA4 записує і ваші власні візити — коли ви перевіряєте сайт, тестуєте сторінки. Це засмічує дані. Щоб виключити себе: GA4 → Admin → Data Streams → вибрати потік → Configure tag settings → Define internal traffic → додати вашу IP-адресу. Потім у GA4 → Admin → Data Settings → Data Filters активуйте фільтр Internal Traffic.

Тег заблокований браузером або ad blocker

uBlock Origin, AdBlock Plus та подібні розширення блокують googletagmanager.com і google-analytics.com за замовчуванням. Якщо ви тестуєте з включеним блокувальником — тег не спрацює і DebugView покаже порожнечу. Тестуйте в режимі інкогніто або браузері без розширень.

Що далі після підключення

Підключення GA4 — це базова конфігурація. Наступні кроки залежать від ваших цілей:

• Налаштування подій і конверсій у GA4 — позначити важливі дії (кліки по кнопці, заповнення форм, покупки) як конверсії
• Чеклист налаштування GA4 — повний список того, що ще варто налаштувати після першого підключення
• Consent Mode v2 у GA4 — якщо є трафік з ЄС або плануєте Google Ads
• GA4 і BigQuery: підключення та перші запити — для тих, хто хоче сирі дані і власні SQL-звіти

Самих лише перших 24–48 годин уже достатньо, щоб побачити перші реальні дані в стандартних звітах. А Realtime показує результат вже через хвилину після деплою.