Отправная точка · незакрытый вопрос занятия 1

Поле ep.source осталось незаполненным — с ним и работаем

На занятии 1 мы вскрыли учебный стенд в панели сетевых запросов и нашли событие generate_lead. Все его поля были на месте, кроме одного: ep.source приходил то со значением, то со строкой (not set). Разница была не в событии, а в ссылке, по которой человек пришёл на страницу.

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

За клавиатуру · 7 минут · до всякой теории

Практика предшествует разбору: сначала результат, затем механизм

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

1. Отправить форму как есть и посмотреть на сохранённую заявку.
2. Дописать в адрес три пары и нажать Enter.
3. Пролистать до формы и сравнить строку под ней с тем, что было.
4. Отправить форму ещё раз — и сравнить две заявки.
5. Открыть Network → Payload и найти там те же три значения.

Адрес стенда выдаётся на занятии. Данные в форму — только тестовые: условное имя, учебный адрес почты, пометка «проверка». Те же шаги с кадром на каждый — в файле PRACTICE.md в папке занятия.

Шаг 1 из 5 · как есть

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

Имя и контакт на месте, заявка полноценная. А вот откуда пришёл человек — неизвестно: во всех трёх полях источника стоит (not set). Ровно это мы и видели на занятии 1, только там смотрели на поле ep.source в запросе, а здесь — на строку таблицы.

Шаг 2 из 5 · дописать в адрес

Добавить к адресу три пары и нажать Enter

Щёлкнуть по адресной строке, поставить курсор в самый конец адреса и дописать то, что ниже. Пробелов внутри быть не должно — набирайте одной строкой.

после ввода — Enter, страница перезагрузится

Обратите внимание: страница не изменилась. Тот же заголовок, та же кнопка, та же форма. Довесок в адресе на содержимое страницы не влияет.

Шаг 3 из 5 · сравнить строку под формой

Форма не изменилась — изменились значения скрытых полей

до того, как дописали

после того, как дописали

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

Шаг 4 из 5 · отправить ещё раз

Две заявки с одной и той же формы

первая отправка · без довеска

вторая отправка · с довеском

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

Шаг 5 из 5 · и что дальше

Те же три значения — в запросе события

ep.source = vkто самое поле, которое на занятии 1 приходило пустым

ep.medium = socialпоявилось оттуда же — из адреса

ep.campaign = sept_open_2026и третье значение доехало целиком

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

Результат получен — дальше разбираем, из чего он складывается. По порядку: из чего состоит ссылка, почему сайт не спотыкается о незнакомый довесок, что означают имена utm_source, utm_medium, utm_campaign и по каким правилам подбирают их значения, чтобы отчёт не рассыпался на четыре строки вместо одной.

Ответ

Потому что источник перехода — не свойство браузера, а надпись, которую делает человек

Браузер сообщает о себе многое сам: язык, разрешение экрана, версию. Эти данные у него есть, потому что они описывают его самого. А «человек пришёл из рассылки приёмной комиссии» — не свойство браузера, а факт о рекламной работе, который браузеру взять неоткуда.

Есть одна подсказка — заголовок Referer: адрес страницы, с которой перешли. Но он рассказывает мало и часто пропадает совсем. Переход из мобильного приложения, из мессенджера, из письма в почтовом клиенте или из документа не оставляет его вовсе — с точки зрения аналитики такой переход выглядит прямым заходом. Отсюда и раздутый канал direct, о котором шла речь в конце занятия 1.

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

Ответ · часть 1 · то, без чего ссылки не бывает

Три обязательные части: схема, узел, путь

Строение адреса описано не соглашением между сайтами, а стандартом — RFC 3986. Поэтому любой браузер, любой сервер и любая система аналитики разбирают адрес на одни и те же части одинаково.

Ответ · часть 2 · то, что дописывают

После вопросительного знака начинается строка запроса

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

Ответ · часть 3 · четыре правила синтаксиса

Что считается правильно составленной строкой запроса

Три из этих четырёх правил станут причинами конкретных ошибок в отчёте — разберём каждую отдельно.

Ответ

Можно: незнакомые пары сервер не читает

