Генератор інтерактивних модулів: «Знайдіть пару»

«Знайдіть пару» — гра, знайома кожному з нас із дитинства. Знайти пару однакових картинок, відкриваючи їх по черзі, — доволі захопливе і помірно складне завдання, яке можна використовувати, щоб урізноманітнити свої email-розсилки. Ми додали його у свій генератор інтерактивних модулів, і тепер саме час розібратися, як можна швидко згенерувати гру для листів.

Як можна використовувати гру «Знайдіть пару» в листах

Правила гри досить прості. Одержувачу потрібно буде шукати пари однакових картинок, поки не будуть знайдені всі з них. Оскільки в гру можна додавати будь-які картинки, ця механіка добре впишеться в листи будь-якої індустрії, яка бажає зробити свої розсилки більш захопливими.

Додайте гру в лист «Знайдіть пару», а нагородою за її успішне проходження може слугувати промокод, знижка або будь-яка інша винагорода, яку ви вважатимете досить цінною для своєї аудиторії.

Наприклад, Yakaboo створила інтерактивний челендж з 10-секундним лімітом часу, використовуючи гру «Знайдіть пару». У гравців була необмежена кількість спроб, що підігрівало їхнє бажання розблокувати знижку 20% на придбання книг у цьому магазині.

(Джерело: Лист від Yakaboo)

(Джерело: Лист від Promodo for Shiny&Diski)

Як згенерувати інтерактивний модуль «Знайдіть пару»

Легкість створення ігрових шаблонів є наріжним каменем нашого генератора, тому давайте наочно покажемо кожен простий крок створення гри «Знайдіть пару».

Крок 1. Виберіть кількість клітинок

Спочатку потрібно визначитися з кількістю клітинок у грі, від цього залежатиме рівень її складності та кількість картинок, які необхідно буде додати надалі.

Крок 2. Додайте зображення клітинок

Оскільки гра заснована на картинках, пари яких потрібно підібрати, вашою головною задачею в генераторі буде додавання власних зображень. Просто вставте посилання на картинку, і вона автоматично додасться в гру.

Важливо зазначити: завантажуване зображення має бути у форматі PNG, JPG або GIF. Крім того, вага завантажуваного файлу не повинна перевищувати 3 МБ, а розміри не повинні бути більшими за 4000 × 4000 пікселів.

Крок 3. Складіть повідомлення про збіг для інтерактивного HTML

У зв'язку з технічними особливостями HTML, гра вимагає створення додаткових повідомлень для продовження гри, залежно від вибраної пари. Вам необхідно створити:

• повідомлення, яке одержувач побачить, якщо збере правильну пару; 
• кнопку, щоб підтвердити правильність знайденої пари; 
• «Повідомлення про прогрес» з текстом і кнопку для продовження гри;
• повідомлення для неправильної пари;
• кнопку для продовження гри після того, як було знайдено неправильну пару.

У HTML-версії гри повідомлення матимуть такий вигляд:

Крок 4. Опрацюйте вікно завершення

Будь-яка гра рано чи пізно закінчується, тому необхідно додати вікно завершення в гру «Знайдіть пару».

Ви можете написати будь-яке повідомлення — зазвичай це промокод на наступну покупку, додати емодзі прямо з генератора і вибрати місце, де буде відображатися повідомлення (після гри або попап).

Крок 5. Створіть текстову версію

Ще один важливий аспект — створення фолбека. Не всі поштові клієнти підтримують AMP і HTML, тому для таких користувачів потрібно підготувати окрему версію тексту, яку вони побачать у своїй пошті. У випадку з грою «Знайдіть пару» достатньо просто одразу видати нагороду, тоді як в інших поштових клієнтах одержувачам доведеться поборотися за неї в грі.

Крок 6. Оформіть дизайн гри

Основа гри готова, тож настав час налаштувати її оформлення. Ми надаємо кілька інструментів, щоб видозмінити гру, а потім додати її в лист.

Прев'ю клітинок

Ви можете вибрати зовнішній вигляд прев'ю клітинок, підібравши колір, готове зображення або додавши власне. Ви також можете вибрати радіус меж фону для клітин.

Важливо зазначити: завантажуване зображення має бути у форматі PNG, JPG або GIF. Крім того, вага завантажуваного файлу не повинна перевищувати 3 МБ, а розміри не повинні бути більшими за 4000 × 4000 пікселів.

Повідомлення про збіг

Налаштуйте тексти повідомлень про правильний і неправильний збіги та продовження гри, використовуючи наступне:

• кольори тексту кнопок;
• кольори фону кнопок;
• радіус межі.

Крок 7. Скачайте і додайте гру в лист

Наш генератор видасть вам модуль з грою, що містить таке:

• AMP-версію листа. Вона працює в Gmail, Yahoo і FairEmail;
• інтерактивний фолбек. Він працює на всіх пристроях і в поштових клієнтах, що підтримують HTML5 і CSS3. Він також працює в Apple Mail і Samsung Email; 
• текстову резервну версію. Вона працює в поштових клієнтах, які не підтримують HTML5 і CSS3, наприклад у деяких застосунках Outlook.

Використання AMP та інтерактивного HTML-фолбека дасть змогу охопити 92% аудиторії, оскільки вони зможуть взаємодіяти з інтерактивною частиною цієї гри. Текстовий фолбек дозволить вам надати решті 8% аудиторії, які використовують поштові сервіси, що не можуть працювати з інтерактивним контентом, промокод або іншу винагороду, за яку інші змагатимуться в процесі гри.

Безпосередньо впровадження гри також досить просте і не займає багато часу. Ми детально описали процес у нашому першому мануалі «Як створювати інтерактивний контент без проблем із кодом». Перейдіть за посиланням на цю статтю і знайдіть Крок 6, де ми детально описуємо кожен крок.

На завершення

Чергове доповнення до нашого генератора інтерактивних модулів поповнило ряди ваших можливостей зі створення листів ще одним ігровим шаблоном. Гра «Знайдіть пару» дає змогу вашим одержувачам виграти різноманітні подарунки в інтерактивній і веселій формі, роблячи листи ще більш захопливими та бажаними.

Крім того, гра доступна 92% аудиторії завдяки сумісності з більшістю поштових клієнтів. Таким чином, це корисне доповнення, яке підвищить ефективність ваших розсилок. Ми продовжуємо додавати різні механіки у свій генератор, щоб надати вам легкий доступ до різних розважальних ігор для email-розсилок. Слідкуйте за новинами, щоб не проґавити нові ігри.