Smart Elements_Cover Image
timer ~ 8 мин читать
21480 просмотры
оценить
20 июля 2021

Автоматизация создания рассылок, или Как использовать smart-элементы в email-маркетинге

Stripo / Blog / Автоматизация создания рассылок, или Как использовать smart-элементы в email-маркетинге

Просто представьте себе создание карточки товара с дизайном, который вам действительно нравится, всего несколькими кликами!

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

Не нужно сохранять и загружать изображения, не нужно копировать и вставлять описание товара, прикреплять к кнопкам соответствующие URL-адреса — всем этим займемся мы.

Похоже, мечта сбылась?

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

Что такое smart-элементы и как они работают?

Smart-элементы — это разработанный Stripo функционал, который позволяет автоматизировать создание рассылок. Это реальная экономия времени для тех, кто создает множество карточек товаров и email-дайджестов. Вы настраиваете smart-элементы всего один раз и затем используете во множестве промо-кампаний.

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

Вам нужно было настроить внутренние и внешние правила, чтобы система извлекала и вставляла информацию о товарах в соответствующие элементы ваших писем.

Но теперь использование smart-элементов стало гораздо проще.

Если ваш сайт содержит теги OG, вы просто вставляете ссылку на товар и указываете, куда именно в письме должна быть подтянута соответствующая информация об этом товаре. Это займет у вас менее 5 минут — и причем всего один раз. При следующем использовании smart-элементов вам останется только вставить ссылку на товар без необходимости настройки.

Наши обновленные smart-элементы полностью совместимы с такими сайтами:

  1. eBay.com.

  2. Aliexpress.com.

  3. Walmart.com.

  4. Etsy.com.

  5. Medium.com.

  6. Pocket.com.

  7. Vk.com.

  8. Reddit.com.

  9. Linkedin.com.

Как проверить, есть ли на вашем сайте smart-элементы

Если вашего сайта нет в списке выше, вам нужно проверить, поддерживает ли он теги OG (Open Graph):

  • кликните правой кнопкой мыши ваш сайт;

  • нажмите Ctrl+F для Windows или CMD+F для macOS;

  • введите “og:”;

  • если вы обнаружите в коде какие-либо теги og:, значит, ваш сайт их поддерживает.

OG Теги

Если ваш сайт не поддерживает теги OG — печалька, но небольшая: читайте в нашем блоге статью «Smart-элементы. Сокращаем время на создание однотипных писем за счет их автоматизации», чтобы узнать, как работать со smart-элементами в таком случае.

А для тех, чьи сайты поддерживают теги OG, мы подготовили краткое руководство по настройке smart-элементов менее чем за 10 минут.

Ну что, давайте начнем?

Создание карточки товара

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

Обратите внимание, что если вам нужно название и описание товара, тогда базовый блок «Текст» нужно перетащить в карточку дважды.

Затем вы дизайните каждый элемент карточки товара на свое усмотрение — устанавливаете размер шрифта для каждого отдельного элемента, работаете с цветом, формой кнопки и т.д.

Для этого необязательно вставлять реальный текст, достаточно добавить «lorem ipsum» в каждый соответствующий элемент.

Важно, чтобы все блоки находились в одном контейнере!

Smart-Элементы_Контейнеры

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

Smart-Элементы_Структуры

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

Когда вы закончите с заготовкой карточки товара, можно переходить к настройке smart-элементов.

Шаг 1. Активируйте эту опцию

  • кликните значок «Контейнер»/«Структура» в шаблоне;

  • в панели настроек перейдите во вкладку «Данные»;

  • и нажмите кнопку «Начать».

 Активация опции смарт-элементы

Шаг 2. Настройка smart-элементов

Во вкладке «Конфигурация:

  • добавьте нужные переменные, кликнув значок «Плюс»;

 Конфигурация смарт-элементов_добавление переменных

  • система автоматически добавит необходимые переменные.

Обратите внимание, что на данный момент интеграция с Amazon, eBay, Etsy и т.д. позволяет получать следующие данные: название товара, описание и изображение. Цены мы добавляем вручную. Тем не менее вы можете добавить поле «Цена» в карточку товара — чуть позже мы покажем, как его редактировать.

