Інтеграція реклами з винагородою та міжсторінкової реклами
Вимоги
- Мати 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