Видео-виджет для сайтов
Разработка собственного сервиса для создания видео-виджетов для сайтов. Инструмент интернет-маркетинга, призванный увеличить уровень конверсии веб-сайтов.
Видео-виджет для сайтов
Разработка собственного сервиса для создания видео-виджетов — нового трендового инструмента интернет-маркетинга, призванного увеличить конверсию веб-сайтов
Технологический стек
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/