Сервер разбирает строку запроса и берёт из неё только те имена, которые ему нужны. Пара с незнакомым именем не вызывает ошибки — её никто не запрашивает, и она остаётся лежать в адресе. Проверить это можно прямо сейчас: допишите к адресу любой открытой страницы ?proverka=1 и перезагрузите — страница откроется как обычно.

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

Ответ · определение

UTM-метка — это пара «имя=значение» в строке запроса, описывающая источник перехода

Что это. Обычная пара в строке запроса, у которой имя начинается с utm_, а значение задаёт человек, публикующий ссылку. Никакого особого статуса у неё в адресе нет: для браузера это такой же довесок, как page=2.

Как работает. Человек переходит по размеченной ссылке. Адрес вместе с меткой попадает в адресную строку, оттуда — в поле dl запроса события. Код счётчика читает адрес, вырезает значения меток и кладёт их в отдельные поля события. Дальше система аналитики собирает из этих полей строки отчёта по источникам.

Зачем нужна. Чтобы у каждой заявки был известен источник и каналы можно было сравнивать между собой: где переходов много, а заявок мало; какая рассылка сработала, а какая нет. Без метки такие переходы сливаются в direct и (not set), и сравнивать становится нечего.

Ответ · продолжение · откуда взялось название

Приставка utm_ досталась от системы Urchin

UTM расшифровывается как Urchin Tracking Module — «модуль отслеживания Urchin». Urchin — название системы веб-аналитики компании Urchin Software Corporation, появившейся в 1996 году. Формат меток придумали там, задолго до Google.

В апреле 2005 года Google купил Urchin, а в ноябре того же года запустил на его основе Google Analytics. Метки перешли в новую систему как есть — вместе с приставкой utm_ в именах. Размеченных ссылок к тому моменту было уже слишком много, чтобы менять формат: переименование сломало бы разметку на всех сайтах разом.

Сама система Urchin закрыта в 2012 году, а её приставка осталась в адресах и работает до сих пор. Метки читает не только Google Analytics: utm_* понимают Яндекс.Метрика, почтовые рассылки, рекламные кабинеты и системы управления заявками. Формат стал общим не по стандарту, а потому что его поддержали все.

Практический вывод: имена меток менять нельзя. utm_source — это имя, на которое настроены чужие системы, а не слово, которое можно сократить по своему вкусу.

Ответ · продолжение · сколько их всего

Меток пять: три обязательные и две для рекламы

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

Мы работаем с тремя. Две последние разберём позже, когда дойдём до платных объявлений.

Ответ · метка 1 из 3

utm_source — название площадки, на которой стоит ссылка

Отвечает на вопрос «где человек увидел ссылку». Не «как» и не «зачем» — именно место. Значение придумывает тот, кто размечает; закрытого списка здесь нет, и в этом главная опасность: два человека назовут одну площадку по-разному, и в отчёте появятся две строки.

Ответ · метка 2 из 3

utm_medium — не место, а способ доставки ссылки

Разница видна, когда одна и та же площадка работает двумя способами. Сообщество во «ВКонтакте» может дать переход из обычного поста и из платного объявления. Площадка одна, utm_source=vk в обоих случаях — а вести себя эти переходы будут по-разному, и считать их вместе нельзя: за одни заплатили, за другие нет.

Проверка себя: utm_source отвечает «где увидели», utm_medium — «каким способом ссылка туда попала».

Ответ · продолжение · почему здесь нельзя выдумывать значения

Шесть значений utm_medium, по которым определяется канал

В отличие от utm_source, у utm_medium есть фактически сложившийся список. Google Analytics разбирает заявки по каналам по значению именно этой метки, и узнаёт он ограниченный набор строк:

Для офлайновых источников подходящего значения в списке нет. Мы будем писать qr для афиш — с пониманием, что такие переходы окажутся в Unassigned. Это осознанное решение справочника, а не ошибка: важнее отличать афишу от рассылки, чем попасть в готовую категорию.

Ответ · метка 3 из 3

utm_campaign — повод, по которому ссылку опубликовали

Первые две метки описывают дорогу, третья — задачу. Колледж каждый год зовёт на день открытых дверей и каждый год пишет об этом во «ВКонтакте». Без третьей метки переходы сентября 2026 года и марта 2026 года окажутся в одной строке отчёта, и сравнить два набора будет нечем.

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

