Дизайн How-to
~ 10 мин читать
12 комментарии
30488 просмотры
оценить
11 октября 2017

Smart-элементы. Сокращаем время на создание однотипных писем за счет их автоматизации

Stripo / Blog / Smart-элементы. Сокращаем время на создание однотипных писем за счет их автоматизации

Создавая новый шаблон для рассылки, часто приходится делать одни и те же действия. Например, представьте: у Вас есть сайт, на котором опубликованы товары. Если Вам нужно отправить письмо об акции с ссылкой на 5 товаров из вашего сайта, нужно скачать 5-ть картинок, названий товаров, их цен и ссылок, чтобы указать их под кнопкой “Купить”. Эти скачанные объекты, как правило, применяются в письме по нескольку раз, например, название товара используется 3 раза: в поле “названия товара”, для title и alt-текста картинки товара. То же самое с ссылкой, ее мы применяем для кнопки, для картинки, для заголовка и т.д. А завтра новая акция и снова нужно повторять описанные выше шаги. А что если товаров не 5, а 50? Это боль, не так ли?!

Для того, чтобы сократить потерю Вашего времени на выполнение рутинных операций мы создали новую сущность — smart-элемент, который позволяет автоматизировать этот процесс! Хотя, если быть честным, вначале придется немного “попотеть”, чтобы потом происходила магия.

И так, что такое smart-элемент?

Smart-элемент — это структура, контейнер или полоса, в которых присутствуют все те же базовые блоки, как Картинка, Текст, Кнопка и так далее, но для них активирована опция получения данных через переменные из внешних источников. Вы один раз настраиваете контент, в котором будут расположены в нужном порядке заголовок товара, картинка, цена, описание и кнопка «Купить», а также их внешний вид. Далее добавляете переменные, устанавливаете правила откуда брать значения и куда их применять и все — smart-элемент готов к использованию. Вам нужно всего лишь указать ссылку на страницу продукта на сайте и система самостоятельно “вытащит” с нее нужные нам данные и применит их в указанных местах Вашего письма. В конечном счете, создавая 5 карточек товара Вы значительно экономите время, указав всего 5-ть разных ссылок — остальное система делает самостоятельно!

Дополнительно стоить отметить, что система позволяет настроить преображение данных через модификаторы, например, чтобы полученное название товара длиной в 150 символов обрезалось до первых 50 символов и т.д.

Для этого вам нужно:

  • в поле Modifier 1 ввести следующую комбинацию: 
(.{0,50})(.{0,}) 

Где 50 - это количествое отображаемых символов. Это число вы можете заменить необходимым вам.

  • в поле Replacement ввести комбинацию: $1.

Stripo_Smart-Elements_Entering Info in Modifier1 Field

Цена на данный момент отображается в том же формате, что и на вашем сайте. 

Давайте детальнее рассмотрим все преимущества smart-элемента на примере.

Пример создания смарт-контейнера для карточки товара

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

В редакторе Stripo бросаем структуру из двух контейнеров (сразу оговорюсь: это на Ваше личное усмотрение, сколько именно контейнеров в структуре Вам нужно, столько и добавляйте). В первый контейнер добавляю нужные мне блоки (Картинка, два блока Текст, Кнопка) — делаю “скелет” карточки товара.

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

umnije-bloki-v-email-verstke

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

  • настроить все возможные правила получения значений, применения их через переменные к нужным блокам внутри моего письма. Для этого нам пригодится вкладка “Конфигурация”;
  • просмотреть и откорректировать вручную (при желании) полученные значения настроенных переменных из сайта во вкладке “Внешний вид”.

И так, приступим к конфигурации — добавим переменные. Для удобства пользования, по нажатию на иконку добавления переменной, будет показан список самых популярных, которые чаще всего могут быть у Товаров/Продуктов или у Блоговых записей. Кстати, обратите внимание, что как только мы активируем smart-свойство любому объекту, по умолчанию создается переменная URL, которую удалить нельзя.

bloki-email-verstka

Так как я задумала сделать карточку с картинкой, названием и ценой, я добавляю переменные Name, Image, Price из секции Product. Каждой добавленной переменной создается своя табка для конфигурации. Итого их у меня получается четыре.

smart-bloki-stripo-email-redactor

Далее нужно настроить правила получения значения для этих переменных и их применения в нашем smart-элементе. Для этого переходим к контролу Matching rules, который состоит из двух вкладок:

  • Внутренние правила. Тут мы будем задавать правила куда именно нужно применить уже полученные значения переменных в нашем smart-элементе.
  • Внешние правила. В нем настраиваются правила, откуда нужно получить значения переменных с нужного нам сайта. Также здесь есть контролы, позволяющие преобразовать полученное значение через регулярные выражения или применяя различные виды форматирования.

Правила для каждой вкладки настраиваются через общепринятый механизм поиска элементов в HTML через CSS-селекторы и Атрибуты, о которых более детально можно прочитать здесь.

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

Переменная URL

У этой переменной есть контрол “Динамический сайт”, который по умолчанию выключен. Если сайт, с которого Вы хотите получить значения для любой из переменных smart-элемента, является динамическим — отметьте этот контрол, поставив чекбокс напротив.

Динамический сайт — сайт, содержимое которого создается на КЛИЕНТСКОЙ стороне javascript-ом, т.е. получив HTML страницы на ней нельзя найти нужные элементы, не выполнив перед этим все положенные скрипты. Например, цена рассчитывается на лету и т.п.

Сайт, с которого я собираюсь получить значения, не является динамическим, поэтому я пропускаю контрол и перехожу сразу к Matching rules.

Так как мне нужно, чтобы в smart-элементе были ссылки на сайт по клику на кнопку “Купить” и картинку продукта, во вкладке “Внутренние правила” я прописываю правило, чтоб значение переменной устанавливалось всем элементам ‘a’ (поле CSS селектор) в атрибут ‘href’ (поле Атрибут).

email-blocks-smart-layout

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

Переменная для картинки продукта

Установим для начала правило получения картинки продукта для вкладки “Внешнее правило”. Для этого открываем страницу сайта с продуктом, наводим курсор на картинку, кликаем правой кнопкой мыши для открытия контекстного меню и выбираем пункт “Проверить объект” (обратите внимание что этот пункт меню может называться иначе на Вашем компьютере, например “Исследовать”). В результате откроется консоль, в которой мы увидим CSS-селекторы с атрибутами.

code-email-layout-stripo

В моем случае, правило для получения картинки получилось следующим:

CSS-селектор: div#product-primary-image.product-primary-image.js-product-primary-image a
Атрибут: href

Устанавливаем их в соответствующие поля вкладки “Внешние правила”. Для вкладки “Внутренние правила” я указываю:

CSS-селектор: .esd-block-image .adapt-img
Атрибут: src

Благодаря этому правилу, полученное значение картинки будет применено для атрибута ‘src’, который расположен в блоке “Картинка”.

Переменные для названия продукта и цены

По сути, принцип действия тут такой же, как мы уже сделали для картинки. Только есть некоторая хитрость, которой я хочу с Вами поделиться.

Как Вы помните, я добавила два блока “Текст” в наш smart-элемент. Первый я буду использовать для названия, а второй — для цены. Причем контент для первого блока будет заполняться только из сайта, а для блока с ценой: часть контента будет браться с сайта, а часть будет константой. Например, вот так:

stripo-umnije-bloki

Во втором текстовом блоке выделенное слово “Price:” будет константой, а текст далее будет заменяться на значение, полученной из сайта.

Чтобы наш smart-элемент смог различить эти блоки (какой из текстовых полей мы хотим сделать для названия, а какой для цены), а также понимать куда именно применять полученный контент — нужно каждому из них добавить свой уникальный класс в редакторе кода HTML. В моем случае, это будут классы esd-p-name и esd-p-price.

HTML-code-editor

Теперь заполняем поочередно для каждой переменной внутренние и внешние правила для контрола Matching rules.

В моем случае,

Для переменной Name

  • внутренние правила:

