Questo articolo è disponibile anche in:

Integrazione avanzata del codice di integrazione HTML (widget) tramite l'API

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

   <!-- Configura il widget al caricamento della pagina -->
   <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>

Configurazione

Crea un Widget passando un oggetto Opzioni alla funzione di Creazione:

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

Opzioni di configurazione

Obbligatorie

Opzione	Tipo	Descrizione
options.element	stringa - HTMLElement	Il widget verrà iniettato in questo elemento HTML. Puoi passare l'accesso diretto a un elemento HTML esistente o fornire l'ID della stringa per tale elemento. Se non fornisci questa proprietà, tenterà di trovare un ID “digitaservice-widget” nella pagina.
options.engine	stringa	L'URL assoluto all'applicazione che verrà caricata nel widget.

Facoltative

Opzione	Tipo	Default	Descrizione
options.height	stringa	auto	Il widget ha un'altezza di default pari a zero prima di essere caricato. Puoi sovrascrivere questo con un valore segnaposto per evitare salti di pagina a seconda di dove il widget è utilizzato nella pagina principale. Il valore è in pixel come “600px”. Quando si utilizza options.fixed = true il valore dell'altezza sarà bloccato al valore fornito introducendo barre di scorrimento.
options.autoscroll	booleano	vero	A seconda della lunghezza del contenuto del widget e della visualizzazione dell'utente, potrebbe essere necessario che la pagina che ospita il widget richieda lo scorrimento della pagina ospitante. Il comportamento predefinito quando un utente sta utilizzando il Widget, è di far scorrere la pagina ospitante in cima al widget per facilitarne l'uso. Per disabilitare ciò, impostare autoscroll su falso. Questa proprietà sarà falsa se options.fixed è vero.
options.sharingurl	stringa	L'URL che ospita il widget	Quando si utilizza la condivisione sociale, questo è l'URL che le persone condivideranno sui social media per portarle alla tua campagna. Se la condivisione è una stringa vuota, verrà utilizzata la pagina ospitante (contenente il widget) come URL.
options.fixed	booleano	falso	Di solito il widget cambierà dimensione automaticamente per adattarsi al contenuto dell'engine ed evitare le barre di scorrimento. Se impostato su vero, l'altezza del widget sarà persistente e non cambierà. Quando si utilizza questa opzione, il valore options.height dovrebbe essere impostato su qualcosa di diverso da “auto”. Se l'altezza dell'engine è maggiore del valore dell'altezza, verranno utilizzate le barre di scorrimento per navigare.
options.width	stringa	“100%”	La larghezza del widget. Può essere impostata come una misura CSS come “%” o “px” ad esempio.

Caricare

Una volta configurato un Widget, devi caricarlo. Puoi caricare il widget in qualsiasi momento.

Nota: Assicurati di impostare uno dei callback sottostanti prima di caricare in modo da poter catturare tutti gli eventi.

widget.load();

Callback degli eventi

onReady

Una volta chiamato widget.load(), questo caricherà e inizializzerà il widget. Quando il widget ha completato questo processo, verrà invocato un callback opzionale onReady.

widget.onReady = function (event) {
   // caricato e pronto all'uso
   console.log(event.type); // “pronto”
   console.log(event.data); // {}
};

onError

Una volta chiamato widget.load(), questo caricherà e inizializzerà il widget. Qualsiasi errore fatale che si verifica dopo quel punto invocherà un callback opzionale onError.

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

onComplete

Una volta che la partita è stata completata e l’utente sta guardando l'ultima schermata. Fornisce anche un oggetto dati che descrive cosa è avvenuto nella partita.

Nota: se vuoi agire su questo, potresti voler dare un timeout all'interno del callback in modo che l'utente abbia tempo di leggere la Schermata Finale poiché avviene istantaneamente al raggiungimento dell'ultima schermata. Puoi anche utilizzare onClose.

widget.onComplete = function (event) {
   console.log(event.type); // “completo”
   console.log(event.data); // {}
   console.log("Il punteggio degli utenti era" + event.data.gameMetrics.score);
};

onResize

Si verifica quando l'Engine ha ridimensionato, fornisce l'altezza come valore in pixel.

widget.onResize = function (event) {
   console.log(event.type); // “ridimensiona”
   console.log(event.data); // {}
   console.log("Altezza dell'applicazione:" + event.data.height);
};

onClose

L'applicazione può essere configurata con un pulsante di chiusura dedicato che consente all'utente di chiudere implicitamente l'esperienza. Se questo pulsante è configurato e l'utente interagisce con esso, allora verrà inviato l'evento di chiusura. Questo è un buon momento per distruggere il widget dalla tua pagina e terminare il ciclo di vita del widget.

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

onFirstInteraction

Quando l'utente interagisce (tocca/clicca) con l'applicazione caricata per la prima volta.

widget.onFirstInteraction = function () {
   console.log("L'utente ha interagito con l'Applicazione per la prima volta");
};

onRouteChange

Si verifica quando l'Applicazione ha cambiato rotta all'interno del widget. (Naviga tra le schermate). L'evento può contenere o meno un oggetto dati a seconda del contesto.

widget.onRouteChange = function (event) {
   console.log(event.type) // “cambiamento di rotta”
   console.log(event.data) // {} o indefinito
   console.log("L'utente ha interagito con l'Applicazione per la prima volta");
};

onScrollToTop

Si verifica quando l'Applicazione sta tentando di scorrere indietro alla cima della pagina. Può essere utilizzato sulla pagina principale per assicurarsi che lo scorrimento non venga attivato (CORS) o che debba essere aggiustato. L'evento non contiene un oggetto dati.

widget.onScrollToTop = function () {
   console.log("Scorri in Alto");
};

Metriche

Ecco un elenco delle metriche chiave che possono essere utilizzate a seconda del tipo di partita:

Chiave	Descrizione
data.gameMetrics.CurrentAttempt	I tentativi dell'utente una volta completata la partita.
data.gameMetrics.prizeID	L'ID del premio.
data.gameMetrics.prizeImage	L'immagine del premio.
data.gameMetrics.prizeName	Il nome del premio.
data.gameMetrics.totalPossibleAttempts	L'importo totale di tentativi possibili.
data.gameMetrics.userWon	vero/falso a seconda dello stato dell'utente.
data.gameMetrics.score	L'importo totale di punti aggregati con cui questo utente completa la partita.

Credenziali

Chiave	Descrizione
data.credentials.isPreviewMode	Verifica se la partita è in modalità anteprima.
data.credentials.projectID	L'id dell'app dell'app corrente giocata.
data.credentials.projectLanguage	La lingua del progetto nel widget (en, it).
data.credentials.projectName	Il nome dell'app.
data.credentials.projectType	Il tipo di app (quiz, memory...).
data.credentials.publisherID	L'id dell'editore.
data.credentials.sessionID	L'id di sessione del giocatore corrente.

Aggiornato il: 18/04/2024

È stato utile questo articolo?

Grazie!