Первые шаги
Пользовательские данные
- Обзор адаптивного email-редактора
- Создание оформления для письма
- Создание сквозных модулей
- Настройка адаптивности
- Настройка smart-контейнеров
- Оформление промовкладки для Gmail
- Добавление Ролловера
- Добавление анкорных ссылок
- Библиотека модулей
- Добавление таблицы в письмо
- Работа с блоком "Баннер"
- Добавление пользовательских шрифтов
- Создание кнопки CTA
- Работа с блоком "Картинка"
- Работа с блоком “Таймер"
- Использование ИИ в email-редакторе
Омниканальность
- SDK для мобильных приложений
- Управление ключами доступа к мобильному SDK
- Подключение мобильного приложения
- Создание и загрузка ключа Firebase
- Создание мобильных push-сообщений
- Настройка аналитики доставляемости и кликов
- Планирование мобильных push-уведомлений
- Типы диплинков
- Отправка тестовых сообщений из отладки запросов
- Настройка виджетов для сайта
- Вызов виджета
- Настройка геоданных для правил вызова виджетов
- Сохранение данных из виджетов в поля контактов
- Защита от раздражения
- Действия после заполнения формы
- Замена системного сценария Double Opt-In
- Расширение для тестирования форм в Google Chrome
- Создание pop-up-форм с помощью Google Tag Manager или WordPress
- Отправка событий из форм подписки в 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
Смена системы
Документы
Интеграция
Настройка 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 + C или кнопку с курсором в левом верхнем углу на панели DevTools для выбора опции “Проверить элемент”.
-
Выберите элемент на странице, нажав левую кнопку мыши. В нашем случае это “В наличии”.
-
В редакторе кода кликните правую клавишу мыши и из выпадающего меню выберите “Копировать selector”.
-
В smart-контейнере перейдите к секции “Правила соответствия” и выберите вкладку “Откуда брать”.
-
Для переменной p_exists вставьте скопированный селектор в поле “CSS селектор”. Поле “Атрибут” оставьте пустым.
К контейнеру подтянется информация со страницы товара о его наличии.
Примечание
Обычно веб-сайты используют стандартные названия CSS селекторов, поэтому настройка smart-контейнеров должна быть применена к большинству веб-страниц, наследующих стандарты CSS. Некоторые веб-страницы имеют индивидуальные названия селекторов и атрибуты, требующие расширенных настроек или создания новых smart-контейнеров.
Шаги по настройке нового контейнера будут похожи на шаги, указанные в разделе “Добавление параметров в существующие карточки”. Только добавление переменных и правил соответствия нужно задавать каждому элементу.
Если у вас возникнут вопросы по настройке smart-контейнеров, свяжитесь с нами по адресу support@esputnik.com.