Dieser Artikel ist auch verfügbar in:

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

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

   <!-- Einrichtung des Widgets beim Seitenladen -->
   <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

Option	Typ	Beschreibung
options.element	string - HTMLElement	Das Widget wird in dieses HTMLElement eingefügt. Du kannst direkten Zugriff auf ein vorhandenes HTMLElement geben oder die String-ID für dieses Element angeben. Wird diese Eigenschaft nicht bereitgestellt, wird versucht, eine ID "digitaservice-widget" auf der Seite zu finden.
options.engine	string	Die absolute URL zur Anwendung, die in das Widget geladen wird.

Optional

Option	Typ	Standard	Beschreibung
options.height	string	auto	Das Widget hat standardmäßig eine Höhe von null, bevor es geladen wird. Du kannst diesen Wert mit einem Platzhalter überschreiben, um ein Springen der Seite zu vermeiden, abhängig davon, wo das Widget auf der übergeordneten Seite verwendet wird. Der Wert wird in Pixeln angegeben, wie z.B. „600px“. Wenn options.fixed auf true gesetzt ist, wird der Höhenwert auf den angegebenen Wert festgelegt und Bildlaufleisten eingeführt.
options.autoscroll	boolean	true	Abhängig von der Länge des Widget-Inhalts und der Anzeige des Benutzers kann es erforderlich sein, dass die Seite, die das Widget enthält, ein Scrollen der Hosting-Seite benötigt. Das Standardverhalten, wenn ein Benutzer das Widget verwendet, besteht darin, die Hosting-Seite nach oben zum Widget zu scrollen, um die Benutzerfreundlichkeit zu unterstützen. Um dies zu deaktivieren, setze autoscroll auf false. Diese Eigenschaft wird false sein, wenn options.fixed true ist.
options.sharingurl	string	Die Hosting-URL, die das Widget enthält	Bei Verwendung von Social Sharing ist dies die URL, die Personen in sozialen Medien teilen werden, um sie zu Ihrer Kampagne zu bringen. Wenn das Teilen einen leeren String ist, wird die Hosting-Seite (die das Widget enthält) als URL verwendet.
options.fixed	boolean	false	Normalerweise ändert das Widget seine Größe automatisch, um zum Inhalt des Motors zu passen und Bildlaufleisten zu vermeiden. Wenn diese Option auf true gesetzt ist, bleibt die Höhe des Widgets beständig und ändert sich nicht. Bei Verwendung dieser Option sollte der options.height-Wert auf etwas anderes als „auto“ gesetzt werden. Wenn die Höhe des Motors größer als der Höhenwert ist, werden Bildlaufleisten verwendet.
options.width	string	„100%“	Die Breite des Widgets. Kann auf eine CSS-Messung wie „%“ oder „px“ gesetzt werden.

Laden

Sobald ein Widget eingerichtet ist, musst du es laden. Du kannst das Widget jederzeit laden.

Hinweis: Stelle sicher, dass du irgendwelche der untenstehenden Callbacks einrichtest, bevor du es lädst, damit du alle Ereignisse erfassen kannst.

widget.load();

Ereignis-Callbacks

onReady

Sobald widget.load() aufgerufen wurde, wird das Widget geladen und initialisiert. Wenn der Prozess abgeschlossen ist, wird ein optionaler onReady-Callback aufgerufen.

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

onError

Sobald widget.load() aufgerufen wurde, wird das Widget geladen und initialisiert. Alle fatalen Fehler, die danach auftreten, rufen einen optionalen onError-Callback auf.

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

onComplete

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

Hinweis: Wenn du darauf reagieren möchtest, könntest du einen Timeout innerhalb des Callbacks einrichten, damit der Benutzer Zeit hat, den Abschlussbildschirm zu lesen, da dies sofort erfolgt, wenn der letzte Bildschirm erreicht wird. Du kannst auch onClose verwenden.

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

onResize

Tritt auf, wenn der Motor die Größe geändert hat und liefert die Höhe als Pixelwert.

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

onClose

Die Anwendung kann mit einer dedizierten Schließen-Schaltfläche konfiguriert werden, die es dem Benutzer ermöglicht, die Erfahrung implizit zu schließen. Wenn diese Schaltfläche konfiguriert ist und der Benutzer damit interagiert, wird das Schließen-Ereignis versendet. Dies ist ein guter Zeitpunkt, um das Widget von deiner Seite zu entfernen und den Lebenszyklus des Widgets zu beenden.

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

onFirstInteraction

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

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

onRouteChange

Tritt auf, wenn die Anwendung innerhalb des Widgets die Route geändert hat. (Wechselt zwischen Bildschirmen). Das Ereignis kann ein Datenobjekt enthalten oder auch nicht, abhängig vom Kontext.

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

onScrollToTop

Tritt auf, wenn die Anwendung versucht, zurück zum Anfang der Seite zu scrollen. Kann auf der übergeordneten Seite verwendet werden, um sicherzustellen, dass der Bildlauf 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 abhängig vom Typ des Spiels verwendet werden können:

Schlüssel	Beschreibung
data.gameMetrics.CurrentAttempt	Die Versuche des Benutzers, sobald er das Spiel abgeschlossen hat.
data.gameMetrics.prizeID	Die Preis-ID.
data.gameMetrics.prizeImage	Das Preisbild.
data.gameMetrics.prizeName	Der Name des Preises.
data.gameMetrics.totalPossibleAttempts	Die Gesamtanzahl möglicher Versuche.
data.gameMetrics.userWon	wahr/falsch, abhängig vom Status des Benutzers.
data.gameMetrics.score	Die Gesamtanzahl an Punkten, mit denen dieser Benutzer das Spiel abgeschlossen hat.

Zugangsdaten

Schlüssel	Beschreibung
data.credentials.isPreviewMode	Überprüfe, ob das Spiel im Vorschaumodus ist.
data.credentials.projectID	Die App-ID der aktuellen gespielten App.
data.credentials.projectLanguage	Die Sprache des Projekts im Widget (en, fr).
data.credentials.projectName	Der Name der App.
data.credentials.projectType	Der Typ der App (Quiz, Memory...).
data.credentials.publisherID	Die Verlags-ID.
data.credentials.sessionID	Die Sitzungs-ID des aktuellen Spielers.

Aktualisiert am: 18/04/2024

War dieser Beitrag hilfreich?

Danke!