timer ~ 13 мин читать
41403 просмотры
оценить
06 июля 2018

Как встроить видео в сообщение с помощью Stripo

Stripo / Blog / Как встроить видео в сообщение с помощью Stripo

В предыдущей статье мы рассказали о том, что видео в сообщениях может повысить CTR на 85%, и вероятность покупки повышается на 65% после просмотра видео о продукте. Следовательно, видео помогает улучшать бизнес.

Тогда почему такое большое количество маркетологов избегают видео в рассылках, и эта тема вызывает столько противоречий? Ответ очень прост – видео в сообщениях должно быть уместным и своевременным. И тогда видео принесет свои плоды.

Stripo-How-to-Embed-Videos-in-Emails-Embedded-Example

Мы покажем, как встроить видео в сообщение с помощью Stripo и лучшие примеры использования видео в сообщениях.

Как встроить видео в сообщения

Вы ведь  именно за этим сюда и пришли: узнать о способах встраивания видео в нашем редакторе.

На данный момент, их всего 2:

  1. Вставить ссылку на видео;
  2. Встроить видео в HTML5.

Начнем с первого способа.

1. Вставить ссылку на видео

Наиболее простой и самый удобный способ – именно вставить ссылку на видео. Его также принято считать надежным. И это на самом деле так.

Почему? Потому что вы просто вставляете ссылку. Она весит мало. К тому же, ссылки поддерживаются всеми почтовыми клиентами. В то время как встроенное МР4 видео поддерживается только Apple iPhone, Outlook (2011 и 2013) на Mac OS и последними версиями iPhone (7 и выше).

Так как же вставить ссылку на видео в редакторе Stripo:

  • во-первых, вам нужно войти в меню Блоков и выбрать базовый блок «Видео»;

Stripo-Embed-Video-Blocks

  • потом перетащите его в шаблон. Как только вы это сделали, вам нужно кликнуть левой клавишей мыши на этот блок в самом шаблоне. После чего в панели настроек у вас появятся 2 поля для заполнения;

Stripo-Embed-Video-Inserting-Links

  • вставьте ссылку на видео (помните о соблюдении авторских прав). Хорошая новость заключается в том, что вам нужно вставить только ссылку на видео из Youtube или Vimeo, а наш редактор автоматически подтянет такие необходимые данные, как alt текст и превью-изображение. Подробнее о том, как alt текст помогает пройти фильтры антиспам;
  • выберите цвет кнопки воспроизведения. Очень важно, чтоб она контрастировала с превью-изображением. Именно по этой причине, в Stripo можно выбирать цвет кнопки из: белого, черного и традиционного красного; 

Stripo-Embed-Video-Play-Button

  • установите ширину превью-сообщения. По умолчанию, задана ширина в 600 px, но, при желании, вы можете изменить либо ширину, либо высоту изображения. А второй параметр меняется автоматически.

Stripo-Embed-Video-in-Emails-Video-Width

Изменить высоту или ширину изображения, чтоб она идеально вписывалась в дизайн всего сообщения, вы можете, кликнув на кнопку «размер».

Кликнув на кнопку «по ширине», вы вернетесь к размеру «по умолчанию».

Готово! А вот так мое сообщение после экспорта выглядит в папке «Черновики»:

Stripo-Embed-Videos-Inserted-Links

А эта ГИФка покажет, как встроить видео из Youtube в ваше сообщение:

Проделав эти простые шаги, вы также легко можете вставить видео из сайта Vimeo.

2. Встроить видео в HTML5

Почему мы сказали HTML5? Потому что только HTML5 поддерживает встроенные интерактивные элементы, включая видео формата МР4.

Что такое интерактивный элемент? Это тот элемент, который может быть воспроизведен, отредактирован прямо в сообщении. Он требует взаимодействия с получателями. Звучит достаточно трендово.

Stripo-Embed-Videos-Embedded-one

Прежде чем встраивать интерактивное видео, нам нужно получить код.

