РАЗРАБОТКА

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

Максим Жуков

Сооснователь ecommerce-агентства KISLOROD

В электронной коммерции клиенты ценят бесшовный пользовательский опыт между сайтом и мобильным приложением. Потому так важно интегрировать интернет-магазин и приложение.

Рассказываем о том, зачем нужна и как происходит интеграция интернет-магазинов на «Битрикс» с сервисом IMSHOP.

Содержание

Что это такое
Зачем IMSHOP бизнесу
Функциональные возможности
Принцип работы
Схема работы интеграции
Пример из практики: интеграция сайта на «Битрикс» с IMSHOP и Mindbox
Основные интеграции
Запуск MVP мобильного приложения
Что должно быть в приложении интернет-магазина
Что нужно сделать до начала интеграции
Когда стоит запускать приложение

Что это такое

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

Это сервис, который дает следующие преимущества:

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

Сервис предлагает готовые компоненты, которые уже ориентированы на лучшие практики e-commerce. Мобильное приложение публикуется под брендом клиента.

У сервиса всего один минус — это не кастомная разработка, а готовое решение. Но он нивелируется существенной разницей в стоимости и сроках.

Если вам нужен быстрый запуск с предсказуемыми затратами, то стоит выбрать готовое решение от IMSHOP — это даст возможность запустить MVP приложения и проверить гипотезы.

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

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

Сравнение бюджетов и сроков для запуска MVP.

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

Зачем нужно мобильное приложение?

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

Схема работы приложения «Ассистент продавца»

Что получает интернет-магазин?

рост конверсии;
повышение лояльности клиентов;
увеличение LTV и ARPU;
дополнительный канал коммуникации;
отстройку от конкурентов и ограничение их влияния на пути к покупке.

Рост продаж в рознице

Таким образом бизнес получает дополнительный канал продаж и доступ к персональной коммуникации с клиентами.

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

Возможности приложения

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

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

Сам IMSHOP состоит:

из мобильных приложений для iOS и Android;
backend-облака, которое эти приложения обслуживает.

К IMSHOP подключается инфраструктура клиента:

интернет-магазин, в частности, проекты на «1С-Битрикс»;
внешние системы, такие как эквайринг, логистика, программы лояльности и другие.

В итоге получается трехстороннее взаимодействие:

Мобильное приложение клиента взаимодействует с IMSHOP.
IMSHOP взаимодействует с интернет-магазином.
Сайт при определенных событиях отправляет запросы в сервис.

Мобильное приложение, сервер IMSHOP.IO и ваша IT-инфраструктура

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

Товарные позиции импортируются с помощью фида от «Яндекс» — YML. Формат фидов от IMSHOP несколько расширяет YML, например, в карточки товара приложения можно добавлять видеообзоры, чтобы увеличить конверсию.

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

История заказов

Можно использовать встроенный шаблонный дизайн и немного его адаптировать. А можно персонализировать под фирменный стиль бренда.

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

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

В процессе интеграции участвует три стороны:

Клиент — определяет функциональные и бизнес-требования.
Интегратор — отвечает за подключение сайта и внешних систем электронной коммерции.
Команда IMSHOP — обеспечивает корректное подключение со стороны сервиса.

Этапы интеграции:

1. Интеграция каталога.

Из системы извлекается XML-файл, который содержит информацию о товарах и услугах.

Пример фида

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

2. Подключение интеграции к сайту.

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

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

Обмен данными возможен несколькими способами:

посредством HTTP-запросов;
при помощи вебхуков — системы отправляют запрос в IMSHOP;
через API — магазин отправляет запросы в IMSHOP.

API и Webhook

Для подключения необходимо связаться с менеджером сервиса:

запросить ключ API;
передать список URL, по которым будут доступны вебхуки на вашей стороне.

Все URL-адреса обязательно должны поддерживать HTTPS-протокол и иметь корректный SSL-сертификат.

При каждом запросе требуется передача ключа API как при работе через API, так и при работе через вебхуки.

Ключ можно передавать либо в поле key в headers JSON-запроса, либо в HTTP-заголовке в виде Bearer-токена. Например:

При этом стоит учесть, что система работает только через POST-запросы.

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

