Интеграция рекламы с вознаграждением и межстраничной рекламы
Требования
- Иметь Telegram mini app
- Знать место для размещения рекламы. Если вы не уверены, ознакомьтесь с примерами интеграции рекламы
- Получить
blockId, если его нет, смотрите раздел Как создать BlockId.
Установка
У вас есть два способа интеграции AdsGram SDK.
Вставка скрипта
Чтобы подключить ваше Mini App к рекламной сети AdsGram, вставьте скрипт sad.min.js в тег <head> вашего HTML:
<script src="https://sad.adsgram.ai/js/sad.min.js"></script>Установка через npm для React и Vue
Подробную информацию об интеграции через пакеты смотрите в документации для React и Vue.
npm install @adsgram/reactnpm install @adsgram/vueИнициализация AdsGram SDK
Инициализируйте SDK, используя ваш blockId:
const AdController = window.Adsgram.init({ blockId: "your-block-id" });ВАЖНО:
Инициализация требуется только для Rewarded и Interstitial форматов. Для формата Задание инициализацию выполнять не нужно.
Примеры интеграции для формата Задание смотрите в разделе Примеры интеграции заданий.
Более подробная информация о методе init находится в разделе API Reference.
your-block-id — вы получите его в вашем аккаунте на https://partner.adsgram.ai
Подробная инструкция о получении BlockId находится в разделе Получить blockId
Отображение рекламы
- Rewarded формат: Пользователь получает награду за просмотр рекламы до конца.
Подробнее о требованиях к Rewarded формату. - Interstitial формат: Пользователь может пропустить рекламу до её завершения.
Подробнее о требованиях к Interstitial формату.
Информация:
Ниже представлен пример кода для Rewarded формата. Этот пример также подходит для Interstitial формата. Единственное отличие: промис AdController.show() резолвится как для полностью просмотренных объявлений, так и для пропущенных. Простой пример кода вы можете найти здесь
В большинстве случаев код используется внутри обработчика события клика.
Для примеров на vanilla JS, React, Unity см. раздел Примеры кода.
AdController.show().then((result) => {
// Пользователь просмотрел рекламу до конца или пропустил её в Interstitial формате
// Ваш код для награждения пользователя
}).catch((result) => {
// Произошла ошибка при показе рекламы
// Ничего не делайте или обработайте ошибку
})AdController.show().then((result: ShowPromiseResult) => {
// Пользователь просмотрел рекламу до конца или пропустил её в Interstitial формате
// Ваш код для награждения пользователя
}).catch((result: ShowPromiseResult) => {
// Произошла ошибка при показе рекламы
// Ничего не делайте или обработайте ошибку
})Типы результата result:
interface ShowPromiseResult {
done: boolean; // true, если пользователь досмотрел до конца или пропустил (Interstitial формат)
description: string; // описание события
state: 'load' | 'render' | 'playing' | 'destroy'; // состояние баннера
error: boolean; // true, если событие связано с ошибкой, иначе false
}Информация:
Промис showPromise резолвится, если пользователь досмотрел рекламу до конца или пропустил её в Interstitial формате. В остальных случаях промис реджектится.
Совет:
Используйте finally, чтобы добавить дополнительные действия после завершения показа рекламы, её пропуска или возникновения ошибки.
Поздравляем! Вы только что показали свою первую рекламу, используя AdsGram.
Дополнительная информация
- Примеры интеграции для React, Unity, vanilla JS можно найти в разделе Примеры кода.
- Если возникли проблемы, посетите раздел Устранение неполадок.
- Расширенные возможности API AdController описаны в API Reference
- Если вы используете TypeScript, ознакомьтесь с разделом Typescript