Демо-редактор Войти →
Дизайн Маркетинг Структура How-to
~ 13 мин читать
42100 просмотры
оценить
19 мая

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

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

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

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

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

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

В этой статье мы рассмотрим типы ссылок и расскажем о способах их добавления в письма.

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

Основных типов несколько:

Гиперссылки для визуальных элементов и кнопок

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

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

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

Гиперссылки в Email-письмах_Нажмите на карту

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

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

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

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

Гиперссылки на профили в соцсетях

Важно, чтобы клиенты подписывались на вас в соцсетях. Там мы делимся новостями, обновлениями, анонсируем предстоящие распродажи и т. д. Обычно эти ссылки идут после призыва к действию «Следите за нами в соцсетях». Но не всегда.

Гиперссылки в Email-письмах - подпишитесь на нас в социальных сетяхМотивируйте получателей переходить на эти страницы из ваших писем.

Гиперссылки «Поделиться в соцсетях»

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

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

Гиперссылки в Email-письмах_Вариант публикации в соцсетях

(Источник: рассылка от Stripo)

Этот блок обычно идет после кнопки призыва «Поделиться в Facebook».

Ссылки Mailto (написать по электронной почте)

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

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

Добавьте в футер письма опцию «Напишите нам» и прикрепите к ней ссылку «mailto».

Ссылки Mailto в Email-письмах_Stripo

(Источник: шаблон Stripo)

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

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

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

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

Гиперссылки в Email-письмах_Ссылки в текстах

(Источник: рассылка от Криса Силлиззы, The Point, CNN)

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

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

(Источник: рассылка от Mercedes-Benz)

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

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

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

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

Гиперссылка в CSS-кнопке в HTML-письме

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

  • перетащите блок «Кнопка» в то место письма, в котором вы хотите видеть кнопку;

  • дайте кнопке имя;

  • выберите цвет текста;

  • настройте шрифт и размер текста;

  • установите цвет кнопки;

  • вставьте ссылку;

  • готово!

Как добавить гиперссылку в Email-письмо с помощью_Stripo

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

14 мин читать

69242 просмотры 4.2

Призывы к действию в рассылках: лучшие советы Читать далее

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

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

Как добавлять гипер- и анкорные ссылки в Email-письмах Stripo_Видео в Email-письмах

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

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

  • перетащите в шаблон структуру с одной колонкой;

  • добавьте в него базовый блок «Видео»;

  • дважды кликните его в шаблоне, чтобы активировать панель настроек;

  • на панели настроек вставьте ссылку видео на Youtube или Vimeo.

Гиперссылки в Email-письмах_Ссылки на видео вебинара

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

Наш редактор автоматически извлечет и вставит в соответствующие поля такую информацию:

  • изображение предпросмотра;

  • альтернативный текст;

  • цвет кнопки воспроизведения.

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

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

Дайте клиентам возможность начать писать вам электронные письма всего одним кликом.

Гиперссылки в Email-письмах_Ссылки Mailto

(Источник: рассылка от Boden)

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

  • добавьте в письмо новую структуру;

  • перетащите в каждый контейнер блок «Текст»;

  • введите свой текст. Я ввела «Связаться с нами»;

  • выделите текст, после чего кликните иконку «Ссылка» на панели инструментов;

Добавление ссылок Mailto в Email-письмах с помощью_Stripo

  • на панели настроек установите тип ссылки «mailto»;

  • вставьте нужный адрес электронной почты;

Как добавить ссылку mailto в Email-письма

  • введите тему, если хотите, чтобы такие письма уже имели заголовок.

Как добавить ссылку Mailto в Email-письма_Указав строку темы

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

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

Гиперссылка в Email-письмах_Ссылки на соцсети в футере Email-писем

(Источник: рассылка от Pinpointe)

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

Способ 1. Вставить ссылки
  • перетащите в шаблон блок «Соцсети»;

  • дважды кликните его, чтобы активировать панель настроек;

  • вставьте ссылки на соответствующие профили в соцсетях;

  • нажмите «Еще», чтобы ввести альтернативный текст;

