Інтерактивне портфоліо та CRM для рекламних агенцій на 1С-Бітрікс

Сайт рекламної агенції — вітрина, яка або продає, або руйнує довіру. Коли потенційний клієнт відкриває портфоліо, а відео гальмує, анімації смикаються — йде за 3 секунди. Ми вирішуємо це завдання на 1С-Бітрікс: робимо так, щоб важкий контент літав. Досвід більше 7 років і 50+ проектів дозволяють гарантувати стабільну роботу навіть при пікових навантаженнях. Пропонуємо розробку під ключ: від концепції до навчання співробітників. Вартість розробки розраховується індивідуально, але гнучка архітектура дозволяє вкластися в бюджет будь-якої рекламної студії. Зв'яжіться з нами — оцінимо проект за 1 день, входить інтеграція з CRM і CDN.

Розробка сайту рекламної агенції на 1С-Бітрікс — це не просто верстка. Це архітектура, яка повинна швидко доставляти відео високої роздільної здатності, інтерактивні кейси та анімації без втрати продуктивності. Саме тому ми використовуємо композитний кеш, CDN та ліниве завантаження. Нижче розповімо, як влаштовано портфоліо та які технічні рішення ми застосовуємо.

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

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

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

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

Як організувати портфоліо з відео без втрати продуктивності?

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

З нашої практики: для агенції «Креатив» ми реалізували портфоліо з self-hosted відео на CDN (BunnyCDN), що знизило навантаження на сервер на 40% і скоротило час завантаження сторінок на 2 секунди. Клієнт відзначив зростання конверсії з портфоліо на 25%.

Відео. Два підходи: зовнішній хостинг (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), приглушений звук за замовчуванням, ліниве завантаження постера.

Порівняння варіантів хостингу відео:

Згідно з документацією 1С-Бітрікс, композитний кеш забезпечує швидкість завантаження до 10x. Для нашого проекту це означало, що сторінки портфоліо завантажуються за 1.2 секунди навіть з 10 відео на сторінці.

Анімації та інтерактив

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.

Чому 1С-Бітрікс підходить для сайту рекламної агенції?

Платформа з коробки підтримує:

• Інфоблоки для портфоліо з необмеженими властивостями
• Highload-блоки для довідників (типи робіт, міста)
• Композитний режим для високої продуктивності
• REST API для інтеграції з Bitrix24 CRM та зовнішніми системами
• Маркетплейс з рішеннями для SEO та медіа

Завдяки цьому розробка сайту рекламної агенції на 1С-Бітрікс займає 2-3 місяці, а не півроку, як на самописних CMS. Економія часу розробки становить близько 30%.

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

Окремий блок у картці кейсу — «Результати». Оформлюємо як горизонтальний ряд великих цифр з підписами: «+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, вбудовані через віджет, але вони обмежені в кастомізації дизайну.

Скільки часу займає розробка?

Що входить в роботу

• Технічне завдання та прототипи
• Дизайн-макети (UI-кіт)
• Розробка на 1С-Бітрікс з кастомізацією
• Налаштування CDN та кешування
• Інтеграція з Bitrix24 CRM
• Наповнення портфоліо (до 20 кейсів)
• Навчання адміністраторів
• Гарантія 6 місяців

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

Як правильно проектувати інфоблоки?

Ми бачимо десятки проєктів, де неправильна структура інфоблоків перетворює сайт на гальмо. Типовий сценарій: замовник просить «каталог товарів». Розробник створює один інфоблок catalog, закидає туди 15 властивостей. Через півроку — 40 властивостей, 8 з яких використовуються лише для однієї категорії. Фільтр гальмує, таблиця b_iblock_element_property розрослася до мільйонів рядків, CIBlockElement::GetList виконується 3 секунди. Наслідки — падіння конверсії, втрата клієнтів, додаткові витрати на оптимізацію. В одному проєкті після рефакторингу каталогу час генерації сторінки знизився з 4,2 до 0,8 секунди, а вартість підтримки значно скоротилася — за рахунок усунення надлишкових запитів та агентів.

Наш підхід: проектуємо інфоблоки до першого рядка коду. Окремі інфоблоки під сутності (товари, категорії, бренди), властивості-довідники через HL-блоки, торгові пропозиції для SKU. Це закладає продуктивність на роки вперед. Якщо хочете отримати попередній аудит вашої схеми інфоблоків — зв'яжіться з нами, розберемо типові помилки та надамо рекомендації.

Чому 1С-Бітрікс вигідніший за альтернативи?

Вибір CMS диктується не уподобаннями, а бізнес-завданнями. Ось ключові аргументи:

• Нативний обмін з 1С — модуль catalog.import.1c забезпечує двосторонній обмін товарами, цінами, залишками та замовленнями через CommerceML. Без сторонніх модулів. Це в 5 разів швидше, ніж розробка власного обміну на OpenCart або WordPress. Економія на інтеграції — до 200 000 грн порівняно з кастомними рішеннями.
• Проактивний захист — модуль security включає WAF, контроль цілісності файлів, захист від SQL-ін'єкцій, двофакторну автентифікацію. Для проєктів з вимогами ФСТЭК — сертифіковане рішення (згідно з Wikipedia, це стандарт для корпоративних систем).
• Модульна архітектура — підключаємо лише потрібні модулі: iblock, catalog, sale, search. Менше модулів — менше запитів до БД на кожен хіт.
• Регулярні патчі — вендор випускає security-патчі, закриваючи вразливості швидше, ніж open-source проєкти (середній час виправлення CVE — 2 тижні). Офіційна документація по модулях доступна на сайті розробника.

