Видео-виджет для сайтов
Технологический стек:
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/, а пример использования такого виджета — доступен на этой странице.
Поделиться
Share on vk
Share on twitter
Share on facebook
Share on telegram
Share on whatsapp