Перші кроки
Дані користувача
- Огляд адаптивного email-редактора
- Cтворення оформлення для листа
- Створення синхронізованих модулів
- Налаштування адаптивності
- Налаштування Smart-елементів
- Оформлення промовкладки для Gmail
- Додавання Rolloverʼа
- Додавання фону до листа
- Додавання анкорних посилань
- Бібліотека блоків (Модулі)
- Додавання таблиці до листа
- Додавання кастомних шрифтів
- Додавання кастомних іконок соцмереж
- Створення кнопки СТA
- Робота з блоком "Зображення"
Омніканальність
- SDK для мобільних застосунків
- Керування ключами доступу до мобільного SDK
- Підключення мобільного застосунку
- Створення Google проекту для Mob Push
- Створення мобільних push-повідомлень
- Налаштування аналітики доставлень та кліків
- Планування мобільних push-повідомлень
- Налаштування універсальних посилань (deeplinks & Universal links)
- Надсилання тестових повідомлень із налагодження запитів
- Налаштування віджетів для сайту
- Виклик віджета
- Збереження даних із віджетів у поля контактів
- Захист від роздратування
- Дії після заповнення форми
- Розширення для тестування форм в Google Chrome
- Створення pop-up-форм за допомогою Google Tag Manager або WordPress
- Надсилання подій з віджетів eSputnik до Google Analytics
- Заміна системного сценарію Double Opt-In
- Налаштування геоданих для правил виклику віджетів
Автоматизація
- Подвійне підтвердження підписки
- Вітальна серія
- Вітальна серія із сегментацією за категоріями
- Запуск сценарію після імпорту контактів
- Регулярний сценарій для групи
- Вітання з днем народження
- Привʼязка сценарію до кнопки
- Реактивація клієнтів та підписників
- Відправка розсилки непрочитавшим
- Налаштування додаткових розсилок
Персоналізація
- Підстановка промокоду з файлу
- Підстановка промокоду з використанням 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
Зміна системи
Документи
Інтеграція
Налаштування Smart-елементів
Коли ми готуємо проморозсилку, часто-густо доводиться кілька разів повторювати одні й ті самі дії в листі: скачати кілька картинок, скопіювати посилання, назви й ціни для товарів, які ми додаємо. Це потребує доволі багато часу, але існує спосіб усе прискорити.
Наша рятівна паличка — це smart-контейнер, який дозволить суттєво заощадити ваш час при створенні листа.
Що таке smart-елемент?
Smart-елемент — це контейнер, який складається з базових блоків (картинка, текст, кнопка), але налаштованих для отримання даних із вашого сайту. Треба одноразово налаштувати:
- зовнішній вигляд контейнера;
- змінні;
- задати правила, звідки брати значення й куди їх підставляти,
щоб надалі просто підставити посилання на товар, а система підтягла до картки товару всю інформацію.
У цьому відео ми розповімо, як налаштувати смарт-блок.
Приклад створення smart-елемента
Візьмемо для прикладу сайт toys.com.ua. Для створення картки товару нам знадобляться картинка, назва товару й ціна.
Підготуємо картку товару. Візьмемо структуру з трьома контейнерами (кількість контейнерів може бути будь-якою залежно від ваших потреб).
Заради зручності бажано одразу наповнювати їх контентом, щоб було видно, куди і що додавати. Всі елементи мають бути розміщеніі в одному контейнері.
Наповнимо її відповідно до дизайну сайту в такій послідовності:
- картинка;
- назва товару;
- ціна;
- кнопка.
Після цього виділяємо контейнер із базовими блоками (для цього натискаємо синій ярлик і "Контейнер" угорі), вибираємо в бічній панелі вкладку "Дані" й натискаємо кнопку "Почати" для активації Smart-властивості.
У результаті в нас відкривається конфігурація, де ми будемо налаштовувати всі необхідні посилання:
Що важливо знати — є два типи даних, які нам потрібно налаштувати. Вони прописуються в розділі "Правила відповідності":
-
"Куди застосовувати" — тут ми будемо задавати правила, до чого саме треба застосувати вже отримані значення змінних у нашому smart-елементі.
-
"Звідки взяти" — тут налаштовуються правила, звідки слід отримати значення змінних із потрібного нам сайту.
Важливий момент, який допоможе нам заощадити час: налаштовуйте блок так, ніби вже відправляєте розсилку — правильне зображення товару з посиланням на нього, альтернативним текстом і назвою, ціною та іншими потрібними нам пунктами картки товару. У нашому випадку це картинка, назва, ціна.
Почнемо налаштування Smart-блоків
За замовчуванням доступне тільки посилання:
Для повноцінної картки товару цього замало, тому ми додаємо, натиснувши плюсик, потрібні нам пункти:
Із випадаючого списку вибираємо:
- картинку;
- назву;
- ціну.
Картинка
Тепер нам треба дізнатися, який селектор містить зображення в нашому стандартному блоці. Для цього відкриваємо код листа, натиснувши редактор коду.
За замовчуванням використовується img:
Заради зручності додамо клас:
Потім переходимо до налаштувань картинки на вкладку "Куди застосувати" і прописуємо селектор:
У кожної картинки також є атрибут, у цьому випадку — src, рідше зустрічається html, залежно від сайту. Прописуємо його:
Потім перевіряємо результат на вкладці "Зовнішні дані" — чи підставилося посилання на нашу картинку:
Назва товару
Починаємо налаштовувати відображення назви за аналогією. Прописуємо вручну біля назви клас, копіюючи з конфігурації або вигадуючи свій, — головне, щоб він був унікальним.
У нашому прикладі селектор — це a.name, атрибут тут не потрібний, оскільки це звичайне текстове поле.
У результаті назва буде відображатися на вкладці "Зовнішній вигляд".
Ціна
За аналогією з іншими полями налаштовуємо ціну. Дивимося в коді html-селектор, у цьому прикладі ціна має селектор span.price. Отримуємо результат:
Тобто ми додали селектори в блок, до якого будуть підставлятися товари з сайту, і здійснили їхнє налаштування. Це налаштування тільки шаблону листа; наступний крок — збирання даних із сайту.
Налаштовуємо передачу даних із сайту до листа
Візьмемо сторінку з товаром, із якої ми будемо підтягувати дані:
Зображення
Знаходимо селектор зображення на сайті. Якщо ви працюєте в Google Chromе, відкрийте інспектор коду кнопкою F12 і за допомогою пошуку елемента виберіть
і переходьте до налаштування другої частини: заповніть розділ "Звідки взяти".
На сайті знаходимо посилання на зображення товару в редакторі коду і дивимося селектор та атрибут, у нашому випадку це src:
У нашому випадку селектор - це
#galleryList > div > div > li.gallery-item._img.js-gallery-item.active-view.slick-slide.slick-current.slick-active > a > picture > img
а атрибут - src.
Прописуємо його на вкладці "Звідки взяти":
Підставляємо посилання на товар:
Якщо все налаштовано коректно, у вас одразу підтягнеться зображення.
Щоб коректно підтягувалася альтернативна назва у зображенні товару, додаємо селектор h1:
Потім пропишемо два селектори в розділі "Куди застосовувати":
Вказуємо атрибути alt і title.
Ціна
Визначаємо на сайті селектор ціни, для нашого прикладу це
#productCard > section > div.product-card__right > div.product-card__foot > div.product-card__actions > div.price-box.price.js-item-price > div.price-box__content.price-box__content_special > div.price-box__content-i > span.price-value
і прописуємо його в самому блоці:
Натискаємо "Отримати значення" й порівнюємо результат.
Ми можемо додати ще один селектор, щоб підтягувалася валюта з сайту, або одразу прописати валюту в коді листа, якщо вона не змінюється.
Перевіряємо отриманий результат
Для перевірки правильності налаштувань копіюємо код і вставляємо в сусідні два контейнери. Щоб перевірити, чи вони працюють, беремо посилання на інші товари й підставляємо в контейнер:
Отримуємо результат:
Невеличкі лайфхаки:
1. Налаштуйте один смарт-блок з усіма даними, які можуть знадобитися. За потреби можна видаляти окремі контейнери в блоці.
2. Якщо ви бажаєте скопіювати структуру до іншого листа, використовуйте редактор JSON.
Скопіюйте весь код із цього розділу і потім вставте його до потрібної структури іншого листа.
3. Зберігайте по-різному оформлені контейнери в бібліотеці й використовуйте їх у будь-якому листі.
4. З одного оформленого контейнера ви можете зробити будь-яку картку: три в рядок, чотири у стовпчик, тому не обов'язково створювати з нуля повну картку — просто скопіюйте вміст контейнера до сусідньої клітинки.
5. Можна налаштовувати такі самі контейнери для текстових блоків, наприклад для статей блогу.