{"id":11170,"title":"\u041a\u0430\u043a \u0437\u0430\u043c\u043e\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0433\u0440\u043e\u043a\u043e\u0432 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0434\u0435\u043d\u044c\u0433\u0438","url":"\/redirect?component=advertising&id=11170&url=https:\/\/vc.ru\/promo\/341559-korotko-uvelichit-prodazhi-cherez-sobstvennoe-prilozhenie&placeBit=1&hash=7a5df0ef2aad1850664a44a9e406536cb9a26738c002b57db0ec8a963322865f","isPaidAndBannersEnabled":false}
Сервисы
progerdan

Кейс: Разработка сервиса подписных страниц в 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)
Конструктор подписной страницы (2/2)

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

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

Домены

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

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

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

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

Лендинг

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

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

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

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

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

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

Результат

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

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

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

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

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

0
5 комментариев
Популярные
По порядку
Serhii Babkin

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

Ответить
2
Развернуть ветку
Нулевой

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

Ответить
1
Развернуть ветку
progerdan

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

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

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

Ответить
1
Развернуть ветку
Тимофей Бурлаков

Крутяк))

Ответить
1
Развернуть ветку
Евгений Иванов

Распиши! Полезно

Ответить
1
Развернуть ветку
Читать все 5 комментариев
Доходы Yota от роуминга выросли в 1,6 раз

Ковидные ограничения стали испытанием для мобильных операторов, которые недополучили доход от роуминга в 2020 году. В Yota в 2020 году выручка от роуминга сократилась в два раза по сравнению с 2019 годом.

Минцифры заявило, что запрет криптовалюты приведёт к отъезду ИТ-специалистов из страны Статьи редакции

Ведомство выступило против предложений ЦБ и поддержало Минфин.

Скоро выйдут: сериалы про WeWork, Theranos, Uber и Spotify Статьи редакции

Три из них можно будет посмотреть уже весной 2022 года.

Биржевой стакан в мобильном приложении БКС Мир инвестиций
От техподдержки через переводчик до главного канала продаж

Как изменился «AliExpress Россия»: рассказывают «старички» маркетплейса.

Хакеры взломали DeFi-платформу Qubit Finance и украли криптовалюту на $80 млн Статьи редакции

Команда проекта предложила вернуть деньги за награду — но им пока не ответили.

Самые популярные направления доставки в 2021 году

Мы подвели первые итоги 2021 года и рассказываем, куда россияне чаще всего отправляли и откуда получали посылки и письма в ушедшем году.

Как и почему я переехал в Иннополис: плюсы и минусы

В прошлом году я стал операционным директором офиса компании Promwad в Иннополисе и оказался единственным сотрудником, который исходно жил в этом городе. Остальные приезжали из других городов России. Поэтому мне часто приходилось делиться с новичками своим опытом трех лет жизни и работы в Иннополисе. В итоге я решил собрать свои заметки про плюсы…

Что посмотреть про ИТ в TikTok? Рассказываем, как снимаются шутки про работу айтишников

Делимся кейсом: как найти свою аудиторию в TikTok и зачем это нужно крупной ИТ-компании.

Я почистил снег перед зданием Центробанка в костюме жабы

Чтобы доказать серьезность своих намерений, я сделал тест-драйв: почистил от снега часть тротуара перед зданием ЦБ, на Неглинной, 12.

null