Как мы уже сказали, только следующие почтовые сервисы поддерживают HTML5: Outlook для Mac OS, 2011 и 2013, Apple Mail (при просмотре сообщения только на MacBook, iPad и iPhone, начиная с 7, так как ранние модели не поддерживают  HTML5).

По данным Litmus, 27,6% и 8,5% емейл-пользователей предпочитают Apple iPhone и Apple Mail соответственно. А это значит, что только третья часть ваших подписчиков сможет посмотреть видео прямо в сообщении. В то время, как другие, а это 67%, даже и знать не будут, что в письме должно быть видео, потому как почтовики просто удалят весь блок с видео, в силу того, что не смогут корректно его отобразить.

Так как же быть? Как доставить видео всем подписчикам? Выход, конечно же, есть – мы предоставим вам код, в котором будет МРН4 видео для владельцев продукции Apple, и замена для всех остальных.

Наш волшебный код:

<video poster="https://iiqf.stripocdn.email/content/guids/cab_pub_7cbbc409ec990f19c78c75bd1e06f215/images/Present_Gift_Box_Red_with_Yellow_Bow2_Christmas_New_Year.png" controls="controls" width="100%" height="176">
	<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
 
	<a href="https://www.youtube.com/watch?v=qseKF5NerCU">
		<img src="https://iiqf.stripocdn.email/content/guids/cab_pub_7cbbc409ec990f19c78c75bd1e06f215/images/Present_Gift_Box_Red_with_Yellow_Bow2_Christmas_New_Year.png" width="320" height="176">
	</a>
</video>

В данном коде 2 первые ссылки — это ссылки к превью-изображению и к видео формата МР4, предварительно загруженное на сторонее файлохранилище или на ваш вебсайт. Ссылки из Youtube и Vimeo здесь не сработают.

Вторые 2 ссылки, которые идут после <a href= — это замена, в ней ссылка на Youtube и превью-изображение.

Благодаря столь нестандартному способу, все наши подписчики получат видео в письме: первая часть кода для тех, кто использует устройства MacBook, iPhone и почтовики Outlook Apple Mail, а вторая — для всех остальных.

Итак, как же встроить МР4 видео в сообщения с помощью редактора Stripo:

  • перейдите во вкладку «Блоки» и выберите базовый блок “HTML”;

Stripo-Embed-Videos-HTML-block

  • перетащите его в шаблон, после чего вы увидите:

Stripo-Embed-Videos-HTML-Editor

  • кликните на выделенный элемент и просто вставьте встраиваемый код (с вашими ссылками);

Stripo-Embed-Email-HTML-Code-Editor

  • HTML код всего блока будет выглядеть следующим образом:

Stripo-Embed-Video-in-Email-Embedded-Code

  • левой клавишей мыши кликните на любой блок в шаблоне. Готово!

Примечание: если вы применяете автовоспроизведение (в нашем коде оно не предусмотрено), то, пожалуйста, убедитесь, что звук видео выключен. Большинство ваших пользователей просто не ожидают услышать громкую музыку при открытии сообщения.

Я протестировала созданный нами код, и вот какие результаты я получила:

а) как видео должно было выглядеть в письме:

Stripo-Embed-Video-Plan

б) то, что я получила в Gmail:

Stripo-Embed-Emails-Fallback

Встроенного МР4 видео там не было, но у меня сработала замена с видео из Youtube. Но даже у этой замены есть маленький недостаток – только кликнув на картинку, я увидела ссылку на видео. А как вашим пользователям догадаться об этом? Пусть на вашем превью-изображении будет нарисована кнопка “play”.   

Примечание: В Apple Mail и Outlook все работало корректно.

7 вдохновляющих идей по использованию видео в емейл-сообщениях

Для начала я хочу напомнить, что видео должны быть высококачественными и с высоким разрешением. А сделать его интересным и уместным – это уже второстепенная задача.

1. Оживляем приветственные сообщения

