Что сделаем сегодня

В GA4 каждое действие посетителя записывается как событие. Имя события отвечает на вопрос «что произошло».

page_view

открыли страницу

scroll

достигли глубины 90%

click

перешли на другой домен

file_download

нажали ссылку на файл

generate_lead

зафиксировали заявку

cta_click

нажали нашу CTA

Имя сообщает, что произошло. Параметры уточняют подробности: какая ссылка, какой файл, какая кнопка.

Automatically collected

собираются базовым тегом

Enhanced Measurement

поддерживаемые взаимодействия при включённых настройках

Recommended Events

мы реализуем отправку с именем и параметрами Google

Custom Events

мы определяем собственное имя и смысл

Название generate_lead рекомендовано Google, но установка тега сама по себе не добавляет нашу бизнес-логику.

Перед изменением кода проверьте, существует ли нужное измерение.

1. Собирается автоматически?Да → проверяем и используем существующее событие.
2. Есть рекомендуемое имя?Да → реализуем отправку с именем Google.
3. Нужен свой смысл?Создаём Custom Event и описываем его параметры.

Откройте учебный ресурс GA4 и перейдите к его веб-потоку.

1. 01AdminАдминистратор
2. 02Data streamsПотоки данных
3. 03Web streamваш Vercel URL

Найдите блок Enhanced measurement / Улучшенная статистика. Сверьте Measurement ID с тегом на сайте.

Включённая Enhanced measurement добавляет измерения поддерживаемых действий: прокрутки, внешних ссылок, файлов и форм.

Переключатель On / Включено только разрешает сбор. Приходят ли события, видно в отчётах.

Дальше выполним действие на сайте и найдём событие в Realtime.

Нажмите значок настройки рядом с Enhanced measurement.

Page views

просмотры и изменения истории

Scrolls

глубокая прокрутка

Outbound clicks

внешние переходы

Site search

поиск на сайте

Video engagement

поддерживаемое встроенное видео

File downloads

ссылки на файлы

Form interactions

взаимодействия с формой

При загрузке HTML-страницы Google Tag отправляет page_view.

1. 01Homepage_view
2. 02Aboutpage_view
3. 03Contactspage_view

В этом проекте у каждой страницы свой HTML-файл. Дополнительный ручной page_view при загрузке не нужен.

Стандартный scroll срабатывает один раз за просмотр страницы — при достижении 90% её вертикальной глубины.

Откройте длинную страницу About на своём Production URL и прокрутите почти до конца.

В Reports → Realtime найдите scroll в карточке Event count by Event name.

Автоматический click в Enhanced measurement относится к outbound clicks — переходам на другой домен.

/about.html

внутренняя ссылка, не outbound

https://github.com/

внешняя ссылка, возможен click

button#program-cta

кнопка сама по себе не создаёт автоматический click

Код студент правит у себя на компьютере, а сайт работает на сервере Vercel. Между ними GitHub: он хранит историю проекта и сообщает Vercel о новой версии.

1. 01GitHubрепозиторий проекта
2. 02VS Codeправка у себя
3. 03Commitсохранённая версия
4. 04Pushотправка в GitHub
5. 05Vercelавтоматический деплой
6. 06Сайтновая версия открыта

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

Откройте свой репозиторий проекта на GitHub. Нажмите зелёную кнопку Code, выберите вкладку HTTPS и скопируйте адрес.

Адрес выглядит так: https://github.com/ВАШ-ЛОГИН/ВАШ-ПРОЕКТ.git.

В VS Code откройте палитру команд (Cmd+Shift+P или Ctrl+Shift+P), введите Git: Clone и вставьте скопированный адрес. Выберите папку, куда положить проект.

То же самое из терминала:

git clone https://github.com/ВАШ-ЛОГИН/ВАШ-ПРОЕКТ.git

Клонировать нужно один раз. Дальше вы работаете в этой папке.

VS Code откроет папку проекта. В Explorer слева видны файлы сайта: страницы, папка js, стили.

Откройте файл, который нужно изменить. На этом занятии первым будет index.html.

Внесите изменение и сохраните файл: Cmd+S или Ctrl+S.

Пока файл не сохранён, на вкладке вместо крестика стоит точка, а справа от имени файла в Explorer появляется буква M — modified, изменён.

