Cet article est aussi disponible en :

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

<html>
<head>
   <!-- Inclure les bundles -->
   <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 Options à la fonction Create :

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

Options de Configuration

Obligatoire

Option	Type	Description
options.element	string - HTMLElement	Le widget sera injecté dans cet élément HTMLElement. Vous pouvez passer un accès direct à un HTMLElement existant ou fournir l'ID chaîne pour cet élément. Si vous ne fournissez pas cette propriété, il essaiera de trouver un identifiant “digitaservice-widget” sur la page.
options.engine	string	L'URL absolue de l'application qui sera chargée dans le widget.

Facultatif

Option	Type	Défaut	Description
options.height	string	auto	Le widget a une hauteur par défaut de zéro avant d'être chargé. Vous pouvez remplacer cela par une valeur de remplacement pour éviter les sauts de page en fonction de l'emplacement du widget sur la page parente. La valeur est en pixels, comme “600px”. Lors de l'utilisation de options.fixed = true, la valeur de la hauteur sera verrouillée sur la valeur fournie en introduisant des barres de défilement.
options.autoscroll	boolean	true	En fonction de la longueur du contenu du widget et de l'affichage de l'utilisateur, il peut être nécessaire que la page contenant le widget nécessite un défilement de la page hôte. Le comportement par défaut lorsqu'un utilisateur utilise le Widget, est de faire défiler la page hôte vers le haut du widget pour améliorer l'utilisabilité. Pour désactiver cela, réglez autoscroll sur false. Cette propriété sera false si options.fixed est true.
options.sharingurl	string	L'URL hébergeant contenant le widget	Lors de l'utilisation du partage social, c'est l'URL que les personnes partageront sur les réseaux sociaux pour les amener à votre campagne. Si le partage est une chaîne vide, il utilisera la page d'hébergement (contenant le widget) comme URL.
options.fixed	boolean	false	Généralement, le widget changera de taille automatiquement pour s'adapter au contenu du moteur et éviter les barres de défilement. Si cette option est réglée sur true, alors la hauteur du widget restera fixe 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 supérieure à la valeur de hauteur, des barres de défilement seront utilisées pour naviguer.
options.width	string	“100%”	La largeur du widget. Peut être définie à 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.

Remarque : Assurez-vous de configurer tous les rappels ci-dessous avant de charger afin de pouvoir capturer tout événement.

```widget.load();```# Rappels d'Événements

onReady

Une fois que widget.load() a été appelé, cela chargera et initialisera le widget. Lorsque le widget aura terminé ce processus, il exécutera une callback optionnelle onReady.

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

onError

Une fois que widget.load() a été appelé, cela chargera et initialisera le widget. Toutes les erreurs fatales survenant après ce point déclencheront une callback optionnelle onError.

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

onComplete

Une fois le jeu terminé et l'utilisateur sur le dernier écran. Cela fournit également un data object décrivant ce qui s'est passé dans le jeu.

Note : si vous voulez agir à ce moment-là, il peut être nécessaire de définir un délai dans la callback afin que l'utilisateur ait le temps de lire l'Écran De Fin, car cela se produit instantanément lorsqu'on atteint le dernier écran. Vous pouvez aussi utiliser onClose.

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

onResize

Se produit lorsque le moteur a redimensionné, fournit la hauteur en valeur de pixels.

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, alors l'événement de fermeture sera déclenché. C'est un bon moment pour détruire le widget de votre page et terminer le 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 au sein du widget. (Navigation entre les écrans). L'événement peut, ou non, contenir un data object selon le contexte.

widget.onRouteChange = function (event) {
   console.log(event.type) // “routechange”
   console.log(event.data) // {} ou undefined
   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 retour en haut de la page. Peut être utilisé sur la page parent pour s'assurer que le défilement n'est pas déclenché (CORS) ou doit être ajusté. L'événement ne contient pas de data object.

```widget.onScrollToTop = function () {
console.log("Défilement en haut");
};```# Metrics

Voici une liste des principaux indicateurs pouvant être utilisés selon le type de jeu :

Clé	Description
data.gameMetrics.CurrentAttempt	Les tentatives du joueur une fois le jeu terminé.
data.gameMetrics.prizeID	L'ID du prix.
data.gameMetrics.prizeImage	L'image du prix.
data.gameMetrics.prizeName	Le nom du prix.
data.gameMetrics.prizeRef	La référence du prix.
data.gameMetrics.totalPossibleAttempts	Le nombre total de tentatives possibles.
data.gameMetrics.userWon	true/false selon le statut du joueur.
data.gameMetrics.score	Le nombre total de points accumulés par le joueur à la fin du jeu.

Credentials

Clé	Description
data.credentials.isPreviewMode	Vérifie si le jeu est en mode prévisualisation.
data.credentials.projectID	L'identifiant de l'application actuellement jouée.
data.credentials.projectLanguage	La langue du projet dans le widget (en, fr).
data.credentials.projectName	Le nom de l'application.
data.credentials.projectType	Le type d'application (quiz, memory...).
data.credentials.publisherID	L'identifiant de l'éditeur.
data.credentials.sessionID	L'identifiant de la session du joueur actuel.

Mis à jour le : 01/08/2024

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

Merci !