В приветственных сообщениях мы, как правило, здороваемся с новичками, говорим им, что бесконечно счастливы, что они присоединились к нам, а также можем кратко поведать историю бренда. Некоторые компании даже в первом экране размещают фото СЕО. И все это прекрасные идеи.

Но почему бы не вставить короткое приветственное видео, где этот же СЕО лично здоровается с подписчиками?

Если вы тех компания, то вам можно в приветственных письмах отправлять видео инструкцию по пользованию вашим продуктом.

Stripo-How-to-Embed-Videos-Infogram

Совсем недавно я подписалась на рассылку компании GetResponse. Мы ведь все знаем, что они мастера в проведении вебинаров. Они помогают разослать приглашения, с цепляющим текстом, эффективные напоминания о предстоящем вебинаре, после просят оставить отзыв о прошедшем мероприятии. И, конечно же, предоставляют платформу непосредственно для самого вебинара.

Но при этом в GetResponse норовят впечатлить новых пользователей цифрами, подтверждающими эффективность вебинаров. Вот они и решили: а почему бы не сделать это с помощью видео в письмах?

Stripo-How-to-Embed-Video-in-Emails-Webinars-Tutorial

2. Делаем приглашение на событие более информативным

Мы уже сказали достаточно много о вебинарах, ведь на данный момент это самый востребованный тип онлайн событий.

Для того, чтоб подписчики регистрировались на вебинар, вам нужно их заинтересовать – поведайте им, о чем же будет речь на вебинаре, какие конкретно вопросы будут подниматься и как вы можете помочь. Наиболее верный способ сделать это – добавить в сообщение видео с описанием и подробным планом предстоящего мероприятия.

Stripo-How-to-Embed-Videos-in-Emails-Invitation

Больше всего в этом примере мне понравилось то, что дополнительно компания предоставила краткую информацию о вебинаре на случай, если  получателя не располагает временем смотреть видео.

3. Добавляем эмоции в промо рассылки

Когда слов недостаточно, чтоб описать всю красоту и величие вашего продукта – на помощь приходят фотографии.

В примере ниже 2 фотографии, демонстрирующие, как Porsche разъезжает по дорогам Европы и США. На даже этих фото недостаточно, чтоб показать, как прекрасна машина в езде и управлении. Именно по этой причине под фото вставили видео.

Stripo-How-to-Embed-Videos-Porshce

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

4. Поздравляем покупателей по-особенному

Существует масса причин, по которым мы связываемся  с нашими покупателями. Но поздравления – это особенный повод и всегда отличная идея.

Само собой разумеется, что поздравить подписчиков с Рождеством крайне важно. Но это делают все. Почему бы не поздравить и не поблагодарить их в день рождения ВАШЕЙ КОМПАНИИ с помощью видео?

Stripo-Embed-Video-in-Emails-Greeting-Video

Кстати, для этого вы можете воспользоваться нашими «Благодарственными» шаблонами писем.

5. Предвкушение с помощью трейлеров

Совершенно недавно мы опубликовали статью об эффективных «сообщениях-тизерах». В ней мы рассказали, что с помощью тизеров можно эффектно анонсировать запуск продукта, его обновление или предстоящее событие. Каналу National Geographic удалось объединить и то, и другое – начало нового сезона в сентябре, и запуск продукта – нового ТВ шоу. Видео трейлер был просто идеальным решением.

Stripo-How-to-Embed-Videos-in-Emails-National-Geographic

6. Делаем видео своей фишкой

Пожалуйста, внимательно на приведенные ниже примеры рассылки от Porsche – у них видео встроено в абсолютно каждое сообщение.

Мне очень нравится то, что видео никогда не повторяется. Видео 1 информативное. Не посмотрев его, вы бы никогда не догадались, почему серия 911 называется именно так.

Stripo-Embed-Video-Porsche-Series

Видео 2 забавное. Парень, водитель автомобиля, вынужден постоянно латать дырки в правой туфле, которые возникают в результате постоянного вождения.

Stripo-Embed-Video-Porche-Funny-Series