Несохранённый файл не попадёт ни в commit, ни на сайт.

Откройте Source Control — третий значок на левой панели. Там перечислены файлы, изменённые с последнего коммита.

Нажмите на файл: VS Code покажет сравнение. Слева прежняя версия, справа новая; добавленные строки подсвечены зелёным.

Проверьте, что в списке только те файлы, которые вы правили.

Напишите сообщение коммита — короткую фразу о сути изменения, например Add external link and PDF guide. Нажмите Commit.

Commit сохраняет версию в истории проекта у вас на компьютере. На GitHub и на сайте изменений пока нет.

Нажмите Sync Changes (или Push). VS Code отправит коммит в GitHub.

После отправки счётчик у кнопки обнулится, а история проекта на GitHub пополнится.

Обновите страницу репозитория на GitHub. Ваш коммит виден в списке: его сообщение, автор и время.

Это первая проверка: код действительно ушёл с компьютера в репозиторий.

Откройте свой проект в Vercel и перейдите на вкладку Deployments.

Vercel увидел новый коммит и начал сборку. Сначала статус Building, затем Ready; у рабочей версии дополнительно стоит метка Production.

1. 01Commitверсия в GitHub
2. 02BuildingVercel собирает
3. 03Readyсборка готова
4. 04Productionадрес сайта обновлён

Откройте свой Production URL и проверьте изменение на живой странице.

Только теперь цикл закончен: код у вас, версия в GitHub, деплой Ready, изменение видно посетителю. Дальше в теме этот путь повторяется после каждой правки.

Найдите внешнюю ссылку в index.html. Если её нет, добавьте:

<a href="https://github.com/" target="_blank" rel="noopener noreferrer">
  Открыть GitHub
</a>

Сохраните файл, сделайте Commit и Push. Дождитесь Production Deployment со статусом Ready.

На опубликованной странице нажмите Открыть GitHub. Затем вернитесь в GA4 Realtime и найдите click.

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

Если события нет, проверьте Outbound clicks, свежий деплой и блокировку аналитики в браузере.

Параметры внешнего перехода описывают ссылку, по которой нажал пользователь.

Также могут приходить link_id и link_classes. Значения зависят от HTML ссылки.

file_download фиксирует клик по ссылке на файл поддерживаемого расширения: например PDF, DOCX, XLSX, ZIP, CSV, MP3 или MP4.

1. 01Ссылка на PDFнажатие
2. 02file_downloadсигнал Google Tag

Создайте папку assets/ и добавьте настоящий PDF. Готовый учебный файл есть в материалах этой темы.

ga4-analytics-lab/
├── assets/analytics-guide.pdf
├── index.html
├── about.html
└── contacts.html

Откройте PDF отдельно и убедитесь, что он читается. Не переименовывайте текстовый файл в .pdf.

Готовый файл: analytics-guide.pdf — положите его в папку assets/.

В index.html добавьте ссылку:

<a href="assets/analytics-guide.pdf" download>
  Скачать материал
</a>

1. 01SaveHTML и PDF
2. 02Commitпроверить оба файла
3. 03Pushотправить в GitHub
4. 04Vercelдождаться Ready

Откройте Production URL после публикации. Нажмите Скачать материал и проверьте, что файл действительно доступен.

Затем найдите file_download в Realtime.

Проверьте оба результата: PDF открывается, а file_download появляется в Realtime.

По параметрам видно, какой файл скачали и по какой ссылке.

Имя события одинаково для всех файлов. Различить их можно только по параметрам.

При включённых Form interactions тег может автоматически собирать:

form_start

первое взаимодействие с формой в сессии

form_submit

сигнал отправки формы

Сработает ли автоматическое измерение, зависит от того, как сделана форма. Получение form_submit не подтверждает, что сервер принял заявку.

Вернитесь в настройки веб-потока и откройте Enhanced measurement.

Проверьте Form interactions / Взаимодействия с формами. Сохраните изменения, если включали измерение.

В шаблоне темы 5 форма имела id="contact-form". Для нового кода замените его на lead-form и сохраните блок #form-status.

<form id="lead-form">
  <label>Имя <input name="name" required></label>
  <label>Email <input name="email" type="email" required></label>
  <button type="submit">Отправить заявку</button>
  <p id="form-status" role="status"></p>
