РАЗРАБОТКА

Интеграция облачного решения мобильного приложения IMSHOP с Битрикс

Максим Жуков
Сооснователь ecommerce-агентства KISLOROD
Максим Жуков
В электронной коммерции клиенты ценят бесшовный пользовательский опыт между сайтом и мобильным приложением. Потому так важно интегрировать интернет-магазин и приложение.
Рассказываем о том, зачем нужна и как происходит интеграция интернет-магазинов на «Битрикс» с сервисом IMSHOP.

Что это такое

IMSHOP — это облачное решение для быстрого запуска мобильного приложения и его интеграции с интернет-магазином и внешними системами.
Что это такое IMSHOP
Это сервис, который дает следующие преимущества:
  • легкая масштабируемость в зависимости от количества пользователей;
  • готовые ресурсы: базы данных, средства хранения и другие сервисы, которые можно мгновенно развернуть;
  • удаленная инфраструктура, которую не нужно разворачивать вручную, что снижает время разработки;
  • системный механизм управления обновлениями, благодаря чему не нужно обновлять приложения на каждом устройстве пользователя.
Сервис предлагает готовые компоненты, которые уже ориентированы на лучшие практики e-commerce. Мобильное приложение публикуется под брендом клиента.
У сервиса всего один минус — это не кастомная разработка, а готовое решение. Но он нивелируется существенной разницей в стоимости и сроках.
Если вам нужен быстрый запуск с предсказуемыми затратами, то стоит выбрать готовое решение от IMSHOP — это даст возможность запустить MVP приложения и проверить гипотезы.

Сроки — от 2 недель, а стоимость от 350 тысяч рублей.


Для сравнения — кастомная разработка займет от 5 месяцев и будет стоить от 2 млн рублей.
Сравнение бюджетов и сроков для запуска MVP.

Зачем IMSHOP бизнесу

Зачем нужно мобильное приложение?
  • Расширить аудиторию — привлечь мобильный трафик и тех, кто чаще пользуется телефоном.
  • Удержать аудиторию — если у пользователя установлено ваше приложение, то оно всегда под рукой.
  • Повысить уровень вовлеченности — с помощью уведомлений и различных маркетинговых механик.
  • Улучшить пользовательский и клиентский опыт — клиент, который получил приятный опыт покупки становится более лояльным к бренду.
  • Персонализировать общение с клиентом — предложить продуманные системы лояльности, которые учитывают желания и потребности клиента.
Зачем IMSHOP бизнесу
Схема работы приложения «Ассистент продавца»
Что получает интернет-магазин?
  • рост конверсии;
  • повышение лояльности клиентов;
  • увеличение LTV и ARPU;
  • дополнительный канал коммуникации;
  • отстройку от конкурентов и ограничение их влияния на пути к покупке.
Рост продаж в рознице imshop
Рост продаж в рознице
Таким образом бизнес получает дополнительный канал продаж и доступ к персональной коммуникации с клиентами.

Функциональные возможности

Возможности приложения IMSHOP
Возможности приложения
  1. Торговля и склад: заказы, управление ценами и скидками, учет финансов, сканирование штрих-кодов, поиск и фильтры товаров, управление доставкой, взаимоотношения с поставщиками, резервирование и перемещение товаров, шаблоны форм и поддержка свойств товара.
  2. Система управления контентом: визуальный редактор, шаблоны и управление плагинами, платежные системы и интернет-магазин, мультиязычность и управление рекламой.
  3. Программы лояльности: электронная дисконтная карта, шаблоны дисконтных программ, многоуровневые программы, интеграция с сайтом, СМС и емейл-рассылки, группировка клиентов.
  4. Push-уведомления: индивидуальные, глобальные и триггерные рассылки, многопоточная отправка, статистика и поддержка, шаблоны автоматизации и цепочки уведомлений.
  5. Эквайринг и онлайн-кассы: в сервис уже интегрированы «Сбербанк» и ЮMoney, кроме того с помощью API можно подключить другие платежные сервисы.
  6. Поддержка iOS и Android, протокола HTTPS.

Принцип работы

Сам IMSHOP состоит:
  • из мобильных приложений для iOS и Android;
  • backend-облака, которое эти приложения обслуживает.
К IMSHOP подключается инфраструктура клиента:
  • интернет-магазин, в частности, проекты на «1С-Битрикс»;
  • внешние системы, такие как эквайринг, логистика, программы лояльности и другие.
