Este artículo también está disponible en:

Integración avanzada del código de integración HTML (widget) a través de la API

<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: 'widget-de-gamificacion',
               engine: 'https://apps.drimify.com/XBs15jKF/',
               fijo: false,
               altura:['auto'],
               urlCompartir: 'https://apps.drimify.com/XBs15jKF/',
               ancho: '100%',
           });
           widget.alListo = function (evento) {};
           widget.alCompletar = function (evento) {};
           widget.enPrimerInteraccion = function () {};
           widget.alCambiarRuta = function (evento) {};
           widget.alDesplazarHastaArriba = function () {};
           widget.alCerrar = function () {};
           widget.alError = function (eventoError) {};
           widget.cargar();
       });
   </script>
</head>
<body>
<div id="widget-de-gamificacion"></div>
</body>
</html>

Configuración

Crea un Widget pasando un objeto Opciones a la función Crear:

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

Opciones de Configuración

Obligatorio

Opción	Tipo	Descripción
opciones.elemento	cadena - HTMLElement	El widget se inyectará en este HTMLElement. Puede pasar acceso directo a un HTMLElement existente o proporcionar el ID de cadena para ese elemento. Si no proporciona esta propiedad, intentará encontrar un id "widget-de-digitaservice" en la página.
opciones.engine	cadena	La URL absoluta de la aplicación que se cargarán en el widget.

Opcional

Opción	Tipo	Predeterminado	Descripción
opciones.altura	cadena	auto	El widget tiene una altura predeterminada de cero antes de haber sido cargado. Puedes sobrescribir esto con un valor de marcador de posición para evitar saltos en la página dependiendo de dónde se use el widget en la página padre. El valor está en píxeles, como “600px”. Al usar opciones.fijo = true el valor de la altura se bloqueará al valor proporcionado introduciendo barras de desplazamiento.
opciones.autodesplazamiento	booleano	true	Dependiendo de la longitud del contenido del widget y la visualización del usuario, puede requerir que la página que contiene el widget requiera desplazamiento de la página anfitriona. El comportamiento predeterminado cuando un usuario está utilizando el Widget, es desplazar la página anfitriona hasta la parte superior del widget para ayudar en la usabilidad. Para desactivar esto, establezca autodesplazamiento en falso. Esta propiedad será falsa si opciones.fijo es verdad.
opciones.urlCompartir	cadena	La URL anfitriona que contiene el widget	Al usar Compartir en Redes Sociales, esta es la URL que las personas compartirán en Redes Sociales para llevarlos a su campaña. Si compartir es una cadena vacía, usará la página anfitriona (conteniendo el widget) como la URL.
opciones.fijo	booleano	falso	Normalmente el widget cambiará de tamaño automáticamente para ajustarse al contenido del motor y evitar las barras de desplazamiento. Si esto se establece en verdadero, entonces la altura del widget será persistente y no cambiará. Al usar esta opción, el valor de opciones.altura debería establecerse en algo diferente de “auto”. Si la altura del motor es mayor que el valor de altura, se utilizarán barras de desplazamiento para navegar.
opciones.ancho	cadena	“100%”	El ancho del widget. Se puede establecer hasta una medida de CSS como “%” o “px” por ejemplo.

Cargar

Una vez configurado un Widget, debes cargarlo. Puedes cargar el widget en cualquier momento.

Nota: Asegúrate de establecer cualquiera de los callbacks a continuación antes de cargar para que puedas capturar todos los eventos.

widget.cargar();

Callbacks de Eventos

alListo

Una vez que widget.cargar() ha sido llamado, esto cargará e inicializará el widget. Cuando el widget haya completado este proceso, invocará un callback alListo opcional.

widget.alListo = function (evento) {
   // cargado y listo para usar
   console.log(evento.tipo); // “listo”
   console.log(evento.datos); // {}
};

alError

Una vez que widget.cargar() ha sido llamado, esto cargará e inicializará el widget. Cualquier error fatal que ocurra después de ese punto invocará un callback alError opcional.

