Маршрут практикиИСХОДНИК 20 · ТЕМА 05 / 01

GA4 уже подготовлен

На прошлом занятии мы создали Analytics Account, GA4 Property и Web Data Stream. Для знакомства указали bytecamp.ru и получили Measurement ID.

01GA4 Propertyсоздан ✓
02Web Data Streamсоздан ✓
03bytecamp.ruвременный учебный URL
04G-XXXXXXXXXXполучен ✓

Маршрут практикиИСХОДНИК 21 · ТЕМА 05 / 02

Нам нужен отдельный учебный сайт

Каждый студент работает со своим сайтом: изменяет код, устанавливает Google Tag, проверяет события и экспериментирует с UTM.

РАБОЧИЙ ПРОЕКТ

bytecamp.ru

Настоящий сайт и его аналитику не изменяем.

УЧЕБНЫЙ ПРОЕКТ

student-project.vercel.app

Своя копия кода, собственная публикация и учебный поток GA4.

Маршрут практикиИСХОДНИК 22 · ТЕМА 05 / 03

Маршрут практической работы

Пройдём путь от шаблона до первого посещения в Realtime. Сайт опубликуем дважды: сначала без тега, затем с аналитикой.

01Шаблонготовые HTML / CSS / JS
02GitHubсвоя копия
03VS Codeлокальный проект
04Vercelпервая публикация
05Публичный URLадрес сайта
06Web Streamобновление адреса
07Google Tagкод на всех страницах
08Vercelповторная публикация
09GA4 Realtimeпроверка событий

GitHub → VS CodeИСХОДНИК 23 · ТЕМА 05 / 04

Шаг 1. Открыть шаблон на GitHub

Откройте шаблон учебного проекта. Он уже содержит HTML, CSS и JavaScript.

ШАБЛОН GA4-LABMaximBytecamp / ga4-analytics-lab ↗Нажмите Use this template, чтобы создать свою копию.

Заглушка: GitHub — Шаблон репозитория. Название · файлы · README — **GitHub**Название · файлы · README

GitHub → VS CodeИСХОДНИК 24 · ТЕМА 05 / 05

Структура проекта

Три страницы, один файл стилей и один файл JavaScript — основа дальнейшей практики.

СТРУКТУРА ПРОЕКТА

ga4-analytics-lab/
├── index.html
├── about.html
├── contacts.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── README.md

index.html — главная.
about.html — о проекте.
contacts.html — контакты.
css/style.css — стили.
js/script.js — поведение сайта.

Дальше добавим клики, формы, события, воронки и Google Tag Manager.

GitHub → VS CodeДОПОЛНЕНИЕ · АККАУНТ 1 / 2

Шаг 0. Выйти из чужого аккаунта GitHub

На учебном компьютере в браузере часто остаётся аккаунт предыдущего студента. Если не выйти, копия шаблона появится у чужого пользователя, а вы не сможете её изменить.

01Аватар справа вверхуоткрыть меню
02Sign outвыйти из аккаунта
03github.comпроверить результат

После выхода github.com показывает страницу входа, а не чужой профиль. Это и есть проверка.

GitHub → VS CodeДОПОЛНЕНИЕ · АККАУНТ 2 / 2

Шаг 0.1. Войти в свой аккаунт

Войдите под своей учётной записью и убедитесь, что дальше работаете именно в ней.

Sign in — логин и пароль своего аккаунта.
Аватар справа вверху → в меню виден ваш логин.
Адрес профиля: github.com/ВАШ-ЛОГИН.

БРАУЗЕР

GitHub

Выйти из чужого аккаунта и войти в свой.

РЕДАКТОР

VS Code

Accounts → Sign out, если сохранён чужой вход.

ПУБЛИКАЦИЯ

Vercel

Войти тем же GitHub-аккаунтом.

GitHub → VS CodeИСХОДНИК 25 · ТЕМА 05 / 06

Шаг 2. Создать свою копию

Каждому студенту нужен собственный GitHub-репозиторий.

01Use this templateна странице шаблона
02Create a new repositoryсоздать свою копию

Заглушка: GitHub — Use this template. Create a new repository — **GitHub**Create a new repository

GitHub → VS CodeИСХОДНИК 26 · ТЕМА 05 / 07

Шаг 3. Назвать свой проект

Укажите владельца — ваш GitHub-аккаунт — и название проекта.

REPOSITORY NAME

ga4-analytics-lab
или
ga4-analytics-lab-ivanov

Нажмите Create repository.

Заглушка: GitHub — Create repository. Owner · Repository name · Create — **GitHub**Owner · Repository name · Create

