Дизайн Маркетинг How-to AMP
~ 14 мин читать
2 комментарии
4306 просмотры
оценить
30 октября 2020

Меньше часа на создание лабиринтов и головоломок в Stripo

Stripo / Blog / Меньше часа на создание лабиринтов и головоломок в Stripo

О чем вы подумали, увидев такой пример письма? Я почти уверена — что-то в духе «какой сложный игровой элемент, маркетологи явно потратили много часов или даже дней, чтобы сотворить такое». Даже моя команда, которая занимается AMP каждый день, была такого мнения...

А что если я скажу вам, что вы можете сделать подобное примерно за 30 минут?

Лабиринт ко Дню ОтцаВ этой статье я покажу, как создать такое письмо двумя способами:

  • без уведомления в конце — только с помощью AMP-карусели. Никаких навыков кодирования не понадобится;

  • с уведомлением в конце — вам нужно будет вставить в HTML-код ссылки на изображения. И тоже не надо ничего кодировать. Мы предоставим вам готовый модуль письма, в котором необходимый код уже встроен. Вам придется поработать только со ссылками.

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

Чем хороша эта механика геймификации?

Самое ценное в этой механике то, что ее можно использовать снова и снова. Это делает ее использование в письмах дешевым и быстрым.

Но это совсем не обязательно должен быть лабиринт. На самом деле вы можете сделать что угодно:

  • лицо человека — например, вы можете предложить получателям «сложить» фото певца. Выигрывают те, кто угадает, что это за певец;

  • спрятанный в пазле новый товар, который вы собираетесь выпустить;

  • карта города или страны, куда пользователи могут выиграть поездку, если дадут правильные ответы на вопросы в других письмах серии.

Лабиринты, позволяющие людям угадывать, в какую страну они могут лететь

Как создать лабиринт или пазл в Stripo

Как мы уже говорили, такие пазлы бывают двух типов:

Пазл 1. Без уведомления в конце

Назовем его «простым».

Для его создания навыки программирования не требуются никакие, от слова “вообще”.

Шаг 1. Подготовка изображений

Найдите или нарисуйте нужное изображение. Разрежьте его на 9 кусочков квадратной формы. То есть их ширина и высота должны быть абсолютно равны.

Фрагменты 1 и 9 остаются без изменений. А части 2-8 нужно продублировать по 3 раза каждую, повернув их на 90, 180 и 270 градусов. Таким нехитрым способом мы получили одну правильную квадратную часть и три неправильных. Эти изображения нам нужно будет загрузить в соответствующие карусели.

Шаг 2. Сборка пазла

Вариант 1. С нашим готовым модулем
Собственно пазл

Для вашего удобства мы создали готовый модуль. В нем уже есть 9 контейнеров: 3 ряда по 3 контейнера в каждом. Контейнер 1 в первом ряду и контейнер 3 в третьем ряду оборудованы блоком «Картинка», тогда как в других контейнерах есть AMP-карусели с 4 слайдами в каждом.

Карусели в этом модуле также имеют наши кастомные стрелки и уже настроенный дизайн.

Вам остается только заменить наши изображения своими.

Чтобы добавить этот модуль в свой шаблон:

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

  • зайдите во вкладку «Общие»;

  • в поле поиска введите «Labyrinth, example 1»;

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

  • и загрузите свои изображения;

Добавление сообщений-лабиринтов без уведомлений

Важно:

Как мы уже говорили, части 1 и 9 фиксированы — они не двигаются, поэтому вы загружаете их как обычные изображения. Остальные элементы загружаются в четырех вариантах: один правильный и три неверных.

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

  • включите этот пазл в AMP-версию письма, просто нажав «Включить в AMP HTML»;

Полоса-контент-АМП

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

Работа со стрелками (опционально)

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

Рекомендуемый модуль уже содержит кастомные стрелки. При желании вы можете заменить их своими.

