Smart-блоки в email: вірний спосіб скоротити час на верстку листів | Блог eSputnik

Ксенія Петрина

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

How-To: скорочуємо час на верстку листів у 2-4 рази за допомогою smart-блоків

Підготовка листів, так само як будь-який творчий процес, має дві сторони медалі. Безумовно, створення ефективної розсилки – це поле для прояву фантазії, застосування маркетингових фішок і знань своєї аудиторії. Водночас уникнути таких рутинних дій, як додавання необхідних посилань, завантаження зображень, вставка alt-тегів та форматування тексту, не вдається.

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

Початок роботи

Коли команда концепт-стору OSTRIV звернулася до нашої агенції за стратегією запуску директ-маркетингу, редизайн листів та підготовка нового майстер-шаблону стали одними з першочергових завдань. Філософія бренду полягає в тому, щоб не слідувати швидкоплинним масовим fashion-трендам, а залишатися собою і бути стильними щодня. Уся лінійка представлених у магазині марок одягу, інтер'єр шоуруму та дизайн сайту відповідають таким принципам: стиль, мінімалізм, простота. Не дивно, що розсилка від імені компанії теж мала відповідати тим самим естетичним правилам.

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

Приклад листа до редизайну

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

Smart-блок

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

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

На початку в листах OSTRIV можна було побачити два типи карток товарів:

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

Картка товару з детальним описом

  • маленька картка з основними даними: картинка, ціна, назва. Такі елементи зазвичай складалися у структури з 2-3 товарів, щоб представити великий асортимент магазину.

Структура з трьома картками товару

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

Враховуємо структуру сайту

Основний принцип налаштування smart-блоку – прописати правила відповідності: звідки брати дані та куди їх підставляти. Ці правила задаються для кожного пункту, який треба відобразити у блоці, наприклад для зображення, назви, ціни та ін.

У нашому випадку для підготовки генератора маленької картки в меню конфігурації даних вже були всі потрібні змінні:

Меню налаштування змінних для продукту

Єдине, що ми додали, – пункт p_image2, який відповідав за другу картинку в роловері. Для створення власного параметра треба натиснути плюсик у меню конфігурації та вибрати у випадаючому списку пункт “Змінна”:

Додавання нової змінної

Загальна схема налаштування мала стандартний вигляд:

  1. Дати назву змінній.

Встановлення назви параметра

  1. Встановити правила “Куди застосувати”: вказати значення селектора і за потреби – атрибута.

Правила відповідності “Куди застосувати”

  1. Дослідити початковий код сторінки сайту і прописати дані у пункті “Звідки взяти”.

Правила відповідності "Звідки взяти"

Після налаштування все, що треба було зробити для оформлення картки – вставити посилання на потрібний товар:

Автоматична підстановка даних до smart-блоку

Під час подальшого тестування блоків ми з’ясували, що на сторінках товарів зі знижкою ціна розміщувалася в іншому селекторі. Тому ми створили ще один модуль для товарів зі знижкою, вказавши відповідні дані для параметра "Ціна":

Селектори з вартістю для товарів із однією ціною та зі знижкою

Зверніть увагу

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

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

Мультимовні листи для ваших клієнтів

Додаємо нестандартні дані

У редакторі повідомлень eSputnik зробити "розумним" можна не тільки контейнер, розміщуючи блоки один під одним, але й структуру з потрібною композицією. Такий макет ми зробили для великої картки товару.

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

  • розмір знижки;
  • розмір;
  • колір;
  • опис;
  • матеріал.

Дослідивши більш детально код сайту, ми з’ясували, що опис та розміри підставляти до листа автоматично не вдасться. Тому підсумковий варіант smart-структури містив ті дані, які одразу підтягуються зі сторінки товару:

Картка товару у вигляді smart-структури

Так само як у випадку з маленькими картками, ми підготували різні smart-елементи для товарів зі знижкою та без. Розмір та опис товарів стали опціональними: за бажання клієнт міг додавати цю інформацію вручну.

Робимо зовнішній вигляд досконалим

Одна з найпоширеніших причин, чому не всім вдається потоваришувати зі смарт-блоками, – фінальна візуалізація в листі. Підстановка даних за пару секунд – це добре, але як щодо зовнішнього вигляду? Більшою мірою проблеми виникають зі структурами, в яких кілька smart-контейнерів розміщуються в ряд. Товари мають назви різної довжини, зображення з сайту можуть відрізнятися розмірами. У результаті контейнери виходять різної висоти, а картки з'їжджають:

Поширена проблема з версткою

Раніше для уникнення таких ситуацій email-спеціаліст OSTRIV готував картки товарів для розсилки у вигляді картинок за допомогою Photoshop. Фото, назва, ціна та кнопка – все це було єдиним зображенням, яке підганялося під певний розмір. Потім структуру наповнювали двома-трьома такими картинками:

Картка товару у вигляді однієї картинки

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

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

Тож розглянемо, як користуватися функціональністю smart-блоків повною мірою, не побоюючись, що лист буде непрезентабельним.

Налаштовуємо блок із назвою товару

Швидко додати й прибрати зайвий простір навколо елемента в нашому редакторі допомагають дві функції:

  • налаштування відступів у меню налаштувань ліворуч;

Налаштування відступів навколо елементів листа

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

Використання динамічного роздільника

Але ці способи не можна назвати ідеальними з кількох причин:

  • необхідно налаштовувати відступи у кожній розсилці залежно від добірки товарів;

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

І все ж таки універсальні рішення є. Залишилося тільки вибрати відповідні конкретно для вас.

Фіксована висота блоку

Тут на допомогу поспішає його величність код. Він дозволяє задавати оптимальну висоту блоку, яка не змінюватиметься залежно від довжини назви. Щоб встановити це значення, необхідно вибрати потрібний smart-елемент, клікнути значок "Редактор коду" на панелі інструментів зверху та перейти у вікно з кодом, яке відкриється.

Встановлення висоти контейнера в редакторі HTML-коду

Тут треба знайти частину коду, яка відповідає за назву, і прописати висоту контейнера

Єдиного правильного значення висоти немає – воно буде індивідуальним залежно від використовуваного шрифту, ширини самої картки, максимальної довжини назви. У типовому випадку висота контейнера дорівнює висоті тексту (при найдовшому найменуванні, наприклад у 4 рядки) + висота відступів. Для структури з двома картками нам достатньо було задати висоту 65рх, а з трьома – вже 85рх, тому що контейнери в такому шаблоні будуть вужчими.

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

Картки з блоками фіксованої висоти

Обмежена кількість символів у блоці

Ми не використовували такий підхід під час верстки блоків для OSTRIV, проте його можна брати на озброєння. Особливо це підійде для сайтів, де товари мають дуже довгі назви, наприклад інтернет-аптек. У таких випадках найменування можуть займати багато рядків, тим паче у вузьких контейнерах. Щоб покращити візуальне сприйняття, можна обмежити кількість символів у блоці.

Для цього в меню налаштувань виберіть змінну з назвою та у розділі правил відповідності “Звідки брати” натисніть кнопку “Додати модифікатор”:

Додавання модифікатора

Заповніть поля, що з'явилися:

  • Модифікатор – пропишіть (^.{X}).*, де X – кількість символів, які відображатимуться.

  • Заміщення – тут використовується шаблон заміни $1. Вкажіть це значення, і за замовчуванням відображатиметься те, що ви налаштували за допомогою модифікатора. До цього параметра можна дописувати також свій текст. Наприклад, якщо прописати $1…, ви отримаєте скорочену назву з трьома крапками:

Параметри модифікатора

Опція “Глобальна заміна” відповідає за кількість замін: якщо її активовано – замінюються всі відповідні збіги, якщо вимкнено – змінюється лише перший, виявлений системою. Для нашого налаштування слід залишити повзунок активованим.

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

Налаштовуємо блок із зображенням

Фотографії товарів на сайті OSTRIV мають однаковий розмір та співвідношення сторін. І все ж таки під час тестування smart-блоків ми натрапили на єдиний товар в одній із попередніх колекцій, у якому параметри зображення трохи відрізнялися від інших. Щоб уникнути проблем із версткою, ми передбачили універсальне рішення для коректного відображення.

Таємниця криється в тому самому коді: треба лише задати в блоці оптимальні параметри для зображень. Ідемо знайомим шляхом у редактор коду і встановлюємо значення максимальної ширини (max-width) та висоти (max-height).

Налаштування параметрів зображень за допомогою коду

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

Last post

Ще кілька слів про код

Те, що на перший погляд може здаватися неідеальним після первинного налаштування генератора карток, у більшості випадків можна виправити за допомогою нескладного коду як у HTML, так і в CSS. Під час підготовки шаблону для OSTRIV ми зіткнулися з тим, що назви товарів автоматично прописувалися малими літерами, хоча на сайті вони були оформлені великими. Дані, які підставляються до картки після вставки посилання, можна змінювати вручну. Але кому треба передруковувати текст із увімкненим Caps Lock?

Щоб зберегти регістр літер у стилі сайту, ми використовували властивість CSS text-transform. Для цього в редакторі коду перейшли до відповідної вкладки та прописали значення uppercase для назви товару:

Редагування стилів листа у вкладці CSS

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

Налаштування відображення за допомогою CSS

Зберігаємо результати