В итоге получается трехстороннее взаимодействие:
  • Мобильное приложение клиента взаимодействует с IMSHOP.
  • IMSHOP взаимодействует с интернет-магазином.
  • Сайт при определенных событиях отправляет запросы в сервис.
Мобильное приложение, сервер IMSHOP.IO и ваша IT-инфраструктура
Мобильное приложение, сервер IMSHOP.IO и ваша IT-инфраструктура
Таким образом сайт, мобильное приложение и внешние системы электронной коммерции могут работать в единой связке, чтобы обеспечить высокий уровень сервиса и бесшовную омниканальную коммуникацию с клиентом.
Товарные позиции импортируются с помощью фида от «Яндекс» — YML. Формат фидов от IMSHOP несколько расширяет YML, например, в карточки товара приложения можно добавлять видеообзоры, чтобы увеличить конверсию.
Наполнение приложения берется из интернет-магазина. Чтобы пользовательский опыт на сайте и в приложении не отличался, интегрируются и синхронизируются: каталог, способы оплаты и получения товаров, личный кабинет с бонусами, скидками и историей заказов.
История заказов IMSHOP
История заказов IMSHOP
История заказов
Можно использовать встроенный шаблонный дизайн и немного его адаптировать. А можно персонализировать под фирменный стиль бренда.
Также сервис позволяет создавать rich-контент в карточке товара, таким образом получается почти полноценный лендинг в мобильном приложении.

Схема работы интеграции IMSHOP

В процессе интеграции участвует три стороны:
  1. Клиент — определяет функциональные и бизнес-требования.
  2. Интегратор — отвечает за подключение сайта и внешних систем электронной коммерции.
  3. Команда IMSHOP — обеспечивает корректное подключение со стороны сервиса.
Этапы интеграции:
1. Интеграция каталога.
Из системы извлекается XML-файл, который содержит информацию о товарах и услугах.
Пример фида IMSHOP
Пример фида
Дополнительно можно подключить фиды наличия товаров и фиды для ElasticSearch — для передачи наличия товаров в интернет-магазине, цен по регионам, персональных цен и кэшбэка.
2. Подключение интеграции к сайту.
С сайтом интегрируется система заказов, способы доставки, эквайринг и другие важные функции.
После чего остается опубликовать приложение, а затем постепенно развивать его.
Обмен данными возможен несколькими способами:
  • посредством HTTP-запросов;
  • при помощи вебхуков — системы отправляют запрос в IMSHOP;
  • через API — магазин отправляет запросы в IMSHOP.
 API и Webhook IMSHOP
API и Webhook
Для подключения необходимо связаться с менеджером сервиса:
  • запросить ключ API;
  • передать список URL, по которым будут доступны вебхуки на вашей стороне.
Все URL-адреса обязательно должны поддерживать HTTPS-протокол и иметь корректный SSL-сертификат.
При каждом запросе требуется передача ключа API как при работе через API, так и при работе через вебхуки.
Ключ можно передавать либо в поле key в headers JSON-запроса, либо в HTTP-заголовке в виде Bearer-токена. Например:
Авторизация IMSHOP
При этом стоит учесть, что система работает только через POST-запросы.

Пример из практики: интеграция сайта на «Битрикс» с IMSHOP и Mindbox

Мы начали работу с крупным интернет-магазином женской одежды — charuel.ru. Необходимо было провести углубленный технический аудит и наладить интеграцию Bitrix, IMSHOP и Mindbox.
Технически интеграция с Mindbox уже была, но большинство возможностей не работали, поэтому нам пришлось провести ряд доработок, чтобы запустить все функции.
Доработали такие функции, как:
  • учет и предоставление скидок;
  • запуск промоакций и управление ценами.
В результате на сайте заработала полноценная платформа для автоматизации маркетинга.
Также было нужно настроить работу платформы в связке с IMSHOP, чтобы пользователи мобильного приложения интернет-магазина могли видеть актуальные цены с персональными скидками.
Для обмена данными систем с IMSHOP мы разработали и внедрили все необходимые обработчики на вебхуках.
Схема работы интеграционного слоя:
  • IMSHOP связывается с сайтом и запрашивает данные;
  • Bitrix связывается с Mindbox;
  • Mindbox отправляет цены со скидками на сайт;
  • сайт передает их в IMSHOP.
В итоге клиент видит окончательные цены со скидкой в мобильном приложении.
Корректность работы связки протестировали в мобильных приложениях от IMSHOP — отдельно для покупателей и продавцов.
Кейс Чаруэль

Основные интеграции

Оформление заказа

