Як за допомогою Stripo додати до повідомлення гіпер- та анкорні посилання

Значення посилань у листах важко переоцінити.

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

Усе це робить посилання корисними для клієнта, полегшуючи навігацію, і це позитивно впливає на показники CTR (переходів за посиланнями).

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

У цій статті ми розглянемо типи посилань і розповімо про способи їхнього додавання до листів.

Типи посилань у листах

Є кілька основних типів:

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

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

За статистикою ESP-сервісу eSputnik, який ми використовуємо, проморозсилка в середньому містить 20 гіперпосилань. Як гадаєте, чи це не забагато? Зовсім ні! Насправді всі пункти меню, зображення, кнопки CTA — усе це має бути обладнане посиланнями.

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

(статистика реальна, вигаданий тільки контент розсилки)

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

Про всяк випадок, кнопка CTA — це не що інше, як привабливо оформлене гіперпосилання.

І все ж таки навіщо додавати так багато гіперпосилань і прикріплювати їх до кожного зображення, яке ви збираєтеся використовувати? Річ у тім, що деякі клієнти клікають у листах геть усе, що вони бачать і що їм подобається. Тому ми рекомендуємо додавати до розсилки якомога більше інтерактивних деталей.

Гіперпосилання на профілі в соцмережах

Важливо, щоб клієнти підписувалися на вас у соцмережах. Там ми ділимося новинами, оновленнями, анонсуємо майбутні розпродажі та ін. Зазвичай ці посилання йдуть після заклику до дії «Відстежуйте нас у соцмережах». Але не завжди.

Мотивуйте одержувачів переходити на ці сторінки із ваших листів.

Гіперпосилання «Поділитися в соцмережах»

Надайте користувачам можливість поділитися окремими частинами ваших листів у соцмережах — це допоможе вашому бренду стати вірусним.

Нехай вони діляться веселими історіями, цитатами, цікавими елементами дизайну, своїми оцінками, якщо ви вбудували в розсилку гру; або навіть запостять у соцмережі лист повністю.

(Джерело: розсилка від Stripo)

Цей блок зазвичай йде після кнопки заклику «Поділитися у Facebook».

Посилання Mailto (написати електронною поштою)

Ми маємо надати клієнтові можливість зв'язатися з нами у будь-який час та у будь-який зручний спосіб.

І якщо люди віддають перевагу електронній пошті, не варто змушувати їх виділяти вашу електронну адресу, копіювати її, а потім йти до своєї пошти і вже там писати повідомлення.

Додайте до футера листа опцію «Напишіть нам» і прикріпіть до неї посилання «mailto».

(Джерело: шаблон Stripo)

Користувачеві достатньо натиснути це посилання, щоб почати писати вам листа. Ви можете навіть додати заголовок для таких листів.

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

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

Щоб посилання були помітними, вони мають містити три або більше слів, починатися з ключових слів і бути описовими.

(Джерело: розсилка від Кріса Сілліззи, The Point, CNN)

Анкорні посилання

Анкорні посилання призначені для того, щоб вести читачів до потрібних розділів листа. За допомогою анкорних посилань у кампаніях ви надаєте одержувачам можливість пропустити якісь частини, щоб без зайвого скролу перейти безпосередньо до моментів, які їх цікавлять. Якщо ваш email досить довгий, обов'язково вставте анкорне посилання — клієнти оцінять.

(Джерело: розсилка від Mercedes-Benz)

Як додати посилання за допомогою Stripo

Отже, куди додавати посилання? Усе безпосередньо залежить від цілей вашої кампанії. Але основні посилання прикріплюються до всіх зображень, до пунктів меню, контактної інформації, акаунтів у соцмережах, запрошень до опитувань, відео і навіть мап.

Додавання посилань для кнопок CTA

Кнопки CTA не повинні бути нудними — навпаки, робіть їх якомога яскравішими. Вони можуть мати будь-яку форму на ваш смак. За допомогою Stripo ви також можете застосувати ховер-ефект (CSS-анімацію).

Як додати посилання для кнопок CTA у Stripo:

• перетягніть блок «Кнопка» у те місце листа, в якому ви бажаєте бачити кнопку;

• дайте кнопці ім'я;

• виберіть колір тексту;

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

• встановіть колір кнопки;

• вставте посилання;

• готово!

Додаткову інформацію про те, як створювати кнопки, ви знайдете у цій статті.

Додавання гіперпосилання для відео

В одній із статей ми вже показували, як за допомогою Stripo додавати до листів посилання на відео.

Але щоб вам було зручніше, я все ж таки коротко продублюю це тут.

Як додати гіперпосилання на відео за допомогою Stripo:

• перетягніть у шаблон структуру з однією колонкою;

• додайте до неї базовий блок «Відео»;

• двічі клікніть його в шаблоні, щоб активувати панель налаштувань;

• на панелі налаштувань вставте посилання відео на Youtube або Vimeo.

Важливо зазначити:

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

• зображення попереднього перегляду;

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

• колір кнопки відтворення.

Ваш лист із вбудованим відео готовий!

Додавання посилань mailto до блоку контактної інформації

Надайте клієнтам можливість розпочати написання електронного листа для вас лише одним кліком.

(Джерело: розсилка від Boden)

Як додати посилання mailto до контактної інформації за допомогою Stripo:

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

• перетягніть у кожен контейнер блок «Текст»;

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

• виділіть текст, після чого клікніть іконку «Посилання» на панелі інструментів;

• на панелі налаштувань встановіть тип посилання “mailto”;

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

• введіть тему, якщо бажаєте, щоб такі листи вже мали заголовок.