GitHub → VS CodeИСХОДНИК 27 · ТЕМА 05 / 08

Копия создана

Проверьте владельца в адресе нового репозитория.

ВАША КОПИЯ

github.com/ВАШ-ЛОГИН/ga4-analytics-lab

Заглушка: GitHub — Своя копия проекта. Владелец в адресе репозитория — **GitHub**Владелец в адресе репозитория

GitHub → VS CodeИСХОДНИК 28 · ТЕМА 05 / 09

Шаг 4. Открыть проект в VS Code

В Visual Studio Code откройте Source Control → Clone Repository. Другой путь — команда Git: Clone в палитре команд.

Выберите Clone from GitHub, если предлагается.
При необходимости войдите в GitHub.
Найдите свой репозиторий.

Заглушка: VS Code — Clone Repository. Source Control · Clone Repository — **VS Code**Source Control · Clone Repository

GitHub → VS CodeИСХОДНИК 29 · ТЕМА 05 / 10

Шаг 5. Выбрать свою копию

В списке GitHub repositories выберите свою копию ga4-analytics-lab.

Укажите папку на компьютере.
Дождитесь клонирования.
Нажмите Open, чтобы открыть проект.

Заглушка: VS Code — GitHub repositories. Свой репозиторий · Open — **VS Code**Свой репозиторий · Open

GitHub → VS CodeИСХОДНИК 30 · ТЕМА 05 / 11

Шаг 6. Убедиться, что файлы получены

В Explorer должны появиться все файлы проекта.

EXPLORER

index.html
about.html
contacts.html
css/
js/
README.md

Откройте index.html. Пока ничего не изменяем.

Заглушка: VS Code — Explorer. Дерево файлов · index.html — **VS Code**Дерево файлов · index.html

Локальная проверкаИСХОДНИК 31 · ТЕМА 05 / 12

Шаг 7. Проверить сайт

Сначала проверьте сайт на локальном веб-сервере. Например, с расширением Live Server: правый клик по index.html → Open with Live Server.

ЛОКАЛЬНЫЙ АДРЕС

http://127.0.0.1:5500/
или http://localhost:5500/

Заглушка: Браузер — Локальный сайт. Адресная строка: localhost — **Браузер**Адресная строка: localhost

Локальная проверкаИСХОДНИК 32 · ТЕМА 05 / 13

Почему этого недостаточно

Localhost доступен на вашем компьютере. Для совместной проверки и UTM-ссылок опубликуем сайт в интернете.

РАЗРАБОТКА

localhost

Адрес локального сервера на компьютере студента.

ПУБЛИКАЦИЯ

Vercel

Публичный HTTPS-адрес, который можно открыть с другого устройства.

Публикация на VercelИСХОДНИК 33 · ТЕМА 05 / 14

Шаг 8. Перейти на Vercel

Откройте Vercel. Он публикует сайт из GitHub-репозитория.

vercel.com ↗

Нажмите Sign Up или Log In.

Публикация на VercelИСХОДНИК 34 · ТЕМА 05 / 15

Шаг 9. Войти через GitHub

Выберите вход через GitHub и подключите нужный репозиторий.

Используйте аккаунт, которому принадлежит учебная копия.
Предоставьте Vercel доступ к этому репозиторию.

Заглушка: Vercel — Авторизация. Вход через GitHub — **Vercel**Вход через GitHub

Публикация на VercelИСХОДНИК 35 · ТЕМА 05 / 16

Зачем мы их связываем

GitHub хранит исходный код и его историю. Vercel публикует выбранную версию проекта.

01VS Codeредактирование
02GitHubистория изменений
03Vercelразвёртывание
04Internetготовый сайт

Публикация на VercelИСХОДНИК 36 · ТЕМА 05 / 17

Шаг 10. Add New Project

В Dashboard откройте Add New → Project.

VERCEL DASHBOARD

Add New → Project

В другой версии интерфейса кнопка может называться New Project.

Заглушка: Vercel — Dashboard. Add New → Project — **Vercel**Add New → Project

Публикация на VercelИСХОДНИК 37 · ТЕМА 05 / 18

Шаг 11. Import Git Repository

В разделе Import Git Repository найдите свою копию ga4-analytics-lab и нажмите Import.

Заглушка: Vercel — Import Git Repository. Свой репозиторий · Import — **Vercel**Свой репозиторий · Import

Публикация на VercelИСХОДНИК 38 · ТЕМА 05 / 19

Шаг 12. Configure Project

В Configure Project проверьте Project Name.