IMSHOP передает:
  • состав корзины, полный адрес;
  • идентификаторы способов оплаты и доставки;
  • а также идентификатор пользователя и промокод, если он есть.
В ответ IMSHOP ждет информацию об удачно зарегистрированном заказе.
Оформление заказа IMSHOP

Доставки

IMSHOP передает:
  • состав корзины;
  • город и страну;
  • промокод и идентификатор пользователя, если они есть.
В ответ IMSHOP ожидает список доступных способов доставки.
Выбор способа доставки: слева — пошаговое оформление заказа, справа — на одной странице - IMSHOP
Выбор способа доставки: слева — пошаговое оформление заказа, справа — на одной странице

Оплаты

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

Дополнительные интеграции

1. Витрина и поиск
  • Поисковые подсказки.
  • Поисковая выдача.
  • Создание и обновление баннера.
  • Формы.
  • Удаление баннера.
  • Динамические формы.
  • Подтверждение отправки форм по СМС.
  • Товары в прямом эфире.
  • Определение адреса на карте.
  • Регистрация маркировки.
Витрина товаров IMSHOP
Витрина товаров
2. Карточка товара
  • Проверка наличия товара.
  • Отзывы на товары.
  • Лайки и дизлайки отзывов.
  • Рекомендации товаров.
  • Дополнительные товары.
  • Персональные предложения.
  • Виджет описания рассрочки.
  • Трейд-маркетинг.
Карточка товара IMSHOP
Карточка товара
3. Корзина и оформление заказа
  • Эквайринг через webhook.
  • Расчет корзины, скидок и баллов.
  • Информация о ПВЗ.
  • Дополнительные услуги для хука расчета корзины.
Товары добавлены в корзину IMSHOP
Товары добавлены в корзину
4. Избранное
  • Синхронизация избранного с сайтом.
Избранное IMSHOP
Избранное в приложении IMSHOP
Избранное в приложении
5. Профиль клиента
  • Учетная запись пользователя.
  • Авторизация.
  • История заказов.
  • Оценка качества обслуживания.
  • Отправка уведомлений пользователям.
  • История уведомлений.
  • История бонусов.
  • Персональные предложения.
  • Уровни цен для разных пользователей.
  • Подтверждение по e-mail.
  • Динамические коды лояльности.
Профиль клиента в приложении IMSHOP
Профиль клиента в приложении
6. Синхронизация статусов заказов
  • Статус заказа изменяется со стороны сайта или других систем клиента и мобильного приложения.
7. Рейтинг качества обслуживания
  • Оценка пользователями качества сервиса в магазине.
8. Реферальная программа
  • Приглашение в программу лояльности.
Ссылка для приглашения друзей IMSHOP
Ссылка для приглашения друзей
9. Коллекции
  • Привязанные к профилю пользователя товары и услуги, которые можно объединять в коллекции.
Коллекции в личном кабинете IMSHOP
Коллекции в личном кабинете
10. Динамические формы
  • Формы на сабтудеях с возможностью подгрузки дополнительных элементов форм на основе введенных пользователем данных.
Динамическая форма IMSHOP
Динамическая форма
11. Экспорт форм
Для экспорта форм необходимо предоставить:
  • API-ключ;
  • URL для подключения, по которому можно отправлять данные формы в систему клиента.
Пример запроса.
Запрос на экспорт форм IMSHOP
Запрос на экспорт форм

Запуск MVP мобильного приложения

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

В среднем быстрый старт занимает от 1 до 2 месяцев. Следующие 1–2 месяца уходят на то, чтобы запустить продажи.

Это минимальные сроки, без учета необходимости сложных интеграций и кастомизированных доработок. Если у бизнеса такие требования есть, то сроки разработки вырастут.
Карточка товара и чекаут в приложении IMSHOP
Карточка товара и чекаут в приложении
Если гипотеза подтверждается, например, интернет-магазин получит 15–20% роста к заказам, то уже есть смысл проводить дополнительные доработки.
Перед запуском MVP важно четко определить необходимые функции и определить приоритетность их запуска. На данном этапе — это дать возможность пользователям совершать заказы с телефона, а не вместить как можно больше функций в приложение.
Стандартный набор функций:
  • прием заказов;
  • карточка товара;
  • каталог товаров;
  • поиск по товарам;
  • корзина и избранное;
  • фильтрация и сортировка товаров;
  • интеграция служб доставки и эквайринга;
  • личный кабинет с историей заказов и данными пользователя.
