[AEM Assets]{class="badge positive" title="Gilt für AEM Assets)."}

Interaktive Bilder interactive-images

Sie können aus statischen Bildern ganz einfach ansprechende Erlebnisse für Kunden machen, indem Sie Hotspots mit Shopping-Funktion auf ein Bild ziehen und dort ablegen. Hotspots mit Shopping-Funktion kombinieren zusätzliche Informationen über ein Produkt oder eine Dienstleistung mit der direkten POS-Funktion „In den Warenkorb legen“ oder „Kaufen“. Kunden können diese Hotspots auswählen, die eine direkte Verbindung mit dem Produkt oder Service herstellen, es zum Warenkorb hinzufügen oder eine Verknüpfung zu einer Web-Seite herstellen. Direkte Erlebnisse wie diese erhöhen Kundeninteraktionen und Konversionen auf Ihrer Website.

Die folgende Abbildung zeigt ein Banner mit Shopping-Funktion mit einem Schnellansichts-Popup. Benutzer können die Schnellansicht aktivieren, indem sie auf den Kreis oder „Hotspot“ des Modells tippen.

Siehe Interaktive Bilder in Aktion auf der Seite.

Sehen Sie sich an, wie interaktive Bildbanner erstellt werden watch-how-interactive-image-banners-are-created

Sehen Sie sich eine exemplarische Vorgehensweise dazu an, wie interaktive Bildbanner erstellt werden (10 Minuten und 33 Sekunden). Außerdem erfahren Sie, wie Sie interaktive Bild-Banner in der Vorschau betrachten, bearbeiten und bereitstellen können.

Schnellstart: Interaktive Bilder quick-start-interactive-images

Die folgende schrittweise Workflow-Beschreibung soll Ihnen dabei helfen, interaktive Bilder in Adobe Experience Manager Assets schnell zu verwenden.

Suchen Sie nach der Überschrift Beispiele in einigen der Schnellstartaufgaben. Hier finden Sie ein kurzes Tutorial, das auf der folgenden Beispiel-Web-Seite basiert, der noch keine interaktiven Bilder hinzugefügt wurden.

Die Beispiele veranschaulichen die Schritte zur Integration interaktiver Videos auf Ihrer Website.

Schritte zum Erstellen interaktiver Bilder:

(Optional) Ermitteln von Hotspot-Variablen optional-identifying-hotspot-variables

Ermitteln Sie zunächst dynamische Variablen in Ihrer vorhandenen Schnellansichtsimplementierung, um Hotspot-Daten einzugeben und das interaktive Bild zu erstellen.

Wenn Sie Hotspots zu einem Banner-Bild in Experience Manager Assets hinzufügen, müssen Sie eine SKU (Stock Keeping Unit) zuweisen. Die SKU ist eine eindeutige Kennung für jedes einzelne Produkt oder jede einzelne Dienstleistung, die Sie anbieten. Fügen Sie jedem Hotspot beliebige optionale Variablen hinzu. Anhand dieser Hotspot-Variablen werden Hotspots später mit Schnellansichtsinhalten abgeglichen.

Es ist wichtig, die Anzahl und den Typ der Variablen zu bestimmen, die mit Hotspot-Daten verknüpft werden sollen. Jeder Hotspot, der einem Bannerbild hinzugefügt wird, muss genügend Informationen enthalten, um das Produkt im vorhandenen Backend-System eindeutig zu identifizieren.

Sie können ein Set aus Variablen für Hotspot-Daten auf mehrere Arten ermitteln.

Oft reicht es aus, sich an das IT-Team zu wenden, das für die vorhandene Schnellansichtsimplementierung verantwortlich ist. Diese Team-Mitglieder kennen den Mindestsatz an Daten, die erforderlich sind, um eine Schnellansicht im System zu identifizieren. Es ist jedoch möglich, das vorhandene Verhalten des Frontend-Codes zu analysieren.

Bei den meisten Schnellansichtsimplementierungen wird das folgende Muster verwendet:

Im Anschluss sollten verschiedene Bereiche der bestehenden Website besucht werden, in denen die Schnellansichtsfunktion implementiert ist. Lösen Sie dann die Schnellansicht aus und rufen Sie die Ajax-URL ab, die von der Web-Seite zum Laden der Daten oder Inhalte der Schnellansicht gesendet wird.

Spezielle Debugging-Tools sind in der Regel nicht erforderlich. Moderne Webbrowser verfügen über Webinspektoren, die ausreichend sind. Im Folgenden finden Sie einige Beispiele für Webbrowser, die Web-Inspektoren beinhalten:

Wenn die Netzwerküberwachung im Browser aktiviert ist, lösen Sie die Schnellansicht auf der Seite aus.

Suchen Sie nun die Schnellansichts-Ajax-URL im Netzwerkprotokoll und kopieren Sie die aufgezeichnete URL für die zukünftige Analyse. In den meisten Fällen werden beim Auslösen der Schnellansicht zahlreiche Anfragen an den Server gesendet. In der Regel ist die Schnellansichts-Ajax-URL die erste URL in der Liste. Sie weist einen Teil oder Pfad mit einer komplexen Abfragezeichenfolge auf und ihr MIME-Typ lautet entweder text/html, text/xml oder text/javascript.

Während dieses Vorgangs müssen Sie verschiedene Bereiche der Website mit verschiedenen Produktkategorien und -typen besuchen. Der Grund dafür ist, dass Schnellansicht-URLs Teile enthalten können, die für eine bestimmte Website-Kategorie häufig verwendet werden. Sie ändern sich nur, wenn Sie einen anderen Bereich der Website besuchen.

Im einfachsten Fall ist der einzige variable Teil der Schnellansichts-URL die Produkt-SKU. In diesem Fall ist der SKU-Wert das einzige Datenelement, das Sie benötigen, um dem Bannerbild Hotspots hinzuzufügen.

In komplexen Fällen hat die Schnellansichts-URL jedoch neben der SKU verschiedene Elemente. Variierende Elemente sind beispielsweise die Kategorie-ID, der Farb-Code und der Größen-Code. In solchen Fällen ist jedes Element eine separate Variable in Ihrer Hotspot-Datendefinition für die Funktion für interaktive Bilder mit Shopping-Funktion in Experience Manager Assets.

Nachfolgend finden Sie einige Beispiele für Schnellansichts-URLs und die resultierenden Hotspot-Variablen:

Beispiel

Der in den drei obigen Beispielen verwendete Ansatz kann auch auf die Demo-Web-Seite“ angewendet ​.

Die Demo-Web-Seite enthält mehrere Produkt-Miniaturansichten, von denen jede eine Schnellansichts-Schaltfläche mit der Bezeichnung „Mehr anzeigen“ aufweist. Wählen Sie bei aktiviertem Debugging-Tool des Webbrowsers jede einzelne Schaltfläche aus und notieren Sie sich die aufgezeichneten Schnellansichts-URLs. Nachdem Sie alle vier Produktschnellansichten auf der Seite aktiviert haben, verfügen Sie über die folgende Liste mit den an das Backend gesendeten Schnellansichtsanfragen:

Wenn Sie die Server-Aufrufe betrachten, sehen Sie, dass nur der Anfragepfad produktspezifische Informationen enthält. Beachten Sie außerdem, dass die Abfragezeichenfolge überhaupt nicht verwendet wird und zwei unterschiedliche Typen von Datenteilen beteiligt sind:

Mit diesen Informationen hat die gesamte Schnellansichts-URL das folgende Muster:

/datafeed/$categoryId$-$SKU$.json

Auf Grundlage einer solchen Analyse verwenden Sie categoryId und SKU für Hotspots.

Jetzt können Sie ein Bildbanner hochladen und diesem Hotspots hinzufügen, indem Sie die Funktion für interaktive Bilder mit Shopping-Funktion in Experience Manager Assets verwenden.

(Optional) Erstellen einer Viewer-Vorgabe für interaktive Bilder optional-creating-an-interactive-image-viewer-preset

Sie können die standardmäßige Viewer-Vorgabe für interaktive Bilder mit dem Namen Shoppable_Banner verwenden, die im Lieferumfang von Experience Manager Assets enthalten ist. Sie können auch eine eigene benutzerdefinierte Viewer-Vorgabe für interaktive Bilder erstellen.

Wenn Sie eine benutzerdefinierte Viewer-Vorgabe für interaktive Bilder erstellen, können Sie das Erscheinungsbild von Hotspots auf dem Bildbanner bestimmen. Bei der Erstellung der Viewer-Vorgabe können Sie eine Hotspot-Grafik aus einer Galerie mit vordefinierten Bildern verwenden.

Nachdem Sie die Viewer-Vorgabe gespeichert haben, wird sie automatisch auf der Seite mit der Liste der „Viewer-Vorgaben“ in Experience Manager Assets aktiviert (eingeschaltet). Diese Funktionalität bedeutet, dass sie in der interaktiven Medienkomponente sowie dann sichtbar ist, wenn Sie ein Asset anzeigen. Um jedoch ein interaktives Banner mit dieser Viewer-Vorgabe bereitzustellen, veröffentlichen Sie auch Ihre Viewer-Vorgabe. Diese Regel gilt für benutzerdefinierte oder standardmäßige Viewer-Vorgaben.

So erstellen Sie eine Viewer-Vorgabe für interaktive Bilder:

Laden Sie ein Bildbanner hoch uploading-an-image-banner

Wenn Sie die gewünschten Bilder bereits hochgeladen haben, fahren Sie mit dem nächsten Schritt fort: Hinzufügen von Hotspots zu einem Bildbanner.

So laden Sie ein Bildbanner hoch:

Hinzufügen von Hotspots zu einem Bildbanner adding-hotspots-to-an-image-banner

Sie können einem Bildbanner Hotspots hinzufügen, indem Sie den Editor auf der Seite „Hotspot-Verwaltung“ verwenden.

Beim Hinzufügen von Hotspots können Sie sie als eine Schnellansichts-Popup-Anzeige, als einen Hyperlink oder als ein Experience Fragment definieren.

Weitere Informationen finden Sie unter Experience Fragments.

Die Optionen „Rückgängig“ und „Wiederholen“ in der Nähe der oberen rechten Ecke der Seite werden während der aktuellen Erstellungs-/Bearbeitungssitzung unterstützt.

Wenn Sie die Erstellung des interaktiven Bildes abgeschlossen haben, können Sie eine Vorschau anzeigen, um das interaktive Bild aus der Perspektive der Kunden zu betrachten.

Siehe (Optional) Anzeigen einer Vorschau für interaktive Bilder.

So fügen Sie einem Bildbanner Hotspots hinzu:

(Optional) Anzeigen einer Vorschau für interaktive Bilder optional-previewing-interactive-images

Sie können die Vorschau verwenden, um zu sehen, wie das interaktive Bild für Kunden dargestellt wird. Mit der Vorschau können Sie auch die Hotspots des Bildes testen. Dadurch wird sichergestellt, dass sie sich wie erwartet verhalten.

Wenn das interaktive Bild Ihren Vorstellungen entspricht, können Sie es veröffentlichen.
Siehe Einbetten des Video- oder Bild-Viewers auf einer Web-Seite.
Siehe Verknüpfen von URLs mit einer Web-Anwendung. Die URL-basierte Verknüpfungsmethode ist nicht möglich, wenn Ihr interaktiver Inhalt über Links mit relativen URLs verfügt, z. B. Links zu Experience Manager Sites-Seiten.
Siehe Hinzufügen von Dynamic Media-Assets zu Seiten.