Мы начали работу с крупным интернет-магазином женской одежды — charuel.ru. Необходимо было провести углубленный технический аудит и наладить интеграцию Bitrix, IMSHOP и Mindbox.

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

Доработали такие функции, как:

учет и предоставление скидок;
запуск промоакций и управление ценами.

В результате на сайте заработала полноценная платформа для автоматизации маркетинга.

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

Для обмена данными систем с IMSHOP мы разработали и внедрили все необходимые обработчики на вебхуках.

Схема работы интеграционного слоя:

IMSHOP связывается с сайтом и запрашивает данные;
Bitrix связывается с Mindbox;
Mindbox отправляет цены со скидками на сайт;
сайт передает их в IMSHOP.

В итоге клиент видит окончательные цены со скидкой в мобильном приложении.

Корректность работы связки протестировали в мобильных приложениях от IMSHOP — отдельно для покупателей и продавцов.

Подробнее читайте в кейсе→

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

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

IMSHOP передает:

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

В ответ IMSHOP ждет информацию об удачно зарегистрированном заказе.

Доставки

IMSHOP передает:

состав корзины;
город и страну;
промокод и идентификатор пользователя, если они есть.

В ответ IMSHOP ожидает список доступных способов доставки.

Выбор способа доставки: слева — пошаговое оформление заказа, справа — на одной странице

Оплаты

Выбор способа оплаты: слева — пошаговое оформление заказа, справа — на одной странице

IMSHOP передает:

промокод;
способ доставки;
количество бонусов;
список товаров в корзине;
имя города и пункт получения заказа.

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

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

1. Витрина и поиск

Поисковые подсказки.
Поисковая выдача.
Создание и обновление баннера.
Формы.
Удаление баннера.
Динамические формы.
Подтверждение отправки форм по СМС.
Товары в прямом эфире.
Определение адреса на карте.
Регистрация маркировки.

Витрина товаров

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

Проверка наличия товара.
Отзывы на товары.
Лайки и дизлайки отзывов.
Рекомендации товаров.
Дополнительные товары.
Персональные предложения.
Виджет описания рассрочки.
Трейд-маркетинг.

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

3. Корзина и оформление заказа

Эквайринг через webhook.
Расчет корзины, скидок и баллов.
Информация о ПВЗ.
Дополнительные услуги для хука расчета корзины.

Товары добавлены в корзину

4. Избранное

Синхронизация избранного с сайтом.

Избранное в приложении

5. Профиль клиента

Учетная запись пользователя.
Авторизация.
История заказов.
Оценка качества обслуживания.
Отправка уведомлений пользователям.
История уведомлений.
История бонусов.
Персональные предложения.
Уровни цен для разных пользователей.
Подтверждение по e-mail.
Динамические коды лояльности.

Профиль клиента в приложении

6. Синхронизация статусов заказов

Статус заказа изменяется со стороны сайта или других систем клиента и мобильного приложения.

7. Рейтинг качества обслуживания

Оценка пользователями качества сервиса в магазине.

8. Реферальная программа

Приглашение в программу лояльности.

Ссылка для приглашения друзей

9. Коллекции

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

Коллекции в личном кабинете

10. Динамические формы

Формы на сабтудеях с возможностью подгрузки дополнительных элементов форм на основе введенных пользователем данных.

Динамическая форма

11. Экспорт форм

Для экспорта форм необходимо предоставить:

API-ключ;
URL для подключения, по которому можно отправлять данные формы в систему клиента.

Пример запроса.

Запрос на экспорт форм

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

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

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

Это минимальные сроки, без учета необходимости сложных интеграций и кастомизированных доработок. Если у бизнеса такие требования есть, то сроки разработки вырастут.

Карточка товара и чекаут в приложении

Если гипотеза подтверждается, например, интернет-магазин получит 15–20% роста к заказам, то уже есть смысл проводить дополнительные доработки.

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

Стандартный набор функций:

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

Личный кабинет пользователя

Какие еще функции будут полезны:

чат для помощи;
история просмотров и заказов;
оплата частями или в рассрочку;
простая регистрация в приложении;
статус доставки в режиме реального времени;
каталог с фильтрами для удобного поиска товаров;
персонализированные рекомендации товаров и push-уведомления;
оплата товаров разными способами, например, с помощью банковской карты, электронного кошелька, и Apple/Google Pay.