Ответ · продолжение · линейка целиком

Размеченная ссылка целиком

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

Ответ · пять шагов, ни одного лишнего

Маршрут одного значения: от ссылки до строки отчёта

Шаги 3 и 4 — разные и независимые. Первый ведёт значение в аналитику, второй — в таблицу заявок. Настроить можно один и забыть про другой: тогда в аналитике источник будет, а в заявке останется (not set). Это ровно та точка разрыва «форма → таблица», которую мы отмечали на занятии 1.

Ответ · шаг 3 крупным планом · код учебного стенда

Код, читающий метки, и поля запроса, которые он формирует

// читаем метки из адресной строки
const q = new URLSearchParams(location.search);
const c = {
  source:   q.get('utm_source')   || '(not set)',
  medium:   q.get('utm_medium')   || '(not set)',
  campaign: q.get('utm_campaign') || '(not set)'
};

gtag('event', 'generate_lead', {
  form_id: 'lead_main',
  source:   c.source,
  medium:   c.medium,
  campaign: c.campaign
});

en=generate_lead
ep.form_id=lead_main
ep.source=vk
ep.medium=social
ep.campaign=sept_open_2026

Вся «магия разметки» — это URLSearchParams и три вызова get. Метода get возвращает значение по имени или null, если такой пары в адресе нет; тогда срабатывает || и подставляется строка (not set). Именно она и приходила в отчёт на прошлом занятии.

Ответ · свод разметки · одна кампания, четыре человека

Четверо разметили один день открытых дверей — каждый по-своему

Переходов было 40, площадка одна, повод один. В отчёте — четыре строки, и самая большая из них — 12. Руководитель, который посмотрит на такой отчёт, увидит четыре слабых источника вместо одного сильного.

Ответ · тот же свод после единого справочника

Те же сорок переходов, записанные одинаково

Данные те же самые: ни одного лишнего перехода не появилось и ни один не потерялся. Изменилось только написание — и вместо четырёх строк по 8–12 получилась одна на 40. Справочник меток не улучшает результат кампании, он делает результат видимым.

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

Ответ · ошибка 1 · регистр

Потому что значения сравниваются посимвольно, а не по смыслу

Собирая отчёт, система группирует события по значению поля. Группировка — это сравнение строк: код проверяет, совпадает ли первый символ с первым, второй со вторым. Строки VK и vk различаются в обоих символах, поэтому попадают в разные группы. Никакого «понимания», что это одна и та же социальная сеть, здесь нет и не предполагается.

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

Ответ · ошибка 2 · пробел

Пробел в адресе недопустим и заменяется процентным кодом

По стандарту RFC 3986 в адресе допустим ограниченный набор символов, и пробела среди них нет. Когда пробел всё-таки попадает в значение, браузер заменяет его на процентный код — знак процента и шестнадцатеричный номер символа. Пробел получает номер 20, отсюда %20.

Поэтому пробел в значениях не ставят вовсе. Слова разделяют символом подчёркивания: sept_open_2026. Подчёркивание допустимо в адресе как есть, ни во что не превращается и читается человеком без усилий.

Ответ · ошибка 3 · кириллица · настоящий кадр со стенда

Ссылка, размеченная кириллицей и пробелами

по справочнику

кириллица и пробелы

Оба адреса рабочие: обе страницы откроются. Разница проявится в отчёте — посмотрим, чем именно это оборачивается.

Ответ · та же испорченная ссылка · вкладка Payload

Кириллица в поле dl занимает восемь строк вместо одной

dlАдрес разбух: каждая русская буква записана тремя символами — %D0%B5, %D0%BA и так далее. Прочитать значение метки в этом виде нельзя

ep.source = VK РекламаВкладка Payload показывает значения раскодированными, поэтому здесь видно исходную строку — с прописными буквами и пробелом внутри

ep.medium = SocialНе social. В отчёте по каналам это значение не совпадёт с ожидаемым и уйдёт в Unassigned

ep.campaign = Сентябрь День открытых дверейСтрока с двумя пробелами и кириллицей. Совпасть с такой же строкой из чужой ссылки она может только при точном посимвольном повторе

