Code d'exemple de widget

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

   <!-- Configurez 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/Rf6aGmBR/',
               fixed: false,
               height:['auto'],
               sharingurl: 'https://apps.drimify.com/Rf6aGmBR/',
               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

Optionnel

Charger

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 callbacks ci-dessous avant de charger afin que vous puissiez capturer tout événement.

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 optionnel 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. Tout erreur fatale survenant après ce point invoquera un callback optionnel onError.

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

onComplete

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

Remarque : si vous souhaitez agir sur cela, vous pourriez envisager d'utiliser 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 lors de l'atteinte du 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 était" + event.data.gameMetrics.score);
};

onResize

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

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

onFirstInteraction

Quand l'utilisateur interagit (touche/clic) 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 undefined
   console.log("L'utilisateur a navigué vers un nouvel écran");
};

onScrollToTop

Se produit lorsque l'application essaie de faire défiler vers 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 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 principales métriques qui peuvent être utilisées selon le type de jeu :

Informations d'identification

Gestion des erreurs

Il existe deux façons principales de détecter les erreurs et de récupérer des informations concernant les problèmes survenant dans le widget :

Callback onError

Le callback onError capture toutes les erreurs fatales qui se produisent après le chargement du widget. Cela peut être utile pour identifier quand une page n'existe pas ou si un échec critique survient.

widget.onError = function (event) {
    if (typeof event.data.message !== 'undefined') {
        switch (event.data.message) {
            default:
                // Ne rien faire
                break;
            case 'ERR_15':
                console.log("Page inexistante");
                break;
        }
    }
};

Callback onRouteChange

Le callback onRouteChange est déclenché lorsque l'application navigue entre différents écrans à l'intérieur du widget. Cela est utile pour suivre les erreurs liées à l'état de l'application et à la disponibilité du contenu.

widget.onRouteChange = function (event) {
    if (typeof event.data.errorCode !== 'undefined') {
        switch (event.data.errorCode) {
            default:
                // Ne rien faire
                break;
            case 'ERR_01':
                console.log("Aucun forfait disponible");
                break;
            case 'ERR_02':
                console.log("Contenu pas encore disponible");
                break;
            case 'ERR_03':
                console.log("Contenu expiré");
                break;
            case 'ERR_04':
                console.log("Plus de vues");
                break;
            case 'ERR_05':
                console.log("Erreur de sécurité");
                break;
            case 'ERR_07':
                console.log("Application non publiée");
                break;
            case 'ERR_08':
                console.log("Application premium non disponible");
                break;
            case 'ERR_09':
                console.log("Session Uid non détectée");
                break;
            case 'ERR_10':
                console.log("Session Uid déjà utilisée");
                break;
            case 'ERR_11':
                console.log("Plan non activé");
                break;
            case 'ERR_12':
                console.log("Mauvaises données reçues");
                break;
            case 'ERR_13':
                console.log("Échec de l'appel SSO");
                break;
            case 'ERR_14':
                console.log("Langue indisponible");
                break;
        }
    }
};

En utilisant à la fois onError et onRouteChange, vous pouvez suivre et gérer efficacement les problèmes qui pourraient survenir dans le widget, assurant ainsi une meilleure expérience utilisateur.

Récupération des informations de l'utilisateur à l'Écran de Fin (onRouteChange)

En utilisant Dynamic Path™, Advent Calendar, ou Combo™, vous pouvez récupérer les informations utilisateur à la fin de tout jeu via le callback onRouteChange.

Cette méthode est nécessaire car l'événement standard onComplete ne se déclenche qu'une fois l'expérience multi-étapes entièrement terminée, et non dès que chaque jeu intégré se termine.

Cela permet à votre système de recevoir les résultats complets du jeu (via gameInfo) lorsque l'utilisateur atteint l'écran de fin de l'expérience.

Configuration

Après avoir créé votre widget :

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

Ajoutez l'écouteur onRouteChange :

widget.onRouteChange = function (event) {
    console.log(event.type);   // "routechange"
    console.log(event.data);   // { ... } ou undefined
    console.log("L'utilisateur a navigué vers un nouvel écran");
};

Détection de l'Écran de Fin

Quand l'utilisateur atteint l'écran de fin du jeu, le widget retournera une route correspondante :

event.data.screen === 'screen_end-VOTRE_APP_ID'

Remplacez VOTRE_APP_ID par l'ID réel de votre application.

Récupération des informations de l'utilisateur (gameInfo)

Une fois l'écran de fin détecté, vous pouvez extraire les données :

event.data.gameInfo

gameInfo contient un tableau des informations utilisateur, qui peut inclure :

• Données saisies par l'utilisateur
• Résultats ou scores du jeu
• Champs collectés durant l'expérience

Cette charge utile est seulement disponible sur l'écran de fin pour les expériences utilisées dans Dynamic Path, Advent Calendar, ou Combo.

Exemple

widget.onRouteChange = function (event) {
    if (event.data && event.data.screen === 'screen_end-12345') {
        const data = event.data.gameInfo;
        console.log("Informations sur l'écran de fin :", data);
        // Traiter ou transférer ces informations selon les besoins
    }
};

Mis à jour le : 02/10/2026