So zeigen Sie eine Vorschau für interaktive Bilder an:

Veröffentlichen von interaktiven Bild-Assets publishing-interactive-image-assets

Weitere Informationen zum Veröffentlichen von interaktiven Bild-Assets finden Sie unter Veröffentlichen von Assets.

Integrieren eines interaktiven Bildes auf Ihrer Website integrating-an-interactive-image-with-your-website

Nachdem Sie ein Banner-Bild hochgeladen, Hotspots hinzugefügt, und das interaktive Bild veröffentlicht haben, können Sie es jetzt auf Ihrer Website hinzufügen.

Wenn Sie Experience Manager Sites-Kunde sind, können Sie das interaktive Bild hinzufügen, indem Sie die interaktive Medienkomponente auf Ihre Seite ziehen. Siehe Hinzufügen von Dynamic Media-Assets zu Seiten.

Wenn Sie nur Experience Manager Assets verwenden, können Sie das interaktive Bild manuell zu Ihrer Website hinzufügen, wie in diesem Abschnitt beschrieben.

Beispiel

Wenn Sie die Demo-Website als Beispiel betrachten, beachten Sie, dass das Bild mit den drei Personen ein statisches IMG-Tag ist:

<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">

Die Integration ist sehr einfach. Sie entfernen das IMG-Tag und ersetzen es durch den kopierten Einbettungs-Code aus Experience Manager Assets. Das Ergebnis zeigt das interaktive Bild mit Shopping-Funktion auf der Seite mit drei Kreis-Hotspots.

Um einen „Zuschnitt“ auf ein interaktives Bild mit Shopping-Funktion für eine responsive Umgebung anzuwenden, fügen Sie im Pfad das Konfigurationsattribut ZoomView.iscommand für das interaktive Bild ein. In diesem Fall wird die Komponente ZoomView aufgerufen und iscommand ist der von Ihnen verwendete Image-Serving-Befehl „Zuschnitt“.

Informationen hierzu finden Sie im Thema über das Konfigurationsattribut ZoomView.iscommand.

Informationen finden Sie unter Image-Serving-Befehl.

Jetzt können Sie das interaktive Bild in eine vorhandene Schnellansicht auf Ihrer Website integrieren.

Integrieren eines interaktiven Bildes in einer Schnellansicht integrating-an-interactive-image-with-an-existing-quickview

Der letzte Schritt in diesem Prozess ist die Integration des interaktiven Bildes in eine vorhandene Schnellansichtsimplementierung auf Ihrer Website. Es gibt keine Lösung für die Integration, die für alle Fälle funktioniert. Jede Schnellansichtsimplementierung ist einzigartig und erfordert eine individuelle Vorgehensweise. Daher ist es hilfreich, einen Frontend-IT-Experten zu konsultieren.

Die vorhandene Schnellansichtsimplementierung stellt normalerweise eine Kette von untereinander verknüpften Aktionen dar, die auf der Web-Seite in der folgenden Reihenfolge stattfinden:

Diese Aufrufe stellen nicht unbedingt unabhängige öffentliche API-Aufrufe dar, die die Web-Seitenlogik aus einem beliebigen Schritt aufruft. Stattdessen handelt es sich um einen verketteten Aufruf, bei dem jeder nächste Schritt in der letzten Phase (Callback) des vorherigen Schritts enthalten ist.

Wenn das interaktive Bild mit Shopping-Funktion Schritt 1 und teilweise Schritt 2 ersetzt, tippt ein Benutzer auf einen Hotspot im Bild mit Shopping-Funktion. Der Viewer verarbeitet solche Benutzerinteraktionen. Der Viewer gibt ein Ereignis an die Web-Seite zurück, das alle Hotspot-Daten enthält, die zuvor zu Experience Manager Assets hinzugefügt wurden.

In einem solchen Ereignis-Handler nimmt der Frontend-Code Folgendes vor:

Der von Experience Manager Assets zurückgegebene Einbettungs-Code verfügt über einen einsatzbereiten Ereignis-Handler, der auskommentiert ist, wie im folgenden hervorgehobenen Code-Fragment zu sehen ist:

        var s7interactiveimageviewer = new s7viewers.InteractiveImage({
            "containerId" : "s7interactiveimage_div",
            "params" : {
                "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
                "contenturl" : "https://aodmarketingna.assetsadobe.com/",
                "config" : "/etc/dam/presets/viewer/Shoppable_Media",
                "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
        })
        /* // Example of interactive image event for Quickview.
             s7interactiveimageviewer.setHandlers({
                "quickViewActivate": function(inData) {
                    var sku=inData.sku; //SKU for product ID
                    //To pass other parameter from the hotspot, add custom parameter during the hotspot setup as parameterName=value
                    loadQuickView(sku); //Replace this call with your Quickview plugin
                    //See your Quickviewer plugin for the Quickview call
                 },
             });
        */
        s7interactiveimageviewer.init();

Daher ist es nur erforderlich, die Auskommentierung des Codes aufzuheben und den Platzhalter-Handler-Text durch den Code zu ersetzen, der für die bestimmte Web-Seite spezifisch ist.

Der Prozess der Erstellung der Schnellansichts-URL ist das Gegenteil des Prozesses, der verwendet wird, um die zuvor erläuterten Hotspot-Variablen zu ermitteln.

Siehe Ermitteln von Hotspot-Variablen.

Unter Verwendung der vorherigen Schnellansichts-URL-Beispiele können Sie in den folgenden Beispielen sehen, wie die Schnellansichts-URL in den einzelnen Fällen erstellt wird:

Der letzte Schritt besteht darin, die Schnellansichts-URL Trigger und den Schnellansichtsbereich zu aktivieren. Hierzu ist die Unterstützung eines Frontend-IT-Experten erforderlich. Sie wissen, wie sie die Schnellansichtsimplementierung korrekt vom entsprechenden Trigger trennen. Sie verfügen über eine einsatzbereite Schnellansichts-URL.

Sie können sehen, wie diese Schritte auf die Demo-Website angewendet werden, um ein interaktives Bild mit Shopping-Funktion mit dem Schnellansichts-Code vollständig zu integrieren. Zuvor wurde die Struktur der Schnellansichts-URL wie folgt ermittelt:

/datafeed/$categoryId$-$SKU$.json

Um diese URL im quickViewActivate-Handler zu rekonstruieren, können Sie die Felder categoryId und SKU verwenden. Diese Felder sind im inData-Objekt verfügbar, das der Code des Viewers an den Handler übergibt:

var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

Auf der Demo-Website wird die Anzeige des Schnellansichtsdialogfelds durch einen einfachen loadQuickView()-Funktionsaufruf ausgelöst. Diese Funktion akzeptiert als einziges Argument die Schnellansichtsdaten-URL. Der letzte Schritt bei der Integration des interaktiven Bildes mit Shopping-Funktion besteht darin, dem quickViewActivate-Handler die folgende Code-Zeile hinzuzufügen:

loadQuickView(quickViewUrl);

Im Folgenden finden Sie den vollständigen Quell-Code:

 var s7interactiveimageviewer = new s7viewers.InteractiveImage({
  "containerId" : "s7interactiveimage_div",
  "params" : {
   "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
   "contenturl" : "https://aodmarketingna.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Media",
   "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
 })
   s7interactiveimageviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku;
     var categoryId=inData.categoryId;
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    },
   });
 s7interactiveimageviewer.init();

Die endgültige Demo-Website mit dem vollständig integrierten interaktiven Bild.

Erstellen eines benutzerdefinierten Popup-Fensters mithilfe einer Schnellansicht using-quickviews-to-create-custom-pop-ups

Siehe Erstellen eines benutzerdefinierten Popup-Fensters mithilfe einer Schnellansicht.