Как подключить 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 показывает результат уже через минуту после деплоя.