Cet article est aussi disponible en :

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

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

   <!-- Setup the widget on page load -->
   <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);

Configuration de l'Options

Obligatoires

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

Optionnelles

Option	Type	Par défaut	Description
options.height	string	auto	Avant son chargement, le widget a une hauteur par défaut de zéro. Vous pouvez remplacer cela par une valeur de substitution pour éviter les sauts de page selon l'emplacement du widget dans la page parente. La valeur est en pixels, comme “600px”. Si vous utilisez "options.fixed = true", la valeur de la hauteur sera verrouillée à la valeur fournie, introduisant des barres de défilement.
options.autoscroll	boolean	true	Selon la longueur du contenu du widget et 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 jusqu'au haut du widget pour faciliter l'utilisation. Pour désactiver cela, réglez l'autoscroll sur "fasle". Cette propriété sera fausse si "options.fixed" est "true".
options.sharingurl	string	L'URL hôte contenant le widget	Lors de l'utilisation de l'option de Partage, 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 hôte (contenant le widget) comme URL.
options.fixed	boolean	false	Habituellement, le widget changera automatiquement de taille pour s'adapter au contenu de l'application et éviter les barres de défilement. Si cela est défini sur "true", alors la hauteur du widget sera permanente et ne changera pas. Lors de l'utilisation de cette option, la valeur "options.height" doit être définie sur autre chose que “auto”. Si la hauteur de l'application est supérieure à la valeur "hauteur", des barres de défilement seront utilisées pour naviguer.
options.width	string	“100%”	La largeur du widget. Peut être définie 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.

Remarque : Assurez-vous de configurer l'un des callbacks ci-dessous avant de charger afin de pouvoir attraper tous les événements.

widget.load();

Event Callbacks

onReady

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

widget.onReady = function (event) {
   // loaded and ready to use
   console.log(event.type); // “ready”
   console.log(event.data); // {}
};

onError

Une fois "widget.load()" appelé, cela chargera et initialisera le widget. Toutes erreurs fatales survenant après ce point invoqueront un rappel "onError" optionnel.

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

onComplete

Une fois que le jeu est terminé et que l'utilisateur regarde l'écran de fin. L'application fournit également un "data object" décrivant ce qui s'est passé dans le jeu.

Remarque : si vous souhaitez agir sur ce point, vous pouvez donner un délai d'attente dans le rappel afin que l'utilisateur ait le temps de lire l'écran de fin, car cela se produit instantanément lorsque le dernier écran est atteint. Vous pouvez également utiliser "onClose".

widget.onComplete = function (event) {
   console.log(event.type); // “complete”
   console.log(event.data); // {}
   console.log("Users Score was" + event.data.gameMetrics.score);
};

onResize

Se produit lorsque l'application a été redimensionné et fournit la hauteur en valeur de pixel.

widget.onResize = function (event) {
   console.log(event.type); // “resize”
   console.log(event.data); // {}
   console.log("Application Height:" + 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 le 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 (toucher/cliquer) avec l'application chargée pour la première fois.

widget.onFirstInteraction = function () {
   console.log("User interacted with the Application for the first time");
};

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) // {} or undefined
   console.log("User interacted with the Application for the first time");
};

onScrollToTop

Se produit lorsque l'Application essaie de revenir 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("Scroll To Top");
};

Métriques

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

Key	Description
data.gameMetrics.CurrentAttempt	Les tentatives de l'utilisateur une fois qu'il a terminé le jeu.
data.gameMetrics.prizeID	L'ID du gain.
data.gameMetrics.prizeImage	L'image du gain.
data.gameMetrics.prizeName	Le nom du gain.
data.gameMetrics.totalPossibleAttempts	Le nombre total de tentatives possibles.
data.gameMetrics.userWon	"true/false" selon le statut de l'utilisateur.
data.gameMetrics.score	Le montant total de points cumulés avec lequel cet utilisateur termine le jeu.

Identifiants

Key	Description
data.credentials.isPreviewMode	Vérifiez si le jeu est en mode aperçu.
data.credentials.projectID	L'ID du projet de l'application actuellement jouée.
data.credentials.projectLanguage	La langue du projet dans le widget (français, anglais).
data.credentials.projectLanguageRegion	(Sera bientôt supprimé.)
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'ID de session du joueur actuel.

Mis à jour le : 16/11/2023

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

Merci !