Articoli su: Sviluppatori e API
Questo articolo è disponibile anche in:

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

Esempio di codice del widget



<html>
<head>
   <!-- Includi 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 Crea:

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


Opzioni di Configurazione



Richieste



OpzioneTipoDescrizione
options.elementstring - HTMLElementIl widget verrà inserito in questo HTMLElement. È possibile passare l'accesso diretto a un HTMLElement esistente o fornire l'ID stringa per quell'elemento. Se non si fornisce questa proprietà, tenterà di trovare un id "digitaservice-widget" sulla pagina.
options.enginestringL'URL assoluto dell'applicazione che verrà caricata nel widget.


Opzionali



OpzioneTipoDefaultDescrizione
options.heightstringautoIl widget ha un'altezza predefinita di zero prima di essere caricato. È possibile sovrascrivere questo con un valore segnaposto per evitare salti di pagina a seconda di dove viene utilizzato il widget nella pagina madre. Il valore è in pixel come “600px”. Utilizzando options.fixed = true l'altezza sarà bloccata al valore fornito introducendo barre di scorrimento.
options.autoscrollbooleantrueA seconda della lunghezza del contenuto del widget e della visualizzazione dell'utente, potrebbe essere necessario che la pagina che contiene il widget richieda lo scorrimento della pagina ospitante. Il comportamento predefinito quando un utente utilizza il Widget è di scorrere la pagina ospitante fino alla cima del widget per facilitare l'usabilità. Per disabilitare ciò, impostare autoscroll su false. Questa proprietà sarà falsa se options.fixed è true.
options.sharingurlstringL'URL ospitante contenente il widgetQuando si utilizza la Condivisione Social, questa è l'URL che le persone condivideranno sui Social Media per portarli alla tua campagna. Se la condivisione è una stringa vuota, utilizzerà la pagina ospitante (contenente il widget) come URL.
options.fixedbooleanfalseDi solito il widget cambia dimensione automaticamente per adattarsi al contenuto del motore ed evitare barre di scorrimento. Se questa opzione è impostata su true, l'altezza del widget sarà persistente e non cambierà. Utilizzando questa opzione, il valore options.height dovrebbe essere impostato su qualcosa diverso da “auto”. Se l'altezza del motore è maggiore del valore dell'altezza, le barre di scorrimento verranno utilizzate per navigare.
options.widthstring“100%”La larghezza del widget. Può essere impostata come una misura CSS come “%” o “px” ad esempio.


Caricamento



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

Nota: Assicurati di impostare qualsiasi callback di seguito prima del caricamento in modo da poter catturare tutti gli eventi.

widget.load();


Callback dell'evento



onReady


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

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


onError


Una volta chiamato widget.load(), questo caricherà e inizializzerà il widget. Eventuali errori fatali occorsi dopo quel punto invocheranno un callback onError opzionale.

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


onComplete


Una volta che il gioco è stato completato e l'utente sta guardando l'ultima schermata. Fornisce anche un oggetto dati che descrive cosa è accaduto nel gioco.

Nota: se vuoi agire su questo, potresti voler dare un timeout all'interno della callback in modo che l'utente abbia il tempo di leggere la schermata finale poiché si verifica istantaneamente 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("Il punteggio dell'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


L'applicazione può essere configurata con un pulsante di chiusura dedicato che consente all'utente di chiudere esplicitamente l'esperienza. Se questo pulsante è configurato e l'utente interagisce con esso, 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 percorso 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) // “routechange”
   console.log(event.data) // {} or undefined
   console.log("L'utente ha interagito con l'applicazione per la prima volta");
};


onScrollToTop


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

widget.onScrollToTop = function () {
   console.log("Scorrere Al Top");
};


Metriche



Ecco un elenco delle principali metriche che possono essere utilizzate a seconda del tipo di gioco:

ChiaveDescrizione
data.gameMetrics.CurrentAttemptIl tentativo dell'utente una volta che ha completato il gioco.
data.gameMetrics.prizeIDL'ID del premio.
data.gameMetrics.prizeImageL'immagine del premio.
data.gameMetrics.prizeNameIl nome del premio.
data.gameMetrics.totalPossibleAttemptsL'importo totale di tentativi possibili.
data.gameMetrics.userWontrue/false a seconda dello stato dell'utente.
data.gameMetrics.scoreL'importo totale dei punti aggregati con cui questo utente completa il gioco.


Credenziali


ChiaveDescrizione
data.credentials.isPreviewModeControlla se il gioco è in modalità anteprima.
data.credentials.projectIDL'ID del progetto dell'app attualmente giocata.
data.credentials.projectLanguageLa lingua del progetto nel widget (en, fr).
data.credentials.projectLanguageRegion(Sarà presto rimosso.)
data.credentials.projectName Il nome dell'app.
data.credentials.projectTypeIl tipo di app (quiz, memory...).
data.credentials.publisherIDL'ID dell'editore.
data.credentials.sessionIDL'ID della sessione dell'attuale giocatore.

Aggiornato il: 09/02/2024

È stato utile questo articolo?

Condividi il tuo feedback

Annulla

Grazie!