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 einer direkten POS-Funktion, wie „In den Einkaufswagen legen“ oder „Kaufen“. Kunden können auf diese Hotspots tippen und direkt mit dem Produkt oder Service verknüpft werden, sie zu einem Warenkorb hinzufügen oder mit einer Webseite verknüpft werden. Direkte Erlebnisse wie diese erhöhen die Kundeninteraktion und die Konversion 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.

Zeigen Sie die interaktiven Bilder in Aktion auf der oben gezeigten Webseite an, indem Sie Folgendes aufrufen:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion-QVzoom/index2-shoppable.html?lang=de

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

Hier erhalten Sie eine Einführung (10 Min., 33 Sek.) in die Erstellung interaktiver Bild-Banner. Außerdem erfahren Sie, wie Sie interaktive Bildbanner in der Vorschau anzeigen, bearbeiten und bereitstellen.

Schnellstart: Interaktive Bilder quick-start-interactive-images

Die folgende schrittweise Workflow-Beschreibung soll Ihnen dabei helfen, interaktive Bilder in AEM Assets einzurichten und schnell auszuführen.

Suchen Sie nach der Überschrift Beispiele in einigen der Schnellstartaufgaben. Es enthält ein kurzes Tutorial, das auf dem folgenden Webseitenbeispiel basiert, dem noch keine interaktiven Bilder hinzugefügt wurden:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=de

Das Tutorial veranschaulicht die Schritte zur Integration interaktiver Bilder auf Ihrer eigenen Website.

Workflow für interaktive Bilder:

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

Ermitteln Sie zunächst die dynamischen Variablen, die von Ihrer vorhandenen Schnellansichtsimplementierung verwendet werden, damit Sie Hotspot-Daten eingeben können, um das interaktive Bild zu erstellen.

Wenn Sie einem Bannerbild in AEM Assets Hotspots hinzufügen, müssen Sie eine SKU (Stock Keeping Unit: eindeutiger Bezeichner für die jeweiligen von Ihnen angebotenen Produkte oder Services) und optionale zusätzliche Variablen für jeden Hotspot zuweisen. Diese Hotspot-Variablen werden später verwendet, um Hotspots mit Schnellansichtsinhalten abzugleichen.

Es ist wichtig, die Anzahl und den Typ der Variablen, die mit Hotspot-Daten verknüpft werden sollen, ordnungsgemäß zu identifizieren. Jeder dem Bannerbild hinzugefügte Hotspot muss ausreichend 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.

Manchmal ist es ausreichend, IT-Experten zu konsultieren, die für die vorhandene Schnellansichtsimplementierung verantwortlich sind. Diese kennen wahrscheinlich den Mindestsatz an Daten, der zum Ermitteln der Schnellansicht im System erforderlich ist. In den meisten Fällen ist es jedoch auch möglich, einfach das vorhandene Verhalten des Frontend-Codes zu analysieren.

Die meisten Schnellansichtsimplementierungen verwenden das folgende Paradigma:

Dann werden unterschiedliche Bereiche der vorhandenen Website besucht, auf denen die Schnellansichtsfunktion implementiert wird, die Schnellansicht wird ausgelöst und die Ajax-URL, die durch die Web-Seite zum Laden der Schnellansichtsdaten oder -inhalte gesendet wurde, wird erfasst.

Normalerweise müssen Sie keine speziellen Debugging-Tools verwenden. Moderne Webbrowser verfügen über Web-Inspektoren, die dafür 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/xml, text/html oder text/javascript.

Während dieses Prozesses ist es wichtig, verschiedene Bereiche Ihrer Website mit verschiedenen Produktkategorien und -typen zu besuchen. Der Grund dafür ist, dass Schnellansichts-URLs möglicherweise Teile aufweisen, die für eine bestimmte Website-Kategorie häufig vorkommen, sich aber nur ändern, 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 zum Hinzufügen von Hotspots zum Bannerbild benötigen.

In komplexen Fällen hat die Schnellansichts-URL allerdings mehrere verschiedene Elemente zusätzlich zur SKU, wie Kategorie-ID, Farb-Code, Größen-Code usw. In solchen Fällen ist jedes Element eine separate Variable in Ihrer Hotspot-Datendefinition in der Funktion für interaktive Bilder mit Shopping-Funktion in AEM Assets.

Sehen Sie sich die folgenden Beispiele für Schnellansichts-URLs und die resultierenden Hotspot-Variablen an:

Beispiel

Sie können den in den drei oben genannten Beispielen verwendeten Ansatz auch auf die Demo-Web-Seite anwenden:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=de

Die Demo-Web-Seite enthält mehrere Produktminiaturansichten, von denen jede eine Schnellansichtsschaltfläche mit der Bezeichnung Weitere Informationen. Klicken Sie bei aktiviertem Debugging-Tool des Webbrowsers auf jede Schaltfläche 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 diese 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 würden Sie categoryId und SKU für Hotspots verwenden.

Jetzt können Sie ein Bildbanner hochladen und diesem Hotspots mit der Funktion für interaktive Bilder mit Shopping-Funktion in AEM Assets hinzufügen.

