Персоналізація лендінгу за UTM-мітками та A/B тести

Зауважимо: коли рекламні кампанії з різних каналів — Google Ads, Facebook, email-розсилки — ведуть на один і той самий лендінг, конверсія страждає. Відвідувач з брендової кампанії шукає офіційний сайт, а бачить generic-пропозицію. Відвідувач з ретаргетингу очікує нагадування про кошик, а потрапляє на головну. Результат — високий показник відмов і низька конверсія.

Ми вирішуємо цю проблему за допомогою динамічної персоналізації контенту за UTM-мітками. Один URL з динамічною персоналізацією показує різні заголовки, тексти та заклики до дії залежно від джерела трафіку. Це підвищує релевантність і конверсію на 30–50% без створення багатьох сторінок. Проєкт реалізуємо під ключ за 2–5 днів.

Параметр UTM передається в URL при кліку на оголошення. Наш скрипт зчитує його і миттєво підміняє контент на сторінці. Вся логіка зберігається в конфігураційному JSON-файлі, який легко редагувати.

Ми також передбачаємо збереження UTM в sessionStorage, щоб при внутрішніх переходах параметри не втрачалися. Це гарантує стабільну роботу для багатокрокових воронок.

Як це працює?

Реалізація складається з кількох кроків:

1. Видобування UTM — при завантаженні сторінки скрипт зчитує параметри utm_source, utm_campaign, utm_medium, utm_term, utm_content з URL.
2. Збереження — параметри записуються в sessionStorage, щоб не загубитися при внутрішніх переходах. sessionStorage MDN
3. Визначення варіанту — за картою відповідностей (кампанія/джерело → контент) вибирається набір заголовків і текстів.
4. Підміна DOM — елементи з атрибутом data-utm-key замінюються на відповідні значення.
5. Трекінг — у Google Analytics 4 надсилаються події про показаний варіант та кліки по CTA.

Приклад базового парсера:

function extractUtmParams() {
    const params = new URLSearchParams(location.search);
    const utm = {};
    ['utm_source','utm_medium','utm_campaign','utm_term','utm_content'].forEach(key => {
        const val = params.get(key);
        if (val) utm[key] = val;
    });
    return utm;
}

function saveAndGetUtm() {
    const fromUrl = extractUtmParams();
    if (Object.keys(fromUrl).length > 0) {
        sessionStorage.setItem('utm', JSON.stringify(fromUrl));
        return fromUrl;
    }
    return JSON.parse(sessionStorage.getItem('utm') ?? '{}');
}

const utm = saveAndGetUtm();

Чому динамічний контент підвищує конверсію?

Тому що кожен відвідувач бачить пропозицію, яка відповідає його очікуванням. Наприклад, користувач з Google Brand бачить «Офіційний сайт», а з ретаргетингу — «Поверніться до кошика». Це знижує показник відмов і збільшує клікабельність CTA. За даними A/B-тестів наших клієнтів, конверсія зростає в середньому на 40%.

За нашими даними, динамічний лендінг дає конверсію в 2-3 рази вищу, ніж статичний, при тих самих рекламних витратах. Керівник digital-відділу мережі фітнес-клубів зазначив, що після впровадження динаміки вартість ліда знизилася на 35%, а ROI зріс на 150%.

{
  "default": {
    "title": "Стандартний заголовок",
    "cta": "Купити"
  },
  "campaigns": {
    "brand": {
      "utm_source": "google",
      "utm_campaign": "brand-main",
      "title": "Офіційний сайт",
      "cta": "Перейти"
    },
    "retarget": {
      "utm_source": "facebook",
      "utm_campaign": "ret-cart",
      "title": "Поверніться до кошика",
      "cta": "Завершити замовлення"
    }
  }
}

Порівняння: статичний лендінг vs динамічний

Типові сценарії використання

Що входить у нашу роботу

• Розробку клієнтського парсера UTM і логіки збереження.
• Створення конфігураційної карти контенту (JSON) під ваші кампанії.
• Реалізацію заміни DOM-елементів з підтримкою атрибутів data-utm-key.
• SSR для UTM на Laravel/PHP для усунення мерехтіння контенту (опціонально).
• Інтеграцію з вашою CMS (WordPress, Strapi, Contentful) для редагування варіантів через адмінку.
• Налаштування подій GA4 для трекінгу показаних варіантів і воронки.
• Тестування на всіх пристроях і браузерах.
• Документацію та передачу вихідного коду.

Процес впровадження

1. Аналіз — розбираємо вашу структуру UTM-міток і карту кампаній.
2. Проєктування — складаємо JSON-схему контенту та узгоджуємо варіанти.
3. Розробка — пишемо клієнтський та/або серверний код заміни.
4. Тестування — перевіряємо роботу для кожної кампанії, відстежуємо помилки.
5. Деплой — розміщуємо на вашому хостингу, налаштовуємо CI/CD.
6. Підтримка — протягом місяця після запуску вносимо правки безкоштовно.

Терміни та вартість

• Базова реалізація (тільки клієнтська частина, до 20 кампаній): 2–3 дні, вартість розраховується індивідуально.
• Розширена версія з SSR та CMS-інтеграцією: 4–5 днів, точна ціна визначається після аналізу.
• Для точної оцінки надішліть нам структуру ваших UTM-міток і список кампаній — ми підготуємо пропозицію за 1 день.

Зв'яжіться з нами, щоб підвищити конверсію лендінгу за допомогою персоналізації за UTM. Наші інженери проведуть аудит ваших міток і запропонують оптимальне рішення. Наша команда має 5+ років досвіду у веб-розробці, сертифікати Google Partner та понад 50 успішних інтеграцій UTM-механізмів.