На протяжении последних нескольких лет мы успешно использовали интерактивные электронные письма с живыми лентами Twitter и скрытыми «золотыми билетами» для продвижения Litmus Live. В 2017 году для Litmus Live мы добавили новый элемент — интерактивный тест прямо в письме. Чтобы «разблокировать» участие и выиграть «золотой билет», подписчикам нужно было правильно ответить на все пять вопросов теста.

Если вы пропустили это, вот само письмо:

Интерактивный тест полностью функционирует в Apple Mail, Outlook для Mac (2011 и 2016) и iOS Mail. Вот как выглядел интерактивный тест в этих почтовых клиентах:

Сообщество электронных писем обратилось к нам с просьбами рассказать, как мы создали это письмо. Вот пошаговое руководство по созданию собственного интерактивного теста в электронном письме.

## Тест

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

### Пошаговое руководство по созданию собственного теста

Мы подготовили упрощённый шаблон теста, чтобы вы могли следовать за нами и создать свой собственный интерактивный тест в письме:

#### 1. Настройка радиокнопок

В верхней части раздела с тестом размещена группа **радиокнопок**

«`

«`

Каждый элемент input определён как **type=»radio»**, чтобы они отображались как радиокнопки. Используйте одинаковый атрибут name — **name=»slide»** — для каждой радиокнопки, чтобы они были объединены в группу. Затем, чтобы каждую кнопку можно было нацелить, присвойте каждой уникальный id и отметьте первый «слайд» для отображения по умолчанию с помощью атрибута checked.

Также мы скроем радиокнопки по умолчанию с помощью следующего CSS:

«`

input {

display: none;

}

«`

#### 2. Связь слайдов с радиокнопками

Ниже радиокнопок разместите «слайды», которые будут связаны с ними.

«`

«`

**.slide1** соответствует радиокнопке с **id=»one»** и должен содержать контент для Вопроса №1, **.slide2** — id=»two» с Вопросом №2 и так далее. Цель — связать контент с радиокнопкой так, чтобы он отображался только при выборе этой радиокнопки. Для этого скрываем div-ы слайдов по умолчанию и отображаем их только при выборе соответствующей радиокнопки:

«`

/* СКРЫТЬ СЛАЙДЫ ПО УМОЛЧАНИЮ, ОТОБРАЖАТЬ ПРИ ВЫБОРЕ РАДИОКНОПКИ */

.slide1, .slide2, .slide3 {

display: none;

}

#one:checked ~* .slide1, #two:checked ~* .slide2, #three:checked ~* .slide3 {

display: block !important;

}

«`

Следующий шаг — создание HTML-структуры для вопроса.

#### 3. Создание HTML-структуры

Для создания вопроса с несколькими вариантами ответов, где правильный только один, мы используем ещё одну группу радиокнопок. Самый простой способ кодирования — это структура «label > input > контент, связанный с этим label», и продолжать вложение label до тех пор, пока не будут перечислены все вопросы.

HTML-структура для вопроса с тремя возможными ответами будет выглядеть так:

«`

Вставьте заголовок вопроса здесь

«`

Каждый input имеет одинаковое имя (name=»quiz»), чтобы они были объединены в группу, и **только один** мог быть выбран одновременно.

Давайте заполним это реальным контентом:

«`

Сколько будет 1 + 1?

«`

В этом примере правильный ответ на вопрос «Сколько будет 1 + 1?» — B) 2. Мы назначим классы **.wrong** неправильным ответам и **.correct** правильному ответу, чтобы отображать сообщения об успехе или ошибке и стилизовать их.

#### 4. Определение сообщений об успехе и ошибке

Добавим сообщения об успехе и ошибке в HTML:

«`

Сколько будет 1 + 1?

Следующий вопрос →

«`

Здесь мы размещаем сообщения об успехе или ошибке непосредственно перед закрывающим тегом **** соответствующего ответа. Поскольку мы используем вложенность, это происходит в обратном порядке. Таким образом, первый закрывающий **** относится к ответу C, второй — к ответу B, а третий — к ответу A.

Скроем эти сообщения по умолчанию:

«`

.error, .success, .next {

display: none;

}

«`

И будем отображать их только при выборе соответствующей радиокнопки:

«`

.wrong:checked ~ .error {

display: inline-block !important;

}

.correct:checked ~ .success {

display: inline-block !important;

}

.correct:checked ~ .next {

display: inline-block !important;

}

«`

По сути, мы говорим, что когда игрок выбирает:

— Неправильный ответ, отмечается **.wrong радиокнопка** и отображается сообщение об ошибке

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

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

«`

Следующий вопрос →

«`

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

В этом примере мы указываем **for=»two»**, что соответствует input с **id=»two»** — это наш второй «слайд» и вопрос в интерактивном тесте. Во втором слайде и втором вопросе теста **** будет иметь for=»three», чтобы перейти к третьему вопросу теста. Таким образом, мы можем связать взаимодействие с input внутри одного слайда с переходом к другому слайду с помощью атрибута for.

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

### Резервный вариант

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

Оно отображалось по умолчанию и скрывалось для клиентов WebKit, где тест был активен:

«`

@media screen and (-webkit-min-device-pixel-ratio: 0) {

/* Вставьте сюда CSS */

}

«`

С помощью Checklist было легко проверить, что резервный вариант работает во всех почтовых клиентах, которые не поддерживают интерактивность. Посмотрите, как письмо отображалось в разных почтовых клиентах с различной поддержкой интерактивности.

## Высокая социальная активность

Важно измерять успех любой email-кампании. Для нашего интерактивного теста мы использовали активность в Twitter как меру успеха кампании. Кампания собрала около 650 твитов с хэштегом #LitmusLive — огромный успех для нас!

.@litmusapp продолжает расширять границы email-рассылок. #LitmusLive https://t.co/hGytikwQPj? pic.twitter.com/nt5k7SfreI

— Seán Smyth (@Sean_Smyth) 14 марта 2017 г.

@litmusapp Я продолжаю возвращаться к этому письму и находить новые крутые элементы (например, стрелки в разделе с лентой Twitter). Это здорово! #litmuslive

— email snarketing (@EmailSnarketing) 14 марта 2017 г.

Привет @litmusapp, взаимодействие с сообществом — это ПОБЕДА! Узнал много нового, просто участвуя! Привет всем #emailgeeks! Надеюсь увидеть вас на #LitmusLive

— Elina Sosnovska (@eli_elinasos) 14 марта 2017 г.

ОБОЖАЮ формат теста в этом году, @litmusapp @kllewkow! #LitmusLive pic.twitter.com/Aioem5YNrB

— McKenzie Gregory (@kenziegreg) 14 марта 2017 г.

Люди! @litmusapp добавили тест в утреннее письмо #litmuslive. pic.twitter.com/0Jgh3P8tqs

— Michael J. Barber (@michaeljbarber) 14 марта 2017 г.

## Делитесь и заботьтесь

Теперь у вас есть всё необходимое, чтобы добавить интерактивный тест в следующее письмо, и мы не можем дождаться, чтобы увидеть, как вы его используете! Если вы хотите поделиться своей кампанией с интерактивным тестом, заходите в Сообщество. А если у вас есть вопросы — дайте нам знать, мы здесь, чтобы помочь.