Для этого:

  • кликните значок «AMP HTML», который не принадлежит ни одной карусели, то есть расположен над всеми каруселями в модуле, — чтобы открыть часть кода, в которой находятся все стили для этого модуля;

Щелчок по значку HTML, чтобы открыть часть кода со стилями

  • в редакторе кода вам нужно заменить существующие ссылки вашими ссылками изображений, где вместо ссылки 1 вы вставите ссылку на изображение стрелки с надписью «Prev»;

Замена ссылок на изображения стрелками в редакторе

  • вместо ссылки 2 вы добавляете ссылку на изображение со стрелкой «Next».

Замена изображений с указанием стрелок в сообщениях электронной почты

(В этой гифке мы показываем, как открыть редактор кода и заменить ссылку)

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

Вариант 2. Собираем пазл с нуля.

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

Собственно пазл

Итак, что вам нужно сделать:

  • перетащите в HTML-шаблон три структуры по три колонки в каждой;

Структуры-Контент

  • в контейнер 1 в первой строке и контейнер 3 в третьей строке перетащите блок «Картинка». Таким образом вы добавляете в письмо два фиксированных изображения — открывающее и закрывающее — чтобы юзеры знали, с чего начать;

  • перетащите блок AMP-Карусель во все остальные колонки;

Контент-Блоки-Карусель

  • отключите опцию «Предпросмотр изображения» для каждой карусели;

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

Добавить-слайд-показывать-превью

  • включите все эти структуры с каруселями в AMP HTML, как показано выше;

  • проверьте карусель в режиме «Просмотреть».

Пример того, как будет выглядеть ваша головоломка в решенном виде, если сделать все полностью самостоятельно.

Идея для рождественской рассылки

Важно:

Вы можете построить пазл с двумя или четырьмя рядами. Все зависит от вас.

Работаем над стрелками

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

Работа со стрелками

Пазл 2. С уведомлением в конце

Если вы используете этот тип головоломки, ваши пользователи увидят уведомление в конце. Это может быть что угодно — например, «Вы выиграли», «Вот ваш купон» и т. д. Когда мы начнем работать с изображениями для этой головоломки, вы поймете, почему здесь придется немного поработать с кодом.

Шаг 1. Добавление в шаблон пазла с уведомлением

Чтобы начать работу с этим пазлом:

  • перетащите структуру с 1 колонкой в HTML-шаблон письма;

  • перейдите в раздел «Модуль» на боковой панели;

  • во вкладке «Общие» в поле поиска введите «Labyrinth, example 2»;

  • перетащите его в свой шаблон.

Добавление модулей в электронную почту

Шаг 2. Загрузка изображений

Во-первых, нам нужно сделать все так, как описано в разделе «Шаг 1» для Пазла 1.

Загрузите свои изображения и сохраните ссылки. Они нам понадобятся.

Загрузка изображений 1 и 9 как фиксированных изображений

Добавление изображений, которые останутся фиксированными

Чтобы загрузить изображения 1 и 9 (открывающее и закрывающее), вам нужно:

  • кликнуть изображение 1 в шаблоне (важно кликнуть именно по нему);

Нажатие-AMP-HTML-для загрузки изображения

Добавление изображений в карусели
Чтобы загрузить изображения для каруселей 4 и 7, вам нужно:
  • кликнуть на значок «AMP HTML» непосредственно в первой колонке — редактор кода для этих слайдов откроется автоматически;

Карусель-4-и-7_Замена-ссылки

  • там вы увидите две секции с картинками AMP. Замените наши ссылки своими.

Я подчеркнула ссылки, которые нужно заменить.

Важно

Загружайте соответствующие «неправильные» изображения в соответствующие карусели в случайном порядке. Но помните, что «правильные» изображения необходимо загружать в порядке, указанном ниже:

  • # 4 для карусели 4;

  • # 2 для карусели 7.

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

Приблизительный порядок ваших изображений

Карусель 4: изображение 1 = поворот на 90°, изображение 2 = поворот на 180°, изображение 3 = поворот на 270°, изображение 4 = правильное изображение (важно!).