ПРИМЕР ИМЕНИ

ga4-analytics-lab-ivanov

Можно оставить ga4-analytics-lab или добавить фамилию. Имя участвует в формировании адреса; точный домен проверим после публикации.

Заглушка: Vercel — Configure Project. Project Name — **Vercel**Project Name

Публикация на VercelИСХОДНИК 39 · ТЕМА 05 / 20

Шаг 13. Указать тип проекта

Проект состоит из HTML, CSS и JavaScript. Фреймворк здесь не используется.

CONFIGURE PROJECT

Framework Preset → Other

Заглушка: Vercel — Framework Preset. Раскрытый список · Other — **Vercel**Раскрытый список · Other

Публикация на VercelИСХОДНИК 40 · ТЕМА 05 / 21

Статический сайт не нужно собирать

HTML-файлы уже готовы к публикации. У проекта нет сборки React, Next.js или Vite.

BUILD AND OUTPUT SETTINGS

Framework Preset: Other
Build Command: пусто
Output Directory: .

Публикация на VercelИСХОДНИК 41 · ТЕМА 05 / 22

Шаг 14. Проверить Root Directory

index.html находится в корне репозитория. Оставьте корневой Root Directory.

ROOT DIRECTORY: ./

/
├── index.html
├── about.html
├── contacts.html
├── css/
└── js/

Публикация на VercelИСХОДНИК 42 · ТЕМА 05 / 23

Шаг 15. Deploy

Настройки готовы. Нажмите Deploy и дождитесь завершения публикации.

01GitHubготовые файлы
02Deployпубликация
03Vercelпервая версия

Заглушка: Vercel — Первая публикация. Кнопка Deploy — **Vercel**Кнопка Deploy

Публикация на VercelИСХОДНИК 43 · ТЕМА 05 / 24

Сайт появился в интернете

После успешного Deployment откройте назначенный публичный адрес.

ПРИМЕР, ВАШ АДРЕС БУДЕТ ДРУГИМ

https://ga4-analytics-lab-ivanov.vercel.app

Заглушка: Vercel — Успешный Deployment. Ready · production-домен — **Vercel**Ready · production-домен

Публикация на VercelИСХОДНИК 44 · ТЕМА 05 / 25

Шаг 16. Visit

Нажмите Visit и проверьте сайт на домене .vercel.app.

Главная страница загружается.
Стили применились.
Ссылки открывают About и Contacts.
Публичный адрес доступен с другого устройства.

Заглушка: Браузер — Опубликованный сайт. Адресная строка: .vercel.app — **Браузер**Адресная строка: .vercel.app

Обновление Web StreamИСХОДНИК 45 · ТЕМА 05 / 26

Возвращаемся в GA4

В учебном Web Data Stream пока указан bytecamp.ru. Теперь у нас есть собственный публичный сайт.

01bytecamp.ruстарый учебный адрес
02Заменяем URLв существующем потоке
03…vercel.appпубличный адрес студента

Обновление Web StreamИСХОДНИК 46 · ТЕМА 05 / 27

Редактируем существующий Web Data Stream

Продолжаем работать с существующим учебным Web Data Stream: обновляем URL и название.

СОХРАНЯЕТСЯG-XXXXXXXXXXMeasurement ID того же потока

ИЗМЕНЯЕТСЯWebsite URLbytecamp.ru → ваш-проект.vercel.app

Обновление Web StreamИСХОДНИК 47 · ТЕМА 05 / 28

Шаг 17. Admin → Data streams

В учебном ресурсе Google Analytics откройте:

01Adminадминистрирование
02Data collection and modificationсбор и изменение данных
03Data streamsпотоки данных

Заглушка: GA4 — Admin. Data streams — **GA4**Data streams

Обновление Web StreamИСХОДНИК 48 · ТЕМА 05 / 29

Шаг 18. Найти bytecamp.ru

Найдите Web Data Stream, который создали на прошлом занятии. В Website URL пока указан bytecamp.ru.

Заглушка: GA4 — Data streams. Учебный поток с bytecamp.ru — **GA4**Учебный поток с bytecamp.ru

Обновление Web StreamИСХОДНИК 49 · ТЕМА 05 / 30

Шаг 19. Edit Web Stream

В Web stream details найдите значок карандаша в верхней части сведений о потоке.

РЕДАКТИРОВАНИЕ

Web stream details → Edit

Нажмите значок, чтобы изменить URL и название.

Заглушка: GA4 — Web stream details. Значок Edit / карандаш — **GA4**Значок Edit / карандаш

