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

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

Codice di esempio del widget



<html>
<head>
   <!-- Includi i bundle -->
   <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.Crea({
               autoscroll: true,
               elemento: 'widget-gamification',
               motore: 'https://apps.drimify.com/XBs15jKF/',
               fisso: false,
               altezza:['auto'],
               urlcondivisione: 'https://apps.drimify.com/XBs15jKF/',
               larghezza: '100%',
           });
           widget.onReady = function (evento) {};
           widget.onComplete = function (evento) {};
           widget.onFirstInteraction = function () {};
           widget.onRouteChange = function (evento) {};
           widget.onScrollToTop = function () {};
           widget.onClose = function () {};
           widget.onError = function (eventoErrore) {};
           widget.carica();
       });
   </script>
</head>
<body>
<div id="widget-gamification"></div>
</body>
</html>


Configurazione



Crea un widget passando un oggetto Opzioni alla funzione Crea:

var widget = DigitaService.Widget.Crea(opzioni);


Opzioni di configurazione



Richieste



OpzioneTipoDescrizione
opzioni.elementostringa - HTMLElementIl widget verrà iniettato in questo HTMLElement. Puoi passare il accesso diretto ad un elemento HTMLElement esistente o fornire l'ID in stringa per quell'elemento. Se non fornisci questa proprietà, cercherà di trovare un id "widget-digitaservice" sulla pagina.
opzioni.motorestringaL'URL assoluta all'applicazione che verrà caricata nel widget.


Opzionali



OpzioneTipoPredefinitoDescrizione
opzioni.altezzastringaautoIl widget ha un'altezza predefinita di zero prima di essere caricato. Puoi sovrascrivere questo con un valore segnaposto per evitare salto di pagina a seconda di dove il widget è usato nella pagina genitore. Il valore è in pixel come "600px". Quando usi opzioni.fisso = vero il valore dell'altezza sarà bloccato al valore fornito introducendo le barre di scorrimento.
opzioni.autoscrollbooleanoveroA seconda della lunghezza del contenuto del widget e della visualizzazione dell'utente, potrebbe essere necessario che la pagina contenente il widget richieda lo scorrimento della pagina ospitante. Il comportamento predefinito quando un utente utilizza il Widget, è fare scorrere la pagina ospitante fino all'inizio del widget per facilitarne l'usabilità. Per disabilitare questa funzione, impostare autoscroll su falso. Questa proprietà sarà falsa se opzioni.fisso è vero.
opzioni.urlcondivisionestringaL'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.
opzioni.fissobooleanofalsoDi solito il widget cambierà dimensione automaticamente per adattarsi al contenuto del motore ed evitare le barre di scorrimento. Se questa opzione è impostata su vero, allora l'altezza del widget sarà persistente e non cambierà. Quando si utilizza questa opzione, il valore opzioni.altezza dovrebbe essere impostato su qualsiasi valore diverso da "auto". Se l'altezza del motore è maggiore del valore dell'altezza, le barre di scorrimento verranno utilizzate per navigare.
opzioni.larghezzastringa“100%”La larghezza del widget. Può essere impostata come una misura CSS come "%" o "px" ad esempio.


Carica



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

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

widget.carica();


Callback degli eventi



onReady


Una volta chiamato widget.carica(), questo caricherà ed inizializzerà il widget. Quando il widget ha completato questo processo, invocherà una callback opzionale onReady.

widget.onReady = function (evento) {
   // caricato e pronto all'uso
   console.log(evento.tipo); // “pronto”
   console.log(evento.dati); // {}
};


onError


Una volta chiamata widget.carica(), questa caricherà e inizializzerà il widget. Eventuali errori fatali che si verificano dopo quel punto invocano una callback opzionale onError.

widget.onError = function (evento) {
   lancio new Error(evento.messaggio);
};


onComplete


Una volta che il gioco è completato e l'utente sta guardando l'ultima schermata. Fornisce anche un oggetto dati che descrive ciò che è successo 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 perché avviene istantaneamente quando raggiunge l'ultima schermata. Puoi anche usare onClose.

widget.onComplete = function (evento) {
   console.log(evento.tipo); // “completo”
   console.log(evento.dati); // {}
   console.log("Il punteggio dell'utente era" + evento.dati.gameMetrics.punteggio);
};


onResize


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

widget.onResize = function (evento) {
   console.log(evento.tipo); // “ridimensiona”
   console.log(evento.dati); // {}
   console.log("Altezza dell'applicazione:" + evento.dati.altezza);
};


onClose


L'applicazione può essere configurata con un pulsante di chiusura dedicato che permette all'utente di chiudere esplicitamente l'esperienza. Se questo pulsante è configurato e l'utente interagisce con esso, allora l'evento di chiusura sarà 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.Distruggi();
};


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ò o non può contenere un oggetto dati a seconda del contesto.

widget.onRouteChange = function (evento) {
   console.log(evento.tipo) // “cambia percorso”
   console.log(evento.dati) // {} o indefinito
   console.log("L'utente ha interagito con l'applicazione per la prima volta");
};


onScrollToTop


Si verifica quando l'applicazione sta cercando di scorrere indietro fino all'inizio della pagina. Può essere utilizzato sulla pagina genitore per assicurarsi che lo scorrimento non venga attivato (CORS) o che debba essere regolato. L'evento non contiene un oggetto dati.

widget.onScrollToTop = function () {
   console.log("Scorri Fino In Cima");
};


Metriche



Ecco una lista delle metriche chiave che possono essere utilizzate a seconda del tipo di gioco:

ChiaveDescrizione
data.gameMetrics.TentativoCorrenteI tentativi dell'utente una volta completato il gioco.
data.gameMetrics.IDpremioL'ID del premio.
data.gameMetrics.immaginePremioL'immagine del premio.
data.gameMetrics.nomePremioIl nome del premio.
data.gameMetrics.totaleTentativiPossibiliL'importo totale dei tentativi possibili.
data.gameMetrics.utenteHaVintovero/falso a seconda dello stato dell'utente.
data.gameMetrics.punteggioL'importo totale dei punti aggregati con cui questo utente completa il gioco.


Credenziali


ChiaveDescrizione
data.credentials.isModoAnteprimaControlla se il gioco è in modalità anteprima.
data.credentials.IDprogettoL'ID del progetto dell'app attualmente giocata.
data.credentials.linguaProgettoLa lingua del progetto nel widget (en, fr).
data.credentials.regioneLinguaProgetto(Sarà rimosso presto.)
data.credentials.nomeProgettoIl nome dell'app.
data.credentials.tipoProgettoIl tipo di app (quiz, memory...).
data.credentials.IDeditoreL'ID dell'editore.
data.credentials.IDsessioneL'ID della sessione dell'attuale giocatore.

Aggiornato il: 29/02/2024

È stato utile questo articolo?

Condividi il tuo feedback

Annulla

Grazie!