Настройка Smart-элементов

Когда мы готовим проморассылку, зачастую приходится повторять одни и те же действия в письме несколько раз: скачать несколько картинок, скопировать ссылки, названия и цены для добавляемых товаров. Это занимает достаточно большое количество времени, но есть способ его сократить.

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

Что такое smart-элемент?

Smart-элемент — это контейнер, состоящий из базовых блоков (картинка, текст, кнопка), но настроенных для получения данных с вашего сайта. Нужно один раз настроить:

  • внешний вид контейнера, 
  • переменные, 
  • установить правила, откуда брать значения и куда их подставлять.

Чтобы в дальнейшем просто подставить ссылку на товар, а система подтянула в карточку товара всю информацию.

В этом видео мы расскажем, как настроить смарт-блок

 

Пример создания smart-элемента

 

Возьмем для примера сайт toys.com.ua. Для создания карточки товара нам понадобятся картинка, название товара и цена.
Подготовим карточку товара. Возьмем структуру с тремя контейнерами (количество контейнеров может быть любым, в зависимости от ваших потребностей) 


структура

Желательно сразу наполнять контентом, для удобства, чтобы сразу было видно, куда и что добавлять. Все элементы должны быть расположены в одном контейнере.

Пример

Наполним ее согласно дизайна сайта, в такой последовательности:

  • Картинка
  • Название товара
  • Цена
  • Кнопка

 

Далее, выделяем контейнер с базовыми блоками (для этого кликаем по синему ярлыку й “Контейнер” сверху), выбираем в боковой панели вкладку “Данные” и кликаем на кнопку “Начать” для активации Smart-свойства.
 
Активация Smart-свойства

В результате у нас открывается конфигурация, где мы будем настраивать все необходимые ссылки:
 
Конфигурация

Что важно знать - есть 2 типа данных, которые нам нужно настроить. Они прописываются в разделе “Правила соответствия”:
 
Правила соответствия
  • “Куда применять” - тут мы будем задавать правила куда именно нужно применить уже полученные значения переменных в нашем smart-элементе.
  • “Откуда взять” - здесь настраиваются правила, откуда нужно получить значения переменных с нужного нам сайта. 
Важный момент, который поможет нам сэкономить время: настраивайте блок так, как будто мы уже отправляем рассылку - правильное изображение товара со ссылкой на него, с альтернативным текстом и названием, ценой и другими нужными нам пунктами карточки товара. В нашем случае  это картинка, название, цена.
 

Начнем настройку Smart-блоков

По умолчанию доступна только ссылка:
 
Настройка Smart-блоков

Для полноценной карточки товара этого мало, поэтому мы добавляем, нажав на плюсик, нужные нам пункты: 
 
Пример
 

Из выпадающего списка выбираем

  • картинку, 
  • название, 
  • цену. 

Картинка

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

Код письма

По умолчанию используется img:

Селектор изображения

Для удобства добавим класс:

Добавляем класс

Затем переходим в настройки картинки, на вкладку “Куда применить” и прописываем селектор:

Селектор

У каждой картинки также есть атрибут, в данном случае - src, реже встречается html, в зависимости от сайта. Прописываем его:

Атрибут

Затем проверяем результат на вкладке “Внешние данные” - подставилась ссылка на нашу картинку:

Проверяем результат

Название товара

Начинаем настраивать отображение названия по аналогии. Прописываем вручную возле названия класс, копируя из конфигурации, либо придумывая свое - главное, чтобы он был уникальным.

Название товара

В нашем примере селектор это a.name, атрибут здесь не нужен, так как это обычное текстовое поле.

В результате название будет отображаться на вкладке “Внешний вид”

Название товара
 

Цена

По аналогии с другими полями настраиваем цену. Смотрим в коде html-селектор, в данном примере цена имеет селектор span.price. Получаем результат:

Цена
 

То есть мы добавили селекторы в блок, куда будут подставляться товары с сайта и провели их настройку.  Это настройка только шаблона письма, следующий шаг - сбор данных с сайта.

Настраиваем передачу данных из сайта в письмо

Возьмем страницу с товаром, с которой мы будем подтягивать данные:

Пример

Изображение

Находим селектор изображения на сайте. Если вы работаете в Google Chromе, откройте инспектор кода с помощью кнопки F12 и с помощью поиска элемента выбираем:

Изображение

и переходим к настройке второй части: заполняем раздел “Откуда взять”.
На сайте находим ссылку на изображение товара в редакторе кода и смотрим селектор и атрибут, в нашем случае это src:

Селектор и атрибут на сайте

Прописываем его на вкладке “Откуда взять”:

Пример
 

Подставляем ссылку на товар: 

Проверка

Если все настроено корректно, у вас сразу же подтянется изображение.

Чтобы корректно подтягивалось альтернативное название в изображении товара, добавляем селектор h1:

селектор h1

Затем пропишем 2 селектора в разделе “Куда применять”:

Добавляем селекторы
 

Указываем атрибуты alt и title. 

Цена

Определяем на сайте селектор цены, в нашем случае это [itemprop=price]

 селектор цены

и прописываем его в самом блоке.

Прописываем селектор

Нажимаем “Получить значение” и сравниваем результат.
Мы можем добавить еще один селектор, чтобы подтягивалась валюта с сайта, или сразу же прописать валюту в коде письма, если она не меняется.

Проверяем полученный результат

Для проверки правильности настроек копируем код и вставляем в соседние 2 контейнера. Чтобы проверить, что они работают, берем ссылки на другие товары и подставляем в контейнер: 

Проверка

Получаем результат:

Результат

Небольшие лайфхаки: 

1. Настройте один смарт-блок со всеми данными, которые могут понадобиться. При необходимости можно удалять отдельные контейнеры в блоке.

2. Если вы хотите скопировать структуру в другое письмо, используйте редактор JSON.

редактор JSON

Скопируйте весь код из этого раздела и затем вставьте его в другое письмо к нужной структуре.

3. Сохраняйте по-разному оформленные контейнеры в библиотеку и используйте их в любом письме.

4. Из одного оформленного контейнера вы можете сделать любую карточку: три в ряд, четыре в столбик, поэтому не обязательно создавать с нуля полную карточку - просто скопируйте содержимое контейнера в соседнюю ячейку.

5. Можно настраивать для текстовых блоков такие же контейнеры, например, для блоговых статей.