Видео-виджет для сайтов

Технологический стек:

• Backend: PHP (Yii2), MySQL
• Frontend: Typescript (React, react-shadow)

В 2021 году появился новый трендовый инструмент интернет-маркетинга – видеовиджеты. Данный инструмент призван увеличить уровень конверсии веб-сайтов благодаря сразу нескольким факторам:

• Видео-отзывы и анонсы имеют сильное эмоциональное воздействие на посетителя сайта
• Видео-виджет позволят персонализировать сайт и увеличить уровень доверия со стороны потенциальных клиентов
• Новый способ выделиться среди конкурентов. Сейчас, когда все веб-сайты стали максимально похожими друг на друга в угоду удобства пользователя крайне важны решения, которые позволят сделать сайт запоминающимся. И видео-виджет – это одна из таких возможностей.
• УТП и привлечение внимания. Скорость взаимодействия пользователей с веб-сайтами с каждым годом продолжает увеличиваться. Зачастую посетитель сайта даже не пытается изучить тот текст, что представлен на сайте. В данном случае, видео-формат УТП позволяет значительно лучше донести до посетителя основные тезисы.

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

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

• Конвертация видео. Казалось бы – довольно тривиальная задача, которую любой пользователь без труда может выполнить на ПК или мобильном устройстве. Но стоит учитывать, что при использовании онлайн-сервиса, пользователь может указать некорректные настройки при конвертации видео, что, в свою очередь, может привести к большому размеру загружаемого файла. И даже, если при тестировании, виджет отображается корректно, это совершенно не означает, что при просмотре сайта используя мобильный интернет, видео в виджете будет загружаться также плавно. Также, пользователь может загрузить видео в формате, который не поддерживается тем или иным браузером (в особенности: Apple Safari и Firefox для Android). Поэтому, в обязательном порядке, каждый видео-ролик, который был загружен в личном кабинете должен быть оптимизирован с помощью конвертации на стороне нашего сервера. Работа с видео – это довольно ресурсоёмкий процесс, поэтому для решения такой задачи мы выделили отдельный сервер обработки видео с регулируемым объемом ресурсов. Такой подход позволит сохранить время на процесс обработки видео неизменным, даже в случае пиковой нагрузки, когда одновременно видео решили загрузить сразу несколько пользователей. В тоже время, такой подход позволит исключить издержки на содержание сервера с излишними вычислительными мощностями.
• Разработка CDN. Возможность загрузки довольно длительных видео-роликов обуславливает необходимость наличия большого хранилища данных. Изначально мы планировали использовать S3-хранилища от известных провайдеров. При этом, для обеспечения плавной загрузки видео и соблюдения законодательства, необходимо было выбрать провайдера с дата-центрами на территории РФ. К сожалению, отечественные провайдеры за подобные услуги называют довольно высокую цену. Поэтому, изучив вопрос, нами было принято решение реализовать собственный CDN-сервер, который позволит управлять загрузками, передавать файлы к и от сервера обработки, а при заполнении дискового пространства, автоматически изменять тариф сервера-хранилища или же переключать обработчик на новое хранилище. Разработка собственного CDN-сервера позволила сократить наши расходы на организацию хранилища видео-роликов более чем на 20%.

Спустя неделю после начала работ, в свет вышла первая версия нашего сервиса, которая имеет следующий функционал:

• Личный кабинет
• Загрузка и оптимизация видео-файлов
• Настройка дизайна (цвета) виджета
• Добавление CTA-кнопок. При этом кнопки могут как вести на какую-либо страницу, так и вызывать JavaScript-событие, что позволяет конечному пользователю реализовать совершенно любой функционал при нажатии на CTA-кнопку
• Интеграция с сервисами аналитики Яндекс Метрика и Google Analytics. Наш сервис может передавать в сервисы аналитики информацию о следующих событиях:
  • Виджет полностью загрузился;
  • На видео кликнули;
  • Видео наполовину посмотрели  (видео проигралось на половину, а виджет был развернут в это время);
  • Видео полностью просмотрено  (видео проигралось полностью, а виджет был развернут в это время);
  • Нажатие на CTA-кнопку;
• Просмотр подробной статистики взаимодействия с виджетом в личном кабинете.

Так как сервис был изначально разработан для внутреннего использования и мы не закладывали в него какой-либо коммерческой составляющей, было принято решение сделать сервис общедоступным.

Вы можете ознакомиться с сервисом “Видвиджет” более подробно на сайте проекта: https://vidwidget.ru/, а пример использования такого виджета – доступен на этой странице.