Обзор интеграции ShopStory
ShopStory подключается через Web SDK, Public API или Mobile SDK. Перед разработкой команда ShopStory выдаёт applicationId, согласует источник товарных данных и подтверждает компоненты проекта. Для Web SDK и browser-side Public API команда также регистрирует домены и origins.
Точные версии mobile-пакетов, клиентские схемы корзины и остатков и релизные параметры доступны участникам конкретного проекта. Договорные условия фиксируются отдельно.
1. Выберите метод
| Задача | Метод |
|---|---|
| Встроить готовые каталог, плеер и виджеты на сайт | Web SDK |
| Построить собственный интерфейс списка эфиров и записей | Public API |
| Встроить live, записи и product video в нативное приложение | Mobile SDK |
| Использовать разные методы на разных поверхностях | Согласованная комбинация SDK и API |
| Подключить прямую корзину через callback сайта | Добавление в корзину |
| Показать наличие по выбранному магазину | Штатный обработчик наличия |
| Подготовить товарный API, выбор SKU и персональные условия | Расширенный commerce-контракт |
Подробное сравнение: Методы интеграции.
2. Подготовьте конфигурацию
До разработки передайте команде ShopStory:
- production- и test-домены для web-интеграции;
- источник товарных данных: фид, API магазина или их сочетание;
- одно строковое значение
feedProductId, которое без преобразований связывает товарные данные, сайт, приложение и действия с товаром; - страницы для каталога, плеера и mini-player;
- требуемое поведение кнопки «Купить»;
- ответственных за техническую интеграцию и приёмку.
Для выгрузки используйте требования к товарному фиду. Чтение товаров через API и сочетание источников описаны в интеграции с интернет-магазином. Точные applicationId, origins и тестовые данные ShopStory передаёт в integration handoff проекта.
3. Подключите выбранный метод
Web SDK
- Получите подтверждение конфигурации доменов и проекта.
- Создайте страницу каталога и подключите SDK.
- При необходимости подключите mini-player к согласованным товарным страницам.
- Настройте CSP и проверьте тестовый товар, live и запись.
Инструкция: Web SDK.
Public API
- Получите
applicationId. - Выполните первый запрос из терминала или с сервера клиента.
- Реализуйте проверку HTTP-кода и
statusв JSON-конверте. - Добавьте состояния загрузки, отсутствия данных и ошибок.
После Quickstart проверьте формат ответов, каталог эфиров и Mini-player API.
Mobile SDK
- Подтвердите mobile stack и получите точную версию пакета в integration handoff.
- Передавайте на native PDP тот же строковый
feedProductId, что и в источнике товарных данных. - Подключите product action к существующему native router. Если проекту нужна прямая корзина, отдельно подключите cart-команду приложения.
- Проверьте live, VOD, отсутствие контента, lifecycle, сетевую ошибку и откат версии.
Инструкция: Mobile SDK.
4. Зафиксируйте commerce-поведение
- Стандартный сценарий на web открывает URL товара, а в Mobile SDK — native PDP.
- На web прямое добавление использует callback сайта и сообщает об успехе после фактического изменения корзины. Mobile SDK передаёт типизированное действие приложению; native host открывает PDP или выполняет свою cart-команду по выбранному контракту.
- Cart-команда ритейлера проверяет остаток перед изменением корзины. Для проверки до нажатия Web SDK использует штатный обработчик наличия в коде сайта.
- Товарные данные через фид и API, выбор SKU, персональная цена и формы получения подключаются через расширенный commerce-контракт.
Разделы: Добавление в корзину и Интеграция с интернет-магазином.
5. Подтвердите аналитику
Назначьте ответственного за события на стороне клиента и выберите целевую систему. Для собственного UI на Public API инструментирование интерфейса выполняет клиент; события SDK не покрывают его автоматически.
- Выполните согласованное действие на тестовом товаре. Для cart-события нужен успешный ответ commerce-системы; открытие PDP и отказ добавления не должны давать подтверждённую корзину.
- Проверьте имя события, строковый товарный ID, сумму, валюту и количество по фактическому результату операции.
- Повторите callback одной операции: подтверждённое событие не должно отправляться дважды.
- Проверьте получение события целевой системой и появление в её debug/reporting-интерфейсе. Вызова reporter или записи в
dataLayerдля приёмки недостаточно. - Проверьте разрешённый сценарий отправки и отказ в consent. Consent merchant reporter не управляет всей телеметрией SDK/player: границы согласия.
Начните с аналитики, затем выберите web или mobile. Воспроизводимая проверка подтверждённой корзины: пример события.
6. Проверьте запуск
Перед production проверьте web-интеграцию на домене клиента и Mobile SDK в принятой Release-сборке приложения:
- контент относится к правильному проекту;
- один и тот же строковый
feedProductIdиспользуется в товарных данных, на PDP и в product action; - live и запись открываются в целевых браузерах и принятых mobile-сборках;
- пустое состояние не ломает страницу;
- web callback показывает результат, полученный от commerce-системы;
- в mobile-приложении product action передаётся native router или cart handler, а успех показывает интерфейс приложения после ответа commerce-системы;
- CSP разрешает необходимые ресурсы ShopStory;
- ошибки ShopStory не блокируют каталог, карточку товара или checkout клиента.
После этого используйте разделы Эксплуатация, OpenAPI и FAQ.
Поддержка интеграции
Передайте URL страницы, applicationId, время возникновения проблемы, браузер или платформу и фрагмент ответа без cookies, токенов и персональных данных на support@shopstory.live. Не отправляйте пароли, session cookies и production-токены.