Integración de Task
Requisitos
- tener una Telegram mini app
- saber dónde mostrar el anuncio, si no, ver Ejemplos de integración de anuncios
1. Crear blockId
Crea un blockId con tipo de bloque Task. Instrucción detallada sobre cómo obtener el blockId puedes encontrar en la sección Obtener blockId.
ATENCIÓN
Crear más de un bloque de tipo Task no está permitido para el correcto funcionamiento.
2. 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 de task desde paquetes ver en la documentación para React y Vue.
npm install @adsgram/reactnpm install @adsgram/vue3. Usar el componente web <adsgram-task>
Para integrar la task, usa el componente web <adsgram-task>.
<adsgram-task
data-block-id='your-block-id'
data-debug="true"
data-debug-console="false"
class="task"
></adsgram-task>Puedes usar este componente web en html, react, vue y otros frameworks como elemento nativo HTML.
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
ATENCIÓN
'your-block-id' en los anuncios task debe estar en el formato 'task-xxx', donde xxx son números.
<adsgram-task> puede aceptar los siguientes atributos:
data-block-id— tu block id desde https://partner.adsgram.aidata-debug— establece en true para obtener una task de prueba del servidor.data-debug-console— por defecto es true. Funciona solo si el parámetrodata-debuges true.
Si estrue— los logs detallados con el prefijoADSGRAM DEBUG LOGse mostrarán en la consola del navegador. Si esfalse— los logs no se muestran en la consola, incluso en modo debug.classoclassName— establece el nombre de la clase para estilizar la task.
4. Personalizar la task para que se ajuste al diseño de tu aplicación
Para este propósito puedes usar elementos slot y variables CSS.
Uso de slots
El componente web soporta tres slots que pueden ser estilizados como quieras usando clases:
- reward — muestra la recompensa por completar la tarea.
- button — el botón para completar la tarea.
- claim — se muestra en lugar del botón después de completar la tarea.
- done — se muestra en lugar del botón después de recibir la recompensa.
Parámetros CSS para personalización
El componente soporta estilizado mediante variables CSS:
--adsgram-task-font-size: /* Tamaño de fuente del título */
--adsgram-task-icon-size: /* Tamaño del icono */
--adsgram-task-icon-title-gap: /* Espacio entre el icono y el título */
--adsgram-task-icon-border-radius: /* Radio del borde del icono */
--adsgram-task-button-width: /* Ancho del botón para completar la tarea */Ejemplo de uso: 
5. Suscribirse a eventos
<adsgram-task> tiene eventos personalizados, puedes suscribirte a este evento usando addEventListener de la misma manera que lo haces para elementos HTML básicos.
Tipos de eventos:
| Evento | Ocurre |
|---|---|
reward | cuando el usuario completa la tarea |
onError | cuando el usuario obtiene un error durante la carga o render de la task |
onBannerNotFound | cuando no hay task para mostrar |
onTooLongSession | cuando la sesión es demasiado larga, el usuario necesita reiniciar la app para obtener anuncios |
Más información
- Ver ejemplos de código para entender mejor cómo implementar en tu app.
- Si tienes problemas con la integración verifica la sección Solución de problemas
- Si usas Typescript verifica la sección Typescript