Арина Оголь

Email-маркетолог

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

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

Какие виды ссылок существуют?

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

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

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

Например, письмо с распродажей:

Статистика кликов

Поведение пользователей абсолютно разное: они переходят по ссылкам, которые кажутся им наиболее интересными. Соответственно, чем больше привлекательных элементов в письме, тем больше шанс перевести клиента на сайт. Экспериментируйте с дизайном в письмах: добавляйте яркие кнопки СТА, привлекающие внимание баннеры, GIF-изображения, красивые картинки, видео и т. д.

Гиперссылки для текста в email-сообщении: что это и как добавить?

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

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

и вставить URL в поле “Ссылка” открывшегося меню:

Ссылка на сайт

Чтобы пользователи обращали внимание на ссылки, рекомендуем следовать таким советам:

  • составлять их из двух-трех слов,

  • использовать в начале ключи,

  • давать понять, куда человек попадет после перехода,

  • не делать ссылок с одинаковым текстом и разным адресом.

Ссылки в футере

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

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

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

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

Добавление видео

  • кликните по нему, чтобы активировать панель настроек;

в соответствующее поле слева вставьте ссылку на свое видео;
Ссылка на видео

  • наш редактор автоматически найдет и добавит в нужные поля всю информацию:

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

Блок со встроенным видео готов!

Last post

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

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

Ссылки в футере

Для того чтобы клиент написал вам на почту, ему необходимо выделить email, скопировать его, открыть свой почтовый ящик и там вставить его и написать сообщение. Мало кто не поленится это сделать. Будет удобнее, если вы просто добавите в письмо ссылку “:mailto”. Это позволит клиенту написать вам письмо, просто нажав на нужный email:

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

  • вставьте текстовый блок в эту структуру;

  • введите свой текст, в данном случае это email;

  • далее выделите нужный текст и присвойте ему ссылку:

Сделать ссылкой

  • на боковой панели редактора в поле “Ссылка” вам подтянется нужный тип (почта, телефон и т.д.):

Почта

Точно так же можно поступить и с номером телефона, чтобы у читателя была возможность сразу же с вами связаться:

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

  • вставьте текстовый блок в эту структуру;

  • введите свой текст, здесь это номер телефона;

  • далее выберите нужный текст и присвойте ему ссылку;

  • на боковой панели редактора в поле “Ссылка” выберите “Телефон” и напишите свой номер в международном формате:

Телефон

Такую же процедуру можно проделать и со Skype, выбрав в ссылке “Skype”. Создавать новую структуру необязательно, в любом текстовом блоке можно выделить нужное слово и подобрать для него нужный тип ссылки.

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

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

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

Чтобы привязать ссылки к иконкам соцсетей в редакторе eSputnik, нужно:

  • добавить в шаблон структуру с блоком;

  • перетащить в него блок соцсетей;

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

  • вставить соответствующие ссылки:

Ссылки на соц сети

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

Выбор иконок

Обратите внимание! Всю эту работу при создании каждого письма можно не делать. Просто сохраните нужный блок/структуру/полосу в библиотеку ваших модулей. При создании нового письма перетащите из модулей нужный вам блок в тело письма.

Добавляем ссылки в кнопки СТА

Непосредственная цель кнопок СТА – призыв к действию, поэтому их нужно делать как можно примечательней.

Чтобы добавить ссылки на СТА в редакторе eSputnik, необходимо:

  • поместить блок “Кнопка” в то место письма, где вы хотите его видеть;

  • присвоить кнопке название;

  • указать цвет текста;

  • задать шрифт и размер текста;

  • задать цвет кнопки;

  • присвоить ссылку:

Ссылка в СТА

Больше возможностей для кнопки узнайте из статьи “Как сверстать кнопку в письме”.

Хотите доступ к 300+ шаблонам?

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

Меню чаще всего перенаправляет клиента из письма на конкретную страницу сайта.

Меню

Разберемся, как добавить ссылки для пунктов меню с помощью редактора eSputnik:

  • вставьте в письмо структуру;

  • перетащите блок “Меню”;

  • выберите нужный тип меню (ссылки, иконки, ссылки и иконки);

  • дайте название каждому пункту/загрузите иконку и подставьте нужные ссылки:

Ссылки в меню

Добавление страницы отписки

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

Отписаться

Добавить ссылку на отписку можно так:

  • Вставьте в письмо структуру;

  • Выберите слово “Отписаться” и прикрепите к нему ссылку:

Ссылка на отписку

  • В типе ссылки выберите “Отписка”:

Отписка от рассылки

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

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

Просмотреть в браузере

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

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

Вот так выглядит пример якорных ссылок в письме:

Вариант добавления якорных ссылок №1.

  • Щелкните по тому месту письма, на которое вы хотите направить ваших клиентов;

  • откройте редактор кода (откроется код выбранного элемента);

Распродажа

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

Код HTML

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

  • кликните по нему;

  • в панели настроек выберите тип ссылки “Другой”:

  • введите в поле “Ссылка” #label

#label

все!

Вариант добавления якорных ссылок №2.

  • Создайте панель меню для хедера. Нажимая на пункты меню, получатели будут переходить к нужным разделам письма:

Меню

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

HTML

  • кликните по этому блоку, чтобы открыть редактор HTML-кода:

Редактор кода

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

Код

Тут label обозначает название пункта меню, к которому вы собираетесь прикрепить якорную ссылку;

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

  • выделив пункт меню, откройте редактор кода:

Редактор кода для меню

  • в редакторе кода между кавычками после href= в нужном пункте меню необходимо вставить якорь #label:

Общий код меню

  • то же самое сделайте с остальными пунктами меню.

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

Список почтовых клиентов

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

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

5.0 из 5 на основе 5 оценок

Арина Оголь

Email-маркетолог

Email-маркетолог в команде eSputnik. Помогать клиентам и писать полезные статьи - моя главная задача.

Комментарии 0