Розробка промо-сайту на 1С-Бітрікс

Розробка промо-сайту на 1С-Bitrix

Промо-сайт — це короткоживучий або постійний сайт під конкретний продукт, акцію, захід. Головна його мета — конверсія: реєстрація, заявка, покупка. Технічно промо-сайт на Bitrix найчастіше означає односторінник (лендинг) із кількома секціями, формами захоплення лідів і, опціонально, інтеграцією з Bitrix24.

Коли промо на Bitrix, а не на конструкторі

Bitrix обирають для промо-сайту, якщо:

• Основний сайт вже на Bitrix — промо розміщують на піддомені або в папці, використовуючи ту ж CMS.
• Потрібна інтеграція з CRM (Bitrix24) без зайвих прошарків — форми одразу створюють ліди.
• Промо-сайт планується використовувати багаторазово з різним контентом (акції, події).
• Контент промо має редагуватися в редакторі Bitrix без розробника.

Архітектура промо-сайту

Для промо на Bitrix можливі два підходи:

1. Окремий шаблон на основному сайті. Створюється новий шаблон у /local/templates/promo_EVENTNAME/. У header.php та footer.php — мінімальна обгортка, без основного навігаційного меню. Сторінка /promo/event-name/index.php підключає цей шаблон через $APPLICATION->SetTemplate().

2. Окремий сайт у складовому сайті. Якщо промо на піддомені promo.example.com — створюється новий сайт в адміністративній частині (Налаштування → Сайти → Список сайтів). Свій шаблон, свої налаштування, свої поштові події.

Редаговані секції через інфоблок

Щоб маркетолог міг змінювати контент промо без розробника — розміщуємо редаговані блоки через інфоблок promo_sections:

// Секції промо-сторінки
$sections = \CIBlockElement::GetList(
    ['SORT' => 'ASC'],
    [
        'IBLOCK_ID' => PROMO_SECTIONS_IBLOCK_ID,
        'ACTIVE'    => 'Y',
        'PROPERTY_PROMO_ID' => $promoId,
    ],
    false,
    false,
    ['ID', 'NAME', 'CODE', 'DETAIL_TEXT', 'PROPERTY_SECTION_TYPE', 'PROPERTY_BG_IMAGE', 'PROPERTY_CTA_TEXT', 'PROPERTY_CTA_URL']
);

Властивості елементу-секції: тип секції (hero, features, testimonials, cta, faq), фонове зображення, текст CTA-кнопки, її URL. У шаблоні — switch за SECTION_TYPE, що підключає відповідний include:

while ($section = $sections->GetNext()) {
    $sectionType = $section['PROPERTY_SECTION_TYPE_VALUE'];
    $sectionFile = __DIR__ . '/sections/' . $sectionType . '.php';
    if (file_exists($sectionFile)) {
        include $sectionFile;
    }
}

Форми захоплення лідів

На промо-сайті кілька точок конверсії: форма в hero-секції, форма в кінці сторінки, спливаюча форма при спробі піти (exit-intent). Всі вони відправляють дані на один обробник:

// /local/ajax/promo_lead.php

\Bitrix\Main\Loader::includeModule('crm');

$promoId = htmlspecialchars($_POST['promo_id'] ?? '');
$name    = htmlspecialchars(trim($_POST['name'] ?? ''));
$phone   = htmlspecialchars(trim($_POST['phone'] ?? ''));
$email   = htmlspecialchars(trim($_POST['email'] ?? ''));

// Джерело фіксується для аналітики
$source = htmlspecialchars($_POST['form_position'] ?? 'unknown'); // hero | bottom | popup

if (empty($phone) && empty($email)) {
    echo json_encode(['error' => 'Вкажіть телефон або email']);
    exit;
}

$lead = new \CCrmLead(false);
$leadId = $lead->Add([
    'TITLE'              => 'Промо: ' . $promoId . ' — ' . $name,
    'NAME'               => $name,
    'PHONE'              => [['VALUE' => $phone, 'VALUE_TYPE' => 'WORK']],
    'EMAIL'              => [['VALUE' => $email, 'VALUE_TYPE' => 'WORK']],
    'SOURCE_ID'          => 'WEB',
    'SOURCE_DESCRIPTION' => 'Промо: ' . $promoId . ', форма: ' . $source,
    'UTM_SOURCE'         => $_COOKIE['utm_source'] ?? '',
    'UTM_MEDIUM'         => $_COOKIE['utm_medium'] ?? '',
    'UTM_CAMPAIGN'       => $_COOKIE['utm_campaign'] ?? '',
]);

echo json_encode(['success' => (bool)$leadId]);

UTM-мітки. При заході на промо-сторінку — зберігати UTM у cookie через JS (30 хвилин). При відправці форми — передавати із запитом. У ліді Bitrix24 доступні поля UTM_SOURCE, UTM_MEDIUM, UTM_CAMPAIGN, UTM_TERM, UTM_CONTENT — використовуємо їх.

Таймер зворотного відліку

Важливий елемент промо — таймер до кінця акції. Реалізується на JS з урахуванням серверного часу (не локального часу браузера):

// У шаблоні PHP передаємо серверну дату закінчення
$promoEndDate = '2026-04-01T23:59:59+03:00';
echo '<script>window.PROMO_END_DATE = "' . $promoEndDate . '";</script>';

// Timer component
function startCountdown(endDateStr) {
    const endDate = new Date(endDateStr);
    const timer   = setInterval(() => {
        const now  = new Date();
        const diff = endDate - now;

        if (diff <= 0) {
            clearInterval(timer);
            document.getElementById('timer').textContent = 'Акція завершена';
            return;
        }

        const days    = Math.floor(diff / 86400000);
        const hours   = Math.floor((diff % 86400000) / 3600000);
        const minutes = Math.floor((diff % 3600000) / 60000);
        const seconds = Math.floor((diff % 60000) / 1000);

        document.getElementById('timer-days').textContent    = String(days).padStart(2, '0');
        document.getElementById('timer-hours').textContent   = String(hours).padStart(2, '0');
        document.getElementById('timer-minutes').textContent = String(minutes).padStart(2, '0');
        document.getElementById('timer-seconds').textContent = String(seconds).padStart(2, '0');
    }, 1000);
}

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

Для промо-сайтів A/B тест критичний. Проста реалізація без зовнішніх сервісів: ділимо відвідувачів на групи через cookie.

// Визначити варіант для користувача
if (!isset($_COOKIE['promo_variant'])) {
    $variant = rand(0, 1) ? 'A' : 'B';
    setcookie('promo_variant', $variant, time() + 86400 * 30, '/');
} else {
    $variant = $_COOKIE['promo_variant'];
}

// Підключити потрібний шаблон
$templateFile = __DIR__ . '/variants/' . $variant . '.php';
include $templateFile;

Результати конверсії — через окремий лічильник у таблиці b_local_promo_ab_stats з полями: PROMO_ID, VARIANT, VIEWS, CONVERSIONS.

Кешування та продуктивність

Промо-сайт може отримати піковий трафік (розсилка, рекламна кампанія). Заздалегідь налаштовуємо:

• Повносторінкове кешування через nginx FastCGI cache для анонімних користувачів.
• Cache-Control: public, max-age=3600 для статики.
• Попереднє прогрівання кешу після деплою.
• Обмеження AJAX-запитів на сервері (rate limiting nginx: limit_req_zone).

Терміни розробки