Як створити унікальну гейміфікацію з редиректом посилань — кейс з email-маркетингу для MOYO

633

Привернути увагу підписника email-розсилки напередодні Нового року та ще задачка. Щоб бути помітними серед великої кількості привітальних листів, ми запропонували бренду MOYO гру «Передбачення на 2024 рік». Цікава для юзера і не надто велика ланка листів вимагала непростого технічного рішення від нас. Детально про впровадження унікальної гейміфікації та чим вона така особлива — у цьому кейсі.

Цілі просування

Нам необхідно було застосувати новий елемент в email-розсилках, який допоміг би залучити покупців та привернути їхню увагу. У передноворічні дні це зробити особливо складно, оскільки саме в цей період активізуються компанії та створюють велике різноманіття маркетингових пропозицій для клієнтів.

Дії команди

Ми вирішили залучити метод гейміфікації в листах у вигляді передбачень на 2024 рік, адже такий підхід створює елемент невизначеності та інтриги, а також спонукає до дії. Користувачі отримують можливість випробувати нове та отримати приємний емоційний заряд від покупки.

Отже, ідея гри полягає в тому, щоб надати учасникам унікальне та випадкове передбачення на майбутній рік. Листи із пропозицією натиснути на кулю та отримати передбачення ми відправляли напередодні різдвяних і новорічних свят — 22 грудня. При натисканні на кнопку користувач отримував своє кастомне передбачення через редирект.

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

Щось схоже можна побачити на різних лендингах. Але онлайн email-редактори мають обмеженіший функціонал. Тому нам потрібен був креативний підхід для цієї задачі.

Налаштування редиректу для гейміфікації «Передбачення на 2024 рік»

Для відправки листів з кнопкою, яка буде спрямовувати користувача на різні посилання у випадковому порядку, ми використали динамічний код на стороні сервера. Цей код — проста HTML-сторінка з JavaScript, яка автоматично веде юзера на одну із зазначених URL-адрес під час завантаження сторінки.

Roadmap налаштування редиректу для гейміфікації

1. Необхідно створити HTML-файл (наприклад, redirect.html) в редакторі коду. У Visual Studio Code або у будь-якому іншому з наступним вмістом:

<!DOCTYPE html>
<html>
<head>
    <title>Redirect Page</title>
    <script>
        function redirect() {
            var links = [
                "https://посилання-1.com",
                "https://посилання-2.com",
                "https://посилання-3.com",
                "https://посилання-4.com",
                "https://посилання-5.com"
            ];
            var randomIndex = Math.floor(Math.random() * links.length);
            var redirectLink = links[randomIndex];
            window.location.href = redirectLink;
        }
    </script>
</head>
<body onload="redirect()">
</body>
</html>

2. Цей код використовує Math.random() для випадкового вибору індексу з масиву links. Завдяки цьому при кожному завантаженні сторінки користувач перенаправлятиметься на випадково обрану URL-адресу зі списку.

Спочатку він оголошує масив links, який містить кілька URL-адрес. Потім використовує локальне сховище браузера (localStorage), щоб зберігати та оновлювати індекс URL-адреси, на який користувач буде перенаправлений. При кожному завантаженні сторінки викликається функція redirect(), яка встановлює відповідний URL для перенаправлення, оновлює індекс для наступного переходу і автоматично переадресовує користувача за допомогою window.location.href.

3. Далі файл redirect.html потрібно розмістити на сервері або хостингу, щоб мати до нього доступ через інтернет.

Чому це необхідно: в лист, а точніше в саму кнопку, на яку натисне користувач, можна додати лише одне посилання. А нам потрібно було додати п’ять. Тому ми застосували метод написання коду, який міститиме кілька посилань і видаватиме їх рандомно. Власне код в кнопку ми вставити не можемо, тому розмістили файл з кодом на хостингу. А посилання на хостинг додали в листи.

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

GitHub Pages. Можна створити репозиторій на GitHub і завантажити файл redirect.html у репозиторій. Після цього активувати GitHub Pages для цього репозиторію, і файл буде доступний через URL типу https://yourusername.github.io.
Netlify. Інший безкоштовний сервіс, який дозволяє розмістити статичні файли. Можна завантажити свій файл redirect.html і отримати URL для доступу до нього через інтернет.
Google Drive або Dropbox. Перш за все призначені для зберігання файлів, вони надають прямі посилання на завантажені файли. Однак можуть обмежувати доступ або прямі посилання для файлів.

Є багато інших сервісів, таких як Firebase Hosting, Surge, Amazon S3, які дозволяють розміщувати статичні файли.

Як розмістити файл для доступу через інтернет на прикладі платформи Netlify

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

Крок 1: Створення облікового запису на Netlify.

На сайті Netlify створіть обліковий запис або увійдіть, якщо ви вже маєте акаунт.

Крок 2: Завантаження файлу на Netlify:

після входу виберіть кнопку «New site from Git» (Новий сайт з Git);
оберіть Git-сервіс, з якого ви хочете взяти код (наприклад, GitHub, GitLab, або Bitbucket);
підключіть ваш репозиторій з файлом redirect.html;
налаштуйте параметри вашого сайту, які опублікуються на Netlify;
натисніть кнопку «Deploy site» (Розгорнути сайт).

Крок 3: Отримання URL.

Після завершення розгортання сайту, Netlify надасть вам унікальний URL, за допомогою якого можна отримати доступ до сайту.

Шукайте ваш файл redirect.html за допомогою URL типу https://yoursitename.netlify.app/redirect.html.

Це дасть змогу розмістити файл redirect.html на Netlify та отримати до нього доступ через інтернет за допомогою згенерованого URL.

Коли ви розгортаєте сайт на платформі типу Netlify, там надається URL у форматі yoursitename.netlify.app.

Він є унікальним і призначений для сайту на Netlify. Тож цей URL можна використовувати для доступу до ваших файлів, включаючи файл redirect.html, без необхідності власного домену.

Висновки

Реалізувавши ексклюзивний вид інтерактиву, ми отримали CTR, що вдвічі перевищує середні значення листів з гейміфікацією за попередні періоди.

Активність «Передбачення на 2024 рік» з випадковими посиланнями зацікавила клієнтів та залучила їх до взаємодії. Гра розширила можливості для подальшого просування: promo, акційних та геміфікованих листів. Використання динамічного коду для редиректу на різні посилання дало нам можливість випробувати унікальний, створений нами, метод гейміфікації.

Надалі цю гру можна навіть трансформувати в активність з випадковими посиланнями на товари, наприклад: «Пошукова експедиція товарів». Вона може запропонувати користувачам рандомні посилання на різні товари на сайті клієнта.

Христина Крук

Упродовж останніх п'яти років активно працюю в сфері маркетингу, мій досвід охоплює роботу з B2B, B2C та FinTech. У своїй роботі спрямовуюсь на створення ефективних стратегій, які не лише передають інформацію, але й привертають увагу через відчуття та емоції.
Кожен відправлений лист для мене — це магічний момент зв'язку з аудиторією. Мої знання та досвід — це не просто інструменти, це ключі до відкриття нових горизонтів ефективного спілкування з клієнтами.

Інші пости цього автора

Дізнатися більше

email-marketing

Свіжі

«Це по роботі» — новини квітня

Місячний дайджест подкасту «Це по роботі». Розповідаємо, про що були квітневі випуски

Робота або інвестиції: як заробляти в Telegram

Який прибуток отримують контент-менеджери та таргетологи в телеграм? А як окуповуються інвестиції в канали? Розповідаємо та рахуємо

Порівняння сервісів мобільної аналітики: як вибрати оптимальний інструмент для ваших цілей

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