widget.alError = function (evento) {
   throw new Error(evento.mensaje);
};

alCompletar

Una vez que el juego ha sido completado y el usuario está mirando la última pantalla. También proporciona un objeto de datos describiendo lo que ocurrió en el juego.

Nota: si quieres actuar en esto, puedes querer dar un tiempo de espera dentro del callback para que el usuario tenga tiempo de leer la Pantalla Final ya que ocurre instantáneamente al alcanzar la última pantalla. También puedes usar alCerrar.

widget.alCompletar = function (evento) {
   console.log(evento.tipo); // “completado”
   console.log(evento.datos); // {}
   console.log("La puntuación de los usarios fue" + evento.datos.metricsDelJuego.puntuacion);
};

alRedimensionar

Ocurre cuando el Motor ha cambiado de tamaño, proporciona la altura como un valor en píxeles.

widget.alRedimensionar = function (evento) {
   console.log(evento.tipo); // “redimensionar”
   console.log(evento.datos); // {}
   console.log("Altura de la Aplicación:" + evento.datos.altura);
};

alCerrar

La aplicación puede estar configurada con un botón de cierre dedicado que permite al usuario cerrar implícitamente la experiencia. Si este botón está configurado y el usuario interactúa con él, entonces se despachará el evento de cierre. Este es un buen momento para destruir el widget de tu página y terminar el ciclo de vida del widget.

widget.alCerrar = function () {
   DigitaService.Widget.Destroy();
};

enPrimerInteraccion

Cuando el usuario interactúa (toca/click) con la aplicación cargada por primera vez.

widget.enPrimerInteraccion = function () {
   console.log("El usuario interactuó con la Aplicación por primera vez");
};

alCambiarRuta

Ocurre cuando la Aplicación ha cambiado de ruta dentro del widget. (Navega entre pantallas). El evento puede o no contener un objeto de datos dependiendo del contexto.

widget.alCambiarRuta = function (evento) {
   console.log(evento.tipo) // “cambioruta”
   console.log(evento.datos) // {} o indefinido
   console.log("El usuario interactuó con la Aplicación por primera vez");
};

alDesplazarHastaArriba

Ocurre cuando la Aplicación está intentando desplazarse de vuelta hasta la parte superior de la página. Se puede utilizar en la página padre para asegurarse de que el desplazamiento no se dispara (CORS) o necesita ser ajustado. El evento no contiene un objeto de datos.

widget.alDesplazarHastaArriba = function () {
   console.log("Desplazar Hasta Arriba");
};

Métricas

Aquí hay una lista de las métricas clave que se pueden utilizar dependiendo del tipo de juego:

Clave	Descripción
datos.metricsDelJuego.IntentosActuales	Los intentos del usuario una vez completado el juego.
datos.metricsDelJuego.idPremio	El ID del premio.
datos.metricsDelJuego.imagenPremio	La imagen del premio.
datos.metricsDelJuego.nombrePremio	El nombre del premio.
datos.metricsDelJuego.intentosTotalesPosibles	La cantidad total de intentos posibles.
datos.metricsDelJuego.usuarioGanó	verdadero/falso dependiendo del estado del usuario.
datos.metricsDelJuego.puntuacion	La cantidad total de puntos agregados con los que este usuario completa el juego.

Credenciales

Clave	Descripción
datos.credentials.modoPrevisualización	Verifica si el juego está en modo de vista previa.
datos.credentials.idProyecto	La id de la app del juego actual.
datos.credentials.idiomaProyecto	El idioma del proyecto en el widget (en, fr).
datos.credentials.nombreProyecto	El nombre de la app.
datos.credentials.tipoProyecto	El tipo de app (quiz, memorama...).
datos.credentials.idEditor	La id del editor.
datos.credentials.idSesión	La id de sesión del jugador actual.

Actualizado el: 18/04/2024

¿Este artículo te resultó útil?

¡Gracias!