Карусель 7: изображение 1 = поворот на 270°, изображение 2 = правильное изображение (важно!), изображение 3 = поворот на 180°, изображение 4 = поворот на 90°.

Чтобы загрузить изображения для каруселей 2, 5 и 8
  • кликните на значок «AMP HTML» в колонке 2 — редактор кода откроется автоматически;

Нажатие для загрузки 2,5,8

  • замените существующие ссылки своими.

Важно

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

  • # 4 для каруселей 2, 5 и 8.

Приблизительный порядок ваших изображений

Карусель 2: изображение 1 = поворот на 90°, изображение 2 = поворот на 180°, изображение 3 = поворот на 270°, изображение 4 = правильное изображение (важно!).

Карусель 5: изображение 1 = поворот на 270°, изображение 2 = поворот на 180°, изображение 3 = поворот на 90°, изображение 4 = правильное изображение (важно!).

Карусель 8: изображение 1 = поворот на 180°, изображение 2 = поворот на 90°, изображение 3 = поворот на 270°, изображение 4 = правильное изображение (важно!).

Мы сделали это для вашего и нашего удобства. При работе с каруселями в колонке 2 вы просто прячете «правильные» изображения за последней ссылкой в ​​карусели.

Чтобы загрузить изображения для каруселей 3 и 6:
  • кликните значок «AMP HTML» в колонке 3 — редактор кода откроется автоматически;

Работа над каруселью 3 и 6

  • замените ссылки.

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

# 3 для каруселей 3 и 6.

Примерный порядок ваших изображений

Карусель 3: изображение 1 = поворот на 270°, изображение 2 = поворот на 90°, изображение 3 = правильное изображение (важно!), изображение 4 = поворот на 180°.

Карусель 6: изображение 1 = поворот на 180°, изображение 2 = поворот на 90°, изображение 3 = правильное изображение (важно!), изображение 4 = поворот на 270°.

Почему же так важен порядок изображений в каруселях?

Если мы хотим, чтобы письмо сообщало пользователям, что они решили головоломку, нам нужно каким-то образом сказать системе, когда именно показывать эти уведомления.

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

У всех изображений есть:

  • атрибут “loop”, который заставляет их зацикливаться;

  • и строка on="slideChange:AMP.setState({answer3:+event.index})" — это означает, что каждый слайд имеет свой номер, и этот номер заносится в переменную карусели “answer#”. Каждая карусель имеет свою переменную (answer 1, answer 2, ... , answer 7).

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

Переменные в коде

Вот почему нам нужно размещать «правильные» изображения в нужных местах.

Работа со стрелками (опционально)

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

Модуль, с которым мы работали, уже содержит кастомные стрелки. При желании вы можете заменить их своими.

Для этого:

  • кликните значок «AMP HTML» в колонке 1 — редактор кода для этого элемента письма откроется автоматически;

  • прокрутите немного вниз;

  • ссылка 1 относится к стрелке «Повернуть против часовой стрелки» — замените ее своей;

  • ссылка 2 относится к стрелке «Повернуть по часовой стрелке» — также замените ее.

Замена изображений со стрелками

Работа с уведомлением

Наше уведомление по умолчанию говорит: «Пазл решен».

Чтобы отредактировать текст:

  • кликните значок «AMP HTML» непосредственно под строкой с каруселями;

  • откройте редактор кода;

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

  • в редакторе замените текст, написанный белым, своим текстом.

Включение уведомления

А теперь включите всю эту полосу только в AMP HTML-версию вашего письма.

Полоса-контент-АМП

Создание резервного варианта

Данный этап относится к обоим типам пазла.

Те пользователи, чьи почтовики еще не умеют в AMP HTML, увидят наш запасной вариант.

Обычно мы рекомендуем создать что-то похожее на элемент AMP. Но в данном случае это невозможно.

