Articles sur : Développeurs et API
Cet article est aussi disponible en :

Intégration avancée du code d'intégration HTML (widget) via l'API

Exemple de code pour le Widget



<html>
<head>
   <!-- Inclure les faisceaux -->
   <script src="https://cdn-apps.drimify.com/prod/widget/index.js" type="text/javascript"></script>

   <!-- Configurer le widget au chargement de la page -->
   <script>
       window.addEventListener('load', function () {
           var widget = DigitaService.Widget.Create({
               autoscroll: true,
               element: 'gamification-widget',
               engine: 'https://apps.drimify.com/XBs15jKF/',
               fixed: false,
               height:['auto'],
               sharingurl: 'https://apps.drimify.com/XBs15jKF/',
               width: '100%',
           });
           widget.onReady = function (event) {};
           widget.onComplete = function (event) {};
           widget.onFirstInteraction = function () {};
           widget.onRouteChange = function (event) {};
           widget.onScrollToTop = function () {};
           widget.onClose = function () {};
           widget.onError = function (errorEvent) {};
           widget.load();
       });
   </script>
</head>
<body>
<div id="gamification-widget"></div>
</body>
</html>


Configuration



Créez un Widget en passant un objet d'options à la fonction "Create":

var widget = DigitaService.Widget.Create(options);


Options de configuration



Requis



OptionTypeDescription
options.elementchaîne de caractères - HTMLElementLe widget sera injecté dans cet élément HTMLElement. Vous pouvez donner un accès direct à un élément HTMLElement existant ou fournir l'ID de cet élément sous forme de chaîne de caractères. Si vous ne fournissez pas cette propriété, il essaiera de trouver un id “digitaservice-widget” sur la page.
options.enginechaîne de caractèresL'URL absolue de l'application qui sera chargée dans le widget.


Optionnel



OptionTypePar défautDescription
options.heightchaîne de caractèresautoLe widget a une hauteur par défaut de zéro avant son chargement. Vous pouvez remplacer cela par une valeur réservée pour éviter le saut de page en fonction de l'emplacement du widget sur la page parente. La valeur est en pixels telle que “600px”. Lors de l'utilisation de options.fixed = true, la valeur de la hauteur sera verrouillée à la valeur fournie et des barres de défilement seront introduites.
options.autoscrollbooléenvraiSelon la longueur du contenu du widget et l'affichage de l'utilisateur, il se peut que la page contenant le widget nécessite un défilement de la page d'accueil. Le comportement par défaut lorsqu'un utilisateur utilise le Widget est de faire défiler la page d'accueil jusqu'en haut du widget pour faciliter l'utilisation. Pour désactiver cela, réglez le défilement automatique sur false. Cette propriété sera fausse si options.fixed est vrai.
options.sharingurlchaîne de caractèresL'URL d'accueil contenant le widgetLors de l'utilisation du partage social, c'est l'URL que les personnes partageront sur les médias sociaux pour les amener à votre campagne. Si le partage est une chaîne de caractères vide, il utilisera la page d'accueil (contenant le widget) en tant qu'URL.
options.fixedbooléenfauxHabituellement, le widget changera de taille automatiquement pour s'adapter au contenu du moteur et éviter les barres de défilement. Si cela est défini sur vrai, alors la hauteur du widget sera persistante et ne changera pas. Lors de l'utilisation de cette option, la valeur options.height doit être réglée sur autre chose que “auto”. Si la hauteur du moteur est plus grande que la valeur de hauteur, des barres de défilement seront utilisées pour naviguer.
options.widthchaîne de caractères“100%”La largeur du widget. Peut être réglée sur une mesure CSS telle que “%” ou “px” par exemple.


Chargement



Une fois qu'un Widget est configuré, vous devez le charger. Vous pouvez charger le widget à tout moment.

Note : Assurez-vous de configurer tous les callbacks ci-dessous avant le chargement afin de pouvoir capturer tous les événements.

widget.load();


Callbacks d'événements



onReady


Une fois que widget.load() a été appelé, cela chargera et initialisera le widget. Lorsque le widget a terminé ce processus, il invoquera un callback onReady facultatif.

widget.onReady = function (event) {
   // chargé et prêt à utiliser
   console.log(event.type); // “prêt”
   console.log(event.data); // {}
};


onError


Une fois que widget.load() a été appelé, cela chargera et initialisera le widget. Toute erreur fatale survenant après cela invoquera un callback onError facultatif.

widget.onError = function (event) {
   throw new Error(event.message);
};


onComplete


Une fois que le jeu a été terminé et que l'utilisateur regarde le dernier écran. Il fournit également un objet data décrivant ce qui s'est passé dans le jeu.

Note : si vous voulez agir sur cela, vous voudrez peut-être donner un délai dans le callback pour que l'utilisateur ait le temps de lire l'écran final car cela se produit immédiatement lorsqu'il atteint le dernier écran. Vous pouvez également utiliser onClose.

widget.onComplete = function (event) {
   console.log(event.type); // “complet”
   console.log(event.data); // {}
   console.log("Le score de l'utilisateur était de " + event.data.gameMetrics.score);
};


onResize


Se produit lorsque le moteur a changé de taille, fournit la hauteur en tant que valeur de pixel.

widget.onResize = function (event) {
   console.log(event.type); // “resize”
   console.log(event.data); // {}
   console.log("Hauteur de l'application : " + event.data.height);
};


onClose


L'application peut être configurée avec un bouton de fermeture dédié qui permet à l'utilisateur de fermer explicitement l'expérience. Si ce bouton est configuré et que l'utilisateur interagit avec lui, alors l'événement de fermeture sera déclenché. C'est un bon moment pour détruire le widget de votre page et mettre fin au cycle de vie du widget.

widget.onClose = function () {
   DigitaService.Widget.Destroy();
};


onFirstInteraction


Lorsque l'utilisateur interagit (touche/clic) pour la première fois avec l'application chargée.

widget.onFirstInteraction = function () {
   console.log("L'utilisateur a interagi avec l'application pour la première fois");
};


onRouteChange


Se produit lorsque l'application a changé de route à l'intérieur du widget. (Navigue entre les écrans). L'événement peut contenir ou non un objet de données en fonction du contexte.

widget.onRouteChange = function (event) {
   console.log(event.type) // “changement de route”
   console.log(event.data) // {} ou indéfini
   console.log("L'utilisateur a interagi avec l'application pour la première fois");
};


onScrollToTop


Se produit lorsque l'application essaie de faire défiler à nouveau le haut de la page. Peut être utilisé sur la page parente pour s'assurer que le défilement n'est pas déclenché (CORS) ou a besoin d'être ajusté. L'événement ne contient pas d'objet de données.

widget.onScrollToTop = function () {
   console.log("Défilement en haut de l'écran");
};


Métriques



Voici une liste des principales métriques qui peuvent être utilisées en fonction du type de jeu :

CléDescription
data.gameMetrics.CurrentAttemptLes tentatives restantes de l'utilisateur une fois qu'il a terminé le jeu.
data.gameMetrics.prizeIDL'ID du prix.
data.gameMetrics.prizeImageL'image du prix.
data.gameMetrics.prizeNameLe nom du prix.
data.gameMetrics.totalPossibleAttemptsLe nombre total de tentatives possibles.
data.gameMetrics.userWonVrai/faux en fonction du statut de l'utilisateur.
data.gameMetrics.scoreLe nombre total de points cumulés que cet utilisateur a obtenu en terminant le jeu.


Identifiants


CléDescription
data.credentials.isPreviewModeVérifie si le jeu est en mode prévisualisation.
data.credentials.projectIDL'ID du projet de l'application actuellement jouée.
data.credentials.projectLanguageLa langue du projet dans le widget (en, fr).
data.credentials.projectLanguageRegion(Sera supprimé bientôt.)
data.credentials.projectNameLe nom de l'application.
data.credentials.projectTypeLe type d'application (quiz, memory...).
data.credentials.publisherIDL'ID de l'éditeur.
data.credentials.sessionIDL'ID de session du joueur actuel.

Mis à jour le : 29/02/2024

Cet article a-t-il répondu à vos questions ?

Partagez vos commentaires

Annuler

Merci !