(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 , das mit AEM Assets geliefert wird. 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 aktiviert (eingeschaltet) auf der Viewer-Vorgabe Listenseite in AEM Assets. Diese Funktionalität bedeutet, dass sie in der interaktiven Medienkomponente sowie dann sichtbar ist, wenn Sie ein Asset anzeigen. Allerdings liefern ein interaktives Banner mit dieser Viewer-Vorgabe, müssen Sie publish auch Ihre Viewer-Vorgabe (dies gilt für benutzerdefinierte oder vordefinierte Viewer-Vorgaben).

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

Hochladen eines Bildbanners 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 im Hotspot-Verwaltung Seite.

Beim Hinzufügen von Hotspots können Sie sie als Popup-Schnellansichtsanzeige, als Hyperlink oder als 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 Vorschau um eine Darstellung anzuzeigen, wie das interaktive Bild für Kunden angezeigt wird.

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

Mithilfe der Vorschau können Sie eine Darstellung des interaktiven Bildes aus der Perspektive der Kunden anzeigen und die Hotspots des Bildes testen, um sicherzustellen, 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. Beachten Sie, dass die URL-basierte Verknüpfungsmethode nicht möglich ist, wenn Ihr interaktiver Inhalt über Links mit relativen URLs verfügt, insbesondere über Links zu Seiten in AEM Sites.
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 Bannerbild hochgeladen, Hotspots hinzugefügt und das interaktive Bild veröffentlicht haben, können Sie es jetzt auf Ihrer Website hinzufügen.

Wenn Sie AEM 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 AEM Assets verwenden, können Sie das interaktive Bild Ihrer Website manuell hinzufügen, wie in diesem Abschnitt beschrieben.

Beispiel

Verwenden der Demo-Website als ein Beispiel:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=de

Beachten Sie, dass das Bild der drei Männer ein statisches Bild ist IMG Tag:

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

Die Integration ist so einfach wie das Entfernen des IMG-Tags und dessen entsprechende Ersetzung durch den kopierten Integrations-Code aus AEM Assets. Sie können das Ergebnis in der folgenden URL anzeigen, die ein interaktives Bild mit Shopping-Funktion auf der Seite mit drei Kreis-Hotspots anzeigt:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-1.html?lang=de

Um einen Zuschnitt auf ein interaktives Bild mit Shopping-Funktion für eine responsive Umgebung anzuwenden, können Sie das Konfigurationsattribut für das interaktive Bild einbeziehen ZoomView.iscommand zum Pfad - wobei ZoomView die aufzurufende Komponente ist und iscommand ist der von Ihnen angewendete Image-Serving-Befehl.

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 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. Daher ist ein spezifischer Ansatz erforderlich, wofür höchstwahrscheinlich die Unterstützung eines Frontend-IT-Mitarbeiters nötig ist.

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 möglicherweise keine unabhängigen öffentlichen API-Aufrufe dar, die durch die Web-Seitenlogik in einem beliebigen Schritt aufgerufen werden können. Vielmehr handelt es sich um einen verketteten Aufruf, in dem der jeweils nächste Schritte in der letzten Phase (Callback) des vorherigen Schritts ausgeblendet ist.

Während das interaktive Bild mit Shopping-Funktion Schritt 1 und teilweise Schritt 2 ersetzt, wenn ein Benutzer auf einen Hotspot innerhalb des Shop-fähigen Bildes klickt, wird diese Benutzerinteraktion vom Viewer verarbeitet. Der Viewer gibt der Web-Seite ein Ereignis zurück, das alle zuvor zu AEM Assets hinzugefügten Hotspot-Daten aufweist.

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

Der von AEM 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, you will need to add custom parameter during the hotspot setup as parameterName=value
                    loadQuickView(sku); //Replace this call with your Quickview plugin
                    //Please refer to your Quickviewer plugin for the Quickview call
                 },
             });
        */
        s7interactiveimageviewer.init();

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

Der Prozess der Erstellung der Schnellansichts-URL ist im Wesentlichen das Gegenteil des Prozesses, der zur Identifizierung der zuvor behandelten Hotspot-Variablen verwendet wird.

Informationen hierzu finden Sie unter Ermitteln von Hotspot-Variablen.

Anhand unserer vorherigen Schnellansichts-URL-Beispiele können Sie in den folgenden Beispielen sehen, wie die Schnellansichts-URL in jedem Fall erstellt wird:

Der letzte Schritt besteht darin, die Schnellansichts-URL auszulösen, und für das Aktivieren des Schnellansichtsbereichs ist höchstwahrscheinlich die Unterstützung eines Frontend-IT-Mitarbeiters aus Ihrer IT-Abteilung erforderlich. Diese Fachkraft verfügt am ehesten über das entsprechende Fachwissen, um mithilfe einer vordefinierten Schnellansichts-URL die Implementierung der Schnellansicht im entsprechenden Schritt auszulösen.

Sie können sehen, wie diese Schritte auf die Demo-Website angewendet werden, sodass ein interaktives Bild mit Shopping-Funktion mit dem Schnellansichts-Code voll integriert wird. Zuvor wurde die Struktur der Schnellansichts-URL wie folgt identifiziert:

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

Um diese URL innerhalb der Handlers quickViewActivate zu rekonstruieren, können Sie die Felder categoryId und SKU verwenden, die im Objekt inData verfügbar sind, das durch den Code des Viewers an den Handler übergeben wird:

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 Demowebsite mit dem vollständig integrierten interaktiven Bild sieht wie folgt aus:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-3.html?lang=de

Verwenden von Schnellansichten zum Erstellen benutzerdefinierter Popups using-quickviews-to-create-custom-pop-ups

Siehe Erstellen benutzerdefinierter Popups mithilfe von Schnellansichten.