Два года мы помогаем клиенту развивать и поддерживать сайты в формате аутстаффинг. Подбираем специалистов из своих сотрудников для работы в проекте, а команда заказчика сама ставит задачи и контролирует сроки.
Webinar.ru — российская платформа для проведения вебинаров. C 2008 года она помогает компаниям России и СНГ проводить вебинары и конференции онлайн. Сейчас 10 000 клиентов платформы проводят 600 000 вебинаров в год.
Предоставить компетентную команду специалистов для оперативного решения задач по поддержке и развитию веб-сервисов, сайтов и лендингов заказчика. Обеспечить отказоустойчивую работу площадок для сбора лидов и устранить технический долг в проекте.
1. Разработать интеграционный шлюз на Laravel для роутинга лидов из форм в CRM и прочие маркетинговые системы.
2. Перенести сайт на современный веб-стек Nuxt.js с сохранением дизайна.
3. Применение рекомендаций по SEO-оптимизации.
4. Документирование кода и устранение технического долга.
5. Автоматизировать обновление контента на сайте Webinar.ru с Tilda.
Nuxt.js, PHP 8.1, Laravel v9.
Заявки клиентов поступают из нескольких источников данных:
Основной сайт (webinar.ru);
100500 лендингов на Tilda;
Email-рассылки;
Группа Вконтакте.
Далее заявки попадают в один из приемников данных:
CRM;
Платформа с ПО для проведения вебинаров;
Сервис email-рассылок;
Любой другой сервис для работы с клиентами.
Из-за большого количества разных источников данных, а также периодических смен сервисов, которые работают с данными, заказчик тратил много времени на изменения настроек форм на всех платформах и во всех системах. Например, подключение сервиса email-рассылок требовало вручную изменить настройки каждой формы с подпиской на рассылку на всех страницах Tilda.
Клиент нуждался в системе, которая бы позволила быстро подключать новые источники данных и новые сервисы – в качестве приемников данных и для их промежуточного хранения на случай обрыва связи, чтобы данные были доставлены после восстановления связи. Это помогло бы отслеживать статистику и получать информацию по новым запросам, даже при нестабильной работе источников и приемников.
Мы разработали интеграционный шлюз на базе фреймворка Laravel с API и веб-интерфейсом для администратора. Шлюз выступает посредником между источниками и приемниками данных. Он хранит в сыром виде полученные данные, обрабатывает их и приводит к формату, который требуют приемник. Шлюз обеспечивает надежную асинхронную доставку данных: он знает, какой это источник или группа источников и куда должны передаваться данные.
Таким образом, данные из всех форм на всех площадках заказчика от клиентов стекаются и накапливаются в одном месте — шлюзе. Данные не пропадут, если одна из систем обработки запросов будет недоступна. Благодаря системе очередей, после восстановления работы сервиса-приемника, данные дойдут до адресата. Например, если CRM перестанет работать, заявки не исчезнут, а будут доставлены, как только CRM возобновит работу.
Схема обработки заявок: при стабильной работе систем и при сбое.
Использование шлюза упростило работу со статистикой, так как все данные находятся в одном месте. Можно быстро посмотреть данные из разных источников, проанализировать их или выгрузить детальную информацию.
Лидеру на рынке сервисов для онлайн-мероприятий важно поддерживать стабильную работу при любом количестве посетителей.
Для быстрого реагирования на ошибки мы создали быструю систему оповещения. Систему уведомлений интегрировали с мессенджером Slack. Когда у клиента возникает проблема с заполнением формы, происходит поломка внешнего сервиса или другие непредвиденные ошибки, – уведомления об этом приходят в канал в Slack. Сюда же поступают ежедневные и еженедельные отчеты о работе шлюза.
На уведомления быстро реагируют сотрудники Webinar и Логемы. Это позволяет не терять данные и сохранять положительный пользовательский опыт.
Пример уведомлений в общем канале в Slack.
Сайт клиента был создан на устаревшем ПО и содержал много устаревшего кода. Это затрудняло доработку сайта и увеличивало время на разработку нового функционала. Нужно было сократить время загрузки сайта и уменьшить трудозатраты на доработки.
Сайт был разработан на PHP 5.4 + October CMS, основанную на Laravel v5. Мы обновили сайт до PHP 8.1 + Laravel v9 и Nuxt.js.
Полностью переработали старый сайт и избавились от устаревшего кода:
пересмотрели архитектуру сайта: как связаны между собой страницы сайта и контент;
разбили повторяющиеся части на шаблоны и компоненты;
организовали удобную систему редактирования часто изменяющихся частей.
Теперь клиент может самостоятельно изменить контент на сайте без помощи программистов.
Пример добавления статьи на сайт через новую систему редактирования контента.
Запуск новой версии сайта на днях. Как запустим и сделаем замеры – дополним выводу по проекту.
Подрядчик на стороне клиента – компания iConsult Agency, они регулярно проводят аудиты и составляют рекомендации по продвижению сайта в поисковых системах. Их нужно оперативно внедрять.
Внедрение SEO-рекомендаций – это непрерывный процесс. Ниже мы перечислили наиболее крупные и интересные технические задачи.
1. Все изображения сжали в формат WebP. Это сократило время загрузки страниц сайта.
2. Создали системы автоматической генерации карты сайта. Это помогает поисковым системам правильно индексировать страницы.
Пример автогенерации карты сайта для поисковых систем.
3. Добавили системы генерации JSON-разметок для статей в блоге. Это улучшило их поисковое продвижение.
Пример JSON-разметки для хлебных крошек.
4. Внедрили разметку Open Graph. Теперь сайт лучше выглядит при расшаривании в соцсетях.
Внедрение рекомендаций ускорило загрузку сайта и повысило его позиции в поисковых системах.
В проекте отсутствовала документация к старому коду. Новым разработчикам приходилось тратить много времени, чтобы вникнуть в работу проекта. Документирование кода решило бы эту проблему, упростило работу программистов и сократило количество ошибок.
Мы регламентировали работу над проектом. Неотъемлемыми этапами стали – «разработка проектной документации», которая описывает поведение и детали реализации система, а также «документирование кода». В процессе рефакторинга и устранения технического долга, мы снабдили ответственные части проекта комментариями, а также разработали базу знаний о работе проекта.
Соблюдение регламента работы над проектом обеспечивает прозрачность для заказчика – понятно на каком этапе находится задача, что будет дальше и что уже сделано. Все задачи ведутся в Youtrack, каждому этапу соответствует свой статус.
Жизненный цикл задачи.
Теперь код на новом сайте задокументирован, описаны классы, методы и отдельные блоки кода в формате PHPDoc.
Пример структурирования кода на сайте.
Имеется база знаний по проекту, которая содержит описание работы проекта и ответы на распространенные вопросы. В частности: “Как развернуть проект новому программисту”.
Клиент использовал конструктор Tilda для создания посадочных страниц под разные сегменты клиентов. Всего больше 400 страниц. Все страницы размещены на серверах Tilda и проксируются на основной сайт с помощью NGINX. Таким образом, пользователь не замечает переходов между основным сайтом и Tilda. Однако, если на стороне Tilda возникают проблемы, разом становятся недоступны большое количество проксированных страниц.
Вдобавок проксирование плохо влияет на SEO-продвижение таких страниц. Посадочные страницы были на поддомене lp. Страницы поддомена lp проксировались на основной домен. Поисковые системы могли принять это за умышленный обман, так называемый клоакинг. Чтобы избежать санкций поисковых систем, надо было разместить html код на адресах страниц основного сайта (webinar.ru) и убрать проксирование.
У конструктора Tilda есть API, который позволяет запускать внешние механизмы после каждой публикации страницы на стороне Tilda. Мы разработали механизм, который получает сигнал от Tilda, выкачивает измененную страницу и размещает её на сервере с сайтом.
В административной панели мы создали интерфейс для удобного управления всеми страницами, которые перенесены на серверы Webinar.ru. Это позволяет:
отслеживать статус;
управлять данными страницы;
быстро находить страницу на Tilda по ключевым словам;
переходить в интерфейс редактирования нужной страницы в Tilda нажатием одной кнопки;
быстро синхронизировать контент страниц Tilda с Webinar.ru;
удалять устаревшие страницы со своих серверов.
Интерфейс страниц Tilda в админке Webinar.ru.
Пример управления страницами Tilda через сервер Webinar.ru.
Также по расписанию происходит сверка актуальных страниц, обновление и чистка удаленных на стороне Tilda страниц.