Додавання посилань до іконок соцмереж

Де краще розмістити ваші координати в соцмережах? Тут усе на ваш розсуд. Але ці іконки обов'язково мають бути в листах. Деякі бренди додають їх до меню, але переважна більшість — до футерів.

(Джерело: розсилка від Pinpointe)

Як додати посилання до іконок соцмереж за допомогою Stripo:

Спосіб 1. Вставити посилання

• перетягніть у шаблон блок «Соцмережі»;

• двічі клікніть його, щоб активувати панель налаштувань;

• вставте посилання на відповідні профілі в соцмережах;

• натисніть «Ще», аби додати альтернативний текст;

• змініть кольорову схему, форму та розмір іконок соцмереж.

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

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

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

Спосіб 3. Перетягнути до листа модуль контенту — і в такий спосіб додавати всі соцмережі одним кліком.

Якщо вам не хочеться заповнювати профіль Stripo, можна зберегти в особистій бібліотеці контенту модуль із контактною інформацією та футером. І кожного разу, коли вам треба буде створити новий шаблон, просто вставляйте цей блок. Готово.

Більш детальну інформацію про модулі контенту і методи їхнього використання ви знайдете у статті нижче.

Додавання посилань «Поділитися в соцмережах»

Цей тип посилання дозволяє поділитися нашим листом — причому як повністю, так і окремими його частинами.

(Джерело: розсилка від CNN Reliable Sources)

Як додати посилання «Поділитися в соцмережах» за допомогою Stripo:

• перетягніть у шаблон блок «Соцмережі»;

• виберіть необхідні іконки соцмереж;

• попрацюйте над їхнім дизайном;

• встановіть тип посилання «Поділитися»;

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

Щоб дізнатися, як отримати посилання на веб-версію вашого листа, читайте цю статтю в нашому блозі.

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

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

І тому вам треба додати відповідні посилання.

(Джерело: розсилка від Gap)

Як додати посилання для пунктів меню за допомогою Stripo:

• перетягніть у шаблон структуру/рядок з 1 або 2 колонками;

• додайте до неї блок «Меню»;

• двічі клікніть його, щоб активувати панель налаштувань для подальшої роботи з цим елементом;

• виберіть тип меню — «Посилання» (найбільш поширений), «Іконки» або «Посилання та іконки»;

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

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

• і вставте посилання для кожної вкладки.

До вашої уваги: на панелі налаштувань вкладки меню називаються «Пункти».

Додавання анкорних посилань

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

Як додати анкорні посилання за допомогою Stripo

Спосіб 1. Активувати опцію «Додати анкорне посилання». Не потребує роботи з кодом

• створіть панель меню/навігації, як показано вище;

• дайте кожному пункту зрозумілу назву;

• виберіть пункт, із яким бажаєте пов'язати вкладку меню;

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

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

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

• на панелі налаштувань вибираємо тип посилання «Анкор» і відповідне ім'я анкора;

• готово.

Спосіб 2. Попрацювати з кодом листа

• створіть панель меню навігації у хедері листа;

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

• двічі клікніть цей блок листа, щоб відкрити редактор HTML-коду;

• у редакторі замініть існуючий рядок таким елементом коду:

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

де «yourlabel» — назва параграфу, з яким ви бажаєте пов'язати анкорне посилання. У моєму прикладі це «музика». Насправді ви можете дати будь-яку назву, але не додавайте жодних пробілів або службових символів — тільки одне слово в лапках;

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

• коли меню стане виділеним/активним (як показано нижче), відкрийте редактор, натиснувши кнопку «редактор коду», щоб працювати безпосередньо з цією конкретною частиною листа:

• у редакторі коду після тегу “href=", куди ми зазвичай додаємо гіперпосилання, треба вставити елемент “#yourlabel”. Елемент коду, який я вставила після тегу “href=", мав такий вигляд: “#music”

• те саме потрібно зробити для всіх пунктів меню, щоб прив'язати їх до відповідних елементів листа.

Обов'язково додайте хештег "#" після тегу “href=" і замініть ім'я “label” тим, яке ви застосовували для свого анкора. Усі інші елементи, наприклад, закриваючий тег посилання </a>, Stripo додасть автоматично.

Спосіб 3. Попрацювати з кодом листа: версія 2

Коли лист буде готовий, вам треба:

• визначитися, куди направляти користувачів за натисканням анкорного посилання;

• двічі клікнути цей елемент, щоб активувати його;

• відкрити редактор коду (як показано вище);

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

• тепер перейдіть до вкладки меню, яка має спрямовувати користувачів до вищезгаданого розділу;

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

• на панелі налаштувань змініть тип посилання «Сайт» на «Інше». Ми робимо це, аби запобігти додаванню ESP-сервісами елемента «https://» до коду листа;

• вставте назву розділу, перед якою стоїть хештег. У нашому випадку це #yourlabel;

• готово!

Важливо зазначити:

Анкорні посилання в редакторі не працюють. Щоб перевірити їх, відправте тестового листа або відкрийте в новій вкладці посилання «Перегляд у браузері».

Підтримка анкорних посилань у листах:

Важливо:

Анкорні посилання не працюють у листах на основі AMP HTML, оскільки валідатор AMP-коду не дозволяє використовувати символи “#” та “name” у тезі <a>.

На завершення

Посилання — невід'ємна частина будь-якої email-кампанії. Вони допомагають отримувачам із навігацією і надають нам можливість відстежувати активність підписників. Ми показали, як додавати посилання до різних елементів листа.

Але майте на увазі, що під час роботи з редактором ви не можете перевірити посилання. Для цього вам треба відправити тестового листа.

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

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