Cet article est aussi disponible en :

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

<html>
<head>
   <!-- Inclure les paquets -->
   <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

Requis

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

Optionnel

Option	Type	Défaut	Description
options.height	chaîne	auto	Le widget a une hauteur par défaut de zéro avant d'être chargé. Vous pouvez remplacer cela par une valeur de substitution pour éviter que la page saute en fonction de l'emplacement du widget sur la page parente. La valeur est en pixels comme “600px”. Lorsque options.fixed = true la valeur de la hauteur sera verrouillée à la valeur fournie, introduisant des barres de défilement.
options.autoscroll	booléen	true	Selon la longueur du contenu du widget et l'affichage de l'utilisateur, il peut s'avérer nécessaire que la page contenant le widget nécessite de défiler. Le comportement par défaut lorsque l'utilisateur utilise le Widget, est de faire défiler la page hôte jusqu'au haut du widget pour faciliter l'utilisation. Pour désactiver ceci, mettez autoscroll sur false. Cette propriété sera false si options.fixed est true.
options.sharingurl	chaîne	L'URL hébergeant le widget	Lors de l'utilisation du partage social, c'est l'URL que les gens partageront sur les réseaux sociaux pour les amener à votre campagne. Si le partage est une chaîne vide, il utilisera la page hébergeant (contenant le widget) comme URL.
options.fixed	booléen	false	Habituellement, le widget changera de taille automatiquement pour s'adapter au contenu de l'engine et éviter les barres de défilement. Si cela est réglé sur true, alors la hauteur du widget sera persistante et ne changera pas. Lorsque vous utilisez cette option, la valeur options.height devrait être réglée sur autre chose que “auto”. Si la hauteur de l'engine est plus grande que la valeur de hauteur, des barres de défilement seront utilisées pour naviguer.
options.width	chaîne	“100%”	La largeur du widget. Peut être réglée sur une mesure CSS telle que “%” ou “px” par exemple.

Chargement

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

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

widget.load();

Callbacks d'événement

onReady

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

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

onError

Une fois widget.load() appelé, cela chargera et initialisera le widget. Toute erreur fatale survenant après ce point invoquera un callback onError optionnel.

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

onComplete

Une fois le jeu terminé et que l'utilisateur regarde l'écran final. Il fournit également un objet de données décrivant ce qui s'est passé dans le jeu.

Remarque : si vous souhaitez 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 De Fin car cela se passe instantanément en atteignant le dernier écran. Vous pouvez également utiliser onClose.

widget.onComplete = function (event) {
   console.log(event.type); // “complete”
   console.log(event.data); // {}
   console.log("Le score des utilisateurs était de " + event.data.gameMetrics.score);
};

onResize

Se produit lorsque l'Engine a changé de taille, fournit la hauteur en valeur 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, alors l'événement de fermeture sera envoyé. 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/clique) avec l'application chargée pour la première fois.

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 dans le widget. (Navigue entre les écrans). L'événement peut ou non contenir un objet de données selon le contexte.

widget.onRouteChange = function (event) {
   console.log(event.type) // “routechange”
   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 retourner en 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 doit être ajusté. L'événement ne contient pas d'objet de données.

widget.onScrollToTop = function () {
   console.log("Défilement vers le Haut");
};

Métriques

Voici une liste des métriques clés qui peuvent être utilisées selon le type de jeu :

Clé	Description
data.gameMetrics.CurrentAttempt	Les tentatives de l'utilisateur une fois qu'il a terminé le jeu.
data.gameMetrics.prizeID	L'ID du prix.
data.gameMetrics.prizeImage	L'image du prix.
data.gameMetrics.prizeName	Le nom du prix.
data.gameMetrics.totalPossibleAttempts	Le montant total des tentatives possibles.
data.gameMetrics.userWon	vrai/faux selon le statut de l'utilisateur.
data.gameMetrics.score	Le montant total des points agrégés avec lesquels cet utilisateur termine le jeu.

Identifiants

Clé	Description
data.credentials.isPreviewMode	Vérifie si le jeu est en mode prévisualisation.
data.credentials.projectID	L'id de l'application actuelle 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, mémoire...).
data.credentials.publisherID	L'ID de l'éditeur.
data.credentials.sessionID	L'ID de session du joueur actuel.

Mis à jour le : 18/04/2024

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

Merci !