Інтеграція завдань
Вимоги
- Мати Telegram mini app
- Знати місце для розміщення реклами. Якщо ви не впевнені, ознайомтеся з прикладами інтеграції реклами
1. Отримати blockId
Створіть blockId з типом рекламного блоку Завдання. Детальна інструкція про отримання 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/vue3. Використання веб-компонента <adsgram-task>
Для інтеграції завдання використовується веб-компонент <adsgram-task>.
<adsgram-task
data-block-id='your-block-id'
data-debug="true"
data-debug-console="false"
class="task"
></adsgram-task>Цей веб-компонент можна використовувати в HTML, React, Vue та інших фреймворках як нативний HTML-елемент.
your-block-id — ви отримаєте його у вашому акаунті на https://partner.adsgram.ai
Детальна інструкція про отримання blockId знаходиться в розділі Отримати blockId
УВАГА
your-block-id в рекламному завданні повинен бути у форматі 'task-xxx', де xxx - цифри.
Атрибути, що підтримуються <adsgram-task>:
data-block-id— ваш blockId на https://partner.adsgram.aidata-debug— встановіть true, щоб отримувати тестові завдання з сервера.data-debug-console— за замовчуванням true. Працює тільки якщо параметрdata-debugдорівнює true.
Якщоtrue— в консоль браузера виводяться детальні логи з префіксомADSGRAM DEBUG LOG. Якщоfalse— логи в консоль не виводяться, навіть в debug-режимі.classабоclassName— задайте ім'я класу для стилізації завдання.
4. Налаштуйте завдання під дизайн вашого додатку
Для цього можна використовувати слоти та CSS-змінні.
Використання слотів
Веб-компонент підтримує три слоти, які можна стилізувати як завгодно за допомогою класів:
- reward – відображає винагороду за виконання завдання.
- button – кнопка для виконання завдання.
- claim – відображається замість кнопки після виконання завдання.
- done – відображається замість кнопки після отримання винагороди.
CSS-параметри для кастомізації
Компонент підтримує налаштування стилів через CSS-змінні:
--adsgram-task-font-size: /* Розмір шрифту заголовку */
--adsgram-task-icon-size: /* Розмір іконки */
--adsgram-task-icon-title-gap: /* Відступ між іконкою та заголовком */
--adsgram-task-icon-border-radius: /* Радіус закруглення іконки */
--adsgram-task-button-width: /* Ширина кнопки для виконання завдання */Приклад використання: 
5. Підписка на події
<adsgram-task> підтримує кастомні події. Можна підписатися на них за допомогою addEventListener як на стандартні HTML-елементи.
Типи подій:
| Подія | Коли виникає |
|---|---|
reward | коли користувач виконує завдання |
onError | помилка при завантаженні або рендері завдання |
onBannerNotFound | коли відсутнє завдання для відображення |
onTooLongSession | занадто довга сесія, необхідно перезапустити додаток щоб отримувати рекламу |
Додаткова інформація
- Див. приклади коду для кращого розуміння інтеграції у ваш додаток.
- Якщо виникли проблеми, відвідайте розділ Усунення несправностей.
- Якщо ви використовуєте TypeScript, ознайомтеся з розділом Typescript