В электронной коммерции клиенты ценят бесшовный пользовательский опыт между сайтом и мобильным приложением. Потому так важно интегрировать интернет-магазин и приложение.
Рассказываем о том, зачем нужна и как происходит интеграция интернет-магазинов на «Битрикс» с сервисом IMSHOP.
IMSHOP — это облачное решение для быстрого запуска мобильного приложения и его интеграции с интернет-магазином и внешними системами.
Это сервис, который дает следующие преимущества:
легкая масштабируемость в зависимости от количества пользователей;
готовые ресурсы: базы данных, средства хранения и другие сервисы, которые можно мгновенно развернуть;
удаленная инфраструктура, которую не нужно разворачивать вручную, что снижает время разработки;
системный механизм управления обновлениями, благодаря чему не нужно обновлять приложения на каждом устройстве пользователя.
Сервис предлагает готовые компоненты, которые уже ориентированы на лучшие практики e-commerce. Мобильное приложение публикуется под брендом клиента.
У сервиса всего один минус — это не кастомная разработка, а готовое решение. Но он нивелируется существенной разницей в стоимости и сроках.
Если вам нужен быстрый запуск с предсказуемыми затратами, то стоит выбрать готовое решение от IMSHOP — это даст возможность запустить MVP приложения и проверить гипотезы.
Сроки — от 2 недель, а стоимость от 350 тысяч рублей.
Для сравнения — кастомная разработка займет от 5 месяцев и будет стоить от 2 млн рублей.
Сравнение бюджетов и сроков для запуска MVP.
Способ разработки;Сроки;Стоимость
Готовое решение IMSHOP;от 2–3 недель;от 350 тыс. рублей
Агентство;4–5 месяцев;2–3 млн рублей
Зачем 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 ожидает список доступных способов оплаты, процент скидки на выбранную доставку, тип оплаты: наличными, курьеру, картой в приложении или другими способами.
Дополнительные интеграции
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 в любой из мессенджеров
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Спасибо, что дочитали до конца.
Если информация была полезна, поделитесь статьёй. Вам не сложно, нам приятно ;)
Скачайте 17 точек роста и 100 + чекеров для роста конверсии и прибыли интернет-магазина
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Мы проанализировали ведущие интернет-магазины, результаты исследований, свой опыт и собрали важные моменты в одно руководство. Делаем e-commerce лучше, поэтому не только пользуемся сами, но и делимся с вами.
Выберите удобный мессенджер и получите чек-лист прямо сейчас: