Есть несколько источников, откуда приходят заявки потенциальных клиентов Webinar Group (теперь «МТС Линк»):
Далее заявки попадают в один или несколько приёмников:
Далее заявки попадают в один или несколько приёмников:
Каждый день из разных источников поступает до 100 заявок. Иногда из-за технических сбоев эти данные не доходили до приёмников, то есть заказчик терял потенциальных клиентов. Еще одной проблемой было то, что при подключении нового сервиса для сбора заявок, нужно было изменить настройки форм на всех платформах. Это занимало много времени. Например, в CRM (Creatio BPM) данные попадают с основного сайта (webinar.ru, теперь mts-link.ru) и с лендингов Tilda. Раньше для штатного подключения формы к CRM требовалось для каждой формы внедрять скрипт, предоставляемый Creatio BPM, прописывать CSS-селекторы, по которым скрипт будет понимать, откуда и какие данные брать.
Со шлюзом это работает следующим образом: данные со всех форм в универсальном виде уходят на шлюз, который определяет, с какой формы пришел лид и с какими параметрами нужно его отправить в Creatio BPM. Без дополнительных настроек и сторонних скриптов.
Заказчику необходима была система, которая бы позволяла сохранить данные в случае сбоя и подключать новые источники и приёмники данных за короткий срок.
Мы создали маршрутизатор данных — интеграционный шлюз на базе фреймворка Laravel с API и веб-интерфейсом для администратора. Шлюз выступает точкой сбора данных. У шлюза есть API для приёма данных — «розетка», куда можно подключить любую внешнюю систему. Шлюз обрабатывает поступающие данные, проверяет их полноту, приводит к формату, который требует приёмник. Также он обеспечивает сохранность данных и их надёжную асинхронную доставку.
Теперь данные из всех форм на всех площадках обрабатываются в одном месте — шлюзе. Данные не пропадут, если одна из систем будет недоступна, и будут доставлены после восстановления работы сервиса-приёмника. В этом помогает система очередей, которая предоставляет буфер для временного хранения данных, и API, который позволяют подключаться к очереди для возобновления отправки данных. То есть, если в CRM-системе произойдёт сбой, заявки не исчезнут, а будут доставлены, как только она возобновит работу.
Благодаря шлюзу стало проще работать со статистикой, так как вся информация теперь находится в одном месте. Можно быстро посмотреть заявки из разных источников, проанализировать их или выгрузить.
Чтобы быстро реагировать на ошибки, мы настроили интеграцию системы уведомлений Laravel с мессенджером Slack. Когда пользователь не может заполнить форму, ломается внешний сервис или происходят другие непредвиденные ошибки — заказчик получает уведомление об этом в Slack. Сюда же поступают ежедневные и еженедельные отчёты о работе шлюза.
Эти решения обеспечивают сохранность данных и положительный пользовательский опыт, ведь теперь все заявки доходят до адресата.
Сайт заказчика был разработан на PHP 5.4 + October CMS на базе Laravel v5. Из-за устаревшего ПО было сложнее работать с сайтом, и у программистов уходило больше времени на то, чтобы внедрить новый функционал.
Мы обновили стек до PHP 8.1 + Laravel v9 и Nuxt.js, заново написали код и оптимизировали структуру сайта.
Этапы работы:
В разделе webinar.ru/articles (теперь mts-link.ru/articles) лежит больше сотни статей. Раньше они хранились в файлах, которые могли создавать и редактировать только программисты, а сотрудники без технических навыков не могли управлять контентом. Теперь, благодаря новой админ-панели, контент-менеджеры могут самостоятельно создавать новые статьи или редактировать старые.
Мы сохранили внешний вид, а frontend и backend переписали на современные фреймворки с использованием компонентного подхода. На старом сайте все стили и скрипты хранились в общих файлах. Из-за этого внесение изменений в одном месте приводило к поломкам в другом. Кроме того, на каждой странице сайта загружались стили и скрипты с остальных страниц, из-за чего увеличивался вес страницы, которую загружает клиент. Сейчас у сайта нет таких недостатков, так как каждый компонент имеет собственные стили и скрипты, которые подгружаются только там, где это необходимо.
Мы взяли за основу готовое решение для создания «админок» от Laravel — пакет Laravel Breeze. Оставили базовый функционал (общий интерфейс и компоненты регистрации/авторизации) и добавили то, что нам нужно. В частности, разделы, которые часто меняются: тарифы, статьи, авторы статей.
Также функционал системы позволяет управлять лендингами на Tilda: находить нужные страницы, удалять их, редактировать текст. В задаче 4 подробно описали возможности новой системы для управления контентом на Tilda.
Замеры делали для страниц, которые чаще всего посещают: «Главная страница», «Тарифы», «Полезные статьи», «Преимущества платформы», «Функционал платформы». Новая версия сайта webinar.ru на Nuxt.js работала быстрее на 26% на всех устройствах, но мы хотели ещё улучшить показатели. Проанализировали возможные варианты доработок, учли рекомендации Google Page Speed и определили задачи:
Такой подход позволяет выполнять JS в фоновом потоке, что помогает основному потоку (обычно это пользовательский интерфейс) работать без замедления. Мы вынесли из основного потока внешние скрипты (аналитика, метрики, реклама, A/B-тестирование, трекеры и т. д.), что повысило его производительность.
Скорость загрузки страниц выросла, количество запросов сторонних скриптов на этапе загрузки страницы снизилось, производительность по оценке Google Page Speed увеличилась:
| Страница на ПК |
Производительность | Время загрузки первого контента |
|---|---|---|
|
Главная страница
– старая версия сайта
– новый сайт на Nuxt.js
|
7780 |
0,80,4 |
Тарифы– старая версия сайта– новый сайт на Nuxt.js |
7281 |
0,80,3 |
Полезные статьи– старая версия сайта– новый сайт на Nuxt.js |
8296 |
1,10,3 |
Преимущества платформы– старая версия сайта– новый сайт на Nuxt.js |
6293 |
0,80,3 |
Функционал платформы– старая версия сайта– новый сайт на Nuxt.js |
6193 |
1,10,3 |
| Страница на моб. устр-ах |
Производительность | Время загрузки первого контента |
|---|---|---|
Главная страница– старая версия сайта– новый сайт на Nuxt.js |
3444 |
2,71,5 |
Тарифы– старая версия сайта– новый сайт на Nuxt.js |
4166 |
2,41,1 |
Полезные статьи– старая версия сайта– новый сайт на Nuxt.js |
2349 |
3,61,0 |
Преимущества платформы– старая версия сайта– новый сайт на Nuxt.js |
2735 |
2,61,1 |
Функционал платформы– старая версия сайта– новый сайт на Nuxt.js |
2247 |
3,61,0 |
Подробную таблицу с показателями производительности страниц до и после переезда на Nuxt.js можно посмотреть по ссылке.
Подрядчик со стороны заказчика регулярно проводит аудит и составляет рекомендации по SEO. Их нужно оперативно внедрять.
Внедрение SEO-рекомендаций – это непрерывный процесс. Ниже мы перечислили несколько типичных задач, которые поставили SEO-специалисты.
Благодаря внедрению SEO-рекомендаций, выросла скорость загрузки страниц и улучшились позиции сайта в поисковой выдаче.
У клиента есть около 400 лендингов на Tilda под разные сегменты. Они проксируются на основной сайт с помощью NGINX. Благодаря этому пользователь не замечает переходов между основным сайтом и Tilda. Однако, если на стороне Tilda возникают проблемы, становятся недоступны все проксированные страницы. Также проксирование плохо влияет на SEO-продвижение.
Нужно было предложить другое решение. Вместо проксирования мы решили скачивать страницы Tilda и показывать их с сервера сайта webinar.ru (теперь mts-link.ru).
У конструктора Tilda есть API, которое запускает внешние механизмы после каждой публикации страницы. Мы разработали решение, которое получает сигнал от Tilda, скачивает изменённую страницу и размещает её на сервере с сайтом.
Теперь все лендинги редактируются в самой Tilda, а размещаются на сервере webinar.ru (теперь mts-link.ru). В административной панели есть интерфейс, с помощью которого можно управлять всеми страницами, в том числе лендингами на Tilda (задача 2). Он позволяет:
Также новое решение позволяет синхронизировать информацию — теперь изменения на Tilda отображаются на основном сайте. Сверка актуальных страниц, обновление информации и чистка удалённых на стороне Tilda страниц происходят по определенному расписанию. Но, если возникнет форс-мажор, обновить контент можно вручную одним кликом.
Для проекта Webinar.ru мы выбрали стратегию динамичного роста и развития. А чтобы реализовать задуманное, нам нужен был подрядчик, который бы смог постоянно закрывать пул работ – от автоматизации процессов до сложных задач по веб-разработке. Компания «Логема» отлично справляется с этой ролью: быстро формирует команду специалистов под текущие задачи. В таком темпе работаем с 2020 года: наш ИТ-отдел ставит задачи, ребята предлагают варианты, как сделать это быстрее и лучше для проекта.
Из последних задач хочется отметить оптимизацию работы с формами на сайте: ежедневно обрабатываются сотни клиентских запросов, даже небольшой сбой в работе сайта – риск потерять часть данных. Веб-разработчики «Логема» решили эту проблему с помощью специального шлюза с API. На очереди – завершить перенос сайта webinar.ru на Nuxt. Для пользователей – это ускорит загрузку сайта, для нас – сократит время на доработку его функционала в дальнейшем.
Отдельная благодарность Артёму Плотникову, Кириллу Пермякову, Алине Денисовой и Сергею Горелову.