Оплата заказа частями

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

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

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

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

Витрина магазина — это место, где можно показывать новинки, сообщать об акциях и скидках. Это основная точка касания с вашим брендом.

Витрина приложения

Главная задача — сформировать у пользователя привычку возвращаться, чтобы проверить, есть ли что-то новенькое, а для этого нужно использовать набор инструментов.

Сториз с галереей товаров — в сторис можно прикреплять товары, которые подходят по тематике, товары из образов и подборок. IMSHOP поддерживает видео и GIF-формат изображений.

Сторис в приложении

Онбординг — помогает пользователям после регистрации заполнить основные характеристики, чтобы получать релевантные рекомендации.

Пример онбординга по полу и возрасту

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

Разделение витрины по вкладкам

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

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

Баннеры на главной

Виджет статуса заказа — позволяет пользователю отслеживать статус заказа сразу на главной вкладке.

Виджет статуса заказа

2. Каталог

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

Карусель в листинге

Быстрые фильтры в категориях — чтобы в категории пользователь мог сразу ограничить область поиска и сразу найти нужный товар.

Рейтинг товаров и отзывы с фотографиями — позволяет подкрепить положительное впечатление от товара и усилить доверие.

Оценка товара покупателем

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

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

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

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

Поиск по брендам — возможность выбирать среди товаров конкретного бренда.

Выбор среди брендов

Подсказки в поиске — показывают покупателю к какой категории относится товар и облегчают поиск товаров для пользователя.

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

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

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

Персональные цены в карточке товара

Виджет рассрочки — здесь пользователь видит информацию о вариантах рассрочки на товар.

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

Оптимальные способы доставки на карточке товара — в виджете доставки пользователи видят сначала самые быстрые по доставке и выгодные по цене товары, а при развороте виджета могут увидеть все варианты доставки.

Товарные рекомендации — похожие и релевантные товары, альтернативы по цветам, товары из комплектов, рекомендации для апселл, даунселл и кросселл-продаж.

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

«Вы ранее смотрели» — раздел с товарами, которые пользователь смотрел раньше, но не добавил в избранное или корзину.

Набор товаров, которые покупатель уже просматривал

Оплата СБП — при выборе онлайн-оплаты предлагается вариант оплаты с помощью системы быстрых платежей.

Выбор подарка в корзине — здесь можно выбрать подарок от бренда к покупке.

Подарок пользователю

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

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

Выбор интервала доставки

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

Оформление заказа и выбор магазина

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

Виджет карты лояльности — авторизованный пользователь видит информацию по своей карте лояльности на витрине товаров.

Специальные условия по карте лояльности

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

Специальные цены на товары для определенной группы клиентов — инструмент для закрытых распродаж для отдельного сегмента ЦА.

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

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

Уведомление по геолокации

Push-уведомление об обновлении статуса заказа — дает возможность отслеживать статус заказа в приложении.

Напоминание о забытом заказе

Push-уведомление о снижении цены в избранном — если пользователь добавил товар в вишлист, то при снижении цены ему приходит уведомление.

Уведомление о снижении цены

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

Фильтр по наличию в магазине — чтобы пользователи знали, какие товары есть в конкретном магазине.

Наличие товара в магазинах

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

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

Нативный чат — чат с историей переписки, уведомлениями и файлами.

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

Повтор заказа

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

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

Вот список вопросов заказчику, с помощью которого можно определить объем и сложность работ.

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

Это примерный набор вопросов, которые интегратор задаст заказчику.

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

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

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

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

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

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

***

KISLOROD специализируется на росте и развитии e-com проектов, и если у вас есть амбициозные и сложные цели — мы всегда готовы помочь: предоставить нашу техническую экспертизу и продуктовую команду роста.

Расскажите нам о своих задачах.

Получайте полезный контент от KISLOROD в любой из мессенджеров

При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности

Спасибо, что дочитали до конца.

Если информация была полезна, поделитесь статьёй. Вам не сложно, нам приятно ;)

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

Что это такое

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

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

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

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

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

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

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

Доставки

Оплаты

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

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

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

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

2. Каталог

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

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

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

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

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

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

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

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

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

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