Розробка сайту рекламної агенції на 1С-Бітрікс

Розробка сайту рекламного агентства на 1С-Бітрікс

Сайт рекламного агентства — одночасно і продукт, і доказ компетенцій. Якщо агентство заявляє, що робить «вау-креатив», а собственний сайт виглядає як шаблон 2015 року — довіра обнуляється. 1С-Бітрікс дозволяє побудувати візуально насичений проект з важким медіаконтентом, не жертвуючи управління: інфоблоки тримають структуру портфоліо, компоненти забезпечують фільтрацію, а модуль кешування справляється з навантаженням від відео та анімацій.

Портфоліо з фільтрацією за типом робіт

Інфоблок «Портфоліо» — центральна сутність сайту. Розділи інфоблока відповідають напрямкам: брендинг, digital-маркетинг, BTL/event, медіарозміщення, production. Властивості елемента:

• Клієнт — назва + логотип (файл)
• Тип робіт — множественний довідник (Highload-блок для швидкої фільтрації)
• Опис задачі — HTML-поле
• Креативна концепція — текст + візуал
• Медіа — множественна властивість «файл» (фото, відео, GIF-анімації)
• Відео-презентація — посилання на Vimeo/YouTube або файл у форматі MP4
• Метрики результату — структуровані числа: охват, ROI, конверсія, зростання продаж
• Рік та тривалість — для хронологічного сортування

Фільтрація реалізується через catalog.smart.filter з AJAX-підгрузкою результатів. Користувач вибирає «Брендинг + 2023–2024» — список оновляється без перезавантаження. Шаблон списку — плиточна сітка (masonry) з hover-ефектами, що показують назву клієнта та тип робіт.

Rich-media контент у портфоліо — головний виклик проекту

Рекламне агентство продає візуал. Портфоліо має показати роботи у максимальній якості — відеоролики, анімовані баннери, інтерактивні презентації. І при цьому сайт не повинен гальмувати. Розберімо, як це реалізувати.

Відео. Два підходи: зовнішній хостинг (Vimeo Pro / YouTube) та self-hosted. Зовнішній хостинг знімає навантаження з сервера, але обмежує контроль над плеєром. Self-hosted дає кастомний плеєр без чужого брендування, але вимагає CDN та адаптивного стрімінгу.

Для self-hosted використовуємо формат MP4 (H.264) з кількома бітрейтами. Відеофайли завантажуються через властивість інфоблока в upload/, але видаються через CDN (BunnyCDN, Selectel CDN або CloudFlare). У шаблоні компонента news.detail підключаємо кастомний плеєр на базі Plyr.js — легкий, кастомізуємий, без залежностей. Налаштування: автоплей при скролі (Intersection Observer API), приглушений звук за замовчуванням, ленива загрузка постера.

Анімації. GIF — важкий та застарілий формат. Конвертуємо в WebM/MP4 для економії трафіку (у 5–10 разів легше). Lottie-анімації (JSON, експортовані з After Effects через Bodymovin) для інтерактивних елементів інтерфейсу — логотипи, іконки, схеми. Підключаємо lottie-web та рендеримо через SVG. Для баннерів — HTML5-анімація в iframe з ленивою загрузкою.

Інтерактивні кейси. Деякі роботи краще показати не картинкою, а інтерактивно — наприклад, прототип лендінгу чи інтерактивну інфографіку. Реалізуємо через iframe з sandbox-атрибутами (allow-scripts allow-same-origin) та ленивою загрузкою. Елемент інфоблока містить властивість «URL інтерактива» — шаблон перевіряє її наявність та виводить кнопку «Дивитися інтерактив».

Оптимізація загрузки. При такій кількості медіаконтенту критична продуктивність:

• Lazy loading для всіх зображень та відео — атрибут loading="lazy" та Intersection Observer для відеоплеєрів
• Прогресивні зображення — через компонент iblock.element.list з кастомним ресайзом: WebP + AVIF з fallback на JPEG. Використовуємо CFile::ResizeImageGet() для генерації мініатюр потрібних розмірів
• Композитний кеш — включаємо для сторінок портфоліо, виключаючи динамічні блоки (форма заявки) через $APPLICATION->SetPageProperty("NOT_COMPOSITE", "Y")
• CDN для статики — всі медіафайли, CSS, JS видаються через CDN. У налаштуваннях модуля main вказуємо CDN-домен для upload/ та bitrix/cache/

Адаптивність медіаконтенту. На мобільних пристроях підмінюємо відео статичними постерами (через <picture> з media-query) — економимо трафік та батарею. Галереї переключаються зі сітки на свайп-карусель (Swiper.js). Анімації Lottie зменшуються за FPS або замінюються статичними SVG при prefers-reduced-motion.

Кейси з метриками

Окремий блок у карточці кейса — «Результати». Оформляємо як горизонтальний ряд крупних цифр з підписами: «+340% охват», «ROI 4.2x», «Конверсія 12.8%». Числа анімуємо при скролі (countUp.js) — це привертає увагу та виглядає професійно. Дані зберігаються у властивостях інфоблока типу «число» з одиницями виміру в окремому текстовому властивості.

Команда з ролями

Інфоблок «Команда» з розділами: креатив, стратегія, акаунтинг, production, digital. Властивості: фото (квадратне, мінімум 600×600), посада, спеціалізація, соціальні мережі. У шаблоні — нестандартна сітка: при наведенні на фото розворачивається карточка з біо та реалізованими проектами (прив'язка до інфоблока портфоліо).

Блог про рекламу та маркетинг

Інфоблок з рубриками: тренди, розбори кампаній, інструменти, думки. SEO-оптимізація: ЧПУ, шаблони meta-тегів через модуль SEO, мікророзмітка Article. Кожна стаття містить CTA-блок з пропозицією обговорити задачу — форма прив'язана до Bitrix24 CRM.

Калькулятор рекламного бюджету

Багатокрокова JS-форма:

1. Мета кампанії (впізнаваність, ліди, продажі)
2. Канали (контекст, таргет, OOH, ТВ, digital)
3. Географія та аудиторія
4. Бюджет або бажаний результат

Коефіцієнти зберігаються в Highload-блоці — менеджер оновлює вартість CPM/CPC без розробника. Результат: орієнтовне розподілення бюджету по каналах з прогнозом охвату. Дані передаються в Bitrix24 CRM як лід через REST API (crm.lead.add).

Інтеграція з Bitrix24 CRM

Усі форми сайту (заявка на бриф, калькулятор, підписка на розсилку) відправляють дані в Bitrix24 через REST API. Налаштовуємо воронку продаж: лід → кваліфікація → бриф → комерційна пропозиція → договір. Джерело ліду визначається автоматично за UTM-мітками, що зберігаються в cookies та передаються разом із формою.

Веб-форми Бітрікс прив'язуємо до CRM через обробник події OnAfterResultAdd — при відправці форми створюється лід з заповненими полями. Альтернативний варіант — CRM-форми Bitrix24, вбудовані через віджет, але вони обмежені в кастомізації дизайну.

Етапи розробки

Сайт рекламного агентства на Бітрікс — це проект, де технічні рішення підпорядковані візуальному враженню. Кожне архітектурне рішення — від вибору формату анімації до настройки CDN — спрямоване на те, щоб портфоліо завантажувалося швидко та виглядало так само вражаюче, як самі рекламні кампанії.