Як створювати динамічні листи для подій на основі готових шаблонів SendPulse

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

У сервісі SendPulse є готові шаблони, які працюють за таким же принципом: «Переглянуті товари» (Viewed Products), «Покинутий кошик» (Abandoned Cart), «Завершіть замовлення» (Complete Your Order), «Замовлення прийняте» (Order Received), «Оформлене замовлення» (Order Confirmed), «Замовлення надіслано» (Order Shipped) та «Відгук про покупку» (Feedback Request).

Вам залишиться тільки вибрати потрібний шаблон у конструкторі авторозсилки в елементі «Емейл» (Email) і створити подію з тим переліком змінних, які є в шаблоні, і надсилати ці дані зі свого сайту на створений URL через API.

Докладніше кожен крок розглянемо у цій статті.

Виберіть шаблон

Шаблон можна вибрати відразу в конструкторі авторозсилок в елементі Email > Вибрати шаблон (Select Template) > Шаблони сервісу (Our Template Library) та редагувати в авторозсилці. Або ж вибрати через меню Шаблони (Email Templates) > Бібліотека шаблонів (Template Library), відредагувати і додати в авторозсилку вже як свій готовий.

Відредагуйте шаблон

Налаштування змінних про замовлення

Натисніть Редагувати шаблон (Open in Editor). Перегляньте інформацію, яка пропонується за замовчуванням.

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

Динамічною інформацією будуть дані щодо товарів. Ці дані передаються за допомогою масиву products і кожен товар у цьому масиві відповідає об'єкту item. Кожен item має свої властивості (змінні):

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

Ви можете змінити змінні, будь-яку іншу інформацію та дані, які бажаєте відобразити у листі під свій дизайн.

Для кожного блоку є режим редагування коду. Щоб його відкрити, виберіть блок, натисніть <> на синій панелі редагування текстового блоку. У редакторі коду ви, наприклад, можете знайти змінну посилання - вона відображається як гіперпосилання до тексту назви товару і картинки товару.

Також тут ви можете перевірити відступи, колір, розмір та інші елементи форматування тексту та блоку таблиці.

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

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

Для змінної img до коду шаблону доданий тег відображення зображення з атрибутом джерела <img scr="{{item.img}}">. Саме зображення буде передано до змінної як посилання на картинку. У цю змінну передавайте картинку товару, який вибрав користувач. У цьому блоці також є стилі відображення картинки через атрибут style.

Змінна посилання додається через тег створення посилання з атрибутом адреси <a href="/{{item.url}}">. Перехід за посиланням у цьому шаблоні виконується шляхом кліку на картинку товару або назву товару. У це посилання можна передавати сторінку товару на сайті, де клієнт зробив замовлення.

Налаштування розташування товарів у ряд

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

Для цього всередині тега <tbody> додайте наступні рядки:

<table>
    <tbody> <!--{% set columns = 4 %}--> <!--{% for item in products%}--> <!--{% if loop.first or loop.index0 is divisible by(columns) %}-->
       <tr> <!--{% endif %}-->
            <td> {{item.product_name}}:{{item.product_price}} </td>
       <!--{% if loop.last or loop.index is divisible by(columns) %}--> </tr>
    <!--{% endif %}--> <!--{% endfor %}--> </tbody>
</table>

Розшифровка рядків коду:

Для коректної роботи потрібно закоментувати за допомогою <!-- --> всі рядки коду шаблону, за винятком верстки шаблону та динамічних змінних (item.product_name та подібні).

Скопіюйте назви змінних

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

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

Назви цих змінних нам знадобляться для створення події. За замовчуванням використовується нижній регістр для всіх змінних.

Збережіть шаблон

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

Перевірте шаблон — якщо все правильно, натисніть Зберегти та продовжити (Save and Continue) у верхньому правому куті.

Створіть подію

Для запуску авторозсилки та передачі даних клієнта з вашого сайту вам потрібно буде створити подію з цими змінними.

Перейдіть до розділу Automations > Менеджер подій (Events Manager), натисніть Додати нову подію (Add new event) та виберіть Кастомна подія (Custom event). У ці поля ми додаватимемо змінні, які прописані в шаблоні.

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

Для даних продукту, тобто блок, який змінюється динамічно залежно від кількості товарів, додаємо змінну products з типом структура (у шаблонах для масивів за замовчуванням використовується змінна з таким ім'ям, якщо ви її змінюєте у шаблоні, то у події її теж потрібно змінити). Потім додаємо до неї назви змінних для продукту. Назви змінних додаються без item.

Після додавання всіх змінних натисніть Додати (Add). Подія успішно створена. Скопіюйте URL-адресу, на яку будуть надсилатися дані, і саме тіло структури даних. Їх потрібно передати вашому розробнику для налаштування надсилання інформації з вашого сайту через запит POST.

Створіть ланцюжок

Перейдіть до розділу Automation, натисніть Створити авторозсилку, якщо ви її не створювали раніше, і виберіть Automation360.

Стартом серії виберіть подію, створену на четвертому етапі.

Ви можете вибрати опцію використовувати змінні зі списку та вибрати адресну книгу, якщо у вас є дані по клієнту, та використовувати їх у шаблоні та фільтрах. Натисніть Застосувати (Apply).

Потім можна додати елемент Фільтр (Filter), щоб відфільтрувати контакти за отриманими змінними і створити кілька гілок сценарію, і елементи Дія (Action), SMS, Push. Або відразу вибрати елемент Email і додати готовий шаблон.

Якщо ви не створювали шаблонів раніше, готові динамічні шаблони знаходяться на вкладці Шаблони сервісу (Service Templates). Якщо ж створювали та зберегли, виберіть потрібний з розділу Мої шаблони (My Templates).

Щоб відредагувати вибраний шаблон, натисніть Редагувати (Edit) під шаблоном. Щоб обрати іншу, натисніть Видалити шаблон (Delete Template) та виберіть новий.

Для елемента Email також виберіть час спрацьовування – одразу або через певну кількість часу. Виберіть тему повідомлення та прикріпіть файл, якщо потрібно.

Для транзакційних листів можна вимкнути посилання відписки. Листів без посилання може бути не більше трьох. Опція вимкнення посиланні на відписку є тільки на платному тарифі Еmail сервісу.

Після заповнення всіх даних натисніть Застосувати (Apply).

Продовжуйте налаштовувати ланцюжок, якщо є додатковий сценарій, або натисніть Зберегти і запустити (Save and Run).

Відповідно до політики сервісу, всі створені листи проходять модерацію: перевіряється контент листа, статистика з розсилок та контакти, якщо такі є. Модерація триває до 20 хвилин.

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

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

Протестуйте, що вийшло

Ви можете протестувати надсилання запиту через Менеджер подій. Для цього виберіть подію та натисніть Надіслати тестовий запит (Run a Test Request).

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

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

Для тестів будемо використовувати програму Postman.

У полі URL додаємо посилання створеної події. Метод запиту вибираємо POST.

У тіло запиту вставляємо параметри, що передаються у форматі JSON. У параметрі масиву products можете додавати кілька товарів.

Для надсилання запиту натискаємо Send.

У разі успішного запиту ви отримаєте відповідь True, а на вказану пошту прийде лист із надісланими даними.

Приклади запитів для подій під готові шаблони

Нижче наведено перелік усіх запитів у JSON зі змінними, які додані за замовчуванням у готові шаблони SendPulse під подієві розсилки.

Приклад запиту для шаблону Завершіть замовлення (Complete the order):

{
  "email": "yourname@example.com",
  "phone": "+123456789",
  "products": [
    {
      "name": "name value",
      "img": "img value",
      "url": "url value",
      "price": 123
    }
  ]
}

Приклад запиту для шаблону Замовлення прийнято (Order Received):

{
  "email": "yourname@example.com",
  "phone": "+123456789",
  "order_id": 123,
  "order_date": "2020-06-18",
  "delivery_recipient": "delivery_recipient value",
  "payment_method": "payment_method value",
  "delivery_address": "delivery_address value",
  "total": 123
  "products": [
    {
      "name": "name value",
      "img": "img value",
      "url": "url value"  
    }
  ]
}

Приклад запиту для шаблону Оформлене замовлення (Order confirmed):

{
  "email": "yourname@example.com",
  "phone": "+123456789",
  "order_id": 123,
  "order_date": "2020-06-18",
  "delivery_recipient": "delivery_recipient value",
  "payment_method": "payment_method value",
  "delivery_address": "delivery_address value",
  "delivery_price": 123,
  "total": 123,
  "products": [
    {
      "id": 123,
      "name": "name value",
      "img": "img value",
      "url": "url value",
      "price": 123,
      "count": 123
    }
  ]
}

Приклад запиту для шаблону Покинутий кошик (Abandoned Cart):

{
  "email": "yourname@example.com",
  "phone": "+123456789",
  "products": [
    {
      "name": "name value",
      "img": "img value",
      "url": "url value",
      "count": 123
      "price": 123
    }
  ]
}

Приклад запиту для шаблону Замовлення надіслано (Order Shipped):

{
  "email": "yourname@example.com",
  "phone": "+123456789",
  "order_id": 123,
  "products": [
    {
      "id": 123,
      "name": "name value",
      "img": "img value",
      "url": "url value",
     }
  ]
}

Приклад запиту для шаблону Відгук про покупку (Feedback Request):

{
  "email": "yourname@example.com",
  "phone": "+123456789",
  "order_id": 123,
  "products": [
    {
      "id": 123,
      "name": "name value",
      "img": "img value",
      "url": "url value",
     }
  ]
}

Надсилайте тригерні листи на основі готових динамічних шаблонів SendPulse та автоматизуйте процес замовлення товарів.

Оновлено: 03.01.2024