Щоб використовувати підготовлені smart-елементи в інших листах, можна піти такими шляхами:

  • Зберегти лист із готовими блоками як шаблон та у подальшому наповнювати його копії потрібним контентом. Для цього в редакторі повідомлень треба натиснути стрілку поруч із кнопкою “Зберегти” та вибрати відповідну опцію. Лист буде доступний у розділі “Збережені шаблони”.

Збереження листа у вигляді шаблону

  • Завантажити контейнери та структури до бібліотеки модулів і вставляти їх у новий лист за потреби. Слід пам'ятати, що в цьому випадку до модуля можуть бути застосовані власні стилі листа, тому деякі налаштування оформлення зміняться після вставки блоку. Щоб це виправити, необхідно задати відповідні параметри у вкладці CSS у редакторі коду або в меню налаштувань ліворуч та у верхній панелі.

Збереження smart-контейнера у вигляді модуля

  • Копіювати код елемента. Ви вже знаєте, як використовувати редактор коду в eSputnik. Скопіювавши код налаштованого блоку в одному листі та вставивши його в іншому, ви отримаєте потрібний елемент у новому повідомленні. Не забудьте додати ті самі стилі CSS, якщо вони мають якісь особливості.

Вставка коду smart-структури

Щоб скопійований через код smart-блок коректно працював у новому листі, необхідно також перенести до нього налаштування конфігурації. Для цього клікніть елемент у вихідному повідомленні, перейдіть до меню ліворуч і виберіть пункт "Редактор JSON".

Редактор JSON

Виділіть весь текст у вікні, що з'явиться, і перенесіть до відповідного розділу налаштувань у новому емейлі.

Копіювання налаштувань конфігурації

У результаті ви отримаєте smart-блок повністю готовий до використання.

Резюме

Якщо ви досі не використовували функціональність smart-елементів і нарешті вирішили з їхньою допомогою спростити підготовку розсилки, рекомендуємо взяти на замітку такі рекомендації:

  1. Верстка не кожного сайту надає можливість "витягувати" дані так, як це потрібно для конфігурації smart-елементів. Одні не дозволяють зробити це взагалі, інші – частково, треті повністю підходять для налаштування, але можуть мати особливості розміщення даних у селекторах. У будь-якому випадку, уважно досліджуйте код сторінок сайту, щоб визначитися, які параметри ви зможете підставляти автоматично.

  2. Якщо вам вдалося налаштувати коректну підстановку даних, але зовнішній вигляд блоку вас із якихось причин не влаштовує, не впадайте у відчай. Зазвичай досвідчений верстальник (а іноді навіть самостійного пошуку потрібної інформації в Google буде достатньо) зможе підкоригувати деякі недоліки без якихось специфічних методів. Краще одного разу приділити час налаштуванню, щоб надалі заощаджувати його при кожній розсилці.

  3. Використовуйте smart-блоки разом із іншими можливостями eSputnik – роловером, бібліотекою модулів, розділом шаблонів повідомлень та ін., щоб отримати максимальну користь від цієї функціональності. У результаті ви зможете не тільки швидко створювати ефектні розсилки, але й зменшити ймовірність помилки під час заповнення картки товару..

Відгук нашого клієнта підтверджує це на реальному досвіді:

“Smart-блоки однозначно допомогли нам у роботі. Раніше на підготовку розсилки витрачався приблизно один день. Наразі створити листа наш спеціаліст може за 1-2 години залежно від завантаженості іншими завданнями. Ми повністю позбулися проблеми, коли ми не встигали підготувати лист до дедлайну і доводилося переносити відправлення розсилки”

Антон Дєдусь,  директор інтернет-магазину OSTRIV

 

Швидке створення розсилок

І трохи цифр наостанок. Після впровадження smart-елементів у реакції підписників можна було спостерігати дві нові тенденції:

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

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

Порівняння переходів із пристроїв

  1. Самі картки товарів теж почали отримувати більше кліків, ніж раніше. Окрім банера (як одного з найпопулярніших елементів листа), раніше основну увагу підписників привертали кнопки перегляду загального каталогу та картинки, які ведуть до розділів для жінок і для чоловіків. Звісно, тут не останню роль відіграє власне добірка товарів. Однак якщо ви маєте за мету вести підписників на конкретні сторінки товарів, а не до загальних розділів, спробуйте поекспериментувати з версткою. У нашому випадку заміна суцільних зображень на HTML-елементи додала свій ефект.

Порівняння кліків елементів листа

Бажаєте так само додати щось нове у свої розсилки, а заразом зберегти масу часу для генерації ідей? Спробуйте налаштувати smart-елементи просто зараз – і переконайтеся на власному досвіді, наскільки це зручно! А якщо хочете передивитися стратегію розсилок глобально, звертайтеся до нашої агенції, і ми доберемо рішення індивідуально для вас!

0.0 з 5 на основі 0 оцінок

Ксенія Петрина

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

Коментарі 0