Обновление Web StreamИСХОДНИК 50 · ТЕМА 05 / 31

Шаг 20. Указать Vercel URL

Выберите протокол https:// и замените домен сайта.

WEBSITE URL — ТОЛЬКО ДОМЕН

ga4-analytics-lab-ivanov.vercel.app

Не повторяйте https:// в поле домена.
Не добавляйте UTM-параметры.
Не указывайте /about.html или другую страницу.

Заглушка: GA4 — Edit Web Stream. Новый Website URL · HTTPS — **GA4**Новый Website URL · HTTPS

Обновление Web StreamИСХОДНИК 51 · ТЕМА 05 / 32

Шаг 21. Сделать название понятным

Обновите Stream name, чтобы название соответствовало вашему сайту.

НАЗВАНИЕ ПОТОКА

GA4 Analytics Lab — Ivanov
или Student Analytics Website

Заглушка: GA4 — Edit Web Stream. Обновлённый Stream name — **GA4**Обновлённый Stream name

Обновление Web StreamИСХОДНИК 52 · ТЕМА 05 / 33

Шаг 22. Update stream

Проверьте новый домен, протокол и название. Нажмите Update stream.

Заглушка: GA4 — Edit Web Stream. Кнопка Update stream — **GA4**Кнопка Update stream

Обновление Web StreamИСХОДНИК 53 · ТЕМА 05 / 34

G-XXXXXXXXXX остался прежним

URL и название обновились. Measurement ID остался прежним, потому что мы редактировали тот же поток.

ТОТ ЖЕ ИДЕНТИФИКАТОР

G-XXXXXXXXXX

Его будем использовать при подключении сайта.

Заглушка: GA4 — Web stream details. Новый URL · прежний Measurement ID — **GA4**Новый URL · прежний Measurement ID

Установка Google TagИСХОДНИК 55 · ТЕМА 05 / 36

Свяжем сайт и GA4

Опубликованный сайт, ресурс, поток и Measurement ID готовы. Осталось добавить на сайт код передачи данных.

VERCEL SITE× × ×тег ещё не установленGA4

Установка Google TagИСХОДНИК 56 · ТЕМА 05 / 37

Шаг 23. View tag instructions

В сведениях о потоке найдите раздел Google tag.

WEB STREAM DETAILS

Google tag → View tag instructions

Откройте инструкции установки.

Заглушка: GA4 — Google tag. View tag instructions — **GA4**View tag instructions

Установка Google TagИСХОДНИК 57 · ТЕМА 05 / 38

Шаг 24. Install manually

У нас есть доступ к HTML, поэтому выберите Install manually.

Заглушка: GA4 — Installation instructions. Install manually — **GA4**Install manually

Установка Google TagИСХОДНИК 58 · ТЕМА 05 / 39

Шаг 25. Copy

Нажмите Copy и скопируйте весь блок Google Tag.

НАЧАЛО БЛОКА

<!-- Google tag (gtag.js) -->
… полный код из вашего GA4 …

Заглушка: GA4 — Код Google Tag. Весь код · кнопка Copy — **GA4**Весь код · кнопка Copy

Установка Google TagДОПОЛНЕНИЕ · РАЗБОР КОДА 1 / 3

Как устроен код Google Tag

Скопированный тег состоит из двух частей: сначала подключается библиотека, затем она настраивается на ваш поток. Обе части нужны и работают вместе.

01script srcзагружает gtag.js
02dataLayerочередь для данных
03gtag()функция для вызовов
04configвключает сбор

Установка Google TagДОПОЛНЕНИЕ · РАЗБОР КОДА 2 / 3

Первая строка: загрузка библиотеки

ЗАГРУЗКА БИБЛИОТЕКИ

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

src — адрес библиотеки gtag.js на серверах Google.
?id=G-XXXXXXXXXX — ваш Measurement ID: он указывает, в какой поток отправлять данные.
async — браузер загружает скрипт параллельно и не задерживает отрисовку страницы.

Установка Google TagДОПОЛНЕНИЕ · РАЗБОР КОДА 3 / 3

Вторая часть: очередь, функция и config

НАСТРОЙКА ПОТОКА

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');

window.dataLayer = window.dataLayer || [] — создаёт массив-очередь, если его ещё нет на странице.
function gtag(){dataLayer.push(arguments);} — складывает любой вызов в эту очередь.
gtag('js', new Date()) — отмечает момент инициализации.
gtag('config', 'G-XXXXXXXXXX') — включает сбор для потока и отправляет первый page_view.