Событие ушло, данные не потерялись — и в этом ловушка. Ошибка разметки ничего не ломает заметным образом: она проявится через месяц, когда отчёт по каналам придётся объяснять.

Ответ · шесть ошибок · слева симптом, справа причина в ссылке

Что видно в отчёте и что искать в ссылке

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

Ответ · продолжение · седьмая ошибка, которую не видно нигде

Метка после знака # в разбор не попадает

У адреса есть ещё одна часть, о которой мы не говорили, — фрагмент: всё, что стоит после знака #. Он придуман для перехода к разделу внутри страницы и, в отличие от строки запроса, не отправляется на сервер вовсе: браузер обрабатывает его сам.

Ошибка редкая, но неприятная: ссылка выглядит размеченной, открывается нормально, а источник у всех переходов остаётся (not set). Появляется она обычно при копировании ссылки из адресной строки страницы, у которой уже был якорь: метку дописывают в конец, за решётку, не заметив её.

Правило простое: метки всегда идут после ? и до #. Если в адресе есть якорь, довесок вставляют перед ним.

Ответ · справочник меток · часть 1 · правила написания

Шесть правил, которые закрывают шесть ошибок

Правила 1–3 относятся к тому, как записаны символы, правила 4–5 — к тому, какие слова выбраны, правило 6 — к порядку работы. Ни одно из них не следует из технического ограничения: адрес с прописной буквой и кириллицей вполне рабочий. Это соглашение, и держится оно только на том, что его соблюдают все.

Ответ · справочник меток · часть 2 · таблица каналов

Справочник группы: четыре канала одной кампании

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

Эту таблицу вы заполните на практике под свои каналы и сдадите как результат занятия.

Ответ · две проверки, обе обязательные

Прочитать адрес и убедиться, что счётчик метку прочитал

Проверять нужно оба места. Метка в адресе есть, а ep.source пуст — счётчик её не читает: либо опечатка в имени, либо метка стоит после решётки.

Ответ · продолжение · границы этой проверки

Три случая, которые проверка на своём компьютере не поймает

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

Ответ

Нет: форма отправляет только содержимое своих полей

Метка живёт в адресе страницы. Форма отправляет содержимое своих полей: имя, контакт, комментарий. Адрес страницы в форму не входит — это два разных набора данных, и сами по себе они не соединяются. Поэтому заявка уезжает в таблицу без источника, даже когда в аналитике он определён правильно.

Соединяют их скрытыми полями. Скрытое поле — это поле формы, которое не показывается посетителю и не заполняется им: значение туда кладёт код страницы. Для человека формы три поля, для сервера — шесть.

Заявка без источника при этом не бракованная: менеджер отработает её точно так же. Потеряна не заявка, а возможность оценить канал — через месяц по такой таблице нельзя будет сказать, что дало результат, а что нет.

<!-- в вёрстке формы -->
<input type="hidden" name="utm_source">
<input type="hidden" name="utm_medium">
<input type="hidden" name="utm_campaign">

// при загрузке страницы
document.getElementById('utm_source')
        .value = c.source;
document.getElementById('utm_medium')
        .value = c.medium;
document.getElementById('utm_campaign')
        .value = c.campaign;

Ответ · продолжение · последний участок, где источник теряется

Переход вглубь сайта: метка исчезает из адреса

Переход внутри сайта делается по обычной ссылке из меню — без довеска. На второй странице location.search уже пуст, и код, читающий метки оттуда, вернёт (not set). Заявка с внутренней страницы потеряет источник, хотя человек пришёл по размеченной ссылке.

Решение — запомнить значение при первом заходе. На стенде это одна строка: метки складываются в sessionStorage — хранилище браузера, которое живёт до закрытия вкладки. Если в адресе меток нет, значения берутся оттуда. Такой способ называют первым касанием: за источник заявки считается та ссылка, по которой человек попал на сайт.

Демонстрация · преподаватель · 7 минут

Проводим одно значение от ссылки до строки заявки

