Código de ejemplo del widget

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

   <!-- Configurar el widget al cargar la página -->
   <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>

Configuración

Crea un widget pasando un objeto de opciones a la función Create:

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

Opciones de configuración

Obligatorias

Opcionales

Carga

Una vez configurado el widget, debes cargarlo. Puedes hacerlo en cualquier momento.

Nota: Configura las funciones de callback que necesites de las que se indican a continuación antes de cargar el widget para poder capturar todos los eventos.

widget.load();

Funciones de callback de eventos

onReady

Al llamar a widget.load(), el widget se carga y se inicializa. Cuando termina este proceso, se ejecuta la función de callback opcional onReady.

Nota: onReady se activa antes de que aparezca la primera pantalla. El primer evento onRouteChange indica que el participante ya puede ver contenido. Si la experiencia no puede iniciarse, onReady no se activa y se llama a onError en su lugar.

widget.onReady = function (event) {
   // Cargado y listo para usar
   console.log(event.type); // “ready”
   console.log(event.data); // {}
};

onError

Al llamar a widget.load(), el widget se carga y se inicializa. Cualquier error crítico que se produzca a partir de ese momento ejecutará la función de callback opcional onError.

widget.onError = function (event) {
   console.log(event.data.message); // Por ejemplo, "ERR_15"
};

onComplete

Se activa cuando el usuario termina el juego y llega a la pantalla final. También proporciona un objeto de datos que describe lo ocurrido durante el juego.

Nota: Si quieres ejecutar una acción en respuesta a este evento, conviene añadir un tiempo de espera dentro de la función de callback para que el usuario pueda leer la pantalla final, ya que el evento se activa en cuanto llega a ella. También puedes utilizar onClose.

widget.onComplete = function (event) {
   console.log(event.type); // “complete”
   console.log(event.data); // {}
   console.log("La puntuación del usuario es: " + event.data.gameMetrics.score);
};

onResize

Se activa cuando cambia el tamaño de la aplicación y proporciona la altura en píxeles.

widget.onResize = function (event) {
   console.log(event.type); // “resize”
   console.log(event.data); // {}
   console.log("Altura de la aplicación: " + event.data.height);
};

onFirstInteraction

Se activa cuando el usuario interactúa por primera vez con la aplicación cargada, ya sea tocando la pantalla o haciendo clic.

widget.onFirstInteraction = function () {
   console.log("El usuario ha interactuado con la aplicación por primera vez");
};

onRouteChange

Se activa cuando la aplicación cambia de ruta dentro del widget, es decir, cuando se pasa de una pantalla a otra. El evento puede incluir un objeto de datos o no, según el contexto.

widget.onRouteChange = function (event) {
   console.log(event.type) // “routechange”
   console.log(event.data) // {} o undefined
   console.log("El usuario ha pasado a una nueva pantalla");
};

onScrollToTop

Se activa cuando la aplicación intenta volver a la parte superior de la página. Puede utilizarse en la página que contiene el widget para comprobar si el desplazamiento no se ha ejecutado debido a CORS o si es necesario ajustarlo. El evento no incluye ningún objeto de datos.

widget.onScrollToTop = function () {
   console.log("Desplazamiento a la parte superior");
};

Métricas

Esta es una lista de las principales métricas disponibles según el tipo de juego:

Credenciales

Gestión de errores

Hay dos formas principales de detectar errores y obtener información sobre los problemas que se producen en el widget:

Función de callback onError

La función de callback onError captura los errores críticos que impiden que la experiencia se inicie o se recupere. El código de error se encuentra en event.data.message. En estos casos, onReady no se activa.

widget.onError = function (event) {
    if (event.data && typeof event.data.message !== 'undefined') {
        switch (event.data.message) {
            default:
                // No hacer nada
                break;
            case 'ERR_04':
                console.log("No quedan visualizaciones disponibles");
                break;
            case 'ERR_05':
                console.log("Error de seguridad");
                break;
            case 'ERR_07':
                console.log("La aplicación no está publicada");
                break;
            case 'ERR_08':
                console.log("La aplicación Premium no está disponible");
                break;
            case 'ERR_09':
                console.log("No se ha detectado el UID de sesión");
                break;
            case 'ERR_10':
                console.log("El UID de sesión no está autorizado");
                break;
            case 'ERR_13':
                console.log("La llamada SSO ha fallado");
                break;
            case 'ERR_14':
                console.log("El idioma no está disponible");
                break;
            case 'ERR_15':
                console.log("La página no existe");
                break;
            case 'ERR_17':
                console.log("La configuración de SSO no es válida");
                break;
            case 'ERR_21':
                console.log("No hay ningún juego asignado al Combo o al Dynamic Path");
                break;
        }
    }
};

Función de callback onRouteChange

La función de callback onRouteChange se activa cuando la aplicación pasa de una pantalla a otra dentro del widget. Resulta útil para detectar errores relacionados con el estado de la aplicación y la disponibilidad del contenido.

widget.onRouteChange = function (event) {
    if (event.data && typeof event.data.errorCode !== 'undefined') {
        switch (event.data.errorCode) {
            default:
                // No hacer nada
                break;
            case 'ERR_02':
                console.log("El contenido aún no está disponible");
                break;
            case 'ERR_03':
                console.log("El contenido ha caducado");
                break;
            case 'ERR_04':
                console.log("No quedan visualizaciones disponibles");
                break;
            case 'ERR_16':
                console.log("No hay preguntas disponibles");
                break;
            case 'ERR_18':
                console.log("Entre dos periodos de activación");
                break;
            case 'ERR_19':
                console.log("Fuera del horario de apertura");
                break;
        }
    }
};

errorCode solo está presente en estas pantallas de indisponibilidad. Otras pantallas que impiden jugar al participante (porque ya ha jugado, por restricciones de acceso o por formularios rechazados) no incluyen errorCode: puedes identificarlas por el nombre de pantalla que aparece en event.data.screen.

Para consultar la lista completa de nombres de pantalla, el orden de los eventos durante la carga, el comportamiento de session_uid y los tiempos de espera de carga, consulta Ciclo de vida del widget y gestión de errores.

Obtener información del usuario en la pantalla final (onRouteChange)

Si utilizas Dynamic Path™, Advent Calendar o Combo™, puedes obtener información del usuario al finalizar cualquier juego mediante la función de callback onRouteChange.

Este método es necesario porque el evento estándar onComplete solo se activa cuando finaliza toda la experiencia de varias etapas, no cuando termina cada uno de los juegos que la componen.

Así, tu sistema puede recibir todos los resultados del juego (a través de gameInfo) cuando el usuario llega a la pantalla final de la experiencia.

Configuración

Después de crear el widget:

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

Añade el detector de eventos onRouteChange:

widget.onRouteChange = function (event) {
    console.log(event.type);   // "routechange"
    console.log(event.data);   // { ... } o undefined
    console.log("El usuario ha pasado a una nueva pantalla");
};

```# Detección del fin de la pantalla

Cuando el usuario llegue al fin de la pantalla del juego, el widget devolverá una ruta que coincida con:

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

Sustituye `YOUR_APP_ID` por el ID real de tu aplicación.

# Obtención de la información del usuario (`gameInfo`)

Una vez detectado el fin de la pantalla, puedes extraer los datos:

event.data.gameInfo

`gameInfo` contiene un **array con información del usuario**, que puede incluir:
* Datos introducidos por el usuario
* Resultados o puntuaciones del juego
* Campos recopilados durante la experiencia

Estos datos solo están disponibles al llegar al fin de la pantalla en las experiencias utilizadas dentro de **Dynamic Path**, **Advent Calendar** o **Combo**.

# Ejemplo

widget.onRouteChange = function (event) {
if (event.data && event.data.screen === 'screen_end-12345') {
const datos = event.data.gameInfo;
console.log("Información del fin de la pantalla:", data);
// Procesa o envía esta información según tus necesidades
}
};

Actualizado el: 29/10/2026