Разработка сайта рекламного агентства на 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 — направлено на то, чтобы портфолио загружалось быстро и выглядело так же впечатляюще, как сами рекламные кампании.