№43 Как разместить кнопки в «теле» письма

В прошлый раз мы занимались сегментацией подписчиков по географии. Сегодня поговорим о содержании/контенте писем.
Безусловно, контент стоит подавать красиво:
в фирменном шаблоне и стиле.
Одним из элементов, который помогает здорово оживить и украсить письмо (а также повысить количество кликов), являются кнопки.

Согласитесь, есть разница:

Однако здесь не обойтись и без сложностей. Как видео и опросы, кнопки можно отнести к интерактивному контенту. В идеале хочется видеть их объёмными, кликабельными и реагирующими на щелчок пользователя — так же, как на сайте:

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

Впрочем, в запасе у нас как всегда есть парочка обходных путей:)

 

-

Как вставить кнопку в письмо

#1. Разместить кнопку картинкой

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

Вставляем картинкой в нужное место письма:

Для почтовых клиентов, которые по умолчанию могут не загружать картинки (например, gmail), страхуемся: прописываем в html-коде изображения стили фона и шрифта, а также alt-текст:

<img alt=“Перейти к консультации” height=“38” src=“http://image.png” style=“font: Bold 16px Verdana, Tahoma, Arial, Helvetica, sans-serif; color: #43708d; background-color: #ffffff;” width=“201”>

 

Тогда в отсутствие картинки кнопка тоже будет смотреться приемлемо:

“Подкладываем” под картинку нужную ссылку и добавляем последний штрих — атрибут title.

Пусть при наведении на кнопку подписчику демонстрируется небольшая подсказка, что именно произойдёт, если он кликнет на изображение:

Достоинства этого способа: вы можете вставить в письмо любую, сколь угодно “навороченную” графически кнопку.

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

 

#2. Разместить кнопку таблицей

Кнопку в письме можно сверстать “классическим” html-кодом.
Для этого просто создаём её, как ячейку во вложенной таблице. Для ячейки прописываем цвет фона, обрамление границей, стиль/размер/цвет шрифта:

<table border=“0” cellpadding=“0” cellspacing=“0” style=“background-color: #ff9112; width: 220px; border-collapse: collapse;”>
<tbody>
<tr>
<td style=“border-collapse: collapse; border-spacing: 0; font-family: ‘Trebuchet MS’, sans-serif; font-size: 18px; text-align: center; color: #FFFFFF;  text-shadow: 1px 1px 0 #ff9444; border: 1px solid #e25500; padding: 13px;”>
<a href=“http://link.ru” style=“text-decoration: none; color: #FFFFFF;” target=“_self”>Зарегистрироваться</a></td>
</tr>
</tbody>
</table>

 

В итоге получается совсем неплохо:

Такую кнопку удобно редактировать: поменять цвет, вписать другой текст (не забываем про ссылку с атрибутом title, чтобы расшифровать подписчику действие кнопки).

Таблица гарантированно отобразится во всех почтовых клиентах. Её достаточно просто можно адаптировать под мобильные устройства (можно задать ширину таблицы в % от ширины экрана).

Но графические возможности здесь беднее.
Скругление углов, градиент фона, затейливые шрифты — все эти и прочие “надстройки” усложнят вёрстку и сделают её отображение в разных почтовых клиентах нестабильным.

Какой способ предпочтительнее? Здесь нет 100% верного ответа, многое зависит от шаблона, который вы собираетесь использовать.

Если дизайн шаблона подразумевает простые и “строгие” кнопки, удобны таблицы. Если же кнопка состоит сплошь из графических изысков, то проще будет использовать вставку картинкой.

 

-

Кнопки в Мэйл Чимп

Графический редактор MailChimp (Drag&Drop) предусматривает возможность автоматической вставки кнопок:

Кнопки, которые предлагает MailChimp, простые и несколько однообразные, но работать с ними удобно.

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

Мэйл Чимп использует в этом случае метод таблицы, однако выполняет всю рутинные операции по вёрстке за пользователя — стоит “перетащить” блок с кнопкой на поле письма, как готовый html-код будет встроен туда автоматически.

Дополнительная возможность — кнопки расшаривания социальных сетей:

 

Они также снабжены достаточно гибкими настройками (набор социальных сетей, оформление, расположение и тип кнопок).

Правда, пока в наличии только кнопки западных соцсетей (Facebook, Twitter, Google+ и проч.). Вставить, к примеру, кнопочку Вконтакте или Одноклассники с помощью этого функционала нельзя.

 

-

Заключение

Кнопки могут украсить ваше письмо. Правильно оформленная и размещённая кнопка поможет приподнять и клики.

Однако надеяться, что это “волшебный” рецепт увеличения кликабельности в 2-3 раза, не стоит. Решающую роль в email маркетинге всё-таки играет контент ваших писем. Если предложение подписчика не заинтересует, никакая сила не заставит его сделать клик мыши, даже если всё ваше письмо будет одной сплошной кнопкой :-)

 

