Widget-Beispielcode

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

   <!-- Widget beim Seitenladen einrichten -->
   <script>
       window.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 ein Options-Objekt an die Create-Funktion übergeben:

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

Setup-Optionen

Erforderlich

Optional

Laden

Sobald ein Widget eingerichtet ist, müssen Sie es laden. Sie können das Widget jederzeit laden.

Hinweis: Stellen Sie sicher, dass Sie vor dem Laden alle untenstehenden Rückrufe einrichten, um alle Ereignisse abfangen zu können.

widget.load();

Ereignisrückrufe

onReady

Sobald widget.load() aufgerufen wurde, wird das Widget geladen und initialisiert. Sobald das Widget diesen Vorgang abgeschlossen hat, wird es den optionalen onReady-Callback aufrufen.

widget.onReady = function (event) {
   // geladen und bereit zur Verwendung
   console.log(event.type); // „ready“
   console.log(event.data); // {}
};

onError

Sobald widget.load() aufgerufen wurde, wird das Widget geladen und initialisiert. Alle schwerwiegenden Fehler, die danach auftreten, werden den optionalen onError-Callback aufrufen.

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

onComplete

Sobald das Spiel abgeschlossen ist und der Benutzer den letzten Bildschirm sieht. Es enthält auch ein Datenobjekt, das beschreibt, was im Spiel passiert ist.

Hinweis: Wenn Sie darauf reagieren möchten, sollten Sie im Callback eine Verzögerung einfügen, damit der Benutzer Zeit hat, den Endbildschirm zu lesen, da dieser sofort auftritt, wenn der letzte Bildschirm erreicht wird. Sie können auch onClose verwenden.

widget.onComplete = function (event) {
   console.log(event.type); // „complete“
   console.log(event.data); // {}
   console.log("Benutzer-Punktzahl war" + event.data.gameMetrics.score);
};

onResize

Tritt auf, wenn die Engine ihre Größe verändert hat, und liefert die Höhe als Pixelwert zurück.

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

onFirstInteraction

Wenn der Benutzer das erste Mal mit der geladenen Anwendung interagiert (berührt/klickt).

widget.onFirstInteraction = function () {
   console.log("Benutzer hat zum ersten Mal mit der Anwendung interagiert");
};

onRouteChange

Tritt auf, wenn die Anwendung im Widget den Pfad geändert hat (zwischen Bildschirmen navigiert). Das Ereignis kann ein Datenobjekt enthalten oder auch nicht, je nach Kontext.

widget.onRouteChange = function (event) {
   console.log(event.type) // „routechange“
   console.log(event.data) // {} oder undefined
   console.log("Benutzer ist zu einem neuen Bildschirm navigiert");
};

onScrollToTop

Tritt auf, wenn die Anwendung versucht, nach oben auf der Seite zu scrollen. Kann auf der übergeordneten Seite verwendet werden, um sicherzustellen, dass das Scrollen nicht ausgelöst wird (CORS) oder angepasst werden muss. Das Ereignis enthält kein Datenobjekt.

widget.onScrollToTop = function () {
   console.log("Scroll nach oben");
};

Metriken

Hier ist eine Liste der Schlüsselmetriken, die je nach Spieltyp verwendet werden können:

Berechtigungen

Fehlerbehandlung

Es gibt zwei primäre Methoden, um Fehler zu erkennen und Informationen über Probleme im Widget abzurufen:

onError Callback

Der onError-Callback erfasst alle schwerwiegenden Fehler, die nach dem Laden des Widgets auftreten. Dies kann nützlich sein, um zu erkennen, wenn eine Seite nicht existiert oder ein kritischer Fehler auftritt.

widget.onError = function (event) {
    if (typeof event.data.message !== 'undefined') {
        switch (event.data.message) {
            default:
                // Nichts tun
                break;
            case 'ERR_15':
                console.log("Seite existiert nicht");
                break;
        }
    }
};

onRouteChange Callback

Der onRouteChange-Callback wird ausgelöst, wenn die Anwendung innerhalb des Widgets zwischen verschiedenen Bildschirmen navigiert. Dies ist nützlich, um Fehler im Zusammenhang mit dem Anwendungsstatus und der Verfügbarkeit von Inhalten zu verfolgen.

widget.onRouteChange = function (event) {
    if (typeof event.data.errorCode !== 'undefined') {
        switch (event.data.errorCode) {
            default:
                // Nichts tun
                break;
            case 'ERR_01':
                console.log("Kein Plan verfügbar");
                break;
            case 'ERR_02':
                console.log("Inhalt ist noch nicht verfügbar");
                break;
            case 'ERR_03':
                console.log("Inhalt ist abgelaufen");
                break;
            case 'ERR_04':
                console.log("Keine weiteren Ansichten");
                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 bereits verwendet");
                break;
            case 'ERR_11':
                console.log("Plan nicht aktiviert");
                break;
            case 'ERR_12':
                console.log("Falsche Daten empfangen");
                break;
            case 'ERR_13':
                console.log("SSO-Aufruf fehlgeschlagen");
                break;
            case 'ERR_14':
                console.log("Sprache nicht verfügbar");
                break;
        }
    }
};

Durch die Verwendung von sowohl onError als auch onRouteChange können Sie effektiv Probleme, die im Widget auftreten könnten, verfolgen und handhaben, umso ein besseres Benutzererlebnis zu gewährleisten.

Benutzerinformationen am Endbildschirm abrufen (onRouteChange)

Beim Einsatz von Dynamic Path™, Advent Calendar, oder Combo™ können Sie Benutzerinformationen am Endbildschirm eines Spiels durch den onRouteChange-Callback abrufen.

Diese Methode ist erforderlich, da das Standard-onComplete-Ereignis nur einmal nach Abschluss der gesamten mehrstufigen Erfahrung ausgelöst wird, nicht jedoch, wenn jedes eingebettete Spiel endet.

Damit kann Ihr System die vollständigen Spielergebnisse (über gameInfo) erhalten, sobald der Benutzer den Endbildschirm der Erfahrung erreicht.

Einrichtung

Nach der Erstellung Ihres Widgets:

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("Benutzer ist zu einem neuen Bildschirm navigiert");
};

Erkennen des Endbildschirms

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

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

Ersetzen Sie YOUR_APP_ID durch Ihre tatsächliche Anwendungs-ID.

Benutzerinformationen abrufen (gameInfo)

Sobald der Endbildschirm erkannt wird, können Sie die Daten extrahieren:

event.data.gameInfo

gameInfo enthält ein Array von Benutzerinformationen, das Folgendes umfassen kann:

• Benutzer-Eingabedaten
• Spielerergebnisse oder Punktzahlen
• Erfasste Felder während der Erfahrung

Diese Daten sind nur am Endbildschirm verfügbar für Erlebnisse, die in Dynamic Path, Advent Calendar, oder Combo benutzt werden.

Beispiel

widget.onRouteChange = function (event) {
    if (event.data && event.data.screen === 'screen_end-12345') {
        const daten = event.data.gameInfo;
        console.log("Endbildschirm-Info:", daten);
        // Verarbeitung oder Weiterleitung dieser Informationen, wie nötig
    }
};

Aktualisiert am: 02/10/2026