1. Открыть стенд без метки → F12 → Network, фильтр collect. Отправить форму → в заявке три (not set).
2. Открыть стенд по ссылке ?utm_source=vk&utm_medium=social&utm_campaign=sept_open_2026 → показать адресную строку.
3. Показать блок скрытых полей под формой: значения уже подставлены, до отправки.
4. Отправить форму → выбрать en=generate_lead → Payload → ep.source, ep.medium, ep.campaign.
5. Показать сохранённую заявку: те же три значения дошли до строки таблицы.
6. Открыть ссылку с меткой ?utm_source=VK Реклама → сравнить dl и ep.source с прошлым запросом.
7. Перейти по меню на «Программу курса» → меток в адресе нет, значения в скрытых полях прежние.

Практическая работа · 28 минут · индивидуально или в паре

Собрать четыре ссылки и проследить источник до строки заявки

1. Заполнить справочник (8 мин). Четыре канала своей учебной кампании: для каждого — utm_source, utm_medium, utm_campaign. Значения по шести правилам, utm_medium из списка.
2. Собрать ссылки (7 мин). Четыре адреса стенда с довесками из своей таблицы. Записать каждый в файл целиком, а не «как в третьей строке».
3. Открыть и проверить (8 мин). По каждой ссылке: адресная строка → Payload → три поля ep.*. Отправить форму → снять кадр сохранённой заявки.
4. Сломать намеренно (5 мин). Взять пятую ссылку и испортить одним способом из реестра. Открыть, зафиксировать, чем именно отличается результат, и как это выглядело бы в отчёте.

Пошаговая инструкция с кадрами, шаблоном отчёта и таблицей «что пошло не так» — файл PRACTICE.md. Данные в форму только тестовые, настоящие персональные не вводить.

Контроль · все шесть ведут на одну страницу и все шесть открываются

Одна кампания, шесть каналов

1. https://kolledzh.ru/kursy?utm_source=vk&utm_medium=social&utm_campaign=sept_open_2026
2. https://kolledzh.ru/kursy?utm_source=priem_email&utm_medium=email&utm_campaign=sept_open_2026
3. https://kolledzh.ru/kursy?utm_source=VK&utm_medium=Social&utm_campaign=Сентябрь 2026
4. https://kolledzh.ru/kursy?utm_source=afisha_qr&utm_medium=qr&utm_campaign=sept_open_2026
5. https://kolledzh.ru/kursy?utm_source=tg&utm_medium=social?utm_campaign=sept_open_2026
6. https://kolledzh.ru/kursy?utm_source=partner_site&utm_medium=referral&utm_campaign=sept_open_2026

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

Контроль · разбор

Неправильно размечены ссылки 3 и 5

Остальные четыре собраны по справочнику. Строка 4 с utm_medium=qr — не ошибка: значение согласовано, и мы заранее знаем, что готовый отчёт по каналам отнесёт эти переходы в Unassigned.

Ошибка в ссылке № 5 не видна в отчёте никак: там просто не будет строки по кампании. Именно поэтому ссылку проверяют до публикации, а не отчёт после.

Приёмка · к концу пары

Результат занятия: что сдаётся

• Справочник меток — четыре канала, для каждого три значения. Все значения проходят по шести правилам.
• Таблица ссылок — четыре собранных адреса целиком, рядом с каждым название канала.
• Четыре тестовые заявки — по одной на канал. У каждой в кадре видны utm_source, utm_medium, utm_campaign.
• Один разбор поломки — что испортили в пятой ссылке, что изменилось в ep.* и как это выглядело бы в отчёте.
• Контрольный вопрос — показать в Payload собственное событие и назвать, из какой части адреса взялось значение ep.source.

Домашнее задание · два, с разными сроками

Максим Николаевич не хочет задавать домашнее задание. Но очень хочет

Порядок сдачи прежний: запрос на слияние в собственную ветку main, бланки — кнопка печати в PDF. Про ИИ: разметку, проверку в Payload и собственный замер делаете сами; модель допускается для формулировок и оформления. Я сам так делаю всегда, поэтому и вам запрещать не буду.

в диалоге печати снять галочку «Колонтитулы», иначе браузер допишет дату и адрес страницы

Итог занятия · и что дальше

Источник перехода доходит от ссылки до строки заявки

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

На занятии 3 мы возьмём собранные вами заявки и займёмся тем, что происходит с ними дальше: как из потока заявок собирается отчёт, почему число в нём зависит от выбранного периода и что делать с теми переходами, у которых источник всё-таки остался неизвестным.