Кейс: Разработка сервиса подписных страниц в Instagram

Приветствую! Это моя первая и основополагающая статья о веб-сервисах, которые мне посчастливилось разработать в рамках своей студии веб-разработки 😀

Кейс: Разработка сервиса подписных страниц в Instagram

Если Вы маркетолог или в последние полгода работали с таргетом в инстаграме, то наверняка знаете об очередном методе продвижения экспертных блогов через просьбу подписчика подписаться на Вас, взамен на получение какого-либо бесплатного материала (лидмагнит)

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

Задача

Создать полностью функциональный аналог существующих на рынке сервисов по привлечению подписчиков с помощью подписных страниц (пример сервиса, пример сервиса) и лендинг с обзором возможностей

  • Web-приложение с адаптивной версткой
  1. Конструктор страниц, управление, дашборд
  2. Функционал проверки подписки на Instagram
  3. Шаблон и цветовые схемы для конструктора
  4. Возможность привязать домен к сервису, управление
  5. SSL-сертификаты для клиентских доменов
  6. Подтверждение сайта в фейсбуке meta tag'ом
  7. Панель администратора
  • Лендинг

Проработка идеи

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

Статистика по запросу аналогичного сервиса из Яндекса
Статистика по запросу аналогичного сервиса из Яндекса

Клиент хотел создать свой аналог в максимально сжатые сроки

Технологии

В проекте использовался TALL-стек (TailwindCSS, AlpineJS, Laravel, Livewire), работает по канонам SPA

Так же на странице промо-акции лендинга и странице успешной подписки на Instagram используется Confetti

SPA (Single Page Application) — это одностраничное веб-приложение, использующее единственный HTML-документ как оболочку для всех остальных и организующий взаимодействие с пользователем через динамически подгружаемые HTML, CSS, JavaScript объекты посредством AJAX запросов

Конструктор

Конструктор представляет из себя единый шаблон со статичными блоками, возможностями загрузки своей обложки и выбора цветовой схемы

Конструктор подписной страницы (1/2)
Конструктор подписной страницы (1/2)
Конструктор подписной страницы (2/2)
Конструктор подписной страницы (2/2)

В дальнейшем, можем вернуться к управлению созданными страницами с помощью дашборда содержащим базовую статистику, кнопки: быстрого перехода, редактирования, дублирования и перехода к подробной статистике в виде графиков

Дашборд подписных страниц
Дашборд подписных страниц

Домены

Максимально упростили страницу добавления своего домена: FAQ по добавлению и поле для ввода имени домена

Вся магия происходит под капотом, а именно: проверка DNS, создание нового NGINX-конфига для виртуальной директории, применение изменений и наконец уведомление пользователя о готовности

Панель администратора

Поскольку целью заказчика был скорейший выход на рынок, администрирование сервиса было ограничено простеньким CRUD'om по моделям и возможностью входа под пользователя в случае необходимости

Кейс: Разработка сервиса подписных страниц в Instagram

Лендинг

Ну и в дополнение к сервису, легким движением руки собираем лендинг с шапкой и небольшим обзором функционала

Лендинг (1/2)
Лендинг (1/2)
Лендинг (2/2)
Лендинг (2/2)

Скорость загрузки

С минимальной оптимизацией загрузки иконок получаем следующие результаты 😀

Отчет производительности сайта loading.express
Отчет производительности сайта loading.express
Отчет производительности сайта Google PageSpeed
Отчет производительности сайта Google PageSpeed

Результат

Проект разработан под ключ за 23 дня 🎊

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

Если вам интересно подробнее почитать о технической составляющей, дайте знать, и я с радостью напишу об этом в следующей статье

Демо сконструированной страницы

Связаться со мной

1111
5 комментариев

Благодарю за статью!
Интересно будет ознакомиться поближе с деталями.

2

Какие преимущества перед телепортом?

1

Фактически, никаких существенных отличий нету, кроме косметических и небольших технических

Задача проекта была разработать аналог и вывести его на рынок со сниженной ставкой проверки за счёт использования собственных ресурсов 😀

Фейсбук в недавних обновлениях добавил в Директ возможность добавить кнопки для быстрых ответов (по аналогии с телеграм ботами), что в свою очередь почти полностью истребило спрос на подобные сервисы

1