Beispielcode für das Widget

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

   <!-- Widget beim Laden der Seite einrichten -->
   <script>
       fenster.addEventListener('load', function () {
           var widget = DigitaService.Widget.Create({
               autoscroll: true,
               element: 'gamification-widget',
               engine: 'https://apps.drimify.com/Rf6aGmBR/',
               fixed: false,
               höhe:['auto'],
               sharingurl: 'https://apps.drimify.com/Rf6aGmBR/',
               breite: '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>

Einrichtung

Erstellen Sie ein Widget, indem Sie der Funktion Create ein Options-Objekt übergeben:

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

Konfigurationsoptionen

Erforderlich

Optional

Laden

Nach der Einrichtung müssen Sie das Widget laden. Sie können es jederzeit laden.

Hinweis: Richten Sie vor dem Laden alle benötigten Callbacks aus der folgenden Liste ein, damit Sie sämtliche Ereignisse erfassen können.

widget.load();

Ereignis-Callbacks

onReady

Mit dem Aufruf von widget.load() wird das Widget geladen und initialisiert. Sobald dieser Vorgang abgeschlossen ist, wird der optionale Callback onReady aufgerufen.

Hinweis: onReady wird ausgelöst, bevor der erste Bildschirm angezeigt wird. Das erste onRouteChange-Ereignis signalisiert, dass die Teilnehmenden Inhalte sehen können. Kann die Anwendung gar nicht erst starten, wird onReady nicht ausgelöst. Stattdessen wird onError aufgerufen.

widget.onReady = function (event) {
   // Geladen und einsatzbereit
   console.log(event.type); // “ready”
   console.log(event.data); // {}
};

onError

Mit dem Aufruf von widget.load() wird das Widget geladen und initialisiert. Alle schwerwiegenden Fehler, die ab diesem Zeitpunkt auftreten, lösen den optionalen Callback onError aus.

widget.onError = function (event) {
   console.log(event.data.message); // z. B. "ERR_15"
};

onComplete

Wird ausgelöst, sobald das Spiel abgeschlossen ist und der Abschlussbildschirm angezeigt wird. Zusätzlich wird ein Datenobjekt mit Informationen zum Spielverlauf übergeben.

Hinweis: Wenn Sie auf dieses Ereignis reagieren möchten, sollten Sie innerhalb des Callbacks gegebenenfalls eine Verzögerung einbauen, damit die Teilnehmenden Zeit haben, den Abschlussbildschirm zu lesen. Das Ereignis wird unmittelbar beim Erreichen dieses Bildschirms ausgelöst. Alternativ können Sie onClose verwenden.

widget.onComplete = function (event) {
   console.log(event.type); // “complete”
   console.log(event.data); // {}
   console.log("Erreichte Punktzahl: " + event.data.gameMetrics.score);
};

onResize

Wird ausgelöst, wenn sich die Größe der Engine geändert hat, und übermittelt die Höhe als Pixelwert.

widget.onResize = function (event) {
   console.log(event.type); // “resize”
   console.log(event.data); // {}
   console.log("Höhe der Anwendung:" + event.data.height);
};

onFirstInteraction

Wird ausgelöst, wenn die geladene Anwendung zum ersten Mal per Touch oder Klick bedient wird.

widget.onFirstInteraction = function () {
   console.log("Erste Interaktion mit der Anwendung");
};

onRouteChange

Wird ausgelöst, wenn die Anwendung innerhalb des Widgets die Route wechselt, also zwischen Bildschirmen navigiert. Je nach Kontext enthält das Ereignis ein Datenobjekt oder nicht.

widget.onRouteChange = function (event) {
   console.log(event.type) // “routechange”
   console.log(event.data) // {} oder undefined
   console.log("Ein neuer Bildschirm wurde aufgerufen");
};

onScrollToTop

Wird ausgelöst, wenn die Anwendung versucht, zum Seitenanfang zurückzuscrollen. Der Callback kann auf der übergeordneten Seite verwendet werden, um das Scrollen zu übernehmen, falls es aufgrund von CORS nicht ausgeführt wird oder angepasst werden muss. Das Ereignis enthält kein Datenobjekt.

widget.onScrollToTop = function () {
   console.log("Zum Seitenanfang scrollen");
};

Kennzahlen

Die folgenden wichtigen Kennzahlen stehen je nach Spieltyp zur Verfügung:

Sitzungs- und Projektdaten

Fehlerbehandlung

Es gibt zwei grundlegende Möglichkeiten, Fehler zu erkennen und Informationen zu Problemen im Widget abzurufen:

onError-Callback

Der Callback onError erfasst schwerwiegende Fehler, bei denen die Anwendung nicht starten oder nicht fortgesetzt werden kann. Der Fehlercode steht in event.data.message. In diesen Fällen wird onReady nicht ausgelöst.

widget.onError = function (event) {
    if (event.data && typeof event.data.message !== 'undefined') {
        wechseln (event.data.message) {
            standard:
                // Keine Aktion
                break;
            case 'ERR_04':
                console.log("Keine Aufrufe mehr verfügbar");
                break;
            case 'ERR_05':
                console.log("Sicherheitsfehler");
                break;
            case 'ERR_07':
                console.log("Anwendung nicht veröffentlicht");
                break;
            case 'ERR_08':
                console.log("Premium-Anwendung nicht verfügbar");
                break;
            case 'ERR_09':
                console.log("Sitzungs-UID nicht erkannt");
                break;
            case 'ERR_10':
                console.log("Sitzungs-UID nicht zulässig");
                break;
            case 'ERR_13':
                console.log("SSO-Aufruf fehlgeschlagen");
                break;
            case 'ERR_14':
                console.log("Sprache nicht verfügbar");
                break;
            case 'ERR_15':
                console.log("Seite existiert nicht");
                break;
            case 'ERR_17':
                console.log("Ungültige SSO-Konfiguration");
                break;
            case 'ERR_21':
                console.log("Combo oder Dynamic Path ist kein Spiel zugewiesen");
                break;
        }
    }
};

onRouteChange-Callback

Der Callback onRouteChange wird ausgelöst, wenn die Anwendung innerhalb des Widgets zwischen verschiedenen Bildschirmen navigiert. Damit lassen sich Fehler im Zusammenhang mit dem Anwendungsstatus und der Verfügbarkeit von Inhalten erfassen.

widget.onRouteChange = function (event) {
    if (event.data && typeof event.data.errorCode !== 'undefined') {
        wechseln (event.data.errorCode) {
            standard:
                // Keine Aktion
                break;
            case 'ERR_02':
                console.log("Inhalte noch nicht verfügbar");
                break;
            case 'ERR_03':
                console.log("Verfügbarkeitszeitraum der Inhalte abgelaufen");
                break;
            case 'ERR_04':
                console.log("Keine Aufrufe mehr verfügbar");
                break;
            case 'ERR_16':
                console.log("Keine Fragen verfügbar");
                break;
            case 'ERR_18':
                console.log("Zwischen zwei Aktivierungszeiträumen");
                break;
            case 'ERR_19':
                console.log("Außerhalb der Öffnungszeiten");
                break;
        }
    }
};

errorCode ist nur auf diesen Bildschirmen zur Nichtverfügbarkeit vorhanden. Andere Bildschirme, die eine Teilnahme verhindern, etwa bei bereits erfolgter Teilnahme, Zugriffsbeschränkungen oder abgelehnten Formularen, enthalten keinen errorCode. Sie lassen sich anhand ihres Bildschirmnamens in event.data.screen identifizieren.

Die vollständige Liste der Bildschirmnamen sowie Informationen zur Ereignisreihenfolge beim Laden, zum Verhalten von session_uid und zu Zeitüberschreitungen beim Laden finden Sie unter Widget-Laufzeit und Fehlerbehandlung.

Benutzerinformationen auf dem Abschlussbildschirm abrufen (onRouteChange)

Bei Verwendung von Dynamic Path™, Advent Calendar oder Combo™ können Sie am Ende jedes Spiels über den Callback onRouteChange Benutzerinformationen abrufen.

Diese Methode ist erforderlich, da das Standardereignis onComplete erst ausgelöst wird, wenn das gesamte mehrstufige Erlebnis abgeschlossen ist, und nicht nach jedem einzelnen eingebetteten Spiel.

So kann Ihr System die vollständigen Spielergebnisse über gameInfo empfangen, sobald die teilnehmende Person den Abschlussbildschirm erreicht.

Einrichtung

Nachdem Sie Ihr Widget erstellt haben:

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

Fügen Sie den onRouteChange-Listener hinzu:

widget.onRouteChange = function (event) {
    console.log(event.type);   // "routechange"
    console.log(event.data);   // { ... } oder undefined
    console.log("Ein neuer Bildschirm wurde aufgerufen");
};

```# Erkennen des Endbildschirms

Wenn der Benutzer den Endbildschirm des Spiels erreicht, gibt das Widget eine Route zurück, die folgendem Muster entspricht:

event.data.screen === 'screen_end-YOUR_APP_ID'

Ersetzen Sie `YOUR_APP_ID` durch die tatsächliche ID Ihrer Anwendung.

# Abrufen der Benutzerinformationen (`gameInfo`)

Sobald der Endbildschirm erkannt wurde, können Sie die Daten abrufen:

event.data.gameInfo

`gameInfo` enthält ein **Array mit Benutzerinformationen**, darunter beispielsweise:
* Vom Benutzer eingegebene Daten
* Spielergebnisse oder Punktzahlen
* Während des Erlebnisses erfasste Formularfelder

Diese Daten stehen nur auf dem Endbildschirm von Erlebnissen zur Verfügung, die in **Dynamic Path**, **Advent Calendar** oder **Combo** eingebunden sind.

# Beispiel

widget.onRouteChange = function (event) {
if (event.data && event.data.screen === 'screen_end-12345') {
const daten = event.data.gameInfo;
console.log("End bildschirm info:", data);
// Process oder forward this information as needed
}
};

Aktualisiert am: 29/10/2026