Роль ссылок в электронных письмах

Значение ссылок в email письмах сложно переоценить.

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

Все это делает ссылки полезными для клиента, упрощает навигацию, что положительно сказывается на показателях CTR (переходов по ссылкам).

Ссылки также позволяют нам отследить действия получателей внутри email и измерить эффективность той или иной кампании.

Виды ссылок в письмах

Гиперссылки для файлов и кнопок

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

Согласно статистике используемого нами ESP-сервиса eSputnik, промо рассылка в среднем содержит 20 гиперссылок. Как вы думаете, не слишком ли много? Совсем нет! На самом деле все пункты меню, изображения, кнопки CTA – все это должно быть оборудовано ссылками.

Посмотрите на карту кликов созданной нами рассылки на День Валентина, предоставленную нашим ESP:

(статистика реальная, вымышленный только контент рассылки)

26% подписчиков кликнули баннер. Столько же людей нажали на кнопку CTA.

На всякий случай: кнопка CTA есть не что иное, как красиво оформленная гиперссылка.

Средние показатели карты кликов: доля кликов по логотипу составляет около 17%; по иконкам соцсетей и контактной информации – 4%. И примерно 20-60% получателей кликают по баннерам и другим модулям товарного контента.

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

Куда нас должны вести гиперссылки? Непосредственно на соответствующие страницы вашего сайта, будь то страница регистрации или любая другая.

Гиперссылки для текста в email

Неважно, промо это или триггерное письмо — в любом случае нам нужно добавить в тело email какой-то текст. Прикрепить гиперссылку к тексту письма достаточно легко. Не нужно никаких знаний кода или навыков HTML.

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

Анкорные ссылки

Анкорные ссылки в письмах предназначены для того, чтобы привести читателей к конкретным разделам письма. Используя анкорные ссылки в рассылках, вы даете получателям возможность пропустить какие-то части, чтобы без лишнего скролла перейти непосредственно к интересующим моментам. Если ваш email достаточно длинный, обязательно вставьте анкорные ссылки – клиенты оценят.

Как добавить ссылку с помощью Stripo

Итак, куда мы добавляем ссылки? Все напрямую зависит от целей вашей рассылки. Но основные ссылки прикрепляются ко всем изображениям, пунктам меню, контактной информации, аккаунтам в соцсетях, приглашениям к опросам, видео и даже картам.

Добавление гиперссылки на ваше видео

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

Для вашего удобства я вкратце продублирую это здесь.

Как добавить гиперссылку на ваше видео с помощью Stripo

• перетащите в шаблон структуру с 1 колонкой;
• перетащите в него базовый блок видео;
• дважды кликните по нему в шаблоне, чтобы активировать панель настроек;
• в панели настроек вставьте ссылку на свое видео на Youtube или Vimeo;
• наш редактор автоматически найдет и добавит в соответствующие поля следующую информацию:
  1. изображение предпросмотра;
  2. альтернативный текст;
  3. кнопку воспроизведения.

Ваше письмо со встроенным видео готово!

Добавление ссылок к контактной информации

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

Но заставлять их выделять наш электронный адрес, копировать его, а затем идти в свой почтовый ящик и писать там сообщение – так себе идея. Будет намного удобнее, если вы вставите ссылку « :mailto ». Эта опция позволяет клиентам приступить к написанию письма одним кликом мыши.

Как добавить ссылки к контактной информации с помощью Stripo:

• ​​​​​перетащите в шаблон новую структуру;
• вставьте текстовые блоки в эту структуру;
• введите свой текст. Я написала «Связаться с нами»;
• выберите « :Mailto »;
• вставьте соответствующий электронный адрес.

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

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

Важно отметить:

Ссылка :mailto не работает в Outlook.mail и IOS, но в Gmail, на ОС Windows и на устройствах Android она открывается корректно.

Добавление ссылок к иконкам соцсетей

Где лучше разместить ваши координаты в соцсетях – здесь все на ваше усмотрение. Но они определенно должны быть в email-письмах. Некоторые бренды добавляют их в меню, но подавляющее большинство – в футер.

Как добавить ссылки к иконкам соцсетей в Stripo:

• перетащите в шаблон структуру с 1 колонкой;
• перетащите блок соцсетей;
• дважды кликните по нему, чтобы активировать панель настроек;
• вставьте ссылки соответствующих аккаунтов в соцсетях;
• нажмите «Еще», чтобы ввести альтернативный текст;
• готово.

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