Вот почему оптимальное решение — просто сообщить подписчикам, что им стоит посмотреть веб-версию нашего письма, оценить преимущества AMP и немного развлечься.

Просмотр в браузере

Как сделать резервный вариант с помощью Stripo:

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

  • активируйте всю строку/полосу только для версии HTML.

 Классический - HTML

Важно

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

Примеры AMP-пазлов

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

Пример 1. Mindbox

Эту головоломку команда Mindbox создала для их клиента Bausch+Lomb.

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

Лабиринт с Stripo_Photos of PeopleКак видим, вместо сообщения «Вы сделали это правильно» компания Bausch+Lomb рассказала клиентам краткую биографию ученого, что очень интересно.

Пример 2. Mindbox

В той же рассылке Bausch+Lomb предлагают подписчикам решить еще один пазл, чтоб увидеть эскиз первого в истории оптического устройства.

Головоломка с карусельюЭто просто удивительно — увидеть такие исторические вещи.

В пазле всего два ряда, но это не делает его менее интересным.

Пример 3. Stripo

Хотите отпраздновать день, когда Нил Армстронг и его команда ступили на Луну?

Пример Космонавта

Пример 4. Stripo

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

Пазлы-и-изображения-карусели-для-запуска-объявлений-сообщений электронной почты

И еще несколько советов

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

  • попасть в белый список Google;

  • пофиксить все баги, если таковые возникнут. Вы увидите их в режиме предварительного просмотра (в противном случае пользователи увидят письмо в обычном формате HTML);

  • добавьте в письмо запасной вариант — HTML-версию;

  • убедитесь, что ваш ESP/CRM может отправлять письма на основе AMP;

  • имейте в виду, что в настоящее время только Gmail (как веб, так и мобильные приложения на всех ОС) и Mail.ru могут воспроизводить письма на основе AMP. Yahoo скоро тоже присоединится к ним;

  • Такие письма потеряют свои AMP-компоненты, если вы их перешлете.

В завершение

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

Особенно сейчас, когда приближаются праздники.
 

Eugene Fesyuk 4 месяца назад

Спасибо за крутой гайд! Вопрос: Как сделать резервный вариант правильно, там где кнопка "view in browser"? Потому как у меня по ссылке для веб-версии АМП не работает.

Анна Кузнецова прокомментировал Eugene Fesyuk 4 месяца назад

Eugene, Добрый день. Благодарим за столь приятный отзыв и за вопрос )) По идее, ваш ESP должен предоставить вам AMP-версию письма, чтоб использовать ее как фолбек. Если же технически это невозможно, то можно использовать АМР-версию вашего письма из Stripo. Конечно, статистику переходов с веб-версии на сайт мы не предоставим, но ваш ESP предоставит статистику по кол-ву переходов на саму веб-версию письма. Чтоб ее получить, нужно: * перейти в режим предпросмотра письма, как показно на скрине https://prnt.sc/vqlrhu ; * далее выбрать АМР-версию письма; * скопировать ссылку https://prnt.sc/vqlvhr . Надеемся, что смогли вам помочь. Если появились новые вопросы - задавайте, пожалуйста. Будем рады ответить ))

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

← Предыдущие статьи Следующие статьи →
Earth Day Email Examples_Cover Image
2 дня назад · 13 мин читать
Примеры писем ко Дню Земли

За последние годы интерес общественности к проблемам экологии только вырос и мы не можем не поговорить с вами про наступающий День Земли. А точнее про email рассылку к этой дате. Что неуместно в таких письмах, а что все-такие стоит включить, как сделать письмо оригинальным — мы разберем на 15 примерах известных компаний.  С этим шаблоном вы создадите рассылку ко Дню Земли в считанные минуты Использовать Подготовка дизайна писем ко дню Земли Создавая email-рассылку, нужно учитывать множество факторов. Они вам известны:...

Дизайн Маркетинг Шаблоны How-to
6 дней назад · 17 мин читать
Дизайн подписи в письмах: 14 лучших примеров

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

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