AdsGram

Português

English
Русский
中文
Español
Türkçe

Português

English
Русский
中文
Español
Türkçe

Tema

Exemplos de código ​

  • Formato Rewarded, o que significa que você deve dar ao usuário uma recompensa quando ele vir o anúncio até o final e o anúncio deve ser esperado como após clicar em um elemento.
    Mais informações sobre requisitos para exibição de anúncio.
  • Formato Interstitial, o que significa que o usuário pode pular um anúncio antes do final e o anúncio deve ser esperado durante pausas naturais no fluxo de um aplicativo
    Mais informações sobre requisitos para exibição de anúncio.

Informação:

Abaixo estão exemplos de código para o formato Rewarded. Estes exemplos também são relevantes para o formato Interstitial. A única diferença é que a promessa AdController.show() é resolvida para anúncios que foram vistos até o final, assim como os que foram fechados. Um exemplo simples você pode encontrar aqui

React ​

Inserir script ​

Insira este script dentro da tag <head> do seu HTML.

Criar hook useAdsgram ​

Crie um arquivo dentro do seu projeto com o hook personalizado useAdsgram.
Mais informações sobre custom hooks na documentação do 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(() => {
          // o usuário vê o anúncio até o final ou o fecha no formato interstitial
          onReward();
        })
        .catch((result) => {
          // o usuário obtém um erro durante a reprodução do anúncio
          onError?.(result);
        });
    } else {
      onError?.({
        error: true,
        done: false,
        state: 'load',
        description: 'Adsgram script not loaded',
      });
    }
  }, [onError, onReward]);
}
typescript
import { useCallback, useEffect, useRef } from 'react';
/**
 * Verifique a seção de Typescript
 * e use seu caminho para os tipos do 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(() => {
          // o usuário vê o anúncio até o final ou o fecha no formato interstitial
          onReward?.();
        })
        .catch((result: ShowPromiseResult) => {
          // o usuário obtém um erro durante a reprodução do anúncio
          onError?.(result);
        });
    } else {
      onError?.({
        error: true,
        done: false,
        state: 'load',
        description: 'Adsgram script not loaded',
      });
    }
  }, [onError, onReward]);
}

Exemplo de uso ​

Exemplo de um componente de botão simples, quando o botão é clicado o anúncio será exibido.

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

  /**
   * insira your-block-id
   */
  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));
  }, []);

  /**
   * insira your-block-id
   */
  const showAd = useAdsgram({ blockId: "your-block-id", onReward, onError });

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

Unity ​

Não temos um plugin para unity.

Crie um arquivo .jslib, você pode ler mais sobre isso aqui.

Você pode chamar funções js do unity usando isto.
Você pode chamar funções do unity a partir do js usando isto.

Vanilla js ​

Exemplo com script inline e botão para exibir o anúncio.

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>
            // insira seu block id
            const AdController = window.Adsgram.init({ blockId: "your-block-id" });
            const button = document.getElementById('ad');
            button.addEventListener('click', () => {
                AdController.show().then((result) => {
                    // o usuário vê o anúncio até o final ou o fecha no formato interstitial
                    // seu código para recompensar o usuário no formato rewarded
                    alert('Reward');
                }).catch((result) => {
                    // o usuário obtém um erro durante a reprodução do anúncio
                    // não fazer nada ou o que quiser
                    alert(JSON.stringify(result, null, 4));
                })
            })
        </script>
    </body>
</html>