Важно отметить:

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

Перейдя по ссылке вы узнаете, как вставлять иконки соцсетей в футер письма.

Добавление ссылок для кнопок CTA

Кнопки CTA не должны быть скучными – делайте их как можно ярче. Они могут быть любой формы, которая вам нравится. С помощью Stripo вы также можете применить ховер-эффект (CSS-анимацию).

Как добавить ссылки для кнопок CTA в Stripo:

• поместите блок «Кнопка» в то место письма, где вы хотите его видеть;
• присвойте кнопке название;
• укажите цвет текста;
• задайте шрифт и размер текста;
• задайте цвет кнопки – это будет ее основной цвет;
• чтобы применить CSS-анимацию, выберите цвет подсветки кнопки – по умолчанию она наследует основной цвет. Если вы не хотите применять CSS-анимацию, просто не вносите никаких изменений в поле «цвет выделения кнопки»;
• вставьте ссылку;
• готово!

Добавление ссылок для пунктов меню

Меню обычно помогают нам перенаправить получателей из письма на определенную страницу сайта.

Следовательно, вам нужно вставить соответствующие ссылки.

Как добавить ссылки для пунктов меню с помощью Stripo:

• перетащите в шаблон структуру с 1 или 2 колонками;
• перетащите блок Меню;
• выберите тип меню – ссылки (наиболее распространенный), иконки или ссылки и иконки;
• дважды кликните по нему, чтобы активировать панель настроек для дальнейшей работы с этим элементом;
• вам нужно будет либо дать названия пунктам меню, либо вставить изображения – это зависит от выбранного вами типа меню. К вашему сведению: пункты в панели настроек называются «вкладки»;
• вставьте соответствующие ссылки в поля ссылок.

Подробности о работе с меню в письмах вы прочтете здесь.

Добавление анкорных ссылок в письма

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

Пожалуйста, посмотрите на наш пример анкорных ссылок в письме:

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

На данный момент есть два способа сделать это.

Способ 1

• дважды щелкните по секции письма, на которую вы хотите направлять ваших пользователей, для работы непосредственно с ней;
• откройте редактор кода (в редакторе откроется код именно данного элемента);
• этот фрагмент кода вставьте в редактор <a name="yourlabel"></a> , где yourlabel обозначает название секции;

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

• введите в строку «ссылка» #yourlabel

• готово!

Способ 2

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

• вставьте в шаблон HTML-блок – прямо над тем разделом, куда вы хотите перенаправить получателей, если они нажмут на соответствующий пункт меню (со ссылкой в нем);
• дважды кликните по этому блоку в шаблоне, чтобы открыть редактор HTML-кода;
• в редакторе кода замените существующую строку этим элементом кода:

<a name=“yourlabel”></a>

Где “yourlabel” - название главы, к которой вы собираетесь прикрепить анкорную ссылку. В моем примере это “#music”. На самом деле вы можете назвать его как хотите – но, пожалуйста, не вставляйте никаких пробелов или любых других служебных символов, только одно слово в кавычках;

• теперь дважды кликните соответствующий пункт меню в хедере, чтобы связать необходимый раздел письма с ним;
• как только меню будет выделено (активно), откройте редактор кода, нажав на кнопку «Редактор кода» (мы делаем это, чтоб работать непосредственно с этой конкретной частью письма):

• в редакторе кода после тега « href= », куда мы обычно добавляем гиперссылки, нужно вставить этот элемент « #yourlabel ». Элемент кода, который я вставила после тега « href= », выглядел следующим образом: “#music”

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

Обязательно добавьте хэштег « # » после тега « href= » и исправьте имя «label» на то, которое вы использовали для своего анкора. Все остальные элементы, как закрывающийся тег ссылки </a>, Stripo добавит самостоятельно.

Список почтовых клиентов, которые поддерживают анкорные ссылки:

Важно:

Анкорные ссылки не работают в AMP-письмах в связи с тем, что валиадатор не пропускает хэштег « # » и атрибут « name » в теге <а>.

В завершение

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

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

Пусть ваши получатели всегда будут довольны вашими рассылками и могут нажимать на все ссылки. Наши уникальные технические функции и структурированные шаблоны облегчат вам эту задачу.

Если у вас есть вопросы или проблемы, пожалуйста, пишите нам по адресу contact@stripo.email или оставьте комментарий ниже.

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