Когда нужна подмена
Если разные объявления ведут на одну страницу, по параметру ссылки можно выбрать заранее заданный телефон, заголовок или текст. Например, utm_campaign=tumen показывает вариант для Тюмени, а ivanovo — для Иваново.
Это подмена по заданной метке, а не определение реального города пользователя и не динамический коллтрекинг. Для новых проектов город удобнее хранить в отдельном параметре, например city, а utm_campaign оставить названию кампании. В этом примере историческое имя сохранено для совместимости.
Какие ошибки были в старом примере
Старый HTML подключал juery.js с опечаткой. Парсер не декодировал URL-значения: значение %74umen не распознавалось. Скрипт заменял видимый номер, но не обновлял href=tel: — посетитель мог нажать новый номер и позвонить по старому. Два параллельных массива значений также легко рассинхронизировать.
Новая версия не требует jQuery, хранит каждый вариант вместе с его значениями, разбирает URL через URLSearchParams и меняет текст и телефонную ссылку одновременно. Все замены берутся из локального списка; текст из произвольной UTM-метки не вставляется в HTML.
Правила выбора варианта
Допустимый параметр в текущем URL имеет приоритет над cookie и обновляет её. На переходе без параметра используется ранее сохранённый вариант. Неизвестная, пустая или противоречивая повторная метка оставляет исходный текст страницы, чтобы старый город не подменял ошибочно размеченный новый переход.
Cookie хранится до 30 дней; браузер может ограничить этот срок. При запрете cookie подмена текущей страницы работает, но следующий прямой переход не помнит выбор. После удаления cookie, в другом браузере или приватном окне начинается новая история.
Как подключить
Замените учебные номера на реальные рабочие номера своей компании. Добавьте data-campaign-phone на все элементы с телефоном, которые должны меняться. Идентификатор phone тоже поддерживается. Подключите файл с defer — библиотек не требуется.
- Скачать change-data.js
- Проверить учебный пример
<a id="phone" data-campaign-phone href="tel:+78332000000">+7 (8332) 00-00-00</a>
<span data-campaign-phone>+7 (8332) 00-00-00</span>
<script src="/downloads/change-data.js" defer></script>Полный код
/* Brandmaker: подмена текста и телефонных ссылок. Версия 2026-09-30. */
(() => {
'use strict';
// Замените примеры реальными номерами своей компании перед подключением.
const settings = {
urlParam: 'utm_campaign',
cookieName: 'utm_campaign_change',
selector: '[data-campaign-phone], #phone',
variants: {
tumen: { text: '+7 (3452) 00-00-01', tel: '+73452000001' },
ivanovo: { text: '+7 (4932) 00-00-02', tel: '+74932000002' },
},
};
const allowed = value => Object.prototype.hasOwnProperty.call(settings.variants, value);
function readCookie() {
try {
const item = document.cookie.split(';').map(value => value.trim())
.find(value => value.startsWith(settings.cookieName + '='));
const value = item ? decodeURIComponent(item.slice(settings.cookieName.length + 1)) : null;
return allowed(value) ? value : null;
} catch { return null; }
}
function init() {
const values = new URLSearchParams(window.location.search).getAll(settings.urlParam)
.map(value => value.trim().toLowerCase());
// Новая допустимая метка имеет приоритет над сохранённым городом.
// Ошибочная или неоднозначная явная метка оставляет исходный текст.
const fromUrl = values.length && values.every(value => value === values[0]) && allowed(values[0])
? values[0] : null;
const selected = values.length ? fromUrl : readCookie();
if (!selected) return;
const variant = settings.variants[selected];
for (const element of document.querySelectorAll(settings.selector)) {
element.textContent = variant.text;
if (element.tagName === 'A' && /^\+?\d{5,15}$/.test(variant.tel || '')) {
element.setAttribute('href', 'tel:' + variant.tel);
}
}
if (fromUrl) {
try {
document.cookie = settings.cookieName + '=' + encodeURIComponent(fromUrl) +
'; Max-Age=2592000; Path=/; SameSite=Lax' +
(window.location.protocol === 'https:' ? '; Secure' : '');
} catch { /* Подмена текущей страницы работает и без cookie. */ }
}
}
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, { once: true });
else init();
})();
Как адаптировать для заголовков и текста
Для обычного текста замените selector на селектор нужного элемента, например [data-campaign-title], а значения text в variants — на заранее подготовленные строки. Для заголовков можно убрать свойства tel. Варианты и селектор должны соответствовать одной задаче подмены.
Если нужен отдельный параметр city, поменяйте urlParam и cookieName, чтобы не смешивать независимые настройки. Имена параметров чувствительны к регистру; значения в этом примере приводятся к нижнему регистру. Не храните в них данные клиентов.
Пример предназначен для текста и телефонных ссылок. Для изображений, баннеров и HTML-разметки потребуется отдельная реализация с проверкой допустимых адресов и безопасным выводом. Не заменяйте textContent на innerHTML для вставки непроверенного значения из URL.
Проверка перед применением
- Откройте ссылку ?utm_campaign=tumen — изменятся все отмеченные номера и tel:.
- Откройте ?utm_campaign=ivanovo в том же браузере — новый вариант заменит старый.
- Перейдите без параметра — останется последнее допустимое значение.
- Проверьте неизвестную метку, пустое значение и конфликтующие повторения — исходный текст сохраняется.
- Проверьте запрет cookie: текущий переход работает без сохранения выбора.
- Пройдите по всем телефонным ссылкам, сверив адрес ссылки с текстом. Учебные номера замените до публикации на своём сайте.
Автор исходной статьи: Буякова Екатерина, веб-технолог Brandmaker. Код и инструкция пересмотрены Brandmaker в 2026 году.
Обновлено 30 сентября 2026 года. Рекомендации и примеры пересмотрены; дата первой публикации сохранена в конце статьи.
Материал опубликован: 15 сент. 2015 г.