CSS-селектор: .esd-block-text.esd-p-name
Атрибут: пусто
CSS-селектор 2: .esd-block-image a img
Атрибут: title
CSS-селектор 3: .esd-block-image a img
Атрибут: alt

  • внешние правила:

CSS-селектор: h1.product-name.js-product-name
Атрибут: пусто

Для переменной Price

  • внутренние правила

CSS-селектор: .esd-p-price
Атрибут: пусто

  • внешние правила:

CSS-селектор: span[itemprop=price]
Атрибут: пусто

Вот и все. Самое сложное позади! Теперь осталось дело за малым — получить значения по ссылке с внешнего сайта. Для этого просто вставьте ссылку в поле Link и дождитесь нескольких секунд для отображения полученных данных.

stripo-kartichki-tovarov

Вуаля — smart-элемент сделал свое дело! В шаблоне отображаются имя, картинка и цена продукта с нашего сайта. Теперь осталось немного подредактировать стили карточки товара. Смотрите, что у меня вышло!

block-tovarov-v-email

Во вкладке «Внешний вид» мы видим все данные, которые отображаются у нас в шаблоне, тут мы можем их откорректировать, не переживая, что это как-то повлияет на стили форматирования.

stripo-smart-bloki-knopka

Так как наш smart-элемент уже сконфигурирован, для создания аналогичной карточки товара с другой страницы этого сайта, надо всего-лишь указать другой путь в поле Link и карточка товара будет заполнена новыми данными автоматически, а Ваше время будет значительно сэкономлено!

devushki-kartochka-tovarov

Закончить эту статью хочется приятным бонусом — во всех наших бесплатных шаблонах уже есть подготовленные нами smart-элементы. В них уже настроены внутренние правила, поэтому для их использования Вам достаточно указать внешние правила в соответсвии с Вашим сайтом. Так как внешние правила стандартные для большинства сайтов, мы вскоре добавим их в качестве примеров в систему для их автоматической подстановки.

Paron Antonyan 2 месяца назад

Здравствуйте! Бьемся больше часа, попробовали разные способы по логике, приведенной ниже в комментариях, не получается. Помогите нам с селектором на картинку, пожалуйста. https://kidsavenue.ru/catalog/malchiki/odezhda_1/longslivy_1/36020/

Aleksandr Zelenskiy прокомментировал Paron Antonyan 2 месяца назад

Добрый день. По данной ссылке картинку можно подгрузить используя следующие селекторы\параметры: внешний #bx_117848907_36020_pict атрибут src внутренний .myImage атрибут src На скриншотах: http://prntscr.com/qscfe3 http://prntscr.com/qscfmy Важно отметить. На сайте используется относительный путь для картинки, поэтому необходимо использовать модификатор /upload/ с заменой на https://kidsavenue.ru/upload/ http://prntscr.com/qscggp

К. Зайцева 3 месяца назад

Здравствуйте, подскажите какой селектор ввести чтобы выгрузить картинку https://flytechnology.ua/dji-agras-mg-1p

Руслан Трепухалов прокомментировал К. Зайцева 3 месяца назад

Здравствуйте, для Вашего сайта Вам нужно указать селектор #content > div > div.us-product-top.d-flex > div.us-product-left > div.us-product-photo-main.mb-4 > a > img Атрибут src Пример: http://prntscr.com/qc1kyq и выбрать динамический сайт в пункте URL http://prntscr.com/qc1h4a Но так как на Вашем сайте используются изображения формата .webp http://prntscr.com/qc1i3e мы не гарантируем что будет отображаться изображения в почтовых клиентах, так как нет подержки рендеринга изображений в формате .webp. Мы рекомендуем Вам использовать на Вашем сайте форматы изображений такие как jpg, png, gif.

Артём Русев 4 месяца назад

Добрый день, подскажите какой селектор ввести чтобы выгрузить картинку https://sayyes.com.ua/skrab-dlya-tela/10943-kofeynyy-skrab-joko-blend-cherry-200-g.html

Aleksandr Zelenskiy прокомментировал Артём Русев 4 месяца назад

