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>
   <!-- Incluye los bundles -->
   <script src="https://cdn-apps.drimify.com/prod/widget/index.js" type="text/javascript"></script>

   <!-- Configura 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/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>

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

Obligatorio

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

Opcional

Opción	Tipo	Predeterminado	Descripción
options.height	string	auto	El widget tiene una altura predeterminada de cero antes de que se haya cargado. Puedes sobrescribir esto con un valor de marcador de posición para evitar saltos de página dependiendo de dónde se use el widget en la página principal. El valor está en píxeles, por ejemplo, “600px”. Cuando uses options.fixed = true el valor de la altura se bloqueará en el valor proporcionado introduciendo barras de desplazamiento.
options.autoscroll	boolean	true	Dependiendo de la longitud del contenido del widget y la pantalla del usuario, puede ser necesario que la página que contiene el widget requiera desplazamiento de la página anfitriona. El comportamiento predeterminado cuando un usuario usa el Widget es desplazar la página anfitriona hasta la parte superior del widget para facilitar la usabilidad. Para desactivar esto, configura autoscroll en false. Esta propiedad será false si options.fixed es true.
options.sharingurl	string	La URL de la página anfitriona que contiene el widget	Al usar el Compartir en Redes Sociales, esta es la URL que las personas compartirán en las Redes Sociales para llevarlas a tu campaña. Si sharing está en blanco, usará la página anfitriona (que contiene el widget) como la URL.
options.fixed	boolean	false	Normalmente el widget cambiará de tamaño automáticamente para ajustar el contenido del motor y evitar barras de desplazamiento. Si esto está configurado en true, entonces la altura del widget será persistente y no cambiará. Al usar esta opción, el valor options.height debe configurarse en cualquier valor que no sea “auto”. Si la altura del motor es mayor que el valor de altura, se usarán barras de desplazamiento para navegar.
options.width	string	“100%”	El ancho del widget. Se puede configurar usando una medida 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 configurar cualquiera de los callbacks a continuación antes de cargar para que puedas capturar todos los eventos.

```widget.load();```# Event Callbacks

onReady

Una vez se haya llamado a widget.load(), esto cargará e iniciará el widget. Cuando el widget haya completado este proceso, invocará un callback opcional onReady.

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

onError

Una vez se haya llamado a widget.load(), esto cargará e iniciará el widget. Cualquier error fatal que ocurra después de ese punto invocará un callback opcional onError.

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

onComplete

Una vez el juego se haya completado y el usuario esté mirando la pantalla final. También proporciona un objeto de datos que describe lo que ocurrió en el juego.

Nota: si quieres actuar sobre esto, quizás quieras 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 llegar a la última pantalla. También puedes usar onClose.

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

onResize

Ocurre cuando el Motor se ha redimensionado, proporcionando la altura en valor de 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);
};

onClose

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

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

onFirstInteraction

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

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

onRouteChange

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.onRouteChange = function (event) {
   console.log(event.type); // “routechange”
   console.log(event.data); // {} o undefined
   console.log("El usuario interactuó con la Aplicación por primera vez");
};

onScrollToTop

Ocurre cuando la Aplicación intenta hacer scroll hasta la parte superior de la página. Se puede usar en la página principal para asegurarse que el scroll no se dispare (CORS) o necesita ser ajustado. El evento no contiene un objeto de datos.

```widget.onScrollToTop = function () {
console.log("Scroll hasta la parte superior");
};```# Métricas

Aquí tienes una lista de las métricas clave que se pueden utilizar según el tipo de juego:

Clave	Descripción
data.gameMetrics.CurrentAttempt	Los intentos del usuario una vez ha completado el juego.
data.gameMetrics.prizeID	La ID del premio.
data.gameMetrics.prizeImage	La imagen del premio.
data.gameMetrics.prizeName	El nombre del premio.
data.gameMetrics.prizeRef	La referencia del premio.
data.gameMetrics.totalPossibleAttempts	La cantidad total de intentos posibles.
data.gameMetrics.userWon	true/false dependiendo del estado del usuario.
data.gameMetrics.score	La cantidad total de puntos acumulados con los que este usuario completa el juego.

Credenciales

Clave	Descripción
data.credentials.isPreviewMode	Comprueba si el juego está en modo vista previa.
data.credentials.projectID	El ID de la app actual jugada.
data.credentials.projectLanguage	El idioma del proyecto en el widget (en, fr).
data.credentials.projectName	El nombre de la app.
data.credentials.projectType	El tipo de app (quiz, memory...).
data.credentials.publisherID	El ID del publicador.
data.credentials.sessionID	El ID de la sesión del jugador actual.

Actualizado el: 01/08/2024

¿Este artículo te resultó útil?

¡Gracias!