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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Резюме

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

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

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

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

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

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

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

 

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

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

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

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

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