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
Option | Type | Description |
---|---|---|
options.element | chaîne de caractères - HTMLElement | Le 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.engine | chaîne de caractères | L'URL absolue de l'application qui sera chargée dans le widget. |
Optionnel
Option | Type | Par défaut | Description |
---|---|---|---|
options.height | chaîne de caractères | auto | Le 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.autoscroll | booléen | vrai | Selon 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.sharingurl | chaîne de caractères | L'URL d'accueil contenant le widget | Lors 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.fixed | booléen | faux | Habituellement, 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.width | chaî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.CurrentAttempt | Les tentatives restantes 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 nombre total de tentatives possibles. |
data.gameMetrics.userWon | Vrai/faux en fonction du statut de l'utilisateur. |
data.gameMetrics.score | Le nombre total de points cumulés que cet utilisateur a obtenu en terminant le jeu. |
Identifiants
Clé | Description |
---|---|
data.credentials.isPreviewMode | Vérifie si le jeu est en mode prévisualisation. |
data.credentials.projectID | L'ID du projet de l'application actuellement jouée. |
data.credentials.projectLanguage | La langue du projet dans le widget (en, fr). |
data.credentials.projectLanguageRegion | (Sera supprimé bientôt.) |
data.credentials.projectName | Le nom de l'application. |
data.credentials.projectType | Le type d'application (quiz, memory...). |
data.credentials.publisherID | L'ID de l'éditeur. |
data.credentials.sessionID | L'ID de session du joueur actuel. |
Mis à jour le : 29/02/2024
Merci !