Гиперссылки в Email-письмах_Как добавить ссылки в соцсети с помощью_Stripo

  • измените цветовую схему, форму и размер иконок соцсетей.

Ссылки в Email-письмах_Создание иконок соцсетей в Email-письмах с помощью_Stripo

Если вы хотите добавить иконки, которых нет в списке — все подробности о том, как это сделать, вы найдете в этой статье нашего блога.

Способ 2. Заполнить профиль и добавить блок соцсетей одним кликом.

Если вы хотите еще быстрее добавлять профили соцсетей при создании новых рассылок, заполните свой профиль Stripo — и тогда при работе над новым письмом достаточно будет просто перетащить в шаблон блок «Соцсети». Дизайн и корректные ссылки на ваши страницы в соцсетях — все будет сделано автоматически.

Ссылки в Email-письмах_Заполнение профиля для добавления ссылок в учетные записи соцсетей одним кликом

Добавляйте профили соцсетей одним кликом
Присоединиться к Stripo
Способ 3. Перетащить в письмо модуль контента — и таким способом добавить все соцсети в один клик.

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

Гиперссылки в Email-письмах_Социальные медиа-профили в ваших Email-письмах одним кликом

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

5 мин читать

48876 просмотры 2.8

Модули в Stripo: что это и для чего? Читать далее

Добавление ссылок «Поделиться в соцсетях»

Этот тип ссылки позволяет поделиться нашим письмом — причем как полностью, так и отдельными его частями.

Ссылки в Email-письмах для обмена в соцсетях

(Источник: рассылка от CNN Reliable Sources)

Как добавить ссылку «Поделиться в соцсетях» с помощью Stripo:

  • перетащите в шаблон блок «Соцсети»;

  • выберите нужные иконки соцсетей;

  • поработайте над их дизайном;

  • установите тип ссылки «Поделиться»;

Как добавить ссылки шейринга в соцсетях_Stripo

  • в поле ввода «Предпросмотр» вставьте ссылку на веб-версию шаблона или его элемент, который вы хотите позволить расшарить.

Включение шейринга в соцсетях в Email-письмах_Stripo

Чтобы узнать, как получить ссылку на веб-версию вашего письма, читайте вот эту статью в нашем блоге.

7 мин читать

21622 просмотры 3.7

Предварительный просмотр и отправка тестовых писем в Stripo Читать далее

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

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

И поэтому вам нужно добавить соответствующие ссылки.

Добавление ссылок в Email-письмах Stripo_Примеры ссылок для пунктов меню от Gap

(Источник: рассылка от Gap)

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

  • перетащите в шаблон структуру/строку с 1 или 2 колонками;

  • добавьте в нее блок «Меню»;

  • дважды кликните его, чтобы активировать панель настроек для дальнейшей работы с этим элементом;

  • выберите тип меню — «Ссылки» (наиболее распространенный), «Иконки» или «Ссылки и иконки»;

Ссылки в меню Email-письмах_Stripo

  • поработайте над дизайном вкладок меню;

  • дайте имена вкладкам;

  • и вставьте ссылку для каждой вкладки.

Добавление ссылок в меню_Stripo

К вашему сведению: в панели настроек вкладки меню называются «Пункты».

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

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

Пример анкорных ссылок в Email-письмах_Gmail

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

Способ 1. Активировать опцию «Добавить анкорную ссылку». Не требует работы с кодом
  • создайте панель меню/навигации, как показано выше;

  • дайте каждому пункту понятное название;

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

  • на панели настроек активируйте опцию «Добавить анкорную ссылку» для этого конкретного элемента;

  • дайте ему название;

Включение опции анкорной ссылки в Email-письмах

  • теперь идем в нужную вкладку меню;

  • в панели настроек выбираем тип ссылки «Анкор» и соответствующее имя анкора;

Как создавать анкорные ссылки в Email-письмах_Stripo

  • готово.

Добавляйте анкорные ссылки легко
Регистрация
Способ 2. Поработать с кодом письма
  • создайте панель меню навигации в хедере письма;

Как создать ссылку в Email-письмах_Создание меню для анкорных ссылок

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

