Налаштування smart-контейнерів | Support eSputnik

Дані користувача

Email

Омніканальність

Автоматизація

Відстеження подій та поведінки

Налаштування smart-контейнерів

Smart-контейнер — це елемент шаблону, що складається з базових блоків (картинка, текст, кнопка), контент яких автоматично підставляється з сайту. 

Зверніть увагу

Якщо ваш сайт використовує OG (Open Graph) теги, які надають структуровані дані про вміст веб-сторінки, це дозволяє eSputnik автоматично підставляти інформацію про товари в лист. 

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

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

Автоматична підстановка даних з сайту

Суть цього способу у тому, що вам потрібно лише скопіювати URL-адресу товару та вставити посилання в контейнер. Після чого система підставить відповідні дані до листа.

  1. Перейдіть до розділу “Повідомлення” → “Повідомлення” → “Email”. Відкрийте email або створіть новий.

Створити email

Примітка

Якщо ви використовуєте лист із налаштованим оформленням, стилі оформлення одразу застосуються до усіх доданих об'єктів з бібліотеки модулів.

  1. Перейдіть до вкладки “Модулі” → “Загальні”. Виберіть категорію “Картки товарів” та додайте готовий модуль.

Бібліотека модулів

Для прикладу візьмемо модуль з картками, що містять:

  • Зображення товару,

  • Назву,

  • Ціну,

  • Кнопку.

  1. Перетягніть картку до листа.

Перетягніть картку до листа

Підстановка даних у контейнер

  1. Відкрийте сторінку товару та скопіюйте url адресу.

Скопіюйте url адресу

  1. Натисніть “Smart-Контейнер”  → “Дані” → “Smart” у меню зліва та вставте скопійовану адресу в поле “Посилання”.

Поле “Посилання”

  1. Система підставить дані:

Підставлені дані у контейнері

  1. Підтягнуться всі параметри, за винятком самої назви кнопки, тому змініть її назву та продублюйте модуль далі.

  2. Вставте скопійовані адреси для кожного товару у відповідний контейнер у листі.

Підставлені дані у листі

  1. Збережіть налаштовану структуру до бібліотеки модулів для використання в інших листах.

Збережіть структуру

Додавання параметрів до існуючих карток 

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

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

Для  налаштування потрібно виконати такі кроки:

  • Додати в лист блоки та вказати для них змінні та правила відповідності,

  • Підставити CSS селектор елементу.

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

Редагування HTML коду

  1. Додайте до контейнера блок “Текст” із текстом  “Наявність”. 

  2. Натисніть “Smart-контейнер” у верхній частині контейнера.

Налаштування smart-контейнера

  1.  Відкрийте код цього блоку натиснувши відповідну іконку на панелі редактора.

Панель редактора

  1. Додайте атрибут class до поля “Наявність”: class="Exists".

Додавання атрибуту

Додавання змінних та правил відповідності

  1. Виберіть в налаштуваннях контейнера вкладку “Дані” → “Smart” → “Конфігурація”.

Вкладка “Конфігурація”

  1. Натисніть “+” → “Змінна var”.

Змінна var

  1. Додайте змінну p_exists та вкажіть її назву  “Exists”.

Назва змінної

  1. Перейдіть до секції  “Правила відповідності”, виберіть вкладку “Куди примінити”  і для змінної p_exists вкажіть селектор — “.Exists”. Поле “Атрибут” залиште порожнім.

Увага

Назва CSS селектора елементу чутлива до регістру і має співпадати з назвою атрибута класу, що вказана у коді листа. 

CSS селектор

  1. Перейдіть на вкладку “Зовнішній вигляд”. Якщо все зроблено вірно, то має з'явитись поле “Exists”.

Поле “Exists”

Підстановка CSS селектора

  1. Перейдіть на сторінку товару у вашому браузері.

Примітка

В прикладі розглянуто базовий спосіб перевірки елементів веб-сторінці за допомогою DevTools в Google Chrome для Windows. Якщо ви користуєтеся іншими браузерами та операційними системами, зверніться до документації щодо використання DevTools та перевірки елементів.

  1. Перевірте елемент сторінки: натисніть на клавіатурі “Ctrl+Shift+ I” або F12 та відкрийте DevTools. 

  2. Натисніть Ctrl+Shift+ С або кнопку з курсором у лівому верхньому куті на панелі DevTools для вибору опції “Перевірити елемент”.

Панель DevTools

  1.  Виберіть елемент на сторінці натиснувши ліву кнопку миші.  В нашому випадку це “В наявності”.

Вибір елемента на сторінці

  1. В редакторі коду клікніть праву клавішу миші, та з випадного меню виберіть “Копіювати selector”.

Копіювати selector

  1. У smart-контейнері перейдіть до секції  “Правила відповідності”, та виберіть вкладку “Звідки брати”.

Вкладка “Звідки брати”

  1. Для змінної p_exists вставте скопійований селектор у поле “CSS селектор”. Поле “Атрибут” залиште порожнім.

До контейнера підтягнеться інформація зі сторінки товару щодо його наявності.

Поле “CSS селектор”

Примітка

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

Кроки з налаштування нового контейнера будуть схожими до кроків зазначених у розділі “Додавання параметрів до існуючих карток”. Тільки додавання змінних та правил відповідності треба задавати для кожного елементу.

Якщо у вас виникнуть питання з налаштування smart-контейнерів зв'яжіться з нами за адресою support@esputnik.com.

Залишилися питання?
Спеціалісти обов'язково нададуть відповідь та допоможуть вирішити вашу проблему!
Зворотний дзвінок
Залишіть заявку – і наш спеціаліст зв'яжеться з вами в робочий час.
Відправити заявку
Консультація в чаті
Готові до ваших запитань!
Написати в чат
Електронна пошта
Напишіть в службу підтримки eSputnik.
Надіслати email