Личный кабинет пользователя IMSHOP
Личный кабинет пользователя
Какие еще функции будут полезны:
  • чат для помощи;
  • история просмотров и заказов;
  • оплата частями или в рассрочку;
  • простая регистрация в приложении;
  • статус доставки в режиме реального времени;
  • каталог с фильтрами для удобного поиска товаров;
  • персонализированные рекомендации товаров и push-уведомления;
  • оплата товаров разными способами, например, с помощью банковской карты, электронного кошелька, и Apple/Google Pay.
Оплата заказа частями IMSHOP
Оплата заказа частями
В будущем можно запускать и более продвинутые функции, например, программу лояльности и интегрировать с внешними системами по работе с клиентами.

Что должно быть в приложении интернет-магазина

ТЗ на разработку мобильного приложения будет отличаться от проекта к проекту, но для интернет-магазинов есть список обязательных разделов, которые позволят отобразить весь необходимый функционал.

1. Главная страница

Витрина магазина — это место, где можно показывать новинки, сообщать об акциях и скидках. Это основная точка касания с вашим брендом.
Витрина приложения IMSHOP
Витрина приложения
Главная задача — сформировать у пользователя привычку возвращаться, чтобы проверить, есть ли что-то новенькое, а для этого нужно использовать набор инструментов.
Сториз с галереей товаров — в сторис можно прикреплять товары, которые подходят по тематике, товары из образов и подборок. IMSHOP поддерживает видео и GIF-формат изображений.
Сторис в приложении IMSHOP
Сторис в приложении
Онбординг — помогает пользователям после регистрации заполнить основные характеристики, чтобы получать релевантные рекомендации.
Пример онбординга по полу и возрасту IMSHOP
Пример онбординга по полу и возрасту
Персонализация витрины — дает возможность разделить главную вкладку на сегменты, чтобы каждая категория пользователей видела баннеры, которые актуальны именно для нее.
Разделение витрины по вкладкам IMSHOP
Разделение витрины по вкладкам
Персонализация по геолокации — так пользователи из разных регионов будут видеть товарные предложения и акции, которые актуальны для их региона, например, товары, которые есть в местных магазинах.
Разделение баннеров на главной по вкладкам — используется для разделения потока пользователей, например, предложения для мужской, женской и детской коллекций.
Баннеры на главной IMSHOP
Баннеры на главной
Виджет статуса заказа — позволяет пользователю отслеживать статус заказа сразу на главной вкладке.
Виджет статуса заказа IMSHOP
Виджет статуса заказа

2. Каталог

Карусель в листинге — чтобы пользователь мог листать превью товаров в списке и быстро найти, то что нужно.
Карусель в листинге IMSHOP
Карусель в листинге
Быстрые фильтры в категориях — чтобы в категории пользователь мог сразу ограничить область поиска и сразу найти нужный товар.
Рейтинг товаров и отзывы с фотографиями — позволяет подкрепить положительное впечатление от товара и усилить доверие.
Оценка товара покупателем IMSHOP
Оценка товара покупателем
Выбор покупателя — раздел с товарами, которые получили лучшие отзывы от других покупателей, пользователи больше доверяют откликам других покупателей.

3. Поиск по каталогу

Поиск по Datamatrix — если покупателю понравился товар в офлайн-точке, то через сканер кода он может найти его и в приложении.
Поиск по ключевым словам — позволит найти покупателю товары по ключевым словам, даже если введены транслитом или с ошибками.
Поиск по брендам — возможность выбирать среди товаров конкретного бренда.
Выбор среди брендов IMSHOP
Выбор среди брендов
Подсказки в поиске — показывают покупателю к какой категории относится товар и облегчают поиск товаров для пользователя.
Поиск по каталогу IMSHOP
Поиск по каталогу

4. Карточка товара

Цена по дисконтной карте — на превью товара в каталоге пользователи сразу видят цену по дисконтной карте, также при наличии карты лояльности может отображаться персональная цена.
Персональные цены в карточке товара IMSHOP
Персональные цены в карточке товара
Виджет рассрочки — здесь пользователь видит информацию о вариантах рассрочки на товар.
Найти товар в ближайшем магазине — пользователь заходит в карточку товара и сразу видит, есть ли нужный товар в ближайшем к нему магазине.
Оптимальные способы доставки на карточке товара — в виджете доставки пользователи видят сначала самые быстрые по доставке и выгодные по цене товары, а при развороте виджета могут увидеть все варианты доставки.
Товарные рекомендации — похожие и релевантные товары, альтернативы по цветам, товары из комплектов, рекомендации для апселл, даунселл и кросселл-продаж.

