Перейти к основному содержимому

Обзор интеграции 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​

  1. Получите подтверждение конфигурации доменов и проекта.
  2. Создайте страницу каталога и подключите SDK.
  3. При необходимости подключите mini-player к согласованным товарным страницам.
  4. Настройте CSP и проверьте тестовый товар, live и запись.

Инструкция: Web SDK.

Public API​

  1. Получите applicationId.
  2. Выполните первый запрос из терминала или с сервера клиента.
  3. Реализуйте проверку HTTP-кода и status в JSON-конверте.
  4. Добавьте состояния загрузки, отсутствия данных и ошибок.

После Quickstart проверьте формат ответов, каталог эфиров и Mini-player API.

Mobile SDK​

  1. Подтвердите mobile stack и получите точную версию пакета в integration handoff.
  2. Передавайте на native PDP тот же строковый feedProductId, что и в источнике товарных данных.
  3. Подключите product action к существующему native router. Если проекту нужна прямая корзина, отдельно подключите cart-команду приложения.
  4. Проверьте 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 не покрывают его автоматически.

  1. Выполните согласованное действие на тестовом товаре. Для cart-события нужен успешный ответ commerce-системы; открытие PDP и отказ добавления не должны давать подтверждённую корзину.
  2. Проверьте имя события, строковый товарный ID, сумму, валюту и количество по фактическому результату операции.
  3. Повторите callback одной операции: подтверждённое событие не должно отправляться дважды.
  4. Проверьте получение события целевой системой и появление в её debug/reporting-интерфейсе. Вызова reporter или записи в dataLayer для приёмки недостаточно.
  5. Проверьте разрешённый сценарий отправки и отказ в 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-токены.