Добавление анкорных ссылок_Stripo_Перемещение блока HTML

  • дважды кликните этот блок письма, чтобы открыть редактор HTML-кода;

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

  • в редакторе замените существующую строку таким элементом кода:

<a name="yourlabel"></a>

где «yourlabel» — название параграфа, с которым вы хотите связать анкорную ссылку. В моем примере это «музыка». На самом деле вы можете дать любое название, но только не добавляйте никаких пробелов или служебных символов — только одно слово в кавычках;

Создание анкорных ссылок_Добавление блока HTML

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

  • когда меню станет выделенным/активным (как показано ниже), откройте редактор, нажав кнопку «редактор кода», чтобы работать непосредственно с данной конкретной частью письма:

Добавление анкорных ссылок в Email-письма_Открытие редактора кода_Stripo

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

Работа с HTML-редактором Email-писем для вставки анкорных ссылок_Stripo

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

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

Способ 3. Поработать с кодом письма: версия 2

Когда письмо будет готово, вам нужно:

  • определиться, куда направлять пользователей при нажатии анкорной ссылки;

  • дважды кликнуть этот элемент, чтобы активировать его;

  • открыть редактор кода (как показано выше);

  • вставить фрагмент кода <a name="yourlabel"></a> в код соответствующего элемента. «Yourlabel» — название нужного раздела;

Добавление анкорных ссылок_Способ 2

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

  • кликните вкладку в шаблоне для активации;

  • на панели настроек измените тип ссылки «Сайт» на «Другое». Мы делаем это, чтобы предотвратить добавление ESP-сервисами элемента "https://" в код письма;

Добавление анкорных ссылок_Изменение типа ссылки на панели настроек

  • вставьте название раздела, перед которым стоит хэштег. В нашем случае это #yourlabel;

Добавление тегов к анкорным ссылкам

  • готово!

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

Анкорные ссылки в редакторе не работают. Чтобы проверить их, отправьте тестовое письмо или откройте в новой вкладке ссылку «Просмотр в браузере».

Проверка анкорных ссылок

Поддержка анкорных ссылок в письмах:

Анкорные ссылки_Поддержка_Ru

Важно:

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

В завершение

Ссылки — неотъемлемая часть любой email-кампании. Они помогают получателям в навигации и дают нам возможность отслеживать активность подписчиков. Мы показали, как добавлять ссылки к различным элементам письма.

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

Пусть ваши получатели всегда будут довольны вашими рассылками и кликают все ссылки в письмах. Наши уникальные технические решения, опции и структурированные шаблоны облегчат для вас процесс добавления ссылок.

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

Создавайте эффективные письма в кратчайшие сроки при помощи Stripo

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

Предыдущие статьи Следующие статьи
7 дней назад · 17 мин читать
Идеи для Рождественских рассылок

Рождество — лучшее время года. Люди полны ожиданий, они надеются, что счастье придет и останется. А маркетологи тем временем надеются побить свои рекорды продаж ;) И сейчас самое время начать подготовку к праздничному сезону, чтобы отправить клиентам потрясающие рождественские рассылки. Почему именно сейчас? По результатам исследований, 43% подарков к этому волшебному празднику покупают уже в ноябре. Интересная статистика о Рождестве и поведении покупателей: 56% покупателей планируют делать покупки онлайн. 73% всех покупателей используют для поиска идеальных подарков свои смартфоны и...

Дизайн Маркетинг Шаблоны
_Cover Image
13 дней назад · 3 мин читать
Гайд по геймификации в email-маркетинге

Когда геймификация максимально эффективна? Как правильно начать её применять? Какую пользу она несет и как создавать игры быстро, без знаний программирования и каких-либо затрат? — Все ответы на эти и другие вопросы мы подготовили в «Гайд по геймификации в email-маркетинге». Книгу можно получить бесплатно Скачать Краткое введение Личны опыт Stripo и опыт других компаний показывают, что геймификация достаточно эффективна. Она не только увеличивает ROI на 300% и повышает узнаваемость бренда, но также помогает компаниям поддерживать более тесные отношения со своими контактами, вовлекая их...

Маркетинг Геймификация
Будьте всегда в курсе последних новостей в области email-маркетинга!