Настройка 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 + C или кнопку с курсором в левом верхнем углу на панели DevTools для выбора опции “Проверить элемент”.

Панель DevTools

  1. Выберите элемент на странице, нажав левую кнопку мыши. В нашем случае это “В наличии”.

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

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

Копировать selector

  1. В smart-контейнере перейдите к секции “Правила соответствия” и выберите вкладку “Откуда брать”.

Вкладка “Откуда брать”

  1. Для переменной p_exists вставьте скопированный селектор в поле “CSS селектор”. Поле “Атрибут” оставьте пустым.

К контейнеру подтянется информация со страницы товара о его наличии.

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

Примечание

Обычно веб-сайты используют стандартные названия CSS селекторов, поэтому настройка smart-контейнеров должна быть применена к большинству веб-страниц, наследующих стандарты CSS. Некоторые веб-страницы имеют индивидуальные названия селекторов и атрибуты, требующие расширенных настроек или создания новых smart-контейнеров.

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

Если у вас возникнут вопросы по настройке smart-контейнеров, свяжитесь с нами по адресу support@esputnik.com.

Остались вопросы?
Специалисты обязательно ответят и помогут решить вашу проблему!
Обратный звонок
Оставьте заявку – и наш специалист свяжется с вами в рабочее время.
Отправить заявку
Консультация в чате
Готовы к вашим вопросам!
Написать в чат
Электронная почта
Напишите в службу поддержки eSputnik.
Отправить email