Примеры кода

На данный момент поддерживаются два формата рекламы:

Rewarded формат:
Пользователь должен получить вознаграждение за просмотр рекламы до конца. Реклама обычно запускается после клика на элемент.
Подробнее о требованиях к показу рекламы.
Interstitial формат:
Пользователь может пропустить рекламу до её завершения. Этот формат обычно показывается во время естественных пауз в приложении.
Подробнее о требованиях к показу рекламы.

Информация:

Примеры кода ниже предназначены для Rewarded формата, но также применимы и к Interstitial формату. Единственное отличие: промис AdController.show() резолвится для рекламы, просмотренной до конца, а также для пропущенной. Простой пример кода вы можете найти здесь

React

Вставка скрипта

Вставьте следующий скрипт в тег <head> вашего HTML.

Создание хука useAdsgram

Создайте файл с пользовательским хуком useAdsgram внутри вашего проекта.
Подробнее о пользовательских хуках можно прочитать в документации React.

useAdsgram.jsuseAdsgram.ts

javascript

import { useCallback, useEffect, useRef } from 'react';

export function useAdsgram({ blockId, onReward, onError }) {
  const AdControllerRef = useRef(undefined);

  useEffect(() => {
    AdControllerRef.current = window.Adsgram?.init({ blockId });
  }, [blockId]);

  return useCallback(async () => {
    if (AdControllerRef.current) {
      AdControllerRef.current
        .show()
        .then(() => {
          // Пользователь просмотрел рекламу до конца или пропустил в Interstitial формате
          onReward();
        })
        .catch((result) => {
          // Ошибка при воспроизведении рекламы
          onError?.(result);
        });
    } else {
      onError?.({
        error: true,
        done: false,
        state: 'load',
        description: 'Adsgram script not loaded',
      });
    }
  }, [onError, onReward]);
}

typescript

import { useCallback, useEffect, useRef } from 'react';
/**
 * Проверьте раздел Typescript
  * и используйте свой путь к типам adsgram
 */
import type { AdController, ShowPromiseResult } from 'path-to-adsgram-types';

export interface useAdsgramParams {
  blockId: string;
  onReward?: () => void;
  onError?: (result: ShowPromiseResult) => void;
}

export function useAdsgram({ blockId, onReward, onError }: useAdsgramParams): () => Promise<void> {
  const AdControllerRef = useRef<AdController | undefined>(undefined);

  useEffect(() => {
    AdControllerRef.current = window.Adsgram?.init({ blockId, debug: true, debugBannerType: 'FullscreenMedia' });
  }, [blockId]);

  return useCallback(async () => {
    if (AdControllerRef.current) {
      AdControllerRef.current
        .show()
        .then(() => {
          // Пользователь просмотрел рекламу до конца или пропустил в Interstitial формате
          onReward?.();
        })
        .catch((result: ShowPromiseResult) => {
          // Ошибка при воспроизведении рекламы
          onError?.(result);
        });
    } else {
      onError?.({
        error: true,
        done: false,
        state: 'load',
        description: 'Adsgram script not loaded',
      });
    }
  }, [onError, onReward]);
}

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

Пример простого компонента кнопки, по нажатию на которую отображается реклама.

showAdButton.jsxshowAdButton.tsx

jsx

import { useCallback, ReactElement } from 'react'
import { useAdsgram } from "./hooks/useAdsgram.ts";


export function ShowAdButton() {
  const onReward = useCallback(() => {
    alert('Reward');
  }, []);
  const onError = useCallback((result) => {
    alert(JSON.stringify(result, null, 4));
  }, []);

  /**
   * Вставьте ваш blockId
   */
  const showAd = useAdsgram({ blockId: "your-block-id", onReward, onError });

  return (
    <button onClick={showAd}>Show Ad</button>
  )
}

tsx

import { useCallback, ReactElement } from 'react'
import { useAdsgram } from "./hooks/useAdsgram.ts";
import { ShowPromiseResult } from "./types/adsgram";


export function ShowAdButton(): ReactElement {
  const onReward = useCallback(() => {
    alert('Reward');
  }, []);
  const onError = useCallback((result: ShowPromiseResult) => {
    alert(JSON.stringify(result, null, 4));
  }, []);

  /**
   * Вставьте ваш blockId
   */
  const showAd = useAdsgram({ blockId: "your-block-id", onReward, onError });

  return (
    <button onClick={showAd}>Show Ad</button>
  )
}

Unity

На данный момент плагины для Unity отсутствуют.

Создайте файл .jslib. Подробнее об этом можно прочитать здесь.

Используйте вызовы JS-функций из Unity и наоборот, чтобы интегрировать рекламу.

Vanilla js

Пример кода со встроенным скриптом и кнопкой для показа рекламы:

html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Test app</title>
        <script src="https://telegram.org/js/telegram-web-app.js"></script>
        <script src="https://sad.adsgram.ai/js/sad.min.js"></script>
    </head>
    <body>
        <button id="ad">Show ad</button>
        <script>
            /// Вставьте ваш blockId
            const AdController = window.Adsgram.init({ blockId: "your-block-id" });
            const button = document.getElementById('ad');
            button.addEventListener('click', () => {
                AdController.show().then((result) => {
                    // Пользователь просмотрел рекламу до конца или пропустил её в Interstitial формате
                    // Ваш код для награждения пользователя
                    alert('Reward');
                }).catch((result) => {
                    // Ошибка при воспроизведении рекламы
                    alert(JSON.stringify(result, null, 4));
                })
            })
        </script>
    </body>
</html>

Примеры кода ​

React ​

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

Создание хука useAdsgram ​

Пример использования ​

Unity ​

Vanilla js ​