Очередь нужна потому, что вызовы могут произойти раньше, чем загрузится gtag.js. Библиотека разберёт накопленное, когда будет готова.

Установка Google TagИСХОДНИК 59 · ТЕМА 05 / 40

Шаг 26. Открыть index.html

Вернитесь в VS Code, откройте index.html и найдите начало секции <head>.

INDEX.HTML

<html lang="ru">
<head>
    <!-- сюда добавим Google Tag -->

Тег разместим сразу после открывающего <head>.

Заглушка: VS Code — index.html. Открывающий <head> — **VS Code**Открывающий <head>

Установка Google TagИСХОДНИК 60 · ТЕМА 05 / 41

Шаг 27. Добавить код в `<head>`

Вставьте полный код Google Tag из GA4 в указанное место.

СХЕМА РАЗМЕЩЕНИЯ — НЕ КОД ТЕГА

<!DOCTYPE html>
<html lang="ru">
<head>
    <!-- Google Tag из вашего GA4 -->
    <meta charset="UTF-8">
    <title>GA4 Analytics Lab</title>
</head>

Заглушка: VS Code — Google Tag вставлен. Весь блок после <head> — **VS Code**Весь блок после <head>

Установка Google TagИСХОДНИК 61 · ТЕМА 05 / 42

Шаг 28. Подключить остальные страницы

Добавьте тот же тег сразу после <head> во все три страницы.

index.html
about.html
contacts.html

Заглушка: VS Code — Три HTML-страницы. index · about · contacts — **VS Code**index · about · contacts

Commit → ProductionИСХОДНИК 62 · ТЕМА 05 / 43

Шаг 29. Save

Сохраните все изменённые HTML-файлы. Локальная версия содержит тег, опубликованная ещё не обновлена.

01VS Codeновая версия + tag ✓
02GitHubпредыдущая версия
03Vercelпредыдущая версия

Commit → ProductionИСХОДНИК 63 · ТЕМА 05 / 44

Шаг 30. Проверить изменения

Откройте Source Control и проверьте изменения в каждом HTML-файле.

index.html
about.html
contacts.html

Заглушка: VS Code — Source Control. Три изменённых HTML-файла — **VS Code**Три изменённых HTML-файла

Commit → ProductionИСХОДНИК 64 · ТЕМА 05 / 45

Шаг 31. Зафиксировать изменение

Введите сообщение коммита и нажмите Commit.

COMMIT MESSAGE

Add GA4 Google tag

После этого выполните Sync Changes или Push, чтобы отправить commit в GitHub.

Заглушка: VS Code — Commit. Add GA4 Google tag · Sync / Push — **VS Code**Add GA4 Google tag · Sync / Push

Commit → ProductionИСХОДНИК 65 · ТЕМА 05 / 46

Vercel увидит новый commit

После Push в production-ветку Vercel запускает новый Deployment.

01VS CodeCommit → Push
02GitHubновая версия main
03Vercelавтоматический Deploy
04Productionсайт с Google Tag

Commit → ProductionИСХОДНИК 66 · ТЕМА 05 / 47

Шаг 32. Открыть Vercel

Откройте свой Vercel Project → Deployments.

Последний Deployment связан с нужным commit.
Сообщение: Add GA4 Google tag.
Дождитесь успешного состояния Ready.

Заглушка: Vercel — Deployments. Новый commit · Ready · Production — **Vercel**Новый commit · Ready · Production

Commit → ProductionИСХОДНИК 67 · ТЕМА 05 / 48

Шаг 33. Проверить новую версию

Откройте постоянный Production URL своего проекта.

ОПУБЛИКОВАННЫЙ САЙТ

https://ваш-проект.vercel.app

Обновите страницу. Эта версия теперь должна содержать Google Tag. Итоговую проверку проводим на публичном сайте.

Заглушка: Браузер — Новая Production-версия. Постоянный .vercel.app URL — **Браузер**Постоянный .vercel.app URL

Проверка RealtimeИСХОДНИК 68 · ТЕМА 05 / 49

Шаг 34. Test your website

В View tag instructions найдите Test your website. Укажите полный адрес и нажмите Test.

ЗДЕСЬ НУЖЕН ПОЛНЫЙ HTTPS-АДРЕС

https://ga4-analytics-lab-ivanov.vercel.app

Заглушка: GA4 — Test your website. Полный URL · Test — **GA4**Полный URL · Test

Проверка RealtimeИСХОДНИК 69 · ТЕМА 05 / 50

Первая проверка пройдена

Обнаружение тега подтверждает установку кода. Теперь проверим, что события действительно поступают.