Добрый день. По данной ссылке картинку получится подгрузить используя следующий внутренний и внешний CSS селекторы: внутренний .adapt-img атрибут src внешний head > meta:nth-child(13) атрибут content На скриншотах: http://prntscr.com/q25763 http://prntscr.com/q257im

Evgenii Romanenkov 4 месяца назад

Здравствуйте! Пробовал различные варианты для вытягивания картинки. Ничего не удалось. Например пробовал такие селекторы с href, img, src div#main-photo.d-doned-sm-block.zoom.card-image-zoom.card-zoom-small div.owl-item.active>div:nth-child(1)>a:nth-child(1) div.owl-item>div:nth-child(1)>a:nth-child(1) div.owl-item>div>a div.owl-item a:nth-child(1) div.owl-item a Какой селектор ввести чтобы выгрузить картинку отсюда https://wellmax.eu/ru/goods/67407 ?

Aleksandr Zelenskiy прокомментировал Evgenii Romanenkov 4 месяца назад

Добрый день. В вашем случае, картинку получится подгрузить, используя следующий внутренний и внешний CSS селекторы: внутренний .esd-block-image img атрибут src внешний #card-main-photo атрибут src На скриншотах: http://prntscr.com/q0kk0u http://prntscr.com/q0kjoy

Evgenii Romanenkov прокомментировал Aleksandr Zelenskiy 4 месяца назад

Получилось. Спасибо за оперативный ответ)

Людвик Сафарян 8 месяцев назад

Добрый день! столкнулся с ситуацией в смарт контенте, у меня на сайты все ссылки на картинки начинаются с папки. /upload/resize_cache/iblock/6cd/500_500_19c25237da8d22b6fe15e058ccab634fe/6cd1af7c8c4dee53d44c1849e9757467.jpg , соответственно не открывается картинка, как сделать так чтобы впереди добавилось название сайта чтобы картинка подгружался ?

Aleksandr Zelenskiy прокомментировал Людвик Сафарян 8 месяцев назад

В Вашем случае, картинку получится подгрузить, используя следующий CSS селектор meta[property=og:image] и атрибут content Пожалуйста, посмотрите как это выглядит на скриншоте https://prnt.sc/of4cge

Людвик Сафарян прокомментировал Aleksandr Zelenskiy 8 месяцев назад

Спасибо за оперативный ответ!

Вас также может заинтересовать

← Предыдущие статьи Следующие статьи →
Stripo Template Kits_Featured Image
7 дней назад · 8 мин читать
Template Kits, или как получить гайдлайны для создания шаблонов и брендовую айдентику в одном месте

Template Kits является нашей совершенно новой услугой, цель которой — помочь: a) вам создавать фирменные брендовые рассылки независимо от того, какое агентство или email-дизайнера вы нанимаете для построения своих будущих кампаний; b) дизайнерам легко усвоить правила и требования к письмам для любого бренда, чтобы создавать рассылки без лишних затрат времени; c) облегчить и ускорить процесс онбординга новичков в вашей команде. Мы генерируем Template Kit для любого вашего проекта в течение всего одной минуты совершенно бесплатно. Содержимое Template Kit: подробные рекомендации для создания шаблонов «Brand Guidelines» — здесь мы собираем всю информацию...

Дизайн Шаблоны How-to
10 дней назад · 7 мин читать
Как сделать письмо адаптивным

Адаптация писем под мобильные устройства, также известная как mobile-friendly design, уже перестала быть чем-то уникальным — теперь это одна из обязательных опций. Поэтому при создании адаптивного письма с помощью Stripo вы можете смело использовать нашу библиотеку готовых шаблонов — все они уже адаптивны. Соответственно, созданные на их основе сообщения будут корректно отображаться на всех устройствах. Но часто бывает и так, что вам нужно решить нестандартную проблему — вы хотите, чтобы ваше письмо отображался на мобильных девайсах особым образом. Итак, давайте поговорим именно...

Структура Шаблоны How-to
Будьте всегда в курсе последних новостей в области email-маркетинга!