Дизайн Маркетинг How-to AMP
~ 14 мин читать
2 комментарии
2836 просмотры
оценить
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 2 месяца назад

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

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

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

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

← Предыдущие статьи Следующие статьи →
14 дней назад · 15 мин читать
15 лучших идей для рассылок ко Дню святого Валентина

Вы ищете свежие идеи рассылок ко Дню святого Валентина, чтобы привлечь новых клиентов? Не стоит утруждать себя поисками! Просто посмотрите, как ведущие мировые бренды справляются с праздничными кампаниями. Вдохновляйтесь приведенными ниже идеями — и сразу же воплощайте их в жизнь, используя наши шаблоны праздничных писем. Создать романтическую рассылку в Stripo — проще простого Использовать этот шаблон Email-маркетинговые идеи ко Дню святого Валентина Не сосредотачивайтесь только на дизайне. Уделите внимание идеям, которые реализовали известные бренды. Они помогут вам оживить рассылку на...

Дизайн Маркетинг Шаблоны
stripo-annual-report
30 декабря 2020 · 8 мин читать
Stripo 2020: годовой отчет

Привет всем. Декабрь — самое время сделать обзор года, который вот-вот закончится. А мы такой обзор уже сделали ;) И теперь хотим поделиться нашими результатами. Урраа!!  Stripo в цифрах Здесь мы кратко осветим только самые знаменательные цифры.  Наша гордость: достижения Stripo в 2020 году Мы выделим только самые важные моменты, которые нам особенно запомнились. Мы становимся платформой Мы переросли слово «редактор». Даже не смотря на то, что мы фокусируемся исключительно на дизайне писем, оставляя за бортом отправку и аналитику, мы все...

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