11 · Маркетинг
Персонализация оффера по UTM в Tilda
готовый код.
Меняет заголовок и текст кнопки под источник рекламы, сохраняя понятный оффер по умолчанию.
Забрать код ↓- Технология
- JavaScript
- Установка
- 12 минут
- Куда вставлять
- Zero Block + T123
- Обновлено
- 08.09.2026
/ Демонстрация
Сначала посмотрите,
как это работает.
utm_source=yandex
Сайт, который превращает рекламные клики в заявки
/ Код
Скопируйте.
Вставьте. Опубликуйте.
Код не требует сборки или установки библиотек. Перед запуском замените значения, отмеченные в инструкции ниже.
<script>
(function () {
var VARIANTS = {
yandex: {
title: 'Сайт, который превращает рекламные клики в заявки',
button: 'Рассчитать запуск'
},
vk: {
title: 'Лендинг для быстрого запуска рекламы в VK',
button: 'Обсудить лендинг'
},
telegram: {
title: 'Упакуем продукт для трафика из Telegram',
button: 'Получить план'
}
};
var source = new URLSearchParams(window.location.search)
.get('utm_source');
if (!source) return;
var variant = VARIANTS[source.toLowerCase()];
if (!variant) return;
function replaceText(selector, text) {
document.querySelectorAll(selector).forEach(function (element) {
var target = element.querySelector('.tn-atom') || element;
target.textContent = text;
});
}
replaceText('.js-dynamic-title', variant.title);
replaceText('.js-dynamic-button', variant.button);
})();
</script>/ Установка
Четыре шага.
- 01
В Zero Block назначьте заголовку CSS-класс js-dynamic-title, а тексту главной кнопки — js-dynamic-button.
- 02
Отредактируйте тексты внутри VARIANTS и при необходимости добавьте свои значения utm_source.
- 03
Добавьте T123 сразу после Zero Block, вставьте скрипт и опубликуйте страницу.
- 04
Проверьте обычный адрес страницы и тестовые ссылки с ?utm_source=yandex, ?utm_source=vk и ?utm_source=telegram.
/ Настройки
Подстройте под себя.
- Источники
- Ключи объекта VARIANTS: yandex, vk, telegram. Они должны совпадать с utm_source в рекламе.
- Тексты
- Поля title и button внутри каждого варианта.
- Элементы
- CSS-классы .js-dynamic-title и .js-dynamic-button можно назначить нескольким элементам.
/ Нужна доработка
Не нашли нужное?
Соберём под ваш сайт.
Опишите задачу и пришлите ссылку на страницу. Посмотрим, можно ли решить её готовым кодом или нужна индивидуальная разработка.
Обсудить в Telegram ↗