Розробка мультилендингу з динамічним контентом

Розробка мультилендингу з динамічним контентом

Мультилендинг — лендинг, який адаптує контент у реальному часі під джерело трафіку. Один URL, різні заголовки, офери, зображення, телефонні номери — залежно від UTM-параметрів, міста користувача, рекламної платформи, ключового слова або інших сигналів. Використовується для повищення релевантності рекламних кампаній без створення десятків окремих сторінок.

Зачем це потрібно

Користувач, який клікнув на оголошення «Ремонт iPhone 14 у Нью-Йорку», очікує побачити саме це на лендингу. Якщо він потрапляє на загальну сторінку «Ремонт смартфонів» — конверсія падає, Quality Score зменшується, вартість кліку зростає.

Мультилендинг розв'язує задачу масштабування: замість створення 50 сторінок під 50 ключових слів — одна сторінка з шаблонізацією.

Архітектура

Динамічний контент можна підставляти на трьох рівнях:

Клієнтський (JS після завантаження) — найпростіший, але найгірший з точки зору SEO та CLS. Користувач бачить «мерехтіння» контенту при підстановці.

Edge (Middleware до рендеру) — сторінка рендерится на edge-ноді з уже підставленим контентом. Нема CLS, SEO коректно індексує версію за замовчуванням. Реалізується через Vercel Edge Middleware, Cloudflare Workers, Netlify Edge Functions.

Server-side (SSR) — запит обробляється сервером, контент підставляється до відправки HTML. Схоже на Edge, але виконується на виділеному сервері, а не на розподіленій мережі.

Оптимальний вибір — Edge Middleware для проектів на Vercel/Cloudflare або SSR для самохостингових рішень.

Реалізація на Next.js + Vercel Edge Middleware

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const { searchParams } = request.nextUrl;

  const utmTerm = searchParams.get('utm_term') ?? '';
  const utmSource = searchParams.get('utm_source') ?? '';
  const city = request.geo?.city ?? '';

  // Передаємо дані в заголовках — читаємо їх у компоненті
  const response = NextResponse.next();
  response.headers.set('x-utm-term', utmTerm);
  response.headers.set('x-utm-source', utmSource);
  response.headers.set('x-visitor-city', city);

  return response;
}

export const config = {
  matcher: ['/landing/:path*'],
};

// app/landing/page.tsx
import { headers } from 'next/headers';
import { getContent } from '@/lib/content-engine';

export default function LandingPage() {
  const headersList = headers();
  const utmTerm = headersList.get('x-utm-term') ?? '';
  const city = headersList.get('x-visitor-city') ?? 'вашому місту';

  const content = getContent(utmTerm);

  return (
    <main>
      <h1>{content.headline.replace('{city}', city)}</h1>
      <p>{content.subheadline}</p>
      <ContactForm phone={content.phone} />
    </main>
  );
}

Контент-рушій: матриця підстановок

Логіка підстановки контенту — окремий модуль. Не жорстко забитих if/else, а конфігурійовані правила:

// lib/content-engine.ts

interface ContentVariant {
  headline: string;
  subheadline: string;
  cta: string;
  phone: string;
  image: string;
}

const defaultContent: ContentVariant = {
  headline: 'Ремонт смартфонів у {city}',
  subheadline: 'Діагностика бесплатно. Гарантія 6 місяців.',
  cta: 'Записатися на ремонт',
  phone: '+38 (099) 000-00-00',
  image: '/hero-default.webp',
};

const variants: Record<string, Partial<ContentVariant>> = {
  'ремонт iphone': {
    headline: 'Ремонт iPhone у {city} — від 1 години',
    subheadline: 'Оригінальні запчастини. Ремонт при вас.',
    image: '/hero-iphone.webp',
  },
  'ремонт samsung': {
    headline: 'Ремонт Samsung у {city}',
    subheadline: 'Будь-які моделі Galaxy. Гарантія 12 місяців.',
    image: '/hero-samsung.webp',
  },
  'замена экрана': {
    headline: 'Заміна екрана смартфона за 30 хвилин',
    cta: 'Дізнатися вартість заміни',
  },
};

export function getContent(utmTerm: string): ContentVariant {
  const key = utmTerm.toLowerCase();
  const variant = Object.entries(variants).find(([k]) => key.includes(k));
  return { ...defaultContent, ...(variant?.[1] ?? {}) };
}

Геолокація та підстановка номера телефона

Для бізнесу з кількома містами — підстановка локального номера критична. Дзвінок «в місцевий офіс» конвертує краще:

const phoneByCity: Record<string, string> = {
  'Kyiv': '+38 (044) 000-00-00',
  'Lviv': '+38 (032) 000-00-00',
  'Kharkiv': '+38 (057) 000-00-00',
};

// В middleware — з request.geo (тільки на Vercel з Geolocation)
const city = request.geo?.city ?? '';
const phone = phoneByCity[city] ?? defaultPhone;

Альтернатива для самохостингу — MaxMind GeoIP2 database або сервіси ipapi.co/ipgeolocation.io через API.

CallTracking

Для кожного джерела трафіку (Google Ads, Яндекс.Директ, органіка, соцмережі) — різний номер телефона через CallTracking сервіс (CoMagic, Callibri, Ringostat). Номер показується через JavaScript після завантаження сторінки:

// Динамічна заміна номера CallTracking
window.ct_replace = {
  default: '+38 (099) 000-00-00',
  pools: {
    'google': '+38 (099) 111-11-11',
    'yandex': '+38 (099) 222-22-22',
  }
};

Зазвичай CallTracking-сервіс надає готовий скрипт з подібною логікою.

CMS для управління варіантами

Матриця варіантів контенту швидко вирастає. Для маркетолога, який не редагує код, потрібен інтерфейс управління:

Реалізується як проста CRUD-таблиця в admin-панелі (Filament, Directus, навіть Google Sheets через API). На старті часто достатньо JSON-конфіга в репозиторії з деплоєм при змін.

A/B тестування варіантів

Мультилендинг + A/B тест — комбінація для максимальної оптимізації. На Edge Middleware можна реалізувати випадкове розділення:

// Випадкове розділення 50/50
const variant = Math.random() < 0.5 ? 'A' : 'B';
response.cookies.set('ab_variant', variant, { maxAge: 60 * 60 * 24 * 7 });
response.headers.set('x-ab-variant', variant);

У компоненті сторінки читаємо x-ab-variant та рендеримо відповідну версію. Результати тестів — у GA4 через custom dimensions.

SEO та мультилендинг

Динамічний контент на одному URL створює ризики для SEO. Googlebot бачить версію за замовчуванням. Якщо мультилендинг — рекламна історія без органічного трафіку, SEO неважливо. Якщо сторінка має ранжуватися — потрібні окремі URL для кожного варіанту з canonical та hreflang.

Правило: мультилендинг для рекламного трафіку, окремі оптимізовані сторінки для органіки.

Типові терміни

Базовий мультилендинг (UTM → заголовок/CTA) на статиці або Next.js — 5–7 робочих днів. З геолокацією, CallTracking, CMS для управління варіантами — 10–14 днів. Повна система з A/B тестуванням, аналітикою, мультиязичністю та 50+ варіантами — 3–4 тижні.