Що дають HL-блоки і як ми прискорюємо каталог

Highload-блоки — це альтернатива розширеним властивостям інфоблоків, коли список значень може зростати до тисяч записів. Типовий приклад: виробники, країни, кольори. Якщо зберігати їх як властивості-списки в інфоблоці, кожна фільтрація викликає повне сканування таблиці b_iblock_property_enum. З HL-блоками вибірка йде по індексу — час відповіді фільтра знижується з 1–2 секунд до 50 мс. Продуктивність HL-блоків у 8 разів вища за властивості-списки інфоблоків. Ми використовуємо HLB компонент і кастомні запити через Bitrix\Highloadblock\DataManager. Це особливо критично для каталогів з 100 000+ товарами.

З нашої практики — проєкт інтернет-магазину з 500 000 товарів. Стандартний фільтр по бренду виконувався 4 секунди. Сервер не витримував навантаження в 50 одночасних запитів — сторінки падали. Ми перевели довідник брендів у HL-блок, додали теговане кешування на 15 хвилин і налаштували агент для скидання кешу при зміні. Після доопрацювання час фільтрації склав 120 мс, середній LCP сторінки — 1,8 секунди. Проєкт працює стабільно без збоїв.

Що входить у розробку сайту на 1С-Бітрікс

Кожен проєкт включає повний комплект документації та артефактів, що виключає втрату знань після передачі.

• Технічне завдання — user stories, діаграми інфоблоків, схеми інтеграцій.
• Вихідний код у Git — з історією комітів, тегами релізів, правилами гілкування.
• Адміністративна документація — опис кастомних компонентів, інструкції з розгортання, перелік агентів і подій.
• Навчання співробітників — до 3 годин вебінару: панель управління, робота з замовленнями, налаштування цін. Записуємо, щоб можна було переглянути.
• Доступ до staging на час розробки — тестуєте самостійно до деплою на продуктив.
• Гарантійна підтримка — виправлення помилок коду протягом 30 днів після запуску. Післягарантійні абонентські пакети з SLA (реакція 2 години, рішення 8 годин).

Наш процес і технології

Стек: верстка mobile-first, тестуємо на фізичних пристроях (iPhone, iPad, Android). Використовуємо BrowserStack для Safari на iOS. Продуктивність — LCP < 2,5 с, FID < 100 мс, CLS < 0,1. Включаємо композитний сайт (composite), CDN, теговане кешування, WebP/AVIF, lazy loading. SEO — Schema.org через JSON-LD, автогенерація sitemap.xml модулем seo, canonical і hreflang для мультимовних версій. robots.txt закриваємо /bitrix/ від індексації. CI/CD — Git, автодеплой через GitLab CI, staging. Міграції бази — модуль sprint.migration з версіонуванням.

Процес роботи:

1. Аналітика — вивчаємо конкурентів, збираємо вимоги, малюємо прототипи в Figma. На виході — ТЗ з user stories.
2. Дизайн — UI/UX з дизайн-системою. Компоненти перевикористовуються.
3. Розробка — пишемо компоненти з кастомними шаблонами в local/templates/. Бізнес-логіку виносимо в модулі local/modules/.
4. Тестування — функціональне, кросбраузерне, навантажувальне (до 1000 запитів). Критичні баги виправляємо до запуску.
5. Запуск — деплой на прод, моніторинг через UptimeRobot, алерти в Telegram. Усуваємо перші 48 годин.

Інтеграції, мультимовність і редизайн

• Повна локалізація через мовні файли lang/ і механізм SITE_ID. hreflang для кожної версії. Регіональні версії з різними цінами та контентом — визначення за IP (main.geo) або ручний вибір. Мультидоменність — єдине управління кількома доменами.

• Редизайн без втрати позицій: аудит продуктивності (PageSpeed, WebPageTest), SEO (Screaming Frog). Новий шаблон у local/templates/ із збереженням URL-структури. 301-редиректи лише якщо URL змінюється суттєво. Оновлення ядра, перехід на D7 ORM, реструктуризація інфоблоків, міграція через sprint.migration з Git.

Гарантія та підтримка

Ми працюємо з 1С-Бітрікс 12+ років, реалізували 500+ проєктів. У штаті сертифіковані розробники. Фіксована вартість у договорі — без сюрпризів. Гарантійний період покриває помилки коду. Після — абонентські пакети з SLA (час реакції — 2 години, рішення — 8 годин). Моніторинг доступності 24/7, алерти в Telegram. За потреби отримайте попередній аудит — зв'яжіться з нами через форму на сайті або напишіть у чат, відповімо протягом години. Замовте розробку під ключ — ми спроєктуємо інфоблоки, інтегруємо 1С і розженимо каталог. Якщо вже є сайт на іншій CMS — замовте аудит продуктивності та міграцію на Бітрікс.