5. Корзина и чекаут

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

6. Программа лояльности

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

7. Push-уведомления

Push-уведомления по геолокации — чтобы пригласить покупателя в магазин, если он находится рядом.
Уведомление по геолокации IMSHOP
Уведомление по геолокации
Push-уведомление об обновлении статуса заказа — дает возможность отслеживать статус заказа в приложении.
Напоминание о забытом заказе IMSHOP
Напоминание о забытом заказе
Push-уведомление о снижении цены в избранном — если пользователь добавил товар в вишлист, то при снижении цены ему приходит уведомление.
Уведомление о снижении цены IMSHOP
Уведомление о снижении цены

8. Омниканальность

Фильтр по наличию в магазине — чтобы пользователи знали, какие товары есть в конкретном магазине.
Наличие товара в магазинах IMSHOP
Наличие товара в магазинах
Трейд-ин — чтобы дать возможность покупателям сдать старые вещи в офлайн-точках и получать за это бонусы или скидки.

9. Пользовательский опыт

Нативный чат — чат с историей переписки, уведомлениями и файлами.
Виджет «Повторить заказ» — для регулярных покупок и расходных материалов, чтобы пользователь мог добавить товары прямо из витрины приложения.
Повтор заказа IMSHOP
Повтор заказа

Что нужно сделать до начала интеграции

Техническое задание на интеграцию IMSHOP будет зависеть от задач и текущего состояния интернет-магазина: какие функции уже работают, какие внешние системы подключены, что необходимо добавить.
Вот список вопросов заказчику, с помощью которого можно определить объем и сложность работ.
  • На какой CMS работает интернет-магазин?
  • Если сайт работает без CMS, то какая база данных и язык программирования используются?
  • Есть ли уже работающие фиды и хуки для IMSHOP?
  • Работает ли на сайте регистрация через SMS?
  • Подключен ли SMS-шлюз к интернет-магазину?
  • Куда должны приходить заказы?
  • Нужна ли фильтрация для заказов из мобильного приложения?
  • Какой платежный шлюз подключен к сайту?
  • Какие способы оплаты уже подключены на вашем сайте, а какие должны быть в мобильном приложении?
  • Какие способы и службы доставки уже подключены, а какие нужны в мобильном приложении?
  • Есть ли условия для бесплатной доставки, например, от суммы покупки?
  • Нужно ли будет выгружать данные о товарах из интернет-магазина на другие площадки? Если уже загружаете, то куда?
  • Нужна ли переработка структуры каталога между источником товаров и приложением?
  • Нужно ли менять описания товаров или можно выгружать в текущем виде из магазина?
  • Если обмен данными происходит между несколькими системами, помимо сайта и приложения, то какие это системы и кто занимается их обслуживанием?
  • Есть ли инструменты и работающие механики для маркетинга: программы лояльности, скидки, акции, спецпредложения?
Это примерный набор вопросов, которые интегратор задаст заказчику.
Ответы на эти вопросы нужны, чтобы обеспечить единый пользовательский опыт в интернет-магазине и мобильном приложении. Проще говоря, чтобы в обоих проектах были одинаковые возможности для покупателя и он мог легко перемещаться из одного в другой.

Когда стоит запускать приложение

Задумываться о запуске своего мобильного приложения стоит, когда у вас есть ощутимый поток мобильного трафика, который можно перенаправить в приложение.

Однозначно стоит заводить мобильное приложение, если у вас больше 60% мобильного трафика и более 50 тысяч пользователей на сайте в месяц.

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

***

KISLOROD специализируется на росте и развитии e-com проектов, и если у вас есть амбициозные и сложные цели — мы всегда готовы помочь: предоставить нашу техническую экспертизу и продуктовую команду роста.
Расскажите нам о своих задачах.
Получайте полезный контент от KISLOROD в любой из мессенджеров
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Спасибо, что дочитали до конца.
Если информация была полезна, поделитесь статьёй. Вам не сложно, нам приятно ;)

Рекомендованные статьи

Скачайте 17 точек роста и 100 + чекеров для роста конверсии и прибыли интернет-магазина
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Мы проанализировали ведущие интернет-магазины, результаты исследований, свой опыт и собрали важные моменты в одно руководство. Делаем e-commerce лучше, поэтому не только пользуемся сами, но и делимся с вами.
Выберите удобный мессенджер и получите чек-лист прямо сейчас: