Integração de Task
Requisitos
- ter um Telegram mini app
- saber onde exibir o anúncio, caso contrário, veja Exemplos de integração de anúncios
1. Criar blockId
Crie um blockId com tipo de bloco Task. Instrução detalhada sobre como obter o blockId você pode encontrar na seção Obter blockId.
ATENÇÃO
Criar mais de um bloco do tipo Task não é permitido para o funcionamento correto.
2. Instalação
Você tem duas opções para integrar o SDK do AdsGram.
Inserir script
Coloque o script sad.min.js na tag <head> usando este código:
<script src="https://sad.adsgram.ai/js/sad.min.js"></script>Instalar via npm para React e Vue.
Mais informações sobre a integração de task a partir de pacotes veja na documentação para React e Vue.
npm install @adsgram/reactnpm install @adsgram/vue3. Usar o componente web <adsgram-task>
Para integrar a task, use o componente web <adsgram-task>.
<adsgram-task
data-block-id='your-block-id'
data-debug="true"
data-debug-console="false"
class="task"
></adsgram-task>Você pode usar este componente web em html, react, vue e outros frameworks como elemento nativo HTML.
your-block-id — você obtém da sua conta em https://partner.adsgram.ai
Instrução detalhada sobre como obter o blockId você pode encontrar na seção Obter blockId
ATENÇÃO
'your-block-id' nos anúncios task deve estar no formato 'task-xxx', onde xxx são números.
<adsgram-task> pode aceitar os seguintes atributos:
data-block-id— seu block id de https://partner.adsgram.aidata-debug— defina como true para obter uma task de teste do servidor.data-debug-console— por padrão é true. Funciona apenas se o parâmetrodata-debugfor true.
Se fortrue— os logs detalhados com o prefixoADSGRAM DEBUG LOGserão exibidos no console do navegador. Se forfalse— os logs não são exibidos no console, mesmo no modo debug.classouclassName— defina o nome da classe para estilizar a task.
4. Personalizar a task para se adaptar ao layout do seu aplicativo
Para isso você pode usar elementos slot e variáveis CSS.
Uso de slots
O componente web suporta três slots que podem ser estilizados como quiser usando classes:
- reward — exibe a recompensa por completar a tarefa.
- button — o botão para completar a tarefa.
- claim — é exibido no lugar do botão após completar a tarefa.
- done — é exibido no lugar do botão após receber a recompensa.
Parâmetros CSS para personalização
O componente suporta estilização por meio de variáveis CSS:
--adsgram-task-font-size: /* Tamanho da fonte do título */
--adsgram-task-icon-size: /* Tamanho do ícone */
--adsgram-task-icon-title-gap: /* Espaço entre o ícone e o título */
--adsgram-task-icon-border-radius: /* Raio da borda do ícone */
--adsgram-task-button-width: /* Largura do botão para completar a tarefa */Exemplo de uso: 
5. Inscrever-se em eventos
<adsgram-task> tem eventos personalizados, você pode se inscrever neste evento usando addEventListener da mesma forma que faz para elementos HTML básicos.
Tipos de eventos:
| Evento | Ocorre |
|---|---|
reward | quando o usuário completa a tarefa |
onError | quando o usuário obtém um erro durante o carregamento ou renderização da task |
onBannerNotFound | quando não há task para exibir |
onTooLongSession | quando a sessão é muito longa, o usuário precisa reiniciar o app para obter anúncios |
Mais informações
- Veja exemplos de código para entender melhor como implementar no seu app.
- Se você tiver problemas com a integração verifique a seção Solução de problemas
- Se você usa Typescript verifique a seção Typescript