Dieser Artikel ist auch verfügbar in:

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

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

   <!-- Richte das Widget beim Seitenladen ein -->
   <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 Options-Objekt an die Create-Funktion übergibst:

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

Options einrichten

Erforderlich

Option	Typ	Beschreibung
options.element	string - HTMLElement	Das Widget wird in dieses HTMLElement eingefügt. Du kannst direkten Zugriff auf ein vorhandenes HTMLElement übergeben oder die String-ID für dieses Element bereitstellen. Wenn diese Eigenschaft nicht angegeben wird, wird versucht, eine ID „digitaservice-widget“ auf der Seite zu finden.
options.engine	string	Die absolute URL zur Anwendung, die im Widget geladen wird.

Optional

Option	Typ	Standardwert	Beschreibung
options.height	string	auto	Das Widget hat eine Standardhöhe von null, bevor es geladen wird. Du kannst dies mit einem Platzhalterwert überschreiben, um ein Springen der Seite zu vermeiden, je nachdem, wo das Widget auf der übergeordneten Seite verwendet wird. Der Wert ist in Pixel, z.B. „600px“. Wenn options.fixed = true verwendet wird, wird die Höhenangabe auf den angegebenen Wert festgesetzt und Bildlaufleisten werden eingefügt.
options.autoscroll	boolean	true	Abhängig von der Länge des Widget-Inhalts und der Benutzeranzeige kann es erforderlich sein, dass die Seite, die das Widget enthält, gescrollt werden muss. Standardmäßig wird beim Verwenden des Widgets die Gastgeberseite oben an das Widget gescrollt, um die Bedienbarkeit zu erleichtern. Um dies zu deaktivieren, setze autoscroll auf false. Diese Eigenschaft wird auf false gesetzt, wenn options.fixed true ist.
options.sharingurl	string	Die URL der Seite, die das Widget enthält	Beim Verwenden von Social Sharing ist dies die URL, die Leute in sozialen Medien teilen, um sie zu deiner Kampagne zu führen. Ist sharingurl ein leerer String, wird die Gastgeberseite (die das Widget enthält) als URL verwendet.
options.fixed	boolean	false	Normalerweise ändert das Widget automatisch die Größe, um den Inhalt der Engine anzupassen und Bildlaufleisten zu vermeiden. Ist dies auf true gesetzt, bleibt die Widget-Höhe konstant und ändert sich nicht. Bei Verwendung dieser Option sollte der options.height Wert auf etwas anderes als „auto“ gesetzt werden. Wenn die Höhe der Engine größer ist als der Höhe-Wert, werden Bildlaufleisten verwendet, um zu navigieren.
options.width	string	„100%“	Die Breite des Widgets. Kann in einer CSS-Einheit wie „%“ oder „px“ angegeben werden.

Laden

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

Hinweis: Stelle sicher, dass alle untenstehenden Rückrufe eingerichtet sind, bevor du lädst, um alle Ereignisse zu erfassen.

```widget.load();```# Event Callbacks

onReady

Sobald widget.load() aufgerufen wurde, lädt und initialisiert sich das Widget. Wenn das Widget diesen Vorgang abgeschlossen hat, wird es den optionalen onReady Rückruf aufrufen.

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

onError

Sobald widget.load() aufgerufen wurde, lädt und initialisiert sich das Widget. Alle nach diesem Punkt auftretenden schwerwiegenden Fehler werden den optionalen onError Rückruf aufrufen.

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

onComplete

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

Hinweis: Wenn Sie darauf reagieren möchten, sollten Sie möglicherweise ein Timeout innerhalb des Rückrufs einbauen, damit der Benutzer Zeit hat, den Abschlussbildschirm zu lesen, da dieser sofort nach Erreichen des letzten Bildschirms angezeigt wird. Sie können auch onClose verwenden.

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

onResize

Tritt auf, wenn die Engine ihre 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 speziellen 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. Dies ist ein guter Zeitpunkt, das Widget von Ihrer Seite zu entfernen und den Lebenszyklus des Widgets zu beenden.

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

onFirstInteraction

Wenn der Benutzer zum ersten 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 innerhalb des Widgets die Route geändert hat (zwischen 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) // {} oder undefined
   console.log("Benutzer hat die Route innerhalb der Anwendung zum ersten Mal geändert");
};

onScrollToTop

Tritt auf, wenn die Anwendung versucht, zurück nach oben zu scrollen. Kann in 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("Nach oben scrollen");
};```# Kennzahlen

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

Schlüssel	Beschreibung
data.gameMetrics.CurrentAttempt	Die Versuche des Nutzers, nachdem er das Spiel abgeschlossen hat.
data.gameMetrics.prizeID	Die Gewinn-ID.
data.gameMetrics.prizeImage	Das Gewinnbild.
data.gameMetrics.prizeName	Der Gewinnname.
data.gameMetrics.prizeRef	Die Gewinnreferenz.
data.gameMetrics.totalPossibleAttempts	Die Gesamtanzahl der möglichen Versuche.
data.gameMetrics.userWon	true/false je nach Nutzerstatus.
data.gameMetrics.score	Die Gesamtmenge der gesammelten Punkte, mit denen dieser Nutzer das Spiel abgeschlossen hat.

Zugangsdaten

Schlüssel	Beschreibung
data.credentials.isPreviewMode	Überprüfen, ob das Spiel im Vorschau-Modus ist.
data.credentials.projectID	Die App-ID der aktuell 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 Herausgeber-ID.
data.credentials.sessionID	Die Sitzungs-ID des aktuellen Spielers.

Aktualisiert am: 01/08/2024

War dieser Beitrag hilfreich?

Danke!