AdsGram

Русский

English
中文

Русский

English
中文

Appearance

Интеграция тасок ​

Требования ​

1. Получить blockId ​

Создайте blockId с типом рекламного блока Задание. Подробная инструкция о получении blockId находится в разделе Получить blockId.

Create Task block

2. Вставка скрипта ​

Чтобы подключить ваше Mini App к рекламной сети AdsGram, вставьте скрипт sad.min.js в тег <head> вашего HTML:

html
<script src="https://sad.adsgram.ai/js/sad.min.js"></script>

3. Использование <adsgram-task> веб-компонента ​

Для интеграции таски используется веб-компонент <adsgram-task>.

html
<adsgram-task
   data-block-id='your-block-id'
   data-debug="true"
   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.ai
  • data-debug — установите true, чтобы получать тестовые таски с сервера..
  • class or className — задайте имя класса для стилизации таски.

4. Настройте таску под дизайн вашего приложения ​

Для этого можно использовать слоты и CSS-переменные.

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

Веб-компонент поддерживает три слота, которые можно стилизовать как угодно с помощью классов:

  • reward – отображает награду за выполнение таски.
  • button – кнопка для выполнения задания.
  • done – отображается вместо кнопки после выполнения таски.

Task slots

Task slots

CSS-параметры для кастомизации ​

Компонент поддерживает настройку стилей через CSS-переменные:

css
--adsgram-task-font-size: /* Размер шрифта заголовка */
--adsgram-task-icon-size: /* Размер иконки */
--adsgram-task-icon-title-gap: /* Отступ между иконкой и заголовком */
--adsgram-task-icon-border-radius: /* Радиус скругления иконки */
--adsgram-task-button-width: /* Ширина кнопки для выполнения таски*/

Пример использвания: Css variables

5. Подписка на события ​

<adsgram-task> поддерживает кастомные события. Можно подписаться на них с помощью addEventListener как на стандартные HTML-элементы.

Типы событий: ​

СобытиеКогда возникает
rewardкогда пользователь выполняет таску
onBannerNotFoundкогда отсутствует таска для отображения

Дополнительная информация ​