Artículos sobre: Desarrolladores y API
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

Código de ejemplo del widget



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

   <!-- Configura el widget en la carga de 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



Requisitos



OpciónTipoDescripción
options.elementstring - HTMLElementEl widget se inyectará en este HTMLElement. Puedes pasar un acceso directo a un HTMLElement existente o proporcionar el ID de cadena para ese elemento. Si no proporcionas esta propiedad, intentará encontrar un id de "digitaservice-widget" en la página.
options.enginestringLa URL absoluta a la aplicación que se cargará en el widget.


Opcionales



OpciónTipoPredeterminadoDescripción
options.heightstringautoEl widget tiene una altura predeterminada de cero antes de que se haya cargado. Puede anular 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 es en píxeles como "600px". Cuando se usa options.fixed = true el valor de la altura se bloqueará al valor proporcionado introduciendo barras de desplazamiento.
options.autoscrollbooleantrueDependiendo 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 de alojamiento. El comportamiento predeterminado cuando un usuario está usando el Widget, es desplazar la página de alojamiento hasta la parte superior del widget para ayudar a la usabilidad. Para desactivar esto, establece autoscroll en false. Esta propiedad será falsa si options.fixed es verdadero.
options.sharingurlstringLa URL de alojamiento que contiene el widgetCuando se utiliza el compartimiento social, esta es la URL que las personas compartirán en las redes sociales para llevarlos a tu campaña. Si compartir es una cadena vacía, utilizará la página de alojamiento (que contiene el widget) como la URL.
options.fixedbooleanfalsePor lo general, 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 utilizar esta opción, el valor options.height debe ser establecido en cualquier cosa distinta de “auto”. Si la altura del motor es mayor que el valor de la altura, se usarán barras de desplazamiento para navegar.
options.widthstring“100%”El ancho del widget. Se puede configurar a una medida CSS como “%” o “px”, por ejemplo.


Load



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

Nota: Asegúrate de configurar cualquiera de las devoluciones de llamada a continuación antes de cargar para que puedas capturar todos los eventos.

widget.load();


Devoluciones de llamada de evento



onReady


Una vez que se ha llamado a widget.load(), esto cargará e inicializará el widget. Cuando el widget ha completado este proceso, invocará una devolución de llamada opcional onReady.

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


onError


Una vez que se ha llamado a widget.load(), esto cargará e inicializará el widget. Cualquier error fatal que ocurra después de ese punto invocará una devolución de llamada opcional onError.

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


onComplete


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

Nota: si quieres actuar en esto, puede que quieras dar un tiempo de espera dentro de la devolución de llamada para que el usuario tenga tiempo para 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, proporciona la altura como un 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 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 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 (tocar/hacer 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 desplazarse de nuevo hasta la parte superior de la página. Se puede usar en la página principal para asegurarse de que el desplazamiento no se dispara (CORS) o necesita ser ajustado. El evento no contiene un objeto de datos.

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


Métricas



Aquí está una lista de las métricas clave que pueden ser utilizadas dependiendo del tipo de juego:

KeyDescripción
data.gameMetrics.CurrentAttemptLos intentos del usuario una vez que ha completado el juego.
data.gameMetrics.prizeIDEl ID del premio.
data.gameMetrics.prizeImageLa imagen del premio.
data.gameMetrics.prizeNameEl nombre del premio.
data.gameMetrics.totalPossibleAttemptsLa cantidad total de intentos posibles.
data.gameMetrics.userWonverdadero/falso dependiendo del estado del usuario.
data.gameMetrics.scoreLa cantidad total de puntos acumulados que acumuló este usuario al completar el juego.


Credenciales


KeyDescripción
data.credentials.isPreviewModeVerifica si el juego está en modo de vista previa.
data.credentials.projectIDLa id del proyecto de la aplicación actual jugada.
data.credentials.projectLanguageEl idioma del proyecto en el widget (en, fr).
data.credentials.projectLanguageRegion(Se eliminará pronto).
data.credentials.projectName El nombre de la aplicación.
data.credentials.projectTypeEl tipo de aplicación (quiz, memoria...).
data.credentials.publisherIDLa id del publicador.
data.credentials.sessionIDLa id de la sesión del jugador actual.

Actualizado el: 09/02/2024

¿Este artículo te resultó útil?

Comparte tu opinión

Cancelar

¡Gracias!