</form>

ID формы в HTML должен совпадать с селектором в JavaScript.

Мы измеряем действие, а не содержимое персональных полей.

Не передавайте в GA4 имя, email, телефон, пароль — ни в параметрах события, ни в URL, ни в названии страницы.

Откройте Contacts, нажмите на поле и начните вводить учебные данные.

Проверьте form_start в Realtime. Для повторной проверки первого взаимодействия используйте новую сессию.

Если сигнала нет, проверьте настройку Form interactions и реализацию формы.

Заполните обязательные поля и нажмите Отправить заявку. Проверьте form_submit в Realtime.

Пустая или невалидная форма может не вызвать submit: браузер сначала проверяет поля. Если обработчик формы вызывает preventDefault(), автоматическое измерение может не засчитать отправку: на этом сайте так и происходит.

Зафиксируйте фактический результат, а не ожидаемый. Отсутствие form_submit — тоже результат проверки.

Откройте js/script.js. В теме 5 там уже был обработчик #contact-form.

Замените прежний блок обработки формы новым кодом; не дописывайте второй обработчик рядом.

Функция gtag() объявлена в установленном Google Tag. Проверьте, что он сохранён в head всех трёх страниц.

Обработчик целиком заменяет прежний блок формы из темы 5. Разберём его построчно: нажмите строку в коде.

Сохраните contacts.html и js/script.js. В Source Control проверьте переименование формы и замену старого обработчика.

Создайте commit Add generate_lead GA4 event и выполните Sync Changes / Push.

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

Найдите деплой из коммита Add generate_lead GA4 event, проверьте Ready и Production.

1. 01Commitнужная версия
2. 02Readyпубликация завершена
3. 03Production URLпроверяем сайт

Откройте Contacts на опубликованном сайте, заполните учебные поля и отправьте форму один раз.

На странице появится сообщение об учебной проверке. Затем найдите в Realtime вызов с lead_source: 'contact_form'.

В Reports → Realtime найдите generate_lead и сопоставьте время с отправкой формы.

Если события нет: проверьте Production-версию, ID формы, консоль, Google Tag и разрешение на аналитику.

В index.html добавьте кнопку с уникальным ID:

<button id="program-cta" type="button">
  Посмотреть программу
</button>

На странице оставьте один элемент с этим ID. В рабочем примере кнопка раскрывает описание программы.

Кнопка уже есть в разметке. Теперь обработчик: он показывает описание программы и отправляет собственное событие. Нажмите строку, чтобы увидеть её роль.

Правило курса: английские имена в lowercase_snake_case, отражающие смысл действия.

cta_click

понятное постоянное имя

course_card_open

понятное действие

button-click!!!

недопустимые символы

event_new_final

смысл неизвестен

Имена чувствительны к регистру. Начинайте с буквы, используйте буквы, цифры и подчёркивание; не берите зарезервированные имена и префиксы.

Сохраните index.html и js/script.js. Создайте commit Add CTA analytics event и выполните Push.

В Vercel проверьте нужный commit, Ready и Production.

Нажмите Посмотреть программу один раз на Production-сайте.

Найдите cta_click в Realtime. Для проверки количества и параметров затем перейдём к DebugView.

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

Мы проверяем порядок действий, состав параметров и дубли при одном нажатии.

1. 01Одно действиена учебном сайте
2. 02Одно событиена debug-устройстве
3. 03Параметрысверяем значения

Tag Assistant включает режим отладки для одного сайта: события с него начинают приходить в DebugView вашего ресурса.

Откройте tagassistant.google.com. На странице виден список доменов и кнопка Добавить домен. Если сайт уже подключали, он будет в списке активных доменов.

Нажмите Добавить домен. В окне вставьте свой Production URL и нажмите Подключить.

Галочка «Включить сигнал отладки в URL» добавляет к адресу параметр gtm_debug. По нему тег понимает, что страницу нужно отлаживать.

Tag Assistant открывает ваш сайт в новой вкладке. В адресе появился gtm_debug, а внизу справа — плашка Tag Assistant подключен.

Дальше работайте именно в этой вкладке: события уходят в DebugView только отсюда. Переход по ссылкам внутри вкладки отладку не сбрасывает, а открытие сайта в другой вкладке — сбрасывает.

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

