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

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

Цели продвижения

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

Действия команды

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

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

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

Нечто похожее можно увидеть на различных лендингах. Но у онлайн email-редакторов более ограниченный функционал. Поэтому нам нужен был креативный подход для этой задачи.

Настройка редиректа для геймификации «Предсказания на 2024 год»

Для отправки писем с кнопкой, направляющий пользователя на разные ссылки в случайном порядке, мы использовали динамический код на стороне сервера. Этот код — простая HTML-страница с JavaScript, которая автоматически ведет юзера на один из указанных URL-адресов при загрузке страницы.

Roadmap настройки редиректа для геймификации 

1. Необходимо создать HTML-файл (например, redirect.html) в редакторе кода. В Visual Studio Code или в любом другом со следующим содержимым:

<!DOCTYPE html>
<html>
<head>
    <title>Редиректная страница</title>
    <script>
        функция 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>
  1. Этот код использует Math.random() для случайного выбора индекса из массива links. Благодаря этому при каждой загрузке страницы пользователь будет перенаправляться на случайно выбранный URL-адрес из списка. 

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

  1. Далее файл redirect.html нужно разместить на сервере или хостинге, чтобы иметь к нему доступ через интернет. 

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

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

  1. GitHub Pages. Можно создать репозиторий на GitHub и загрузить файл redirect.html в репозиторий. После этого активировать GitHub Pages для этого репозитория, и файл будет доступен через URL типа https://yourusername.github.io.
  2. Netlify. Другой бесплатный сервис, который позволяет разместить статические файлы. Можно загрузить свой файл redirect.html и получить URL для доступа к нему через интернет.
  3. 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, акционных и геймифицированных писем. Использование динамического кода для редиректа на различные ссылки дало нам возможность опробовать уникальный, созданный нами метод геймификации.

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

Узнайте больше
2
0
2
Обнаружили ошибку? Выделите ее и нажмите Ctrl + Enter.