AdsGram

Українська

English
Русский
中文
Español
Português
Türkçe
العربية
فارسی
Français
Bahasa Indonesia
हिंदी

Українська

English
Русский
中文
Español
Português
Türkçe
العربية
فارسی
Français
Bahasa Indonesia
हिंदी

Тема

Приклади коду ​

  • Rewarded формат:
    Користувач повинен отримати винагороду за перегляд реклами до кінця. Реклама зазвичай запускається після кліку на елемент.
    Детальніше про вимоги до показу реклами.
  • Interstitial формат:
    Користувач може пропустити рекламу до її завершення. Цей формат зазвичай показується під час природних пауз в додатку.
    Детальніше про вимоги до показу реклами.

Інформація

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

React ​

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

Вставте наступний скрипт в тег <head> вашого HTML.

Створення хуку useAdsgram ​

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

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]);
}

Приклад використання ​

Приклад простого компонента кнопки, при натисканні на яку відображається реклама.

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>