Выберите событие в списке: в «Уровне данных» видно его имя и объект параметров — те самые button_name и page_section, которые вы задали в коде.

Вернитесь в GA4 и откройте Администратор → Просмотр данных → DebugView.

Экран DebugView показывает события только тех устройств, где включена отладка, поэтому вкладку Tag Assistant закрывать нельзя.

Вверху экрана DebugView выберите своё устройство в списке Устройство для отладки. Пока подключение через Tag Assistant живо, устройство в списке есть.

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

Экран разделён на три части.

Минуты

слева: сколько событий пришло за каждую минуту

Секунды

в центре: лента событий за выбранную минуту, сверху — самые свежие

Верхние события

справа: сводка за 30 минут

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

Проверим связь действия и записи. В отлаживаемой вкладке нажмите CTA один раз и переключитесь на DebugView.

Через несколько секунд в ленте секунд появится cta_click. Сопоставьте время нажатия и время события: так вы убеждаетесь, что в GA4 попало именно ваше действие, а не чужой визит.

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

1. 01page_view
2. 02scroll
3. 03cta_click
4. 04page_view
5. 05form_start
6. 06form_submit
7. 07generate_lead

Отправьте учебную форму один раз. В DebugView выберите generate_lead.

Сверьте время, имя и число срабатываний. Если для одной отправки пришло два события, найдите повторный обработчик или вторую настройку отправки.

В параметрах generate_lead найдите:

Если значения нет, проверьте объект третьего аргумента gtag(), свежий деплой и выбранное событие. Custom Dimension не нужна для просмотра параметра в DebugView.

Нажмите CTA один раз и откройте её событие в DebugView.

Сверьте оба значения. Затем повторите нажатие и проверьте, что появляется ещё одно событие, а не два.

В DebugView вы видели у cta_click параметр button_name = program. И DebugView, и Realtime отвечают на один вопрос: дошло ли событие прямо сейчас. Это поток последних минут с одного устройства.

Посчитать по нему, сколько нажатий собрала каждая кнопка за неделю, нельзя. За период считают отчёты, а в них cta_click — одна строка с общим числом: параметры в обработанные данные не попадают, пока их не зарегистрировали.

Что в отчёте сейчас

cta_click — 140 нажатий, все кнопки вместе

Что нужно получить

program — 90, pricing — 50

Может показаться, что параметр лишний: имя cta_click и так про кнопку. Пока кнопка на сайте одна — так и есть.

Когда кнопок станет три — в шапке, в карточке программы и в футере — появится соблазн завести cta_click_header, cta_click_footer и cta_click_pricing. Так делать не стоит: число разных имён событий в ресурсе ограничено, отчёт по каждому имени будет отдельным, и сравнить кнопки между собой в одной таблице не выйдет.

Имя события

что за действие: нажали кнопку

Параметр

какую именно кнопку и где она стоит

Поэтому приём один: общее имя события и параметр, который различает элементы. Тогда новая кнопка — это новое значение параметра, а не новое событие и не новая настройка в GA4.

Перейдите Admin → Data display → Custom definitions (Администратор → Просмотр данных → Специальные определения).

Откройте Custom dimensions → Create custom dimension. Сначала проверьте, не зарегистрирован ли уже нужный параметр: повторная запись разреза не добавит, а место займёт.

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

Заполните форму и нажмите Save:

Dimension name

Button name

Scope

Event

Description

CTA button identifier

Event parameter

button_name

Имя параметра должно точно совпадать с ключом в JavaScript, включая регистр: button_name в коде и button_name здесь.

После сохранения в отчётах появится измерение Button name, и события cta_click можно будет разложить по кнопкам.

Создайте второй разрез:

Dimension name

Page section

Scope

Event

Description

Page section of CTA

Event parameter

page_section

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

Двух разрезов хватает, чтобы ответить на рабочий вопрос: какая кнопка и в каком блоке страницы срабатывает чаще. Когда кнопок станет больше, код менять не придётся — значения параметров просто добавятся к уже настроенным разрезам.

Отдельных событий от регистрации не появится: cta_click остаётся одним событием. button_name и page_section становятся измерениями — колонками, по которым его можно разложить.

Отчёты → Взаимодействие → События

нажмите строку cta_click: под графиком появятся карточки по зарегистрированным параметрам