P.S. В следующей статье побольше поговорим о Мэйл Чимп. Посмотрим, как работать с тегами в этом рассылочном сервисе, создавая персонализацию и динамический контент.

 

P.P.S. Если вы ещё не подписались на мою рассылку — самое время это сделать. Я не только анонсирую свежие статьи блога, но и делюсь с подписчиками бонусной информацией, а также показываю отдельные приёмы email маркетинга на практике. До встречи в вашем почтовом ящике! :-)

 

 


  • Тима

    Мы своих товарных рассылках тестировали кнопки:цвет, размер, положение — результаты большой разницей не отличались, а потом решили просто их убрать и сделать кликабельным текст с style=»text-decoration: none. Так вот, кликабельность возросла на 20% причем самым кликабильным местом оказалась не картинка или заголовок, а текст — текст описания!! Вот куда смотрят наши подписчики и куда кликают. Так что, вперед и с песней на тесты :)

    • Alexey Efimov

      Интересный опыт.

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

      Однако, безусловно, вы правы) Тестировать стоит разные варианты — и результаты во многом будут зависеть от базы и текущей ситуации.

  • Nikita Lyalin

    Алексей, уже месяц от вас ничего нет.
    У вас отпуск?

    • Alexey Efimov

      День добрый! Летом реже пишу. Скоро будет)

      • Nikita Lyalin

        Ок, мы ждём )

  • Жив здоров? :) «The mailbox you are trying to reach is over quota.»

  • Будет ли обзор новой фичи Automation от MailChimp?

    • Alexey Efimov

      День добрый!

      Занимаясь обзорами MailChimp, чувствую себя кем-то вроде Геракла, который воюет с гидрой))

      Разобрал создание кампании в сервисе по шагам, они выкатили Drag&Drop. Написал про HairBall, большинство его фич перенесли в сегментацию.
      Уже дважды описал автореспондеры (причём последний раз не так давно), а их перелопатили в Automation:-)

      Но, думаю, да, обзор-таки будет, когда доберусь до рубрики Авторассылки в блоге. Пока на очереди Аналитика.

      Навскидку по функционалу оставили почти всё то же самое, только изрядно прошлись по интерфейсу. Появилась возможность отправлять письма моментально (раньше минимальным интервалом был час). Должно стать удобнее работать с цепочками триггеров + теперь можно выбирать не только дни недели для отправки, но и временные интервалы в течение дня или даже конкретное время.

      Пока всё это очень непривычно, но в потенциале — весьма интересно!

      • Всегда есть новая тема для статьи, когда обозреваешь Mailchimp. :) Красота!

  • Роман

    а как быть если шаблон свой? как в него вставить кнопки соцсетей, чтобы люди делились письмом через соцсети

    • Alexey Efimov

      Добрый день, Роман!

      Имеете ввиду Мэйл Чимп?
      Воспользуйтесь его готовыми кнопками расшаривания (Social Share) в Drag&Drop редакторе.
      На мой взгляд, они достаточно гибкие, и вписать их в свой шаблон несложно.

      Можете использовать и так называемые merge tags, и вставить их в письмо готовым кодом:
      http://kb.mailchimp.com/campaigns/design/choose-social-share-links

      Единственное ограничение: пока нет Вконтакте и других отечественных соцсетей, только западные.
      Как это обойти, честно говоря, не знаю.
      Скорее всего, можно попытаться использовать в качестве решения связку картинка+ссылка. «Нарезать» свои кнопки на картинки, вставить их в письмо, добавить ссылки на расшаривание.
      Но вот как подготовить такие ссылки и возможно ли это для email, не в курсе. Никогда с этим не сталкивался — расшаривание в письме всё-таки сильно на любителя:) в большинстве случаев можно обойтись и без этого.

      • Роман

        спасибо за ответ)

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

  • Здравствуйте, Alexey! А не подскажите, какой тег нужно добавить к кнопке «Подробнее», чтобы она в конечном итоге открывала анонсированный в рассылке пост. Заранее при много благодарен.

    • Alexey Efimov

      Александр, добрый день!

      Оу, если я правильно понял ваш вопрос, вам нужно «обернуть» кнопку в ссылку: a href=»#»кнопка/a, где вместо # прописать ссылку на анонсированный пост
      (открывающие-закрывающие «галочки» тегов не указал, т.к. в комментарии они срабатывают, как html-разметка, но они подразумеваются).

      • Это не вариант, так как у меня установлена RSS-рассылка. Каждый раз присваивать ссылке новые адрес это утомительно.

        • Alexey Efimov

          А, если RSS, то воспользуйтесь соответствующими merge tags Чимпа: http://kb.mailchimp.com/merge-tags/rss-merge-tags

          Полагаю, вам подойдёт что-то типа такого: *|RSSITEM:URL|*

          • Спасибо! Этот merge tags подходит. Есть еще одни вопрос. Как теперь убрать стандартную ссылку «Подробнее» располагающуюся под анонсированной статьей и оставить только кнопку?

          • Alexey Efimov

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