Перші кроки
Дані користувача
- Огляд адаптивного email-редактора
- Cтворення оформлення для листа
- Створення синхронізованих модулів
- Налаштування адаптивності
- Налаштування smart-контейнерів
- Оформлення промовкладки для Gmail
- Додавання Ролловера
- Додавання анкорних посилань
- Бібліотека модулів
- Додавання таблиці до листа
- Додавання кастомних шрифтів
- Створення кнопки СТA
- Робота з блоком "Зображення"
- Робота з блоком “Таймер"
- Використання ШІ в email-редакторі
Омніканальність
- SDK для мобільних застосунків
- Керування ключами доступу до мобільного SDK
- Підключення мобільного застосунку
- Створення та завантаження ключа Firebase
- Створення мобільних push-повідомлень
- Налаштування аналітики доставлень та кліків
- Планування мобільних push-повідомлень
- Типи діплінків
- Надсилання тестових повідомлень із налагодження запитів
- Налаштування віджетів для сайту
- Виклик віджета
- Налаштування геоданих для правил виклику віджетів
- Збереження даних із віджетів у поля контактів
- Захист від роздратування
- Дії після заповнення форми
- Заміна системного сценарію Double Opt-In
- Розширення для тестування форм в Google Chrome
- Створення pop-up-форм за допомогою Google Tag Manager або WordPress
- Надсилання подій з віджетів eSputnik до Google Analytics
- A/B-тестування віджетів
Автоматизація
- Налаштування та редагування сценаріїв
- Налаштування умов запуску та зупинки сценарію
- Блок “Старт”
- Група блоків “Популярні”
- Група блоків “Повідомлення”
- Група блоків “Контакт”
- Група блоків "Умови"
- Група блоків “Інше”
- Група блоків “Повідомлення на групу”
- Група блоків “Час”
- Дозволений час відправлення
- Вебхуки в сценаріях
- Відстеження історії запусків сценарію
- Якщо сценарій не працює
- Подвійне підтвердження підписки
- Вітальна серія
- Вітальна серія із сегментацією за категоріями
- Запуск сценарію після імпорту контактів
- Регулярний сценарій для групи
- Вітання з днем народження
- Привʼязка сценарію до кнопки
- Використання змінних із замовлення у сценарії
- Збір відгуків про замовлення
- Реактивація клієнтів та підписників
- Відправка розсилки непрочитавшим
- Налаштування додаткових розсилок
Персоналізація
- Підстановка промокоду з файлу
- Підстановка промокоду з використанням API
- Принципи генерації промокодів за допомогою PHP/JAVA
- Підстановка промокоду за допомогою персоналізації
- Завантаження промокодів для використання в сценарії
- Генерація промокодів у сценарії
- Відправлення промокоду за допомогою передпроцесора
- HTTP-запит для передачі промокоду з повідомлення до картки контакту
Аналітика
- Звіт щодо email-розсилки
- Звіт щодо SMS-розсилки
- Звіт щодо розсилки Web Push
- Звіт щодо Viber-розсилки
- Звіт щодо розсилки Mob Push
- Звіт щодо розсилки App Inbox
- Звіт зі взаємодії з In-App
- Звіт зі взаємодії з віджетами
- Звіт щодо тригерної розсилки
- Звіт щодо AMP-розсилки
- Звіт щодо мультимовної розсилки
- Налаштування передачі UTM-міток
- Візуалізація доходу
- Відстеження ефективності кампаній у Google Analytics 4
- Статистика повідомлень
Мультимовність
Відстеження подій та поведінки
- Події для запуску тригерних розсилок
- Валідація параметрів подій
- Відстеження активності на сайті за допомогою Generate event
- Підстановка даних з подій в повідомлення
- Розгалуження сценарію в залежності від параметрів події
- Відстеження активності клієнтів у мобільних застосунках
- Вебхуки для відстеження активності
Товарні рекомендації
API
- Поширені питання: Інтеграція з API
- API-ключі
- Ресурси API для додавання контактів
- Використання API-ресурсу Generate event
- Передача замовлень API-ресурсом Generate event
- Отримання рекомендацій щодо API ресурсом Contact recommendations based on web tracking
- Використання API-ресурсу Send prepared message
Зміна системи
Документи
Інтеграція
Налаштування smart-контейнерів
Smart-контейнер — це елемент шаблону, що складається з базових блоків (картинка, текст, кнопка), контент яких автоматично підставляється з сайту.
Зверніть увагу
Якщо ваш сайт використовує OG (Open Graph) теги, які надають структуровані дані про вміст веб-сторінки, це дозволяє eSputnik автоматично підставляти інформацію про товари в лист.
Коли дані з сайту не підтягуються або потрібно показати додаткові параметри товару, до існуючих карток параметри додаються вручну.
У цій інструкції розглянемо, як перевірити, чи працює автозаповнення карток контенту і як внести вручну налаштування за необхідності.
Автоматична підстановка даних з сайту
Суть цього способу у тому, що вам потрібно лише скопіювати URL-адресу товару та вставити посилання в контейнер. Після чого система підставить відповідні дані до листа.
-
Перейдіть до розділу “Повідомлення” → “Повідомлення” → “Email”. Відкрийте email або створіть новий.
Примітка
Якщо ви використовуєте лист із налаштованим оформленням, стилі оформлення одразу застосуються до усіх доданих об'єктів з бібліотеки модулів.
-
Перейдіть до вкладки “Модулі” → “Загальні”. Виберіть категорію “Картки товарів” та додайте готовий модуль.
Для прикладу візьмемо модуль з картками, що містять:
-
Зображення товару,
-
Назву,
-
Ціну,
-
Кнопку.
-
Перетягніть картку до листа.
Підстановка даних у контейнер
-
Відкрийте сторінку товару та скопіюйте url адресу.
-
Натисніть “Smart-Контейнер” → “Дані” → “Smart” у меню зліва та вставте скопійовану адресу в поле “Посилання”.
-
Система підставить дані:
-
Підтягнуться всі параметри, за винятком самої назви кнопки, тому змініть її назву та продублюйте модуль далі.
-
Вставте скопійовані адреси для кожного товару у відповідний контейнер у листі.
-
Збережіть налаштовану структуру до бібліотеки модулів для використання в інших листах.
Додавання параметрів до існуючих карток
Цей спосіб налаштування smart-контейнерів більш трудомісткий і вимагає певних технічних навичок, однак, це надає більш гнучкий підхід для індивідуального налаштування змісту email.
При використанні цього методу ви можете додавати різні параметри товару, такі як колір, артикул, країна походження, величина знижки, строки дії акції тощо. Це особливо корисно, якщо у вас різноманітний асортимент товарів із різними характеристиками.
Для налаштування потрібно виконати такі кроки:
-
Додати в лист блоки та вказати для них змінні та правила відповідності,
-
Підставити CSS селектор елементу.
Розглянемо приклад, коли потрібно додати до готового модуля інформацію про наявність товару.
Редагування HTML коду
-
Додайте до контейнера блок “Текст” із текстом “Наявність”.
-
Натисніть “Smart-контейнер” у верхній частині контейнера.
-
Відкрийте код цього блоку натиснувши відповідну іконку на панелі редактора.
-
Додайте атрибут class до поля “Наявність”: class="Exists".
Додавання змінних та правил відповідності
-
Виберіть в налаштуваннях контейнера вкладку “Дані” → “Smart” → “Конфігурація”.
-
Натисніть “+” → “Змінна var”.
-
Додайте змінну p_exists та вкажіть її назву “Exists”.
-
Перейдіть до секції “Правила відповідності”, виберіть вкладку “Куди примінити” і для змінної p_exists вкажіть селектор — “.Exists”. Поле “Атрибут” залиште порожнім.
Увага
Назва CSS селектора елементу чутлива до регістру і має співпадати з назвою атрибута класу, що вказана у коді листа.
-
Перейдіть на вкладку “Зовнішній вигляд”. Якщо все зроблено вірно, то має з'явитись поле “Exists”.
Підстановка CSS селектора
-
Перейдіть на сторінку товару у вашому браузері.
Примітка
В прикладі розглянуто базовий спосіб перевірки елементів веб-сторінці за допомогою DevTools в Google Chrome для Windows. Якщо ви користуєтеся іншими браузерами та операційними системами, зверніться до документації щодо використання DevTools та перевірки елементів.
-
Перевірте елемент сторінки: натисніть на клавіатурі “Ctrl+Shift+ I” або F12 та відкрийте DevTools.
-
Натисніть Ctrl+Shift+ С або кнопку з курсором у лівому верхньому куті на панелі DevTools для вибору опції “Перевірити елемент”.
-
Виберіть елемент на сторінці натиснувши ліву кнопку миші. В нашому випадку це “В наявності”.
-
В редакторі коду клікніть праву клавішу миші, та з випадного меню виберіть “Копіювати selector”.
-
У smart-контейнері перейдіть до секції “Правила відповідності”, та виберіть вкладку “Звідки брати”.
-
Для змінної p_exists вставте скопійований селектор у поле “CSS селектор”. Поле “Атрибут” залиште порожнім.
До контейнера підтягнеться інформація зі сторінки товару щодо його наявності.
Примітка
Зазвичай, веб-сайти використовують стандартні назви селекторів CSS, тому налаштування smart-контейнерів має бути застосовано до більшості веб-сторінок, що наслідують стандарти CSS. Деякі веб-сторінки мають індивідуальні назви селекторів та атрибути, що потребують розширених налаштувань або створення нових smart-контейнерів.
Кроки з налаштування нового контейнера будуть схожими до кроків зазначених у розділі “Додавання параметрів до існуючих карток”. Тільки додавання змінних та правил відповідності треба задавати для кожного елементу.
Якщо у вас виникнуть питання з налаштування smart-контейнерів зв'яжіться з нами за адресою support@esputnik.com.