Questo articolo è disponibile anche in:

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

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

   <!-- Imposta 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 Options alla funzione Create:

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

Opzioni di Configurazione

Obbligatorie

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

Opzionali

Opzione	Tipo	Predefinito	Descrizione
options.height	string	auto	Il widget ha un'altezza predefinita di zero prima di essere caricato. Puoi sovrascriverla con un valore segnaposto per evitare salti di pagina a seconda di dove viene utilizzato il widget nella pagina principale. Il valore è in pixel come “600px”. Quando si usa options.fixed = true il valore dell'altezza sarà bloccato sul valore fornito introducendo le barre di scorrimento.
options.autoscroll	boolean	true	A seconda della lunghezza del contenuto del widget e della visualizzazione dell'utente, potrebbe essere necessario che la pagina che contiene il widget richieda uno scorrimento della pagina ospitante. Il comportamento predefinito quando un utente utilizza il Widget è quello di scorrere la pagina ospitante verso l'alto del widget per facilitare l'usabilità. Per disabilitarlo, imposta autoscroll su false. Questa proprietà sarà false se options.fixed è true.
options.sharingurl	string	L'URL ospitante contenente il widget	Quando si utilizza la condivisione sociale, questo è l'URL che le persone condivideranno sui social media per portarli alla tua campagna. Se sharing è una stringa vuota, utilizzerà la pagina ospitante (che contiene il widget) come URL.
options.fixed	boolean	false	Di solito il widget cambierà dimensione automaticamente per adattarsi al contenuto dell'engine ed evitare le barre di scorrimento. Se questa opzione è impostata su true, l'altezza del widget sarà fissa e non cambierà. Quando usi questa opzione, il valore di options.height dovrebbe essere impostato su un valore diverso da "auto". Se l'altezza dell'engine è maggiore del valore dell'altezza, verranno utilizzate le barre di scorrimento per navigare.
options.width	string	“100%”	La larghezza del widget. Può essere impostata come una misura CSS, ad esempio “%” o “px”.

Caricamento

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

Nota: assicurati di impostare una qualsiasi delle callback qui sotto prima del caricamento per 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 avrà completato questo processo, invocherà un opzionale callback onReady.

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

onError

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

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

onComplete

Una volta che la partita è stata completata e l'utente sta visualizzando l'ultima schermata. Fornisce anche un oggetto data che descrive quello che è accaduto nella partita.

Nota: se vuoi agire su questo, potresti voler inserire un timeout all'interno del callback in modo che l'utente abbia il tempo di leggere la Schermata Finale poiché questo avviene immediatamente quando si raggiunge l'ultima schermata. Puoi anche usare onClose.

widget.onComplete = function (event) {
   console.log(event.type); // “complete”
   console.log(event.data); // {}
   console.log("Punteggio Utente è stato" + event.data.gameMetrics.score);
};

onResize

Si verifica quando il Motore è stato ridimensionato, fornisce l'altezza come valore in pixel.

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

onClose

Le applicazioni possono essere configurate con un pulsante di chiusura dedicato che permette all'utente di chiudere implicitamente l'esperienza. Se questo pulsante è configurato e l'utente ci interagisce, l'evento di chiusura verrà inviato. 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 (tocco/click) 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 percorso all'interno del widget (naviga tra le schermate). L'evento può contenere o meno un oggetto data a seconda del contesto.

widget.onRouteChange = function (event) {
   console.log(event.type); // “routechange”
   console.log(event.data); // {} o undefined
   console.log("L'utente ha cambiato percorso nell'Applicazione");
};

onScrollToTop

Si verifica quando l'Applicazione sta cercando di scorrere indietro verso la cima della pagina. Può essere usato nella pagina principale per assicurarsi che lo scroll non venga attivato (CORS) o debba essere aggiustato. L'evento non contiene un oggetto data.

```widget.onScrollToTop = function () {
console.log("Scroll all'inizio della pagina");
};```# Metrics

Ecco un elenco delle metriche principali 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.prizeRef	Il riferimento del premio.
data.gameMetrics.totalPossibleAttempts	L'importo totale dei tentativi possibili.
data.gameMetrics.userWon	true/false a seconda dello stato dell'utente.
data.gameMetrics.score	L'importo totale dei punti aggregati con cui l'utente completa la partita.

Credentials

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

Aggiornato il: 01/08/2024

È stato utile questo articolo?

Grazie!