AdsGram

Español

English
Русский
中文
Português
Türkçe

Español

English
Русский
中文
Português
Türkçe

Tema

Ejemplos de código ​

  • Formato Rewarded, lo que significa que debes darle al usuario una recompensa cuando vea el anuncio hasta el final y el anuncio debe ser esperado como después de hacer clic en un elemento.
    Más información sobre requisitos para mostrar anuncio.
  • Formato Interstitial, lo que significa que el usuario puede saltar un anuncio antes del final y el anuncio debe ser esperado durante pausas naturales en el flujo de una aplicación
    Más información sobre requisitos para mostrar anuncio.

Información:

A continuación se muestran ejemplos de código para el formato Rewarded. Estos ejemplos también son relevantes para el formato Interstitial. La única diferencia es que la promesa AdController.show() se resuelve para anuncios que han sido vistos hasta el final, así como los que han sido cerrados. Un ejemplo simple puedes encontrar aquí

React ​

Insertar script ​

Inserta este script dentro de la etiqueta <head> de tu HTML.

Crear hook useAdsgram ​

Crea un archivo dentro de tu proyecto con el hook personalizado useAdsgram.
Más información sobre custom hooks en la documentación de 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(() => {
          // el usuario ve el anuncio hasta el final o lo cierra en formato interstitial
          onReward();
        })
        .catch((result) => {
          // el usuario obtiene un error durante la reproducción del anuncio
          onError?.(result);
        });
    } else {
      onError?.({
        error: true,
        done: false,
        state: 'load',
        description: 'Adsgram script not loaded',
      });
    }
  }, [onError, onReward]);
}
typescript
import { useCallback, useEffect, useRef } from 'react';
/**
 * Verifica la sección de Typescript
 * y usa tu ruta a los tipos de 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(() => {
          // el usuario ve el anuncio hasta el final o lo cierra en formato interstitial
          onReward?.();
        })
        .catch((result: ShowPromiseResult) => {
          // el usuario obtiene un error durante la reproducción del anuncio
          onError?.(result);
        });
    } else {
      onError?.({
        error: true,
        done: false,
        state: 'load',
        description: 'Adsgram script not loaded',
      });
    }
  }, [onError, onReward]);
}

Ejemplo de uso ​

Ejemplo de un componente de botón simple, cuando se hace clic en el botón se mostrará el anuncio.

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

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

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

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

Unity ​

No tenemos un plugin para unity.

Crea un archivo .jslib, puedes leer más sobre esto aquí.

Puedes llamar a funciones js desde unity usando esto.
Puedes llamar a funciones de unity desde js usando esto.

Vanilla js ​

Ejemplo con script inline y botón para mostrar el anuncio.

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>
            // inserta tu block id
            const AdController = window.Adsgram.init({ blockId: "your-block-id" });
            const button = document.getElementById('ad');
            button.addEventListener('click', () => {
                AdController.show().then((result) => {
                    // el usuario ve el anuncio hasta el final o lo cierra en formato interstitial
                    // tu código para recompensar al usuario en formato rewarded
                    alert('Reward');
                }).catch((result) => {
                    // el usuario obtiene un error durante la reproducción del anuncio
                    // no hacer nada o lo que quieras
                    alert(JSON.stringify(result, null, 4));
                })
            })
        </script>
    </body>
</html>