Integración de Reward e Interstitial
Requisitos
- tener una Telegram mini app
- saber dónde mostrar el anuncio, si no, ver Ejemplos de integración de anuncios
- tener
blockId, si no, ver la sección Obtener blockId
Instalación
Tienes dos opciones para integrar el SDK de AdsGram.
Insertar script
Coloca el script sad.min.js en la etiqueta <head> usando este código:
<script src="https://sad.adsgram.ai/js/sad.min.js"></script>Instalar vía npm para React y Vue.
Más información sobre la integración desde paquetes ver en la documentación para React y Vue.
npm install @adsgram/reactnpm install @adsgram/vueInicializar el SDK de AdsGram
const AdController = window.Adsgram.init({ blockId: "your-block-id" });IMPORTANTE
La inicialización solo es necesaria para los formatos Rewarded e Interstitial. Para el formato Task, no se necesita inicialización.
Para ejemplos de integración del formato Task, ver Integración de Task.
Más información sobre la función init puedes encontrar en la sección Referencia API.
your-block-id — lo obtienes de tu cuenta en https://partner.adsgram.ai
Instrucción detallada sobre cómo obtener el blockId puedes encontrar en la sección Obtener blockId
Mostrar banner
- Formato Rewarded, lo que significa que debes darle al usuario una recompensa cuando vea el anuncio hasta el final.
Más información sobre requisitos para mostrar anuncio. - Formato Interstitial, lo que significa que el usuario puede saltar un anuncio antes del final.
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í
En la mayoría de los casos, el código a continuación se usa dentro del manejador de clics.
Para ejemplos de código con vanilla js, React, Unity verifica la sección de ejemplos de código.
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
}).catch((result) => {
// el usuario obtiene un error durante la reproducción del anuncio
// no hacer nada o lo que quieras
})AdController.show().then((result: ShowPromiseResult) => {
// el usuario ve el anuncio hasta el final o lo cierra en formato interstitial
// tu código para recompensar al usuario en formato rewarded
}).catch((result: ShowPromiseResult) => {
// el usuario obtiene un error durante la reproducción del anuncio o salta el anuncio
// no hacer nada o lo que quieras
})result tiene los siguientes tipos:
interface ShowPromiseResult {
done: boolean; // true si el usuario ve hasta el final o lo cierra en formato interstitial, de lo contrario false
description: string; // descripción del evento
state: 'load' | 'render' | 'playing' | 'destroy'; // estado del banner
error: boolean; // true si el evento fue emitido debido a un error, de lo contrario false
}Información:
showPromise se resuelve si el usuario ve el anuncio hasta el final o lo cierra en formato interstitial, de lo contrario se rechaza.
Consejo:
Encadena la promesa con finally si necesitas agregar alguna acción adicional después de que el anuncio termine de reproducirse, sea saltado o obtenga un error.
¡Felicidades, acabas de mostrar tu primer anuncio usando AdsGram!
Más información
- Ejemplos de integración de código para React, Unity, vanilla js
- Si tienes problemas con la integración verifica la sección Solución de problemas
- Referencia avanzada de AdController API puedes encontrar en la sección Referencia API
- Si usas Typescript verifica la sección Typescript