UTM-генератор в Ное: задание, которое не ломает старые параметры ссылки

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

У нас есть прототип такой формы: поле для исходной ссылки, три обязательные метки и два необязательных уточнения. Старые параметры и якорь страницы он не трогает. Похожую форму можно попросить у билдера Нои одним заданием.

Что должен делать генератор UTM?

Генератор UTM-меток принимает адрес страницы и значения источника, канала и кампании и добавляет их к адресу как параметры. Чужие параметры и часть после # он сохраняет, прежние значения UTM заменяет и одинаковых меток не плодит.

Что значат utm_source, utm_medium, utm_campaign, utm_content и utm_term, объясняет справка Яндекс Метрики. В нашей форме первые три поля обязательны, чтобы команда не забыла назвать источник, способ размещения и кампанию. Это правило формы: ссылка с неполным набором меток тоже откроется.

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

Пример готовой ссылки

Возьмём вымышленную страницу https://example.org/signup?ref=summer#form. В ней уже есть параметр ref и якорь form. Добавим источник telegram, канал messenger, кампанию masterclass_nov и вариант post_1.

Получится такой адрес:

https://example.org/signup?ref=summer&utm_source=telegram&utm_medium=messenger&utm_campaign=masterclass_nov&utm_content=post_1#form

Параметр ref=summer остался перед новыми метками, а #form по-прежнему в конце ссылки. Если вставить вместо исходного адреса ссылку со старым utm_source, генератор заменит значение источника. Повторный запуск с теми же полями даст тот же результат.

Снимки сделаны с прототипа такой формы, а не с экрана Нои. Они показывают, какого результата просить у билдера и как его оценить.

Полное задание для Нои

Заведите для пробы отдельный проект: первая попытка не должна менять работающий сайт. Базы контактов, регистрации посетителей и платных внешних сервисов форме не нужно.

Создай небольшое веб-приложение «Генератор UTM-ссылок» для маркетолога. Оно работает в браузере, в том числе на телефоне. Это веб-приложение, без установки из магазина приложений.

Первый экран: понятный заголовок, короткое объяснение и форма. Поля: исходный URL; utm_source; utm_medium; utm_campaign; необязательные utm_content и utm_term. У каждого поля — русская подпись и короткий пример. Источник, канал и кампания обязательны. Показывай ошибку рядом с полем, не стирай введённые данные.

Под формой — итоговая ссылка целиком в доступном для выделения поле и кнопка «Копировать». Сообщение «Скопировано» показывай только после успешной записи в буфер. Если браузер запретил копирование, предложи выделить ссылку и скопировать вручную.

Правила сборки:
1. Принимай только абсолютные адреса http и https, без логина и пароля в URL. Не добавляй https к произвольной строке молча.
2. Разбирай адрес средствами URL и URLSearchParams браузера. Не склеивай части адреса вручную.
3. Сохраняй все посторонние параметры, включая ref, и якорь после #.
4. Старые utm_source, utm_medium, utm_campaign заменяй новыми. Если необязательное поле пусто, удаляй соответствующую старую UTM-метку. Повторы одинакового параметра своди к одному значению.
5. Убирай пробелы только по краям значений; внутри значения не исправляй незаметно. Подсказка предлагает короткие согласованные названия латиницей. Показывай, что регистр названий имеет значение для порядка в отчётах.
6. Ссылка и содержимое формы остаются в текущей вкладке. Не отправляй данные на сервер и не сохраняй историю автоматически. Никаких внешних запросов при генерации.

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

До сдачи проверь: адрес с ref и #; адрес со старыми и повторными UTM; пустые обязательные поля; неверный адрес; запрещённую схему; русские буквы и пробел внутри значения; очистку необязательного поля; копирование и ручное выделение. Покажи результаты этих примеров и открой форму в размере телефона. Не обещай попадание переходов в аналитику без проверки счётчика на целевом сайте.

Откройте Ною для своего веб-проекта, создайте отдельный проект в разделе проектов и передайте задание билдеру. После первой версии просите конкретную правку, например: сохранить ref при замене старой метки. Как подключить к билдеру внешнего помощника по MCP, рассказано в дневнике разработки с MCP.

Как собрать и проверить свою версию?

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

Проверьте повторный запуск: вставьте результат обратно в поле исходного адреса и снова нажмите кнопку. Источник, канал и кампания должны остаться по одному разу. Потом очистите необязательный utm_content: старая метка исчезнет, а ref и якорь сохранятся.

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

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

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

Как развить инструмент для команды

Когда простая форма работает, добавьте справочник названий кампаний: команда заранее решает, как писать telegram и messenger. Выпадающий список уменьшит разнобой, но новое название лучше разрешать с явным подтверждением.

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

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

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

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

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