Разработка сайта для маркетингового агентства на Headless Drupal

Клиент: американское агентство инфлюенс-маркетинга Influize.

Отрасль: маркетинг.

Услуги:

• разработка сайта для маркетингового агентства;
• проектирование архитектуры веб-приложения;
• разработка Headless Drupal;
• разработка фронтенда на React / Next.js;
• настройка серверной инфраструктуры AWS;
• интеграция сторонних сервисов;
• SEO-оптимизация сайта;
• техническое тестирование;
• разработка личного кабинета и дашборда.

Технологии: Drupal (Contenta CMS), Headless Drupal, Node.js, React, Next.js, REST API, AWS, Memcached, Varnish, SendGrid, Calendly.

Influize — американское маркетинговое агентство, которое помогает брендам продвигать продукты и услуги с помощью инфлюенсеров. Компания организует рекламные кампании, подбирает блогеров, сопровождает сотрудничество и предлагает клиентам комплексные решения в сфере influence-маркетинга.

Перед нами стояла задача разработать современный сайт для маркетингового агентства, который не только презентует услуги компании, но и станет полноценным инструментом привлечения клиентов. Пользователь может изучить агентство, познакомиться с доступными услугами, оставить заявку, а в дальнейшем — оформить заказ через специальную платформу.

Каждая форма обратной связи интегрирована с системой обработки лидов. После отправки заявки менеджеры получают уведомление по электронной почте, а потенциальный клиент автоматически получает письмо с подтверждением регистрации обращения. Такой подход позволяет ускорить обработку заявок и повысить качество коммуникации с будущими заказчиками.

В качестве CMS мы использовали Drupal Contenta CMS — готовую сборку для построения Headless Drupal-проектов. Она обеспечивает надёжное взаимодействие между Drupal и серверным приложением на Node.js через REST API.

В этой архитектуре Drupal отвечает исключительно за хранение и управление контентом, а отображение страниц и взаимодействие с пользователем полностью выполняет отдельное приложение на Node.js. Такой подход называется Headless Drupal и позволяет независимо развивать серверную и клиентскую части проекта, обеспечивая высокую производительность и гибкость разработки.

По сравнению с классическим Drupal-сайтом, где CMS одновременно отвечает за хранение данных, бизнес-логику и вывод страниц, Headless-архитектура лучше подходит для масштабируемых цифровых продуктов и сложных веб-платформ.

Одной из задач проекта было обеспечить стабильную работу сайта при большом количестве посетителей.

Для этого мы реализовали многоуровневую систему кеширования на базе Memcached и Varnish. Эти инструменты позволяют хранить заранее подготовленные версии страниц и отдавать их пользователям практически мгновенно без повторной обработки запросов.

В результате удалось значительно снизить нагрузку на сервер и базу данных, сократить время генерации страниц и повысить скорость работы сайта даже при высокой посещаемости.

Маркетинговое агентство регулярно публикует новые посадочные страницы, запускает акции и обновляет информацию об услугах. Чтобы эти изменения не требовали участия разработчиков, мы реализовали универсальный конструктор страниц.

Страницы собираются из независимых компонентов (Paragraphs), каждый из которых уже содержит готовое оформление и необходимую логику. Менеджеры могут самостоятельно создавать новые страницы, комбинируя готовые блоки без риска нарушить структуру сайта или дизайн.

Такой подход существенно ускоряет публикацию нового контента и снижает стоимость дальнейшего сопровождения проекта.

Над наполнением сайта работает несколько сотрудников с разными задачами: редакторы ведут блог, маркетологи публикуют страницы услуг, а менеджеры обновляют коммерческую информацию.

Мы реализовали систему ролей и разграничения прав доступа, благодаря которой каждый пользователь получает доступ только к тем разделам сайта, которые необходимы для его работы. Это повышает безопасность проекта и снижает вероятность случайных изменений важных данных.

Фронтенд проекта построен на React с использованием Next.js.

Мы выбрали изоморфную архитектуру (Server Side Rendering, SSR), при которой страницы сначала формируются на сервере, а затем становятся полноценным React-приложением в браузере пользователя.

Такой подход позволяет совместить преимущества двух технологий:

• страницы быстро индексируются поисковыми системами благодаря SSR;
• пользователи получают быстрый интерфейс без полной перезагрузки страниц;
• переходы между разделами происходят практически мгновенно;
• улучшаются показатели производительности и Core Web Vitals, что положительно влияет на SEO.

Использование Next.js позволило реализовать современное SPA-приложение без ущерба для поисковой оптимизации.

По мере развития проекта сайт превратился из корпоративного представительства компании в полноценную платформу для продажи маркетинговых услуг.
Мы разработали личный кабинет в формате дашборда, где клиент может самостоятельно заказать необходимые услуги агентства:

• публикации в СМИ;
• размещение обратных ссылок (link building);
• холодные email-рассылки;
• рекламные кампании в социальных сетях.

Для каждой услуги предусмотрен собственный сценарий оформления заказа.
В зависимости от выбранного направления пользователь может указать тип публикации, требования к площадкам, желаемый уровень авторитетности домена, предоставить информацию о компании, загрузить готовые материалы или заполнить индивидуальный бриф.

Такой подход позволил автоматизировать процесс оформления заказов, сократить количество ручной работы менеджеров и сделать взаимодействие с агентством максимально удобным для клиентов.

Сайт передан на поддержку другой команде.