Шаг 3. Настройка правил соответствия

Хорошая новость! Stripo настраивает внешние правила, т.н. «Откуда взять», самостоятельно. То есть вам нужно установить вручную только внутренние, т.н. «Куда применить».

URL страницы товара

Если все сделано правильно, то ссылка на страницу вашего товара будет добавлена к изображению товара и кнопке CTA в вашей карточке. При нажатии на эту кнопку пользователи будут перенаправлены на соответствующую страницу вашего сайта.

Итак, чтобы установить внутренние правила для URL, вам нужно:

  • открыть «Куда применить», перейдя во вкладку «URL»;

  • в поле ввода «CSS Селектор» ввести «а»;

  • в поле ввода «Атрибут» ввести «href».

Работа над внутренними правилами для ссылок

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

Если все сделано правильно, то название товара автоматически добавится в письмо с вашего сайта.

  • откройте вкладку «p_name»;

  • прокрутите вниз, чтобы ввести переменную «.p_name» в поле ввода «CSS Селектор». Важно, чтобы она была добавлена с точкой (.) в начале;

  • теперь кликните на «Название продукта» в области шаблона, чтобы открыть его HTML-код;

  • вставьте class="p_name" в открывающий тег <p>.

Вы можете дать этому классу любое другое имя. Оно просто должно быть уникальным и совпадать с переменной, которую вы задали в поле ввода «CSS Селектор».Добавление класса для названия продукта

Есть еще один способ привязать письмо к вашему сайту для подтягивания названий товаров.

Если вы применяли к названию вашего продукта какой-либо стиль заголовка, примерно как я использовала заголовок 2, просто введите «h2» (или h3, h4, h5) в поле ввода «CSS Селектор». И НИЧЕГО НЕ ДОБАВЛЯЙТЕ в код.

Smart-Элементы_Работа с Внутренним Правилами для Имени Товара

Описание товара

Если все сделано правильно, то нужное описание продукта будет отправлено в письмо с вашего сайта.

  • перейдите во вкладку «p_description»;

  • введите переменную «.p_description» в поле ввода «CSS Селектор». Важно, чтобы вы добавили ее с точкой (.) в начале;

  • теперь кликните на «Описание продукта» в области шаблона, чтобы открыть его HTML-код;

  • вставьте class="p_description" в открывающий тег <p>.

Как и в предыдущем абзаце, я упомяну, что вы можете использовать любое название класса на свое усмотрение. Только убедитесь, что аналогичное имя было использовано в поле ввода «CSS Селектор».Добавление тегов описания в код электронной почты

То же самое относится и к пункту ниже.

Изображение товара

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

  • перейдите во вкладку «p_image»;

  • введите переменную «.p_image» в поле ввода «CSS Селектор». Важно, чтобы вы добавили ее с точкой (.) в начале;

  • введите «src» в поле «Атрибут»;

  • теперь кликните изображение в области шаблона, чтобы открыть его HTML-код;

  • вставьте class="p_image" в открывающий тег <img> перед src.

Добавление атрибутов для изображений

Шаг 4. Добавление вашего URL-адреса

Теперь, когда вы настроили свой smart-элемент, можно вставлять ссылку товара в поле ввода «Ссылка». Неважно, выберете ли вы вкладку «Конфигурация» или «Оформление» — это поле ввода является общим для двух вкладок.

Вставка URL-адреса продукта в поле ввода ссылки

И вот собственно магия в действии.

Шаг 5. Редактируем цены

Как мы уже говорили, текущая интеграция с Amazon, Etsy, eBay, Walmart и AliExpress не позволяет подтягивать цены через Smart Elements.

Но если вы добавите это поле в карточку товара при помощи Smart Elements, это упростит изменение цены.

После добавления ссылки на страницу товара во вкладке «Внешний вид» вы можете изменять цену в соответствующем поле. Стили дизайна, которые вы настроили до этого, будут применены немедленно.

 Редактирование цен на смарт-элементы

