Инструкция по переносу верстки в email шаблон Manzana Campaign для коммуникации с товарами ПП
Перенос верстки в email шаблон Manzana Campaign для коммуникации с товарами ПП
1. На рис.1 представлен пример письма, который нужно перенести в конструктор Campaign, где:
- 1 и 2 - статические блоки шаблона, которые не содержат метапеременную “Персональные предложения” (ПП)
- 3 - динамический блок с версткой для метапеременной “Персональные предложения”
Рис. 1 - Пример шаблона, верстку которого необходимо перенести в Campaign.
2. Нужно открыть шаблон письма в любом HTML редакторе. Верстка статических блоков 1 и 2 не изменяется. А код для динамического блока 3 необходимо скопировать и сохранить в отдельном файле. В пп.7-9 будет производиться его доработка для появления в письме товаров из списка ПП в нужном виде. Но сначала необходимо добавить в письмо соответствующую метатепеременную. Для удобства вместо кода из блока 3, нужно поставить отметку “Здесь будет метапеременная”.
Рис. 2 - В верстке письма отмечено место для метапеременной.
3. Нужно создать пустой шаблон Email.
Рис. 3 - Новый шаблон email, выделена кнопка “Редактор HTML”
4. В редакторе HTML нужно вставить полученную в п.2 верстку email с двумя статическими блоками и одним выделенным под метапеременную. В конструкторе можно будет увидеть письмо с отметкой “Здесь будет метапеременная”.
Если картинки добавлены в шаблон в виде ссылок на ресурс, на котором хранятся, то они отобразятся в конструкторе. Если они добавлены не в виде ссылок, то их нужно загрузить с компьютера. Как это сделать, описано в следующем п.5 инструкции.
Рис. 4.1 - Отображение письма, для которого картинки добавлены с помощью ссылок.
Рис. 4.2 - Отображение письма без ссылок на картинки.
5. Чтобы добавить картинку в шаблон письма, нужно дважды кликнуть по области картинки. В открывшемся окне загрузки можно нажать кнопку “Выбрать файл” и найти нужную картинку на компьютере либо можно перетащить картинку в указанную область окна. После этого нужно нажать кнопку “Применить”. Картинка появится в шаблоне письма.
Рис. 5 - Окно загрузки картинки в конструкторе email.
6. Для добавления метапеременной ПП в блок нужно удалить надпись “Здесь будет метапеременная”, а затем кликнуть дважды на блоке письма, в котором она находилась. В появившихся настройках нужно выбрать “Персонализация”.
Рис. 6.1 - Выбор “Персонализации” в блоке, где была отметка “Здесь будет метапеременная”.
Слева откроется панель выбора метапеременных, в которой нужно с помощью поиска найти и выбрать “Персональные предложения”.
Рис. 6.2 - Выбор метапеременной “Персональные предложения”.
В пустом блоке появится ярлык метапеременной. После этого лучше сохранить шаблон письма.
Важно сохранять письмо после каждого значимого изменения.
Рис. 6.3 - Ярлык метапеременной “Персональные предложения” в письме.
7. Далее необходимо настроить отображение товаров из списка ПП. Для этого нужно открыть в любом HTML редакторе файл с кодом динамического блока, который был сохранен отдельно в п.2. Здесь можно поменять те поля, которые планируется подставлять динамически на основе данных метапеременной “Персональные предложения”.
Возможно использовать следующие динамические характеристики товаров из списка ПП:
- [%Картинка_х_1%]
- [%Название продукта_х_1%]
- [%Размер скидки в процентах_х_1%]
- [%Новая цена_х_1%]
- [%Старая цена_х_1%]
- [%Описание_х_1%] - помимо описания, в данном поле можно передавать ссылку для перехода на товар при клике по картинке.
Вместо “х” в код нужно подставить порядковый номер товара.
В рассматриваемом примере используются 3 характеристики:
- [%Картинка_х_1%] - рис. 7 цифра 1
- [%Название продукта_х_1%] - рис. 7 цифра 2
- [%Размер скидки в процентах_х_1%] - рис. 7 цифра 3
Рис. 7 - Пример подстановки тегов внутри верстки для блока с метапеременной
8. Сервисные метапеременные [%Отображать%] являются неотъемлемой составляющей любого HTML кода внутри параметризуемой метапеременной (в динамической части шаблона). Без них рассылка не будет отправлена.
Также в коде верстки письма может быть прописано определенное бизнес-пользователями количество мест, где разместятся товары из списка ПП. Например, необходимо отправить подборку из 10 товаров каждому клиенту интернет-магазина. При этом для конкретного пользователя количество рассчитанных Manzana Predictive Analytics персональных предложений может оказаться меньше 10, например, 4 товара. Чтобы оставшиеся в шаблоне зарезервированные 6 мест под товары не оказались пустыми в письме конкретного пользователя, нужно использовать функционал автоматического скрытия таких пустых мест под товары. Для этого важно правильно использовать сервисные метапеременные [%Отображать%].
Количество сервисных метапеременных [%Отображать%] должно быть равным количеству зарезервированных мест под товары списка ПП в шаблоне письма. Например, если планируется, что количество товаров для каждого из контактов будет варьироваться от 1 до 5, то динамическую часть шаблона создаем для 5 товаров (т.е. для максимально возможного количества). Каждую часть кода, отвечающую за отображение одного товара, помещаем между конструкцией “<!-- [%Отображать%]>” и “<!-- -->” следующим образом:
<!-- [%Отображать%]>
Место для 1-го товара в динамическом шаблоне
<!-- -->
<!-- [%Отображать%]>
Место для 2-го товара в динамическом шаблоне
<!-- -->
…
<!-- [%Отображать%]>
Место для 5-го товара в динамическом шаблоне
<!-- -->
Рис. 8.1 - Пример использования сервисных метапеременных [%Отображать%] в HTML коде для выведения товаров с характеристиками [%Картинка_х_1%], [%Новая цена_х_1%], [%Старая цена_х_1%], [%Размер скидки в процентах_х_1%] и [%Название продукта_х_1%]
На рисунке 8.1 красным цветом выделен код блоков товаров. Желтым - код, между которым требуется разместить код каждого из блоков товаров, чтобы этот блок корректно скрылся, если для него не будет характеристик для отображения. Скопировать код примера с рис. 8.1 можно по ссылке.
Для скрытия используется стандартный функционал комментирования HTML кода. Если после метапеременной [%Отображать%] в таких конструкциях мы подставить “--”, то можно увидеть, как браузер начнет отображать блок заключенный между ними.
Важно: В шаблоне, где планируется использовать функционал скрытия блоков, запрещается использовать тег <!-- --> внутри блоков, которые планируется скрывать.
Рис. 8.2 - Пример некорректного HTML кода с тегом <!-- -->
Мы рекомендуем использовать функционал автоматического скрытия мест под товары (товарных блоков) в коде HTML. Однако, если в шаблоне по какой-то причине не планируется скрывать блоки с товарами, то будет неважно точное расположение метапеременных [%Отображать%] внутри кода HTML. Но их наличие по-прежнему обязательно. В таком случае их для удобства лучше расположить в первых строках HTML документа. На рис.8.3 представлен фрагмент HTML кода для параметризуемой метапеременной с 5 блоками товаров.
Рис. 8.3 - Пример кода для параметризуемой метапеременной [%Отображать%] с 5 блоками товаров.
9. Важно: Товары ПП по умолчанию выводятся в письмо в случайной последовательности, т.е. без учета приоритетов, присвоенных Manzana Predictive Analytics.
Чтобы они выводились с учетом рассчитанных приоритетов, нужно в шаблон HTML в первую строчку кода динамического блока добавить следующую конструкцию для ранжирования:
<!--
[%Приоритет ПП_1_1%]
[%Приоритет ПП_2_1%]
[%Приоритет ПП_3_1%]
[%Приоритет ПП_4_1%]
[%Приоритет ПП_5_1%]
[%Приоритет ПП_6_1%]
-->
Метапеременные закомментированы, так как они являются сервисными и служат только для ранжирования товаров ПП. Количество метапеременных [%Приоритет ПП_n_1%] будет равно необходимому для вывода в письмо количеству товаров.
Рис. 9 - Добавление метапеременных в HTML для выведения товаров с учетом приоритетов.
10. После доработки файла с кодом динамического блока (пп.7-9) нужно подставить код в письмо. Для это необходимо вернуться в редактор email в Manzana Campaign и кликнуть по метапеременной “Персональные предложения” в соответствующем блоке.
Рис. 10.1 - Метапеременная “Персональные предложения” в шаблоне письма.
Откроется окно настройки метапеременной. В поле HTML окна настройки нужно вставить код верстки для динамического блока, подготовленный в пп.7-9, и нажать кнопку “Сохранить”.
Рис. 10.2 - Добавление кода динамического блока в окно настройки метапеременной.
Важно: необходимо выбрать нужный фильтр для параметризуемой метапеременной. Для этого нужно нажать кнопку “Добавить условие”, а затем в раскрывающемся списке отметить фильтр.
Рис. 10.3 - Выбор фильтра метапеременной.
После этого в окне настройки метапеременной нужно нажать кнопку “Сохранить”.
В конструкторе шаблона также нужно нажать “Сохранить”.
Рис. 10.4 - Сохранение шаблона письма.
Редактирование перенесенного в Manzana Campaign шаблона письма с ПП
Если после переноса HTML кода в шаблон Manzana Campaign требуется внести правки, то нужно выполнить следующие действия.
1. Зайти в шаблон письма.
2. Если необходимо изменить верстку статического блока, то нужно открыть HTML редактор в шаблоне.
Вместо динамического блока в коде будет прописана метапеременная [%Персональные предложения_1%].
Можно отредактировать верстку статичного блока в редакторе Campaign или скопировать и перенести нужную часть кода в отдельный файл, отредактировать там и потом заменить ее в HTML редакторе Manzana Campaign.
2. Если требуется поменять динамический блок шаблона, нужно зайти в настройки метапеременной “Персональные предложения”, кликнув по нему.
Затем нужно скопировать верстку из поля HTML в открывшемся окне настройки метапеременной. Для этого нужно установить курсор в поле HTML и нажать Ctrl+A, чтобы выделить всю верстку. Потом нажать Ctrl+C для ее копирования.
Полученный код можно вставить и отредактировать в любом редакторе, а после этого обновить верстку в поле HTML окна настройки метапеременной.
Таким образом, редактировать статические и динамические блоки необходимо отдельно.