Исследования (Explore)

добавьте измерение Button name и метрику «Количество событий»

Дальше эти разрезы используются в теме про отчёты, а в теме про Google Tag Manager события переедут в контейнер — разрезы останутся прежними.

Важная особенность GA4: разные экраны обновляются с разной скоростью. На занятии вы увидите не всё, и это не ошибка настройки.

Сразу, за секунды

DebugView и Realtime: событие, его параметры, число срабатываний

Через сутки

раздел «События», карточки разрезов, отметка Key Event, отчёты за период

Поэтому дальше в теме мы разбираем экраны отчётов на готовых кадрах: вы увидите, где их искать и что там будет. На своём ресурсе к этим шагам возвращаются на следующем занятии — своя часть работы вынесена в домашнее задание.

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

Справа вверху проверьте диапазон дат: по умолчанию стоят последние 28 дней. Если события отправлялись вчера, а диапазон заканчивается позавчера, таблица будет пустой.

В таблице перечислены имена событий и число срабатываний за период. Параметров здесь нет — ни button_name, ни lead_source.

Нажмите на имя события, разрезы которого хотите посмотреть. Для нашей кнопки это cta_click.

Откроется страница события. Прокрутите её вниз: под графиком и картой идут карточки — по одной на каждый зарегистрированный параметр.

Карточка названа так, как вы назвали измерение при создании: Button name, Page section. Внутри — значения параметра и число событий с каждым значением.

В карточке рядом со значением program стоит строка (not set) — и это не ошибка.

(not set) означает, что у события значения параметра нет. Обычно причин две: событие пришло до того, как разрез зарегистрировали, или код отправил событие без этого параметра.

program — 2

нажатия после регистрации разреза

(not set) — 3

нажатия до неё: значение не сохранилось

Со временем доля (not set) перестаёт расти: новые события приходят уже с параметром. Если она растёт и дальше — ищите место в коде, где событие отправляется без параметра.

Key Event — событие, помеченное в ресурсе как важный результат. По ключевым событиям GA4 считает результативность: они выносятся в стандартные отчёты и позволяют сравнивать каналы не по числу визитов, а по числу заявок.

Без пометки generate_lead остаётся одной из десятка строк в списке событий, и отчёт «Источник трафика» покажет только посещения.

1. 01generate_leadсобытие приходит
2. 02Пометка в ресурсеразовая настройка
3. 03Отчётызаявки рядом с источниками

Пометка не создаёт новый обработчик и не отправляет событие сама.

Откройте Admin → Data display → Events (Администратор → Просмотр данных → События) и найдите generate_lead на вкладке Недавние события.

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

Если generate_lead ещё не отмечено, включите Mark as key event — звезду или переключатель в текущем интерфейсе.

Звезду можно поставить только у события, которое уже есть в списке. Пока generate_lead в нём не появился, отметить его нельзя — никакого обходного пути нет, нужно дождаться обработки.

Это разовая настройка ресурса: все следующие заявки учитываются как ключевые автоматически.

Когда отметка поставлена, отправьте форму ещё раз и проверьте новое generate_lead в Realtime, включая карточку ключевых событий.

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

Настройки разрезов и ключевых событий живут в ресурсе GA4, а не в коде сайта. В следующей теме события будут отправляться через Google Tag Manager, но то, что вы настроили сейчас, продолжит работать без изменений.

UTM описывает привлечение, а ключевое событие — результат визита.

?utm_source=telegram&utm_medium=social&utm_campaign=ga4_lab

1. 01Telegramссылка с UTM
2. 02Сайтвизит
3. 03generate_leadрезультат

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

nav_click

по каким пунктам меню ходят

utm_visit

метки кампании из адреса страницы

read_30s

посетитель остался на полминуты

form_error

браузер не пропустил отправку формы

Код каждой метрики дальше на своём экране. Добавляйте их по одному в конец js/script.js и после каждого проверяйте событие в DebugView: так сразу видно, какой кусок не сработал.

Вопрос: какими страницами вообще пользуются. Событие отправляется при нажатии на любой пункт меню.

document.querySelectorAll('nav a').forEach((link) => {
  link.addEventListener('click', () => {
    gtag('event', 'nav_click', {
      link_text: link.textContent.trim(),
      from_page: document.title
    });
  });
});