Фишка Porsche заключается в том, что они никогда не предлагают «купить» у них что-то (кроме маек и кепок для гольфа). Они просто пробуждают в пользователях желание владеть автомобилями марки Porsche, демонстрируя их в работе. Но, конечно же, меню в их сообщениях есть.

Примечание: не всем компаниям подойдет эта методика. Если вы продаете носки или шампунь, то, все-таки, призыв к действию «купить» нужен.

7. Знакомим со своим продуктом

Когда вам нужно разрекламировать свой новый продукт, слов порой бывает недостаточно, чтоб его описать. Либо в силу его нестандартных функций, либо же потому что это может занять очень много места, а много текста читать никто не будет. И тут нам на помощь снова приходит видео.

Stripo-How-to-Embed-Videos-Product

Анимированные GIF как альтернатива видео в сообщениях

Это правда. Если вы решили добавить в сообщение видео, но не располагаете материалом, вы можете просто вставить гифку. Анимации поддерживаются всеми почтовиками и открываются на любых устройствах, поскольку они воспринимаются как картинки. Впрочем, GIF это и есть изображение. Еще одна польза гифок в том, что ваши покупатели однозначно их посмотрят, так как первые не требуют никаких действий со стороны получателей и воспроизводятся автоматически при открытии сообщений.

В случае, если вы хотите привлечь внимание к видео, то вы можете анимировать кнопку воспроизведения.

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

И все!

Примечание: конечно же, здесь нужно смотреть по ситуации, что и когда лучше использовать — видео или GIF.
Безусловно, для приветствия и поздравлений лучше использовать видео. А для демонстрации большого перечня товаров можно использовать GIF.

Инструменты для создания/редактирования видео

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

Camtasia один из лучших инструментов для создания тьюториала и скринкаста. Он даже предоставляет библиотеку музыкальных треков, а также у вас есть тех возможность озвучить видео голосом. Видео можно сохранить как в формате МР4, так и в формате GIF. Нет времени сохранять видео? Тогда экспортируйте его в Google Docs или сразу на ваш Youtube канал;

Adobe After Effects для анимирования текстов. На самом же деле, он как Photoshop для видео. Вы даже можете “разгладить морщинки” на одежде.

Тема письма

Согласно данным HubSpot, упоминание “видео” в теме письма улучшает Open Rate аж на 19%. Но в приветственных сообщениях это делать вовсе необязательно, поскольку у них и без того самые высокие показатели.

Stripo-Embed-Video-Subject-line

Вывод

  1. Видео очень важный в сообщениях элемент. Добавляя его в рассылку, вы увеличиваете такие показатели как CTR и CTOR, информируете читателей о плане предстоящего мероприятия, удерживаете их внимание развлекательными видео, как это делает Porsche, и, что не менее важно, предоставляете подробную инструкцию по использованию вашего продукта.
  2. Упоминание о “видео” в теме письма носит рекомендательный характер.
  3. На данном этапе есть 2 способа встроить видео в сообщение. У каждого из них есть свои “плюсы” и “минусы”. Абсолютно безопасный метод — вставить ссылку на видео. Он поддерживается всеми почтовиками. К тому же, Youtube предоставляет подробный отчет о количестве просмотров, лайков, об общем времени просмотра видео, о том, какой момент в видео наиболее интересен вашим пользователям, и также об их геолокации.
    Встраивание видео — второй прекрасный метод. Он прекрасен тем, что читатели смотрят видео прямо в сообщении. Чем дольше они остаются в “сообщении”, тем больше шансов, что они решать приобрести тот или иной товар именно у вас.
  4. GIF отличная альтернатива видео в сообщениях.
  5. Самое главное — видео должно соответствовать теме письма и быть крайне полезным для ваших пользователей. Его максимальная длина менее 60 секунд. Это правило не касается инструкций.

Мы искренне надеемся, что вы сочтете эту статью полезной и информативной. А также, что вы обязательно вставите видео в шаблоны сообщений.

