Первые шаги
Отслеживание событий и поведения
Пользовательские данные
- Обзор адаптивного email-редактора
- Создание оформления для письма
- Создание сквозных модулей
- Настройка адаптивности
- Настройка Smart-элементов
- Оформление промовкладки для Gmail
- Добавление Rolloverʼа
- Добавление фона в письмо
- Добавление анкорных ссылок
- Библиотека блоков (Модули)
- Добавление блока "Видео"
- Добавление таблицы в письмо
- Работа с блоком "Баннер"
- Добавление пользовательских шрифтов
- Добавление кастомных иконок соцсетей
- Работа с блоком "Соцсети"
- Создание кнопки CTA
- Редактирование HTML и CSS
- Робота с блоком "Изображения"
- Работа с блоком “Таймер"
- Настройка блока "Меню"
- Создание футера
Омниканальность
- SDK для мобильных приложений
- Управление ключами доступа к мобильному SDK
- Подключение мобильного приложения
- Создание Google проекта для Mob Push
- Создание мобильных push-сообщений
- Настройка аналитики доставляемости и кликов
- Планирование мобильных push-уведомлений
- Настройка универсальных ссылок (deeplinks & Universal links)
- Отчеты по мобильным push-рассылкам
Автоматизация
- Настройка дополнительных рассылок
- Двойное подтверждение подписки
- Приветственная серия
- Приветственная серия с сегментацией по категориям
- Запуск сценария после импорта контактов
- Регулярный сценарий для группы
- Поздравление с днем рождения
- Привязка сценария к кнопке
- Согласование переменных события со сценарием на примере сценария "Заказ доставлен"
- Сбор отзывов о заказе
- Реактивация клиентов и подписчиков
- Отправка рассылки непрочитавшим
Персонализация
- Подстановка промокода из файла
- Подстановка промокода с использованием API
- Принципы генерации промокодов с помощью PHP/JAVA
- Подстановка промокода с помощью персонализации
- Загрузка промокодов для использования в сценарии
- Генерация промокодов в сценарии
- Отправка промокода с помощью препроцессора
- HTTP-запрос для передачи промокода из сообщения в карточку контакта
Аналитика
- Отчёт по email-рассылке
- Отчет по AMP-рассылке
- Отчеты по мобильным push-рассылкам
- Отчет по SMS-рассылке
- Отчет по Web-push рассылке
- Отчет по Viber-рассылке
- Настройка передачи UTM-меток
- Визуализация дохода от рассылок
- Отслеживание эффективности рассылок в Google Analytics
- Как открыть CSV-файл после экспорта
Мультиязычность
Товарные рекомендации
API
Смена системы
Документы
Интеграция
Настройка Smart-элементов
Когда мы готовим проморассылку, зачастую приходится повторять одни и те же действия в письме несколько раз: скачать несколько картинок, скопировать ссылки, названия и цены для добавляемых товаров. Это занимает достаточно большое количество времени, но есть способ его сократить.
Наша палочка-выручалочка - это smart-контейнер, который позволит существенно сэкономить ваше время на создание письма.
Что такое smart-элемент?
Smart-элемент — это контейнер, состоящий из базовых блоков (картинка, текст, кнопка), но настроенных для получения данных с вашего сайта. Нужно один раз настроить:
- внешний вид контейнера,
- переменные,
- установить правила, откуда брать значения и куда их подставлять.
Чтобы в дальнейшем просто подставить ссылку на товар, а система подтянула в карточку товара всю информацию.
В этом видео мы расскажем, как настроить смарт-блок.
Пример создания smart-элемента
Возьмем для примера сайт toys.com.ua. Для создания карточки товара нам понадобятся картинка, название товара и цена.
Подготовим карточку товара. Возьмем структуру с тремя контейнерами (количество контейнеров может быть любым, в зависимости от ваших потребностей)
Желательно сразу наполнять контентом, для удобства, чтобы сразу было видно, куда и что добавлять. Все элементы должны быть расположены в одном контейнере.
Наполним ее согласно дизайна сайта, в такой последовательности:
- Картинка
- Название товара
- Цена
- Кнопка
Далее, выделяем контейнер с базовыми блоками (для этого кликаем по синему ярлыку й “Контейнер” сверху), выбираем в боковой панели вкладку “Данные” и кликаем на кнопку “Начать” для активации Smart-свойства.
В результате у нас открывается конфигурация, где мы будем настраивать все необходимые ссылки:
Что важно знать - есть 2 типа данных, которые нам нужно настроить. Они прописываются в разделе “Правила соответствия”:
- “Куда применять” - тут мы будем задавать правила куда именно нужно применить уже полученные значения переменных в нашем smart-элементе.
- “Откуда взять” - здесь настраиваются правила, откуда нужно получить значения переменных с нужного нам сайта.
Важный момент, который поможет нам сэкономить время: настраивайте блок так, будто уже отправляте рассылку - правильное изображение товара со ссылкой на него, с альтернативным текстом и названием, ценой и другими нужными нам пунктами карточки товара. В нашем случае это картинка, название, цена.
Начнем настройку Smart-блоков
Для полноценной карточки товара этого мало, поэтому мы добавляем, нажав на плюсик, нужные нам пункты:
Из выпадающего списка выбираем
- картинку,
- название,
- цену.
Картинка
Теперь нам нужно узнать, какой селектор имеет изображение в нашем стандартном блоке. Для этого открываем код письма, нажав на редактор кода.
По умолчанию используется img:
Для удобства добавим класс:
Затем переходим в настройки картинки, на вкладку “Куда применить” и прописываем селектор:
У каждой картинки также есть атрибут, в данном случае - src, реже встречается html, в зависимости от сайта. Прописываем его:
Затем проверяем результат на вкладке “Внешние данные” - подставилась ссылка на нашу картинку:
Название товара
Начинаем настраивать отображение названия по аналогии. Прописываем вручную возле названия класс, копируя из конфигурации, либо придумывая свое - главное, чтобы он был уникальным.
В нашем примере селектор это a.name, атрибут здесь не нужен, так как это обычное текстовое поле.
В результате название будет отображаться на вкладке “Внешний вид”
Цена
По аналогии с другими полями настраиваем цену. Смотрим в коде html-селектор, в данном примере цена имеет селектор span.price. Получаем результат:
То есть мы добавили селекторы в блок, куда будут подставляться товары с сайта и провели их настройку. Это настройка только шаблона письма, следующий шаг - сбор данных с сайта.
Настраиваем передачу данных из сайта в письмо
Возьмем страницу с товаром, с которой мы будем подтягивать данные:
Изображение
Находим селектор изображения на сайте. Если вы работаете в Google Chromе, откройте инспектор кода с помощью кнопки F12 и с помощью поиска элемента выбираем:
и переходим к настройке второй части: заполняем раздел “Откуда взять”.
На сайте находим ссылку на изображение товара в редакторе кода и смотрим селектор и атрибут, в нашем случае это src:
Прописываем его на вкладке “Откуда взять”:
Подставляем ссылку на товар:
Если все настроено корректно, у вас сразу же подтянется изображение.
Чтобы корректно подтягивалось альтернативное название в изображении товара, добавляем селектор h1:
Затем пропишем 2 селектора в разделе “Куда применять”:
Указываем атрибуты alt и title.
Цена
Определяем на сайте селектор цены, в нашем случае это [itemprop=price]
и прописываем его в самом блоке.
Нажимаем “Получить значение” и сравниваем результат.
Мы можем добавить еще один селектор, чтобы подтягивалась валюта с сайта, или сразу же прописать валюту в коде письма, если она не меняется.
Проверяем полученный результат
Для проверки правильности настроек копируем код и вставляем в соседние 2 контейнера. Чтобы проверить, что они работают, берем ссылки на другие товары и подставляем в контейнер:
Получаем результат:
Небольшие лайфхаки:
1. Настройте один смарт-блок со всеми данными, которые могут понадобиться. При необходимости можно удалять отдельные контейнеры в блоке.
2. Если вы хотите скопировать структуру в другое письмо, используйте редактор JSON.
Скопируйте весь код из этого раздела и затем вставьте его в другое письмо к нужной структуре.
3. Сохраняйте по-разному оформленные контейнеры в библиотеку и используйте их в любом письме.
4. Из одного оформленного контейнера вы можете сделать любую карточку: три в ряд, четыре в столбик, поэтому не обязательно создавать с нуля полную карточку - просто скопируйте содержимое контейнера в соседнюю ячейку.
5. Можно настраивать для текстовых блоков такие же контейнеры, например, для блоговых статей.