querySelectorAll возвращает все ссылки меню, forEach ставит обработчик на каждую. В параметрах — текст ссылки и заголовок страницы, откуда ушли.

Самое интересное здесь — utm_visit. GA4 сам определяет источник сессии при обработке данных, но в событии метки видны сразу и в том виде, в каком их поставили в ссылке.

Вопрос: читают страницу или закрывают сразу. Событие уходит через 30 секунд, если вкладка всё ещё открыта.

let readCounted = false;
setTimeout(() => {
  if (readCounted || document.hidden) return;
  readCounted = true;
  gtag('event', 'read_30s', {
    page_path: window.location.pathname
  });
}, 30000);

setTimeout откладывает вызов на 30 000 миллисекунд. Флаг readCounted и проверка document.hidden не дают отправить событие дважды и засчитать вкладку, которую свернули.

Вопрос: на каком поле посетители спотыкаются. Событие срабатывает, когда браузер не пропускает отправку формы.

const leadFormFields = document.querySelector('#lead-form');
if (leadFormFields) {
  leadFormFields.addEventListener('invalid', (event) => {
    gtag('event', 'form_error', {
      field_name: event.target.name || 'unknown',
      form_id: 'lead-form'
    });
  }, true);
}

Событие invalid возникает у самого поля, а не у формы, поэтому третьим аргументом стоит true: обработчик ловит событие на пути вниз. В параметр уходит имя поля, а не то, что в него ввели.

Опубликуйте изменения и проверьте метрики по очереди.

1. 01Менюнажать пункт
2. 02nav_clickв DebugView
3. 03Ссылка с UTMоткрыть
4. 04utm_visitс параметрами
5. 05Полминутына странице
6. 06read_30sодно событие
7. 07Пустая формаотправить
8. 08form_errorимя поля

Ссылка для проверки меток:

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

Сравним учебные числа: сколько пользователей пришло и сколько оставило заявку.

Сравнивайте источники за один период и по одному определению заявки.

По последовательности событий видно, что посетитель делал на сайте.

1. 01session_start
2. 02page_view
3. 03scroll
4. 04cta_click
5. 05page_view
6. 06form_start
7. 07form_submit
8. 08generate_lead

Состав и порядок проверяем на своём устройстве. Некоторые действия пользователь может пропустить.

Из событий можно собрать воронку с заданным порядком шагов.

Каждый следующий шаг считает пользователей, прошедших предыдущие этапы.

Теперь в учебном проекте настроены ручные generate_lead и cta_click, а автоматические измерения проверены на практике.

Сбор

Google Tag + Enhanced Measurement

Контекст

UTM + event parameters

Проверка

Realtime + DebugView

Анализ

Custom Dimensions + Key Event

Код в редакторе и событие в GA4 проверяют по отдельности.

Сохраните подтверждения того, что всё работает:

1. Enhanced Measurement
2. scroll в Realtime
3. click по внешней ссылке
4. file_download
5. form_start
6. form_submit: результат зафиксирован
7. Код generate_lead
8. generate_lead в Realtime
9. Код cta_click
10. Параметры cta_click в DebugView
11. lead_source в DebugView
12. Custom Dimension button_name
13. Разрез Button name в отчёте
14. generate_lead как Key Event
15. utm_visit с метками кампании

Для отчёта студента нужны 15 подтверждений из списка выше. Полный набор кадров пошаговой инструкции лежит в материалах темы.

Разберите на своём проекте:

Покажите код обработчика, событие в DebugView и настройку соответствующего разреза или ключевого события.

Как данные проходят путь от действия на сайте до отчёта:

1. 01USER ACTIONдействие
2. 02JS / Enhancedизмерение
3. 03GOOGLE TAGотправка
4. 04GA4приём

Realtime / DebugView

оперативная проверка

Custom Dimensions

разрезы для отчётов

Key Events

статус важного действия

Reports / Explore

анализ обработанных данных

Чтобы измерить CTA, мы изменили JavaScript и опубликовали новую версию сайта.

programCta.addEventListener('click', () => {
  gtag('event', 'cta_click', {
    button_name: 'program', page_section: 'hero'
  });
});

Каждый новый обработчик — это снова правка кода, commit, push и ожидание деплоя.