Artikel über: Entwickler und APIs
Dieser Artikel ist auch verfügbar in:

Erweiterte Einbindung des HTML-Integrationscodes (Widget) über die API

Beispiel für einen Widget-Code



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

   <!-- Das Widget beim Laden der Seite einrichten -->
   <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>


Einrichtung



Erstelle ein Widget, indem du ein Optionsobjekt an die Create-Funktion übergibst:

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


Einrichtungsoptionen



Erforderlich



OptionTypBeschreibung
options.elementZeichenkette - HTMLElementDas Container-Element (HTMLElement), in das das Widget eingebettet wird. Sie können direkt auf ein bestehendes HTMLElement verweisen oder eine Zeichenkette als ID für dieses bereitstellen. Wenn diese Eigenschaft nicht angegeben wird, wird standardmäßig nach einem Element mit der ID "digitaservice-widget" auf der Seite gesucht.
options.engineZeichenketteDie absoluten URL des Anwendung, die in das Widget geladen wird.


Optional



OptionTypStandardwertBeschreibung
options.heightZeichenketteautoDas Widget hat vor dem Laden eine Standardhöhe von Null. Um ein unerwünschtes Umspringen der Seite zu vermeiden, kann diese mit einem Platzhalterwert geändert werden. Der Wert ist in Pixeln, beispielsweise "600px". Bei der Verwendung von options.fixed = true wird die Höhe auf den bereitgestellten Wert festgesetzt und Scroll-Leisten werden eingeführt.
options.autoscrollModus (boolean)trueJe nach Länge des Widget-Inhalts und der Anzeigegröße des Benutzers kann es erforderlich sein, dass die Seite, die das Widget enthält, gescrolled werden muss. Standardmäßig scrollt die Seite mit dem Widget zum oberen Rand des Widgets, um die Bedienung zu erleichtern. Um dieses Verhalten zu deaktivieren, setzen Sie autoscroll auf false. Diese Eigenschaft ist false, wenn options.fixed true ist.
options.sharingurlZeichenketteURL der Seite, die das Widget enthältBei der Verwendung von Social Sharing ist dies die URL, die die Nutzer auf sozialen Medien teilen, um sie zu Ihrer Kampagne zu führen. Ist die Sharing-URL ein leerer String, wird die Seite, die das Widget enthält, als URL verwendet.
options.fixedModus (boolean)falseNormalerweise ändert das Widget seine Größe automatisch, um den Inhalt der Anwendung passend darzustellen und Scroll-Leisten zu vermeiden. Ist diese Option auf true gesetzt, bleibt die Höhe des Widgets gleich und ändert sich nicht. Bei der Verwendung dieser Option sollte der Wert für options.height auf etwas anderes als "auto" gesetzt werden. Ist die Höhe der Anwendung größer als der Höhenwert, werden Scroll-Leisten zur Navigation verwendet.
options.widthZeichenkette“100%”Die Breite des Widgets. Sie kann durch ein CSS-Maß wie “%” oder “px” festgelegt werden.


Laden



Nach der Einrichtung eines Widgets muss es geladen werden. Sie können das Widget jederzeit laden.

Hinweis: Stellen Sie sicher, dass alle folgenden Rückrufe vor dem Laden eingerichtet sind, um alle Ereignisse zu erfassen.

widget.load();


Ereignisrückrufe



bei Bereitschaft (onReady)


Nachdem widget.load() aufgerufen wurde, wird das Widget geladen und initialisiert. Wenn das Widget diesen Prozess abgeschlossen hat, wird ein optionaler onReady-Rückruf ausgelöst.

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


bei Fehler (onError)


Nachdem widget.load() aufgerufen wurde, wird das Widget geladen und initialisiert. Alle fatalen Fehler, die danach auftreten, lösen einen optionalen onError-Rückruf aus.

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


bei Abschluss (onComplete)


Sobald das Spiel abgeschlossen ist und der Benutzer den letzten Bildschirm sieht. Dies liefert auch ein Datenobjekt, das beschreibt, was während des Spiels passiert ist.

Hinweis: Wenn Sie darauf reagieren möchten, sollten Sie einen Timeout im Rückruf setzen, damit der Benutzer genug Zeit hat, den Abschluss-Bildschirm zu lesen, da dieser sofort angezeigt wird, 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("Die Punktzahl des Benutzers war" + event.data.gameMetrics.score);
};


bei Größenänderung (onResize)


Tritt auf, wenn sich die Größe der Anwendung ändert und liefert 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);
};


bei Schließen (onClose)


Die Anwendung kann mit einer speziellen Schließen-Schaltfläche konfiguriert werden, die es dem Benutzer ermöglicht, die Erfahrung explizit zu beenden. Wenn diese Schaltfläche konfiguriert ist und der Benutzer damit interagiert, wird das Schließen-Ereignis ausgelöst. Das ist ein guter Zeitpunkt, um das Widget auf der Seite zu entfernen und den Widget-Lebenszyklus zu beenden.

widget.onClose = function () {
   DigitaService.Widget.Destroy();
};


bei erster Interaktion (onFirstInteraction)


Wenn der Benutzer zum ersten Mal (Berührung/Klick) mit der geladenen Anwendung interagiert.

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


bei Routenänderung (onRouteChange)


Tritt auf, wenn die Anwendung die Route innerhalb des Widgets ändert (zwischen den Bildschirmen navigiert). Das Ereignis kann je nach Kontext ein Datenobjekt enthalten oder nicht.

widget.onRouteChange = function (event) {
   console.log(event.type) // “routechange”
   console.log(event.data) // {} or undefined
   console.log("Der Benutzer hat zum ersten Mal mit der Anwendung interagiert");
};


bei Scrollen zum Seitenanfang (onScrollToTop)


Tritt auf, wenn die Anwendung versucht, zum oberen Rand der Seite zu scrollen. Dies kann auf der Elternseite 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 Zum Anfang");
};


Kennzahlen



Hier finden Sie eine Liste der wichtigsten Kennzahlen, die je nach Art des Spiels verwendet werden können:

SchlüsselBeschreibung
data.gameMetrics.CurrentAttemptDie Versuche des Benutzers, nachdem er das Spiel beendet hat.
data.gameMetrics.prizeIDDie ID des Preises.
data.gameMetrics.prizeImageDas Bild des Preises.
data.gameMetrics.prizeNameDer Name des Preises.
data.gameMetrics.totalPossibleAttemptsDie Gesamtzahl der möglichen Versuche.
data.gameMetrics.userWontrue/false, abhängig vom Status des Benutzers.
data.gameMetrics.scoreDie Gesamtpunktzahl, mit der der Benutzer das Spiel beendet hat.


Anmeldeinformationen


SchlüsselBeschreibung
data.credentials.isPreviewModeÜberprüft, ob das Spiel im Vorschau-Modus ist.
data.credentials.projectIDDie Projekt-ID der gerade gespielten App.
data.credentials.projectLanguageDie Sprache des Projekts im Widget (en, fr).
data.credentials.projectLanguageRegion(Wird bald entfernt.)
data.credentials.projectName Der Name der App.
data.credentials.projectTypeDie Art der App (Quiz, Gedächtnisspiel ...).
data.credentials.publisherIDDie ID des Verlegers.
data.credentials.sessionIDDie Sitzungs-ID des aktuellen Spielers.

Aktualisiert am: 09/02/2024

War dieser Beitrag hilfreich?

Teilen Sie Ihr Feedback mit

Stornieren

Danke!