Сохранение карточки товара для повторного использования в дальнейших кампаниях

  • прежде всего вам нужно продублировать карточку товара, если вы хотите, чтобы в каждом ряду было две или более карточек;

  • затем выделите всю структуру и нажмите кнопку «Сохранить как модуль»;

  • дайте этому модулю имя;

  • при запуске новой кампании просто перетащите этот модуль из своего персонального хранилища модулей в шаблон;

Использование модулей со смарт-элементами в будущих кампаниях

  • и вставьте ссылки на новые товары

Готово!

В завершение

Smart-элементы действительно ускоряют создание писем, особенно для eCommerce, ведь они довольно часто отправляют промописьма.

Если вам нужна помощь в настройке smart-элементов, пишите нам по адресу contact@stripo.email или оставляйте комментарий ниже.

Экономьте свое драгоценное время со Stripo

Karina 1 год назад

Цікава стаття

Hanna Kuznietsova прокомментировал Karina 1 год назад

Дякую ?

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

Предыдущие статьи Следующие статьи
banner9
06 июня 2022 · 15 мин читать
ТОП-10 email-редакторов 2022 года

Все конструкторы email-шаблонов для вас на одно лицо? И вы затрудняетесь с выбором подходящего инструмента для своих кампаний, верно? Неудивительно, ведь их очень много. Мы сделаем обзор самых популярных конструкторов, чтобы выделить их отличительные особенности и помочь вам найти наилучший HTML-редактор шаблонов для ваших текущих потребностей. Я попробую создать одинаковый шаблон с одними и теми же медиафайлами во всех редакторах, чтобы увидеть, чем отличаются эти инструменты. Лучшие конструкторы email-шаблонов Для нашего обзора мы выбрали такие редакторы: Stripo, HubSpot, Campaign Monitor,...

Дизайн Маркетинг Шаблоны
best-fonts-for-email-cover-image-stripo
24 мая 2022 · 18 мин читать
Лучшие шрифты для рассылок: советы и хитрости

Одна из самых серьезных проблем при создании электронных писем — правильно выбрать шрифт. Вес, высота, ширина, цвет, форма, интервал… Все ли здесь имеет значение? Да, важно все, но самое главное — выбрать читабельный шрифт. В этой статье мы расскажем, как выбрать лучший профессиональный шрифт для рассылки. Создавайте элегантные письма с помощью Stripo в кратчайшие сроки, используя наши готовые шаблоны Ознакомиться   Шрифты HTML-писем: основные правила, которые нужно соблюдать При выборе оптимального шрифта следует учитывать три базовых правила: 1. Не используйте более двух шрифтов...

Дизайн Маркетинг
Greatest Examples of GIF animations in Emails_Cover Image
27 октября 2021 · 10 мин читать
Гиф-анимации в письмах: 16 лучших примеров

Гифки отлично будут смотреться в ваших письмах, если вы хотите продемонстрировать продукт, привлечь внимание пользователей к какому-либо элементу письма или же просто ненавязчиво украсить текст. В этой статье мы представили лучшие примеры гиф-анимаций в рассылках. Примеры GIF в письмах В этой подборке собраны лучшие примеры использования GIF в письмах, где каждая анимация выполняет свою миссию. 1. Adidas (Источник: рассылка от Adidas) Adidas использовал анимацию в письме, чтобы показать, в каком еще цвете доступен данный товар. Выглядит аккуратно и просто, но при этом...

Дизайн Маркетинг
08 апреля 2021 · 17 мин читать
Дизайн подписи в письмах: 14 лучших примеров

Хорошие подписи писем помогают нам развивать бизнес и производить положительное впечатление на клиентов. Так как подпись письма — это последнее, что люди видят в сообщениях электронной почты, мы должны делать ее креативной и запоминающейся. Давайте рассмотрим лучшие примеры подписей в письмах и их правильное использование в личных переписках и рассылках. Обратите внимание, что для всех видов бизнеса требуются различные профессиональные подписи к письмам с подробной контактной информацией. Используйте этот шаблон подписи письма, чтобы быстрее создать собственную Использовать Эта подпись письма...

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