Искренне желаю вам удачи!

Koenraad Moreau 11 месяцев назад

Thank you for this article. Is it possible to add an i-frame of a Spotify song ? Thanks in advance.

Hanna Kuznietsova прокомментировал Koenraad Moreau 11 месяцев назад

Koenraad Moreau, Hello. Thank you for your comment and for the question. Unfortunately, email clients do not allow i-frame in emails. They just remove it from emails, or else just don't show the entire email to recipients. Currently, you may only add in emails the shared link to a Spotify song.

Denis Kalinichenko 2 года назад

Nice article!

Hanna Kuznietsova прокомментировал Denis Kalinichenko 2 года назад

Denis, Thank you very much :) We're glad you liked this blog post.

Вас также может заинтересовать

Предыдущие статьи Следующие статьи
banner9
06 июня · 15 мин читать
ТОП-10 email-редакторов 2022 года

Все конструкторы email-шаблонов для вас на одно лицо? И вы затрудняетесь с выбором подходящего инструмента для своих кампаний, верно? Неудивительно, ведь их очень много. Мы сделаем обзор самых популярных конструкторов, чтобы выделить их отличительные особенности и помочь вам найти наилучший HTML-редактор шаблонов для ваших текущих потребностей. Я попробую создать одинаковый шаблон с одними и теми же медиафайлами во всех редакторах, чтобы увидеть, чем отличаются эти инструменты. Лучшие конструкторы email-шаблонов Для нашего обзора мы выбрали такие редакторы: Stripo, HubSpot, Campaign Monitor,...

Дизайн Маркетинг Шаблоны
24 мая · 18 мин читать
Лучшие шрифты для рассылок: советы и хитрости

Одна из самых серьезных проблем при создании электронных писем — правильно выбрать шрифт. Вес, высота, ширина, цвет, форма, интервал… Все ли здесь имеет значение? Да, важно все, но самое главное — выбрать читабельный шрифт. В этой статье мы расскажем, как выбрать лучший профессиональный шрифт для рассылки. Создавайте элегантные письма с помощью Stripo в кратчайшие сроки, используя наши готовые шаблоны Ознакомиться   Шрифты HTML-писем: основные правила, которые нужно соблюдать При выборе оптимального шрифта следует учитывать три базовых правила: 1. Не используйте более двух шрифтов...

Дизайн Шаблоны
Greatest Examples of GIF animations in Emails_Cover Image
27 октября 2021 · 10 мин читать
Гиф-анимации в письмах: 16 лучших примеров

Гифки отлично будут смотреться в ваших письмах, если вы хотите продемонстрировать продукт, привлечь внимание пользователей к какому-либо элементу письма или же просто ненавязчиво украсить текст. В этой статье мы представили лучшие примеры гиф-анимаций в рассылках. Примеры GIF в письмах В этой подборке собраны лучшие примеры использования GIF в письмах, где каждая анимация выполняет свою миссию. 1. Adidas (Источник: рассылка от Adidas) Adidas использовал анимацию в письме, чтобы показать, в каком еще цвете доступен данный товар. Выглядит аккуратно и просто, но при этом...

Дизайн Маркетинг
08 апреля 2021 · 17 мин читать
Дизайн подписи в письмах: 14 лучших примеров

Хорошие подписи в письмах помогают нам развивать бизнес и производить хорошее впечатление на клиентов. И поскольку это последний элемент, который люди видят в письмах, нам нужно сделать подписи креативными и запоминающимися. Давайте рассмотрим лучшие примеры подписей и их правильное использование в письмах и шаблонах рассылок. Стоит отметить, что профессиональные подписи с подробной контактной информацией нужны для любого бизнеса. Используйте этот шаблон, чтобы создавать подписи для рассылок быстрее Использовать Такой пример подписи хорошо подходит для юридических консультаций, банковского дела и т.д....

Дизайн Маркетинг Шаблоны
Будьте всегда в курсе последних новостей в области email-маркетинга!