ad-internal-sdk

SberDevices Ad SDK

Показывающий код SberDevices

Создание смартапа

Создайте проект в SmartApp Studio

В качестве Webhook смартапа укажите либо готовый webhook: https://smartapp-code.sberdevices.ru/chatadapter/chatapi/webhook/sber_nlp2/akvMhQEy:73931a63e07450a5260600c7f9f6e6d6a992578b Либо собственный веб-хук который будет присылать данные для инициализации по данному примеру;

В качестве Хостинг фронтенда укажите ссылку на свой клиентский код;

Подключите SberDevices Ad SDK к клиентской части вашего приложения.

Установка Ad SDK

Подключите assistantClient

Подключите показывающий код через тег script в ваше приложение:

<script src="https://cdn-app.sberdevices.ru/shared-static/0.0.0/js/@sberdevices/ad-sdk/ad-sdk.min.js"></script>

Использование

После загрузки скрипта вам будет доступен объект window.SberDevicesAdSDK; У этого объекта есть три основных метода:

• init()
• runVideoAd()
• runBanner()

Инициализация

NB Для корректной инициализации показывающего кода, необходимо подключить assistantClient до инициализации SberDevicesAdSDK.

SberDevicesAdSDK имеет несколько вариантов инициализации:

Самый простой способ инициализации:

init()

window.SberDevicesAdSDK.init({ onError, onSuccess });

После успешной инициализации вызовется onSuccess; После чего можно запустить рекламу

Также можно проверить инициализацию вызвав метод window.SberDevicesAdSDK.isInited();

NB метод SberDevicesAdSDK.init предполагает что ваше приложение запущено в окружении с поддержкой голосового Ассистента;

Пример использования этого метода можно посмотреть в данном Демо-проекте

initDev()

Метод window.SberDevicesAdSDK.initDev предназначен только для локальной отладки, он работает также как метод init но принимает два дополнительных параметра: token, initPhrase;

initPhrase – Фраза для запуска вашего смартап, строится следующим образом Запусти + Активационное имя (Запусти мой апп); Пример: Запусти кубик Рубика token – Токен для дебага, получить его можно в SmartApp Studio по инструкции.

const IS_DEVELOPMENT = process.env.NODE_ENV === "development";
const DEV_TOKEN = process.env.DEV_TOKEN;
const DEV_PHRASE = process.env.DEV_PHRASE;

if (IS_DEVELOPMENT) {
  window.SberDevicesAdSDK.initDev({ token: DEV_TOKEN, initPhrase: DEV_PHRASE, onSuccess, onError });
} else {
  window.SberDevicesAdSDK.init({ onSuccess, onError });
}

Пример использования этого метода можно посмотреть в данном Демо-проекте

initWithAssistant()

Если вы хотите контролировать создание assistantClient самостоятельно, и например подписаться на смену персонажей; То создайте инстанс a и передайте его в метод window.SberDevicesAdSDK.initWithAssistant();

const assistant = initializeAssistant();

initWithAssistant({
  assistant,
  onSuccess,
  onError,
});

Пример создания assistant можно посмотреть в документации;

Пример использования метода initWithAssistant можно посмотреть в данном Демо-проекте

NB – При таком методе инициализации SberDevicesAdSDK рассчитывает что в качестве webhook указан готовый webhook либо сценарий отправляет все необходимые данные на старте. Пример такого сценария можно посмотреть в данном репозитории.

initWithParams()

Если вы хотите написать свой собственный сценарий и использовать его в качестве веб-хука, возьмите за основу пример такого сценария Пример написан с использованием фреймворка SaluteJS Вы можете написать сценарий с использованием любого другого инструмента

Инициализируйте AssistantClient Подпишитесь на получения необходимых данных и после получения инициализируйте SberDevicesAdSDK

assistant.on("data", (command) => {
  if (command.type === "smart_app_data" && command.smart_app_data.type === "sub") {
    initWithParams({
      params: command.smart_app_data.payload,
      onSuccess: () => {
        console.log("AdSdk Inited with params");
        testBtn.disabled = false;
      },
      onError,
    });
  }
});

NB smart_app_data.type отправленный на сценарии должен быть такой-же, который вы ожидаете в подписке assistant.on('data', ...)

Параметры которые ожидает метод window.SberDevicesAdSDK.initWithParams():

{
    onSuccess,
    onError,
    params: {
        sub: '42l/Y1...', // идентификатор пользователя
        projectName: 'y2dw...', // идентификатор проекта
        device: { ... }, // информация об устройстве пользователя
        app_info: { ... }, // информация о приложении
    }
}

Всю эту информацию необходимо получить c помощью ассистента;

Запуск баннера

После инициализации показывающего кода, необходимо воспользоваться командой runBanner(), для показа видео-рекламы.

runBanner({
  onSuccess: () => {}, // Вызовется при закрытии баннера
  onError: () => {}, // Вызовется в случае ошибки при показе баннера
});

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

Запуск видео-рекламы

После инициализации показывающего кода, необходимо воспользоваться командой runVideoAd(), для показа видео-рекламы.

runVideoAd({
  onSuccess: () => {}, // Вызовется при переходе или при полном показе рекламы
  onError: () => {}, // Вызовется во время ошибки при показе рекламы
});

Пример для запуска рекламы также расположен в данном репозитории.

Запуск демо проекта

Перед началом работы создайте свой смартапп(canvas) в SmartMarket Studio

и скопируйте .env.sample в .env. Заполните необходимые переменные.

Демо-проект использует vercel для поднятия локального сервера разработки;

npm ci
npm start

После запуска поднимите тунель например с помощью ngrok на порт 3000 и пропишите в созданном ранее смартапе пути до тунеля:

• Webhook смартапа: туннель+/api/hook
• Frontend Endpoint: туннель