Перші кроки
Дані користувача
- Огляд адаптивного email-редактора
- Cтворення оформлення для листа
- Створення синхронізованих модулів
- Налаштування адаптивності
- Налаштування Smart-елементів
- Оформлення промовкладки для Gmail
- Додавання Rolloverʼа
- Додавання фону до листа
- Додавання анкорних посилань
- Бібліотека блоків (Модулі)
- Додавання таблиці до листа
- Додавання кастомних шрифтів
- Додавання кастомних іконок соцмереж
- Створення кнопки СТA
- Робота з блоком "Зображення"
- Використання ШІ в email-редакторі
Омніканальність
- SDK для мобільних застосунків
- Керування ключами доступу до мобільного SDK
- Підключення мобільного застосунку
- Створення Google проекту для Mob Push
- Створення мобільних push-повідомлень
- Налаштування аналітики доставлень та кліків
- Планування мобільних push-повідомлень
- Налаштування універсальних посилань (deeplinks & Universal links)
- Надсилання тестових повідомлень із налагодження запитів
- Налаштування віджетів для сайту
- Виклик віджета
- Налаштування геоданих для правил виклику віджетів
- Збереження даних із віджетів у поля контактів
- Захист від роздратування
- Дії після заповнення форми
- Заміна системного сценарію Double Opt-In
- Розширення для тестування форм в Google Chrome
- Створення pop-up-форм за допомогою Google Tag Manager або WordPress
- Надсилання подій з віджетів eSputnik до Google Analytics
Автоматизація
- Подвійне підтвердження підписки
- Вітальна серія
- Вітальна серія із сегментацією за категоріями
- Запуск сценарію після імпорту контактів
- Регулярний сценарій для групи
- Вітання з днем народження
- Привʼязка сценарію до кнопки
- Реактивація клієнтів та підписників
- Відправка розсилки непрочитавшим
- Налаштування додаткових розсилок
Персоналізація
- Підстановка промокоду з файлу
- Підстановка промокоду з використанням API
- Принципи генерації промокодів за допомогою PHP/JAVA
- Підстановка промокоду за допомогою персоналізації
- Завантаження промокодів для використання в сценарії
- Генерація промокодів у сценарії
- Відправлення промокоду за допомогою передпроцесора
- HTTP-запит для передачі промокоду з повідомлення до картки контакту
Аналітика
- Звіт щодо email-розсилки
- Звіт щодо SMS-розсилки
- Звіт щодо розсилки Web Push
- Звіт щодо Viber-розсилки
- Звіт щодо розсилки Mob Push
- Звіт щодо розсилки App Inbox
- Звіт зі взаємодії з віджетами
- Звіт щодо тригерної розсилки
- Звіт щодо AMP-розсилки
- Звіт щодо мультимовної розсилки
- Налаштування передачі UTM-міток
- Візуалізація доходу
- Відстеження ефективності розсилок у Google Analytics
Мультимовність
Відстеження подій та поведінки
- Відстеження активності на сайті за допомогою Generate event
- Валідація параметрів подій
- Відстеження активності клієнтів у мобільних застосунках
- Події для запуску тригерних розсилок
- Розгалуження сценарію в залежності від параметрів події
- Підстановка даних з подій в повідомлення
- Вебхуки для відстеження активності
Товарні рекомендації
API
- Інтеграція з API — найчастіші питання
- API-ключі
- Ресурси API для додавання контактів
- Використання API-ресурсу Generate event
- Передача замовлень API-ресурсом Generate event
- Отримання рекомендацій щодо API ресурсом Contact recommendations based on web tracking
- Використання API-ресурсу Send prepared message
Зміна системи
Документи
Інтеграція
Створення кнопки СТA
Кнопка заклику до дії (CTA) — це обов'язковий елемент email-розсилки, який мотивує підписника перейти на сайт, у соцмережі та ін. Створити кнопку в листі за допомогою редактора eSputnik, дотримуючись нашої покрокової інструкції, дуже просто.
Як зробити кнопку в листі?
Основна кнопка в листі зазвичай робиться в тому ж стилі, що й кнопки на сайті. Наприклад, на сайті компанії ми бачимо таку кнопку і нам треба зробити її аналог у листі.
Два варіанти додавання кнопки в лист
Вибираємо місце в шаблоні, де буде розміщена кнопка.
Варіант 1: Створюємо кнопку в Структурі з кількома Контейнерами
-
у вкладці "Контент" на бічній панелі ліворуч заходимо до пункту "Блоки";
-
вибираємо блок "Кнопка" й перетягуємо його мишею в потрібний контейнер.
Структура як елемент листа є вищою за ієрархією, ніж контейнери і блоки. Вона включає їх до себе. Такий варіант краще використовувати, щоб контент коректно перебудовувався в мобільній версії. Наприклад, якщо треба задавати інверсію блоків.
Варіант 2: Створюємо кнопку в окремій Структурі
-
у бічному меню ліворуч у вкладці "Контент" заходимо до "Структури";
-
перетягуємо мишею необхідну структуру в потрібне місце в листі, потім вибираємо тип контенту, який хочемо створити; у нашому випадку це "Кнопка".
Коли ми додаємо нову структуру, в ній уже є порожній контейнер, до якого ми й додаємо кнопку. Отримуємо такий результат:
Така структура, яка містить тільки блок з СТА, не буде перебудовуватися відносно інших структур та елементів контенту в листі.
Як змінити дизайн кнопки
За замовчуванням завжди створюється кнопка без перелінкування, із написом "Кнопка", зробленим шрифтом Arial 18 розміру, колір кнопки зелений #31cb4b, а колір тексту — білий #ffffff. Інші налаштування кнопки за замовчуванням є такими:
- Колір фону — прозорий.
- Заокруглення 30 px.
- Вирівнювання по центру.
- Межі активовані, для лівої, правої та верхньої встановлені значення 0px, для нижньої — 2px.
- Внутрішні відступи: лівий і правий по 20 px, верхній та нижній — по 10 px.
Як задати стиль для однієї кнопки
Редагувати зовнішній вигляд кнопки можна таким чином:
Клікаємо блок із кнопкою. У частині екрана ліворуч з'являється меню, в якому задаються всі необхідні параметри:
-
Посилання, яке відкриватиметься при натисканні кнопки.
Активація функції "Безпечне посилання" запобігає автоматичному або масовому зверненню до посилання з метою захисту від небажаної активності, наприклад, як спам.
-
Текст кнопки.
-
Стиль тексту (шрифт, розмір).
Рекомендуємо використовувати стандартні шрифти, щоб усе відобразилося так, як заплановано.
-
Колір кнопки.
Можна як вказати готовий код кольору, так і вибрати найвідповідніший із запропонованих.
-
Колір тексту.
Вибраний колір застосовується тільки для тексту кнопки. Вибирайте кольори, які добре поєднуються між собою і контрастують із фоном кнопки.
-
Колір фону.
За замовчуванням завжди встановлений прозорий фон, але його легко замінити.
-
Заокруглення.
За замовчуванням значення завжди 30 px. Відрегулювати його можна натисканням кнопок -/+ або прописати вручну.
-
Вирівнювання кнопки.
Щоб задати налаштування вирівнювання на мобільному пристрої, натисніть значок телефону.
-
Розтягнути по ширині.
Увімкніть, якщо вам потрібно, щоб кнопка СТА була на повну ширину листа. Висота кнопки при цьому не змінюється.
-
Межі.
Можна задати межі й колір для всієї кнопки або погратися з кожною стороною окремо.
Крім розмірів можна налаштовувати форму меж:
-
Внутрішні відступи, які будуть проставлені навколо тексту всередині кнопки.
-
Зовнішні відступи. Відступи навколо кнопки у вибраному блоці.
-
Приховування елемента на різних типах пристроїв. За замовчуванням кнопка завжди відображається. Щоб відключити її на десктопі або телефоні, натисніть відповідний значок пристрою.
-
Включати елемент у різні типи листів. Якщо ви вже відправляєте AMP-листи, то для відображення цієї кнопки натисніть ϟAMP.
-
Виберіть подію. Якщо ви бажаєте автоматизувати якісь листи, наприклад, за кліком кнопки відправляти лист клієнтам, — укажіть подію, яка виконуватиме цю дію.
Приклад кнопки після внесення змін до оформлення:
Як задати стилі оформлення для всіх кнопок одразу
За замовчуванням зовнішній вигляд кнопки листа визначається заданими в шаблоні стилями оформлення. Щоб змінити дизайн цього елемента, треба змінити стилі всього листа, тоді всі кнопки, створювані після цього, матимуть однаковий вигляд. Щоб це зробити, в бічному меню вибираємо у вкладці "Оформлення" пункт "Кнопка".
В оформленні можна задати такі параметри:
- Підсвічування кнопки при наведенні.
- Колір кнопки.
- Колір тексту.
- Стиль тексту.
- Заокруглення.
- Межі.
- Внутрішні відступи.
Процес зміни параметрів аналогічний описаному вище, тільки зміни здійснюються у вкладці "Оформлення" в розділі "Кнопка".
Додавання ефекту зміни кольору кнопки при наведенні
Така опція дозволяє привернути увагу підписника до СТА-елемента в листі. Для цього активуємо функцію "Підсвічувати за наведенням" (за замовчуванням її відключено).
Потім задаємо два контрастних кольори кнопки: основний і той, який буде відображатися при наведенні курсора на кнопку. Ось як змінюється на сайті кнопка з нашого прикладу:
Визначаємо кольори (у нашому випадку це чорний #000000 і сірий # 757575) і задаємо їх у відповідних полях:
Тепер вибираємо шрифт, його розмір і колір напису на кнопці (у нашому прикладі колір шрифту білий). Шрифти краще задавати стандартні, які коректно відображатимуться в усіх поштових клієнтах:
Потім задаємо заокруглення кнопки (у нас — майже прямокутна, радіус заокруглення встановлюємо невеликий, 5), а також колір обведення кнопки (якщо в ньому немає потреби, цю опцію можна не активувати):
На наступному кроці задаємо внутрішні відступи, тобто встановлюємо відстань від напису на кнопці до її меж (верху, низу, правого й лівого краю), якщо особливих вимог немає, можна залишити дефолтні значення:
Після всіх вищеописаних дій кнопка набула такого вигляду:
А при наведенні вигляд такий:
Основні налаштування зроблені, тепер у всіх новостворюваних листах у вашому акаунті кнопки матимуть заданий у стилях вигляд.
Не забудьте зробити напис і задати перелінкування, це робиться вже в самому листі: виділіть кнопку в листі, у бічному меню вставте назву кнопки й посилання:
Адаптивність кнопки для мобільних
Щоб на мобільних пристроях кнопка мала інший вигляд, потрібні параметри треба задати в розділі "Оформлення" у вкладці "Адаптивність". Для кнопки можна змінити розмір шрифту й задати опцію відображення кнопки на повну ширину листа.
У вкладці "Контент" можна задати факт відображення або приховування кнопки на мобільних пристроях. Для цього клікніть блок із кнопкою в листі і в меню, яке з'явиться ліворуч, виберіть потрібну опцію в пункті "Приховування елемента":
Як прив'язати подію до кнопки
Можна задати подію, яка запускатиметься при натисканні кнопки:
За допомогою цієї опції можна запускати сценарії, що відповідають, наприклад, за потрапляння підписника до певної групи, зазвичай це підписники, що виявили інтерес до певного товару, категорії, акції.
Читати статтю про прив’язку події до кнопки>>
Як додати картинку у фоні
Якщо кнопку треба змінити, це можна зробити безпосередньо в листі:
-
Виділяєте блок із кнопкою.
-
Праворуч у вкладці "Контент" з'являться всі параметри кнопки, де ви можете змінити те, що вважаєте за потрібне:
- Назва кнопки.
- Стиль, розмір і колір шрифту.
- Колір кнопки.
- Радіус заокруглення.
- Колір обведення й сам факт його наявності.
- Вирівнювання кнопки в блоці (по центру, по лівому або правому краю).
- Внутрішні та зовнішні відступи (внутрішні, як ми писали вище, — це відступи від тексту кнопки до її меж, зовнішні — від меж кнопки до меж блоку, в якому вона розміщена).
Для прикладу змінимо вигляд створеної за допомогою стилів кнопки на такий:
1. Спочатку визначаємо колір. Це #fb2d29. І задаємо в налаштуваннях:
2. Збільшуємо внутрішні відступи:
- Ліворуч і праворуч — 40 рх.
- Зверху і знизу — 20 рх.
3. У червоної кнопки, взятої для прикладу, є синя фонова картинка. Тому ми додаємо фонову картинку контейнеру з кнопкою:
- Перетягуємо бігунок та активуємо функцію "Картинка у фоні".
- Завантажуємо вибрану для фону картинку.
Кнопка готова! Якщо ви плануєте використовувати її також в інших листах, збережіть цей елемент у бібліотеці блоків. Про те, як це зробити, читайте в нашій статті.