01Google Tagобнаружен ✓
02Данныенужна проверка
03Realtimeсмотрим события

Проверка RealtimeИСХОДНИК 70 · ТЕМА 05 / 51

Шаг 35. Открыть сайт как пользователь

Откройте опубликованный сайт и выполните несколько переходов.

01Homeглавная
02Aboutо проекте
03Contactsконтакты
04Homeвернуться

Заглушка: Браузер — Посещение учебного сайта. Навигация Home / About / Contacts — **Браузер**Навигация Home / About / Contacts

Проверка RealtimeИСХОДНИК 71 · ТЕМА 05 / 52

Сайт начал отправлять данные

При открытии страницы браузер получает HTML с Vercel, загружает Google Tag и отправляет событие в GA4.

01Browserоткрывает страницу
02Vercelотдаёт HTML
03Google Tagпередаёт событие
04GA4получает page_view

Проверка RealtimeИСХОДНИК 72 · ТЕМА 05 / 53

Шаг 36. Reports → Realtime

В Google Analytics откройте Reports → Realtime.

ОТЧЁТ В РЕАЛЬНОМ ВРЕМЕНИ

Reports → Realtime

Заглушка: GA4 — Reports. Realtime — **GA4**Realtime

Проверка RealtimeИСХОДНИК 73 · ТЕМА 05 / 54

Шаг 37. Active users

Проверьте Active users. На учебном сайте посетителей мало, поэтому ваше посещение, вероятно, окажется среди них.

Заглушка: GA4 — Realtime. Active users — **GA4**Active users

Проверка RealtimeИСХОДНИК 74 · ТЕМА 05 / 55

GA4 знает, что мы смотрели?

Найдите карточку просмотренных страниц. Сравните её с тем, что только что открывали.

Home — главная.
About — о проекте.
Contacts — контакты.

Заглушка: GA4 — Realtime: страницы. Home · About · Contacts — **GA4**Home · About · Contacts

Проверка RealtimeИСХОДНИК 75 · ТЕМА 05 / 56

Первые события уже появились

В списке событий найдите page_view — просмотр страницы.

EVENT NAME

page_view

Заглушка: GA4 — Realtime: события. page_view — **GA4**page_view

UTM-переходИСХОДНИК 76 · ТЕМА 05 / 57

Теперь проверим прошлую тему

Вернёмся к UTM: теперь размеченная ссылка ведёт на сайт с подключённым GA4.

ССЫЛКУ КОПИРУЕМ ОДНОЙ СТРОКОЙ

https://ВАШ-ПРОЕКТ.vercel.app/?utm_source=telegram&utm_medium=social&utm_campaign=ga4_lab

UTM_SOURCE

telegram

Источник перехода.

UTM_MEDIUM

social

Тип канала.

UTM_CAMPAIGN

ga4_lab

Учебная кампания.

UTM-переходИСХОДНИК 77 · ТЕМА 05 / 58

Шаг 38. Открыть размеченную ссылку

Подставьте свой домен, скопируйте полную UTM-ссылку и откройте её в браузере.

Откройте несколько страниц.
Вернитесь на главную.
Оставьте сайт открытым.

Заглушка: Браузер — Тестовый UTM-переход. Полная ссылка в адресной строке — **Браузер**Полная ссылка в адресной строке

UTM-переходДОПОЛНЕНИЕ · UTM-ССЫЛКИ 1 / 2

Ссылки под разные каналы

Сайт один, а ссылок несколько. utm_source — площадка, utm_medium — тип канала, utm_campaign — общее имя кампании.

ПЯТЬ ССЫЛОК ОДНОЙ КАМПАНИИ

https://ваш-проект.vercel.app/?utm_source=telegram&utm_medium=social&utm_campaign=ga4_lab
https://ваш-проект.vercel.app/?utm_source=vk&utm_medium=social&utm_campaign=ga4_lab
https://ваш-проект.vercel.app/?utm_source=youtube&utm_medium=video&utm_campaign=ga4_lab
https://ваш-проект.vercel.app/?utm_source=email&utm_medium=letter&utm_campaign=ga4_lab
https://ваш-проект.vercel.app/?utm_source=qr&utm_medium=offline&utm_campaign=ga4_lab

UTM-переходДОПОЛНЕНИЕ · UTM-ССЫЛКИ 2 / 2

Разошлите и проверьте

Отправьте каждую ссылку в своё место и откройте её. Чем больше разных источников, тем нагляднее будет отчёт.

SOCIAL

telegram · vk

Пост или сообщение в чате.

VIDEO

youtube

Описание под роликом.

LETTER

email

Письмо себе или однокурснику.

OFFLINE

qr

QR-код на бумаге.

Каждый переход открывайте в новой сессии, например в приватном окне.
Новая вкладка сама по себе новую сессию GA4 не создаёт.
Запишите, какую ссылку куда отправили: потом сверите с отчётом.

В отчёте Привлечение → Привлечение трафика источники разойдутся: telegram, vk, youtube, email, qr — при одной кампании ga4_lab.

UTM-переходИСХОДНИК 78 · ТЕМА 05 / 59

От ссылки до аналитики

Теперь GA4 получает события с сайта, код и публикацию которого мы контролируем сами.

01UTM LINKисточник в ссылке
02VERCEL WEBSITEпубличный сайт
03GOOGLE TAGотправка
04WEB STREAMнужный поток
05GA4обработка
06REALTIMEнаблюдение

UTM-переходДОПОЛНЕНИЕ · ОБРАБОТКА 1 / 3

Почему источник перехода не виден сразу

Событие и его источник попадают в отчёты по-разному. page_view появляется в Realtime за секунды, а источник, канал и кампания вычисляются позже — на этапе обработки данных.

СРАЗУ

Realtime

Факт события: page_view, посещённые страницы, активные пользователи.

ПОЗЖЕ

Атрибуция

Источник, канал и кампания — после обработки на стороне GA4.

UTM-переходДОПОЛНЕНИЕ · ОБРАБОТКА 2 / 3

Что на самом деле уходит в GA4

Google Tag не отправляет utm_source, utm_medium и utm_campaign отдельными полями. Он передаёт адрес страницы целиком, а метки из него разбирает уже GA4.

ЗАПРОС ОТ ТЕГА

POST https://www.google-analytics.com/g/collect
  tid  G-XXXXXXXXXX
  en   page_view
  dl   https://ваш-проект.vercel.app/?utm_source=telegram&utm_medium=social&utm_campaign=ga4_lab

tid — Measurement ID вашего потока.
en — имя события, здесь page_view.
dl — адрес страницы вместе с UTM-метками.

UTM-переходДОПОЛНЕНИЕ · ОБРАБОТКА 3 / 3

Когда и где искать источники

На занятии проверяем факт сбора. Источник и кампанию смотрим в стандартном отчёте, когда обработка завершится.

01Переход по ссылкеметки в адресе
02Google Tagзапрос с полем dl
03Realtimepage_view сразу
04Обработкаобычно часы
05Привлечение трафикаисточник · канал · кампания

Контроль результатаИСХОДНИК 79 · ТЕМА 05 / 60

Не путайте инструменты

КОД

VS Code

Редактируем исходные файлы.

ВЕРСИИ

GitHub

Храним проект и историю изменений.

ПУБЛИКАЦИЯ

Vercel

Размещаем сайт в интернете.

СБОР

Google Tag

Передаёт события из браузера.

АНАЛИЗ

GA4

Принимает и обрабатывает события.

ИСТОЧНИК

UTM

Описывает источник перехода в ссылке.

Контроль результатаИСХОДНИК 80 · ТЕМА 05 / 61

Важная инженерная цепочка

Сайт обновляется через версию кода в GitHub. Редактирование выполняем локально в VS Code.

01index.htmlизменили код
02Commitзафиксировали
03GitHubотправили Push
04Vercel Deploymentразвёртывание
05Productionновая версия

Контроль результатаИСХОДНИК 81 · ТЕМА 05 / 62

Vercel продолжит обновлять сайт

Измените заголовок в index.html и опубликуйте новую версию.

ПРИМЕР ИЗМЕНЕНИЯ

<h1>GA4 работает</h1>

Демонстрация: код ещё не сохранён

01Saveфайл сохранён
02Commitверсия зафиксирована
03PushGitHub обновлён
04Deployсайт обновлён

Контроль результатаИСХОДНИК 82 · ТЕМА 05 / 63

Один сайт — продолжаем использовать тот же Tag

HTML, CSS и JavaScript меняются, Vercel создаёт новые Deployment. Подключение к тому же потоку сохраняется.

Версия 1Версия 2Версия 3G-XXXXXXXXXX

Один Measurement ID во всех версиях сайта

Контроль результатаИСХОДНИК 84 · ТЕМА 05 / 65

Результат практики

01

GitHub Repository

github.com/user/ga4-analytics-lab

02

Vercel Project

ga4-analytics-lab-user.vercel.app

03

Web Data Stream

URL соответствует учебному сайту.

04

Google Tag

Установлен во всех трёх HTML-файлах.

05

Realtime

Есть реальное посещение и page_view.

Контроль результатаИСХОДНИК 85 · ТЕМА 05 / 66

Контрольные артефакты

Свой GitHub-репозиторий.
Клонированный проект в VS Code.
Успешный Deployment в Vercel.
Сайт на .vercel.app.
Web Data Stream с новым URL.
Measurement ID.
Google Tag внутри <head>.
Commit Add GA4 Google tag.
Realtime с активным пользователем.
Realtime с page_view.
Браузер с тестовой UTM-ссылкой.

Архитектура и продолжениеИСХОДНИК 86 · ТЕМА 05 / 67

Что мы сегодня построили

01VS CODEисходный код
02GITHUBистория и main
03VERCELпубликация
04PUBLIC WEBSITEсайт студента
05GOOGLE TAGсобытия из браузера
06WEB DATA STREAMадресат событий
07EVENTSpage_view и другие
08REPORTS / REALTIMEданные для анализа

UTMИсточник посетителя передаётся в ссылке на публичный сайт.

Архитектура и продолжениеИСХОДНИК 87 · ТЕМА 05 / 68

Но `page_view` нам недостаточно

Просмотры показывают посещённые страницы. Для анализа результата нужно определить, какие действия считать значимыми.

BUTTON

Клик → ?

Какую кнопку нажали?

FORM

Форма → ?

Заявка успешно принята?

DOWNLOAD

Файл → ?

Какой материал скачали?

Архитектура и продолжениеИСХОДНИК 88 · ТЕМА 05 / 69

Events в Google Analytics 4

Дальше разберём автоматические события, Enhanced Measurement, имена и параметры, собственные события, проверку и Key Events.

01CLICKкнопки
02FORMформы
03DOWNLOADфайлы
04SIGN UPрегистрация
05GA4 EVENTSдействия и параметры

GA4 уже подготовлен

Нам нужен отдельный учебный сайт

bytecamp.ru

student-project.vercel.app

Маршрут практической работы

Шаг 1. Открыть шаблон на GitHub

Структура проекта

Шаг 0. Выйти из чужого аккаунта GitHub

Шаг 0.1. Войти в свой аккаунт

GitHub

VS Code

Vercel

Шаг 2. Создать свою копию

Шаг 3. Назвать свой проект

Копия создана

Шаг 4. Открыть проект в VS Code

Шаг 5. Выбрать свою копию

Шаг 6. Убедиться, что файлы получены

Шаг 7. Проверить сайт

Почему этого недостаточно

localhost

Vercel

Шаг 8. Перейти на Vercel

Шаг 9. Войти через GitHub

Зачем мы их связываем

Шаг 10. Add New Project

Шаг 11. Import Git Repository

Шаг 12. Configure Project

Шаг 13. Указать тип проекта

Статический сайт не нужно собирать

Шаг 14. Проверить Root Directory

Шаг 15. Deploy

Сайт появился в интернете

Шаг 16. Visit

Возвращаемся в GA4

Редактируем существующий Web Data Stream

Шаг 17. Admin → Data streams

Шаг 18. Найти bytecamp.ru

Шаг 19. Edit Web Stream

Шаг 20. Указать Vercel URL

Шаг 21. Сделать название понятным

Шаг 22. Update stream

G-XXXXXXXXXX остался прежним

Свяжем сайт и GA4

Шаг 23. View tag instructions

Шаг 24. Install manually

Шаг 25. Copy

Как устроен код Google Tag

Первая строка: загрузка библиотеки

Вторая часть: очередь, функция и config

Шаг 26. Открыть index.html

Шаг 27. Добавить код в <head>

Шаг 28. Подключить остальные страницы

Шаг 29. Save

Шаг 30. Проверить изменения

Шаг 31. Зафиксировать изменение

Vercel увидит новый commit

Шаг 32. Открыть Vercel

Шаг 33. Проверить новую версию

Шаг 34. Test your website

Первая проверка пройдена

Шаг 35. Открыть сайт как пользователь

Сайт начал отправлять данные

Шаг 36. Reports → Realtime

Шаг 37. Active users

GA4 знает, что мы смотрели?

Первые события уже появились

Теперь проверим прошлую тему

telegram

social

ga4_lab

Шаг 38. Открыть размеченную ссылку

Ссылки под разные каналы

Разошлите и проверьте

telegram · vk

youtube

email

qr

От ссылки до аналитики

Почему источник перехода не виден сразу

Шаг 27. Добавить код в `<head>`

Но `page_view` нам недостаточно