Intégration Task
Prérequis
- avoir une mini-app Telegram
- savoir où afficher la publicité, sinon, consultez Exemples d'intégration publicitaire
1. Créer un blockId
Créez un blockId avec le type de bloc Task. Instructions détaillées sur la façon d'obtenir le blockId dans la section Obtenir un blockId.
WARNING
La création de plus d'un type de bloc Task n'est pas autorisée pour un bon fonctionnement.
2. Installation
Vous avez deux options pour intégrer le SDK AdsGram.
Insérer le script
Placez le script sad.min.js dans la balise <head> en utilisant ce code :
<script src="https://sad.adsgram.ai/js/sad.min.js"></script>Installer via npm pour React et Vue.
Plus d'informations sur l'intégration task depuis les packages dans la documentation pour React et Vue.
npm install @adsgram/reactnpm install @adsgram/vue3. Utiliser le composant web <adsgram-task>
Pour intégrer la tâche, utilisez le composant web <adsgram-task>.
<adsgram-task
data-block-id='your-block-id'
data-debug="true"
data-debug-console="false"
class="task"
></adsgram-task>Vous pouvez utiliser ce composant web dans html, react, vue et d'autres frameworks comme un élément HTML natif.
your-block-id — vous l'obtenez depuis votre compte sur https://partner.adsgram.ai
Instructions détaillées sur la façon d'obtenir le blockId dans la section Obtenir un blockId
WARNING
Le 'your-block-id' dans les publicités task doit être au format 'task-xxx', où xxx sont des chiffres.
<adsgram-task> peut accepter les attributs suivants :
data-block-id— votre block id depuis https://partner.adsgram.aidata-debug— définissez sur true pour obtenir une tâche de test depuis le serveur.data-debug-console— la valeur par défaut est true. Fonctionne uniquement si le paramètredata-debugest true.
Sitrue— les logs détaillés avec le préfixeADSGRAM DEBUG LOGseront affichés dans la console du navigateur. Sifalse— les logs ne sont pas affichés dans la console, même en mode debug.classouclassName— définissez le nom de classe pour le style de la tâche.
4. Personnaliser la tâche pour qu'elle s'adapte au design de votre application
À cette fin, vous pouvez utiliser les éléments slot et les variables CSS.
Utilisation des slots
Le composant web prend en charge trois slots qui peuvent être stylisés comme vous le souhaitez en utilisant les classes :
- reward — affiche la récompense pour avoir accompli la tâche.
- button — le bouton pour accomplir la tâche.
- claim — affiché à la place du bouton après avoir accompli la tâche.
- done — affiché à la place du bouton après avoir reçu la récompense.
Paramètres CSS pour la personnalisation
Le composant prend en charge le style via des variables CSS :
--adsgram-task-font-size: /* Taille de police du titre */
--adsgram-task-icon-size: /* Taille de l'icône */
--adsgram-task-icon-title-gap: /* Espace entre l'icône et le titre */
--adsgram-task-icon-border-radius: /* Rayon de bordure de l'icône */
--adsgram-task-button-width: /* Largeur du bouton pour accomplir la tâche */Exemple d'utilisation : 
5. S'abonner aux événements
<adsgram-task> possède des événements personnalisés, vous pouvez vous abonner à cet événement en utilisant addEventListener de la même manière que pour les éléments HTML de base.
Types d'événements :
| Événement | Se produit |
|---|---|
reward | lorsque l'utilisateur accomplit la tâche |
onError | lorsque l'utilisateur obtient une erreur pendant le chargement ou le rendu de la tâche |
onBannerNotFound | lorsqu'il n'y a pas de tâche à afficher |
onTooLongSession | lorsque la session est trop longue, l'utilisateur doit redémarrer l'application pour obtenir des publicités |
Plus d'informations
- Consultez les exemples de code pour mieux comprendre comment implémenter dans votre application.
- Si vous rencontrez des problèmes d'intégration, consultez la section Dépannage
- Si vous utilisez Typescript, consultez la section Typescript