Sie sehen sich Hilfeinhalte der folgenden Version an:

Sie können statische Bilder mühelos in umfassende, begeisternde Erlebnisse für Kunden umwandeln, indem Sie Hotspots mit Shopping-Funktion per Drag-and-drop auf ein Bild ziehen. In Hotspots mit Shopping-Funktion werden zusätzliche Informationen über ein Produkt oder einen Service mit einer direkten Point-of-Sale-Funktion vom Typ „Zu Warenkorb hinzufügen“ oder „Kaufen“ kombiniert. Kunden können auf diese Hotspots tippen oder klicken und können direkt mit dem Produkt oder Service eine Verbindung herstellen, es zum Warenkorb hinzufügen oder es mit einer Webseite verknüpfen. Direkte Erlebnisse wie diese erhöhen die Kundenbeteiligung bzw. den -abschluss 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 Webseite darüber an, indem Sie Folgendes aufrufen:

https://marketing.adobe.com/resources/help/de_DE/aod/shop-banner/landing-3.html

Schnellstart: Interaktive Bilder

Die folgende schrittweise Workflow-Beschreibung soll Ihnen den schnellen Einstieg in die Arbeit mit interaktiven Bildern in AEM Assets ermöglichen.

Suchen Sie nach der Überschrift Beispiele in einigen der Schnellstartaufgaben. Die Integration interaktiver Bilder auf einer Website wird durch ein kurzes Lernprogramm veranschaulicht, das auf der folgenden Demo-Webseite basiert.

https://marketing.adobe.com/resources/help/de_DE/aod/shop-banner/landing-0.html

Schritte zum Erstellen interaktiver Bilder:

  1. (Optional) Ermitteln von Hotspot-Variablen: Wenn Sie lediglich AEM Assets und dynamische Medien verwenden, ermitteln Sie zunächst die dynamischen Variablen, die in Ihrer vorhandenen Schnellansichtsimplementierung verwendet werden, damit Sie bei der Erstellung des interaktiven Bildes Hotspot-Daten eingeben können. Siehe (Optional) Ermitteln von Hotspot-Variablen.
    Wenn Sie jedoch AEM Sites, AEM eCommerce oder beides verwenden, ist dieser Schritt nicht erforderlich.
    Siehe eCommerce-Konzepte in AEM Assets.
  2. (Optional) Erstellen einer Viewer-Vorgabe für interaktive Bilder: Passen Sie das Grafikbild an, das zur Darstellung von Hotspots verwendet wird. Die Erstellung Ihrer eigenen Viewer-Vorgabe für interaktive Bilder ist nicht erforderlich, wenn Sie stattdessen die standardmäßig bereitgestellte Viewer-Vorgabe für interaktive Bilder namens Shoppable_Banner (Banner mit Shopping-Funktion) verwenden möchten.
    Siehe (Optional) Erstellen einer Viewer-Vorgabe für interaktive Bilder.
  3. Hochladen eines Bildbanners – Laden Sie Bildbanner hoch, die Sie interaktiv machen möchten.
    Siehe Hochladen eines Bildbanners.
  4. Hinzufügen von Hotspots zu einem Bildbanner: Fügen Sie einen oder mehrere Hotspots einem Bildbanner hinzu und weisen Sie jedem eine Aktion wie beispielsweise einen Link oder eine Schnellansicht zu. Nachdem Sie Hotspots hinzugefügt haben, schließen Sie diese Aufgabe ab, indem Sie das interaktive Bild veröffentlichen.
    Siehe Hinzufügen von Hotspots zu einem Bildbanner.
    Siehe (Optional) Anzeigen einer Vorschau für interaktive Bilder. Bei Bedarf können Sie eine Darstellung des Banners mit Shopping-Funktion anzeigen und dessen Interaktivität testen.
  5. Hinzufügen eines interaktiven Bildes zu Ihrer Website oder zu Ihrer Website in AEM
    Wenn Sie AEM Sites, AEM eCommerce oder beides verwenden, können Sie das interaktive Bild direkt auf einer Webseite in AEM hinzufügen, indem Sie die interaktive Medienkomponente auf die Seite ziehen. Siehe Hinzufügen von Assets aus dynamischen Medien zu Seiten.
    Wenn Sie lediglich AEM Assets und dynamische Medien verwenden, müssen Sie den Einbettungscode auf Ihrer Website kopieren und in Ihre vorhandene Schnellansicht integrieren. Siehe Integrieren eines interaktiven Bildes auf Ihrer Website.
    Wenn Sie einen Drittanbieter-WCM (Web Content Manager) verwenden, müssen Sie das neue interaktive Video in die vorhandene Schnellansichtsimplementierung integrieren, die auf Ihrer Website verwendet wird. Siehe Integrieren eines interaktiven Bildes in einer vorhandenen Schnellansicht.





(Optional) Ermitteln von Hotspot-Variablen

Hinweis:

Diese Aufgabe ist nur erforderlich, wenn Folgendes zutrifft:

  • Sie möchten das Bild durch Auslösen von Schnellansichten in ein interaktives Bild umwandeln.
  • Ihre AEM-Implementierung verwendet kein eCommerce-Integrations-Framework, um Produktdaten aus einer eCommerce-Lösung wie IBM Websphere Commerce, Elastic Path, hybris oder Intershop in AEM abzurufen. Siehe eCommerce-Konzepte in AEM Assets.

Wenn Ihre AEM-Implementierung eCommerce verwendet, können Sie diese Aufgabe überspringen und zur nächsten Aufgabe übergehen.

Ermitteln Sie zunächst die dynamischen Variablen, die von der 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 jedem Hotspot eine SKU und optional zusätzliche Variablen zuweisen. Anhand dieser Hotspot-Variablen werden Hotspots später mit Schnellansichtsinhalten abgeglichen.

Sie müssen die Anzahl und den Typ der Variablen für die Verknüpfung mit Hotspot-Daten korrekt identifizieren. Jeder dem Bannerbild hinzugefügte Hotspot muss ausreichend Informationen enthalten, um das Produkt im vorhandenen Back-End-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, die erforderlich sind, um die Schnellansicht im System zu ermitteln. In den meisten Fällen ist es jedoch auch möglich, einfach das vorhandene Verhalten des Front-End-Codes zu analysieren.

Der Großteil der Schnellansichtsimplementierungen verwendet das folgende Modell:

  • Der Benutzer aktiviert ein Benutzeroberflächenelement auf der Website. Er klickt z. B. auf eine „Schnellansicht“-Schaltfläche.
  • Die Website sendet eine Ajax-Anforderung an das Back-End, um bei Bedarf die Schnellansichtsdaten oder -inhalte zu laden.
  • Die Schnellansichtsdaten werden in den Inhalt übersetzt, um für das Rendern auf der Webseite vorbereitet zu werden.
  • Schließlich zeigt der Front-End-Code diesen Inhalt visuell auf dem Bildschirm an.

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 Webseite 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. Die folgenden Webbrowser beispielsweise umfassen Web-Inspektoren:

  • Um alle ausgehenden HTTP-Anforderungen in Google Chrome anzuzeigen, drücken Sie F12, um den Bereich für Entwicklertools zu öffnen, und klicken Sie dann auf die Registerkarte „Network“.
  • In Firefox können Sie entweder das Firebug-Plug-in durch Drücken auf F12 aktivieren und dessen Netzwerk-Registerkarte verwenden oder das integrierte Inspektor-Tool und dessen Netzwerk-Registerkarte einsetzen.

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 Anforderungen an den Server gesendet. Normalerweise ist die Schnellansichts-Ajax-URL die erste 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. 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 Datenteil, das Sie benötigen, um dem Bannerbild Hotspots hinzuzufügen.

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

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

Einzelne SKU, befindet sich in der Abfragezeichenfolge.

Die aufgezeichneten Schnellansichts-URLs enthalten Folgendes:

  • http://server/json?productId=866558&source=100

  • http://server/json?productId=1196184&source=100

  • http://server/json?productId=1081492&source=100

  • http://server/json?productId=1898294&source=100

Der einzige verfügbare Teil in der URL ist der Wert des Abfragezeichenfolgenparameters „productId=“, und es handelt sich eindeutig um einen SKU-Wert. Daher müssen nur die SKU-Felder der Hotspots mit Werten wie 866558, 1196184, 1081492, 1898294 ausgefüllt werden.

Einzelne SKU, befindet sich am URL-Pfad.

Die aufgezeichneten Schnellansichts-URLs enthalten Folgendes:

  • http://server/product/6422350843

  • http://server/product/1607745002

  • http://server/product/0086724882

Der variable Teil befindet sich im letzten Abschnitt des Pfads und wird zum SKU-Wert der Hotspots: 6422350843, 1607745002, 0086724882.

SKU und Kategorie-ID in der Abfragezeichenfolge.

Die aufgezeichneten Schnellansichts-URLs enthalten Folgendes:

  • http://server/quickView/product/?category=1100004&prodId=305466

  • http://server/quickView/product/?category=1100004&prodId=310181

  • http://server/quickView/product/?category=1740148&prodId=308706

In diesem Fall liegen zwei abweichende Teile in der URL vor. Die SKU wird im Parameter prodId gespeichert, während die Kategorie-ID im Parameter category= gespeichert wird.

Im eigentlichen Sinne handelt es sich bei Hotspot-Definitionen um Paare. Also einen SKU-Wert und eine zuätzliche Variable mit dem Namen categoryId. Die resultierenden Paare lauten wie folgt:

  • Die SKU lautet 305466 und „categoryId“ lautet 1100004.

  • Die SKU lautet 310181 und categoryId lautet 1100004.

  • Die SKU lautet 308706 und categoryId lautet 1740148.

 

Beispiel

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

https://marketing.adobe.com/resources/help/de_DE/aod/shop-banner/landing-0.html

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

  • /datafeed/Men-Windbreaker.json
  • /datafeed/Men-SimpleHenley.json
  • /datafeed/Men-CamoPullover.json
  • /datafeed/Women-QuiltedDownJacket.json

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

  • Der erste Typ ist „Männer“ oder „Frauen“. Dies kann als „Produktkategorie“ bezeichnet werden.
  • Der zweite Typ ist der Produktname, wie beispielsweise „CamoPullover“. Sie können davon ausgehen, dass dies die Produkt-SKU ist.

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

Sie können stattdessen die standardmäßig bereitgestellte Viewer-Vorgabe für interaktive Bilder namens Shoppable_Banner (Banner mit Shopping-Funktion) aus dem Lieferumfang von AEM Assets verwenden. 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 AEM Assets aktiviert (eingeschaltet). Diese Funktionalität bedeutet, dass sie in der interaktiven Medienkomponente sichtbar ist, sobald Sie ein Asset anzeigen. Um jedoch ein interaktives Banner mit dieser Viewer-Vorgabe bereitzustellen, müssen Sie die Viewer-Vorgabe auch veröffentlichen (gilt für benutzerdefinierte und standardmäßig bereitgestellte Viewer-Vorgaben). 

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

  1. Tippen Sie links in der Leiste auf Tools > Assets > Viewer-Vorgaben.

  2. Tippen Sie in der Nähe der rechten oberen Ecke der Seite auf Erstellen.

  3. Geben Sie im Dialogfeld „Neue Viewer-Vorgabe“ einen Namen ein, um die Viewer-Vorgabe für interaktive Banner zu beschreiben.
    Hierbei handelt es sich um den Titel, der nach dem Speichern auf der Listenseite „Viewer-Vorgabe“ angezeigt wird.

  4. Wählen Sie im Pulldown-Menü „Rich-Media-Typ“ die Option Interaktives Bild aus.

  5. Tippen Sie auf Erstellen.

  6. Tippen Sie auf der Seite „Viewer-Vorgabe bearbeiten“ auf die Registerkarte Erscheinungsbild.

  7. Führen Sie einen der folgenden Schritte aus:

    • Um ein eigenes Hotspot-Bild hochzuladen, das Sie für Bilder verwenden möchten, tippen Sie auf das Symbol für die Asset-Auswahl. Navigieren Sie auf der Seite „Inhalt auswählen“ zum gewünschten Hotspot-Bild, wählen Sie es aus und tippen Sie oben rechts auf das Häkchen.
    • Um ein vordefiniertes Hotspot-Bild auszuwählen, tippen Sie auf das Symbol für die Hotspot-Galerie. Tippen Sie in der Palette der Hotspot-Galerie auf das gewünschte Hotspot-Bild.
  8. Tippen Sie in der Nähe der oberen rechten Ecke auf Speichern.

    Stellen Sie sicher, die neue Viewer-Vorgabe zu veröffentlichen.

    Informationen finden Sie im Thema über das Veröffentlichen der von Ihnen hinzugefügten Viewer-Vorgaben.

    Sie sind nun bereit, einen Bildbanner hochzuladen.

Hochladen eines Bildbanners

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

So laden Sie einen Imagebanner hoch:

  1. Laden Sie Bildbanner hoch, die interaktiv sein sollen.

    Informationen hierzu finden Sie im Thema über das Hochladen von Assets.

    Sie können jetzt dem Bildbanner Hotspots hinzuzufügen. Anweisungen dazu finden Sie in der folgenden Aufgabe.

Hinzufügen von Hotspots zu einem Bildbanner

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 oder als einen Hyperlink definieren.

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 sehen.

Siehe (Optional) Anzeigen der Vorschau für interaktive Bilder mit Shopping-Funktion.

Hinweis:

Wenn Sie Hotspots einem interaktiven Bild oder einem Bild für ein Karussellbanner hinzufügen, werden die Hotspot-Informationen immer am selben Metadatenspeicherort gespeichert, der relativ zum Speicherort des Bildes ist, unabhängig davon, ob es sich um ein interaktives Bild oder um ein Karussellbanner handelt. Das bedeutet, dass Sie dasselbe Bild zusammen mit den definierten Hotspot-Daten in beiden Viewern einfach wiederverwenden können.

Beachten Sie jedoch, dass Karussellbanner Imagemaps auf Bildern unterstützen, die auch Hotspots enthalten können. Bei interaktiven Bildern wird dies dagegen nicht unterstützt. Dies sollten Sie beachten, wenn Sie ein interaktives Bild oder ein Karussellbanner mit demselben Bild erstellen möchten. Stattdessen sollten Sie separate Kopien desselben Bildes verwenden, um interaktive Bilder und Karussellbilder zu erstellen.

Hinweis:

Wenn Sie interaktive Bilder mit Hotspots bearbeiten, um das Bild zu beschneiden, werden die Hotspots entfernt.

So fügen Sie einem Bildbanner Hotspots hinzu:

  1. Navigieren Sie in der Ansicht „Assets“ zu dem Bildbanner, das interaktiv sein soll.

  2. Führen Sie einen der folgenden Schritte aus:

    • Tippen Sie in der Symbolleiste auf Auswahl eingeben und wählen Sie dann das Bild aus. Tippen Sie in der Symbolleiste auf Bearbeiten.
    • Tippen Sie auf das Bild, um es auf der Seite „Detailansicht“ zu öffnen. Tippen Sie in der Symbolleiste auf Bearbeiten.
    • Bewegen Sie den Mauszeiger über das Bild, wählen Sie das Dropdown-Menü aus und tippen Sie auf Bearbeiten.

     

  3. Tippen Sie in der Nähe der oberen linken Ecke der Seite auf Hotspot hinzufügen (Fingertippsymbol).

  4. Tippen Sie in der Nähe der rechten oberen Ecke der Seite auf Hotspot.

  5. Tippen Sie auf dem Bild auf eine Stelle, an der der Hotspot angezeigt werden soll.

    Ziehen Sie den Hotspot bei Bedarf an eine neue Position. Fügen Sie bei Bedarf zusätzliche Hotspots hinzu.

    Um einen Hotspot zu löschen, wählen Sie in der Dropdown-Liste „Ausgewählter Hotspot“ den Namen des Hotspots, den Sie entfernen möchten, und tippen Sie dann in der Nähe der linken oberen Ecke der Seite auf Löschen.

  6. Geben Sie im Textfeld „Name“ den Namen des Hotspots ein. Dieser Name wird auch in der Dropdown-Liste „Ausgewählter Hotspot“ angezeigt.

  7. Führen Sie einen der folgenden Schritte aus:

    • Tippen Sie auf Schnellansicht.
      • Wenn Sie AEM Sites- oder eCommerce-Kunde sind, tippen oder klicken Sie auf das Produktauswahlsymbol (Lupe), um die Seite „Produkt wählen“ zu öffnen. Tippen oder klicken Sie auf das Produkt, das Sie verwenden möchten, und tippen Sie auf das Häkchen in der rechten oberen Ecke der Seite, um zum Karussellbanner-Editor zurückzukehren.
      •  Wenn Sie kein AEM Sites- oder eCommerce-Kunde sind, gehen Sie wie folgt vor:
        • Lesen Sie Ermitteln von Hotspot-Variablen. Diese Variablen müssen Sie definieren. 
        • Anschließend geben Sie den SKU-Wert manuell ein. Geben Sie im Textfeld „SKU-Wert“ die Bestandseinheit (Stock Keeping Unit, SKU) des Produkts ein. Hierbei handelt es sich um einen eindeutigen Bezeichner für die jeweiligen von Ihnen angebotenen Produkte oder Services. Der variable Teil der Schnellansichtsvorlage wird automatisch mit dem eingegebenen SKU-Wert ausgefüllt, sodass das System den Hotspot, auf den getippt wird, mit der Schnellansicht einer bestimmten SKU verbinden kann.
        • (Optional) Wenn die Schnellansicht andere Variablen enthält, die Sie zur weiteren Identifikation eines Produkts benötigen, tippen Sie auf Generische Variable hinzufügen. Geben Sie eine zusätzliche Variable im Textfeld an. Beispielsweise ist category=Mens eine hinzugefügte Variable.
    • Tippen Sie auf Hyperlink.
      • Wenn Sie AEM Sites-Kunde sind, tippen oder klicken Sie auf das Symbol zur Site-Auswahl (Ordner), um zu einer URL zu navigieren.
      • Wenn Sie Einzelkunde sind, geben Sie im Textfeld „HREF“ den vollständigen URL-Pfad zu einer verknüpften Webseite an.

    Vergessen Sie nicht anzugeben, ob der Link auf einer neuen Browser-Registerkarte (empfohlener Standard) oder auf derselben Registerkarte geöffnet werden soll.

  8. Tippen Sie auf Speichern.

  9. Tippen Sie auf Schließen, um zur Seite „Assets“ zurückzukehren.

  10. Veröffentlichen Sie das interaktive Bild. Durch eine Veröffentlichung kann das Banner über die Cloud bereitgestellt werden. Außerdem wird ein Einbettungscode zur Integration auf der Website von Dritten generiert.

    Informationen hierzu finden Sie im Thema über das Veröffentlichen von Assets.

    Nachdem Sie Hotspots hinzugefügt und das interaktive Bild veröffentlicht haben, können Sie es jetzt einer vorhandenen Website hinzufügen.

    Informationen hierzu finden Sie im Thema über das Hinzufügen eines interaktiven Bildes mit Shopping-Funktion zur Einstiegsseite Ihrer Website.

    Hinweis:

    Wenn Sie interaktive Bilder mit Hotspots bearbeiten, um das Bild zu beschneiden, werden die Hotspots entfernt.

(Optional) Anzeigen einer Vorschau für interaktive Bilder

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 Webseite.
Siehe Verknüpfen von URLs mit einer Webanwendung..
Siehe Hinzufügen von Assets aus dynamischen Medien zu Seiten.

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

  1. Navigieren Sie in der Ansicht „Assets“ zu einem vorhandenen interaktiven Bild, das Sie erstellt haben, um es in der Vorschau zu öffnen.

  2. Tippen Sie in der Nähe der linken oberen Ecke der Seite „Vorschau“ in der Dropdown-Liste „Inhalt“ auf Viewer.

  3. Tippen Sie in der Liste „Viewer“ auf Shoppable_Banner oder auf den Namen der von Ihnen erstellten Viewer-Vorgabe für interaktive Bilder.

  4. Tippen Sie auf die Hotspots auf dem Bild, um ihre zugehörigen Aktionen zu testen.

Integrieren eines interaktiven Bildes auf Ihrer Website

Nachdem Sie ein Bannerbild hochgeladen, Hotspots hinzugefügt und das interaktive Bild veröffentlicht haben, können Sie es jetzt auf Ihrer Webseite 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 Assets aus dynamischen Medien zu Seiten.

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

  1. Kopieren Sie den Einbettungscode des veröffentlichten interaktiven Bildes.
    Siehe Einbetten des Video- oder Bild-Viewers auf einer Webseite.
  2. Fügen Sie den kopierten Einbettungscode auf dem gewünschten Bereich innerhalb der Webseite hinzu. 
    Der kopierte Einbettungscode ist für eine responsive Umgebung ausgelegt, sodass die Anpassung an den zugewiesenen Bereich automatisch erfolgen sollte.

Beispiel

Verwenden der Demowebsite als ein Beispiel:

https://marketing.adobe.com/resources/help/de_DE/aod/shop-banner/landing-0.html

Beachten Sie, dass es sich beim Bild der drei Männer um ein statisches IMG-Tag handelt:

<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 Integrationscode 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://marketing.adobe.com/resources/help/de_DE/aod/shop-banner/landing-1.html

Hinweis:

Zurzeit dienen die Hotspots auf dem interaktiven Bild mit Shopping-Funktion auf der Demowebsite nur zu Anzeigezwecken. Sie sind zurzeit noch nicht in den vorhandenen Schnellansichten integriert.

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 ZoomView.iscommand im Pfad einbeziehen, wobei ZoomView die aufzurufende Komponente und iscommand der von Ihnen angewendete Image-Serving-Befehl „Zuschneiden“ ist.

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

Informationen finden Sie im Thema über den Image-Serving-Befehl.

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

Integrieren eines interaktiven Bildes in einer vorhandenen Schnellansicht

Hinweis:

Diese Aufgabe ist nur relevant, wenn Sie ausschließlich AEM Assets verwenden.

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 einer Front-End-IT-Person nötig ist.

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

  1. Ein Benutzer löst ein Element auf der Benutzeroberfläche Ihrer Website aus.
  2. Der Front-End-Code ruft anhand des in Schritt 1 ausgelösten Benutzeroberflächenelements eine Schnellansichts-URL auf.
  3. Der Front-End-Code sendet mithilfe der in Schritt 2 abgerufenen URL eine Ajax-Anforderung.
  4. Die Back-End-Logik gibt dem Front-End-Code die entsprechenden Schnellansichtsdaten oder -inhalte zurück.
  5. Der Front-End-Code lädt die Schnellansichtsdaten oder -inhalte.
  6. Optional wandelt der Front-End-Code die geladenen Schnellansichtsdaten in eine HTML-Darstellung um.
  7. Der Front-End-Code zeigt ein modales Dialogfeld an und rendert den HTML-Inhalt auf dem Bildschirm für den Endbenutzer.

Diese Aufrufe stellen möglicherweise keine unabhängigen öffentlichen API-Aufrufe dar, die durch die Webseitenlogik 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.

Gleichzeitig, wenn das interaktive Bild mit Shopping-Funktion Schritt 1 und teilweise Schritt 2 ersetzt, sofern ein Benutzer auf einen Hotspot auf dem Bild mit Shopping-Funktion klickt, wird eine derartige Benutzerinteraktion durch den Viewer verarbeitet. Der Viewer gibt der Webseite ein Ereignis zurück, das alle zuvor zu AEM Assets hinzugefügten Hotspot-Daten aufweist.

In einem solchen Ereignishandler nimmt der Front-End-Code Folgendes vor:

  • Er lauscht am Ereignis, das durch das interaktive Bild mit Shopping-Funktion ausgegeben wurde.
  • Er erstellt anhand der Hotspot-Daten eine Schnellansichts-URL.
  • Er löst den Schnellansichts-Ladevorgang vom Back-End aus und rendert die Schnellansicht auf dem Bildschirm, um sie anzuzeigen.

Der von AEM Assets zurückgegebene Einbettungscode verfügt über einen einsatzbereiten Ereignishandler, der auskommentiert ist, wie im folgenden hervorgehobenen Codefragment 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 quick view.
             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 Webseite spezifisch ist.

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

Informationen hierzu finden Sie im Thema über das Ermitteln von Hotspot-Variablen.

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

Einzelne SKU, befindet sich in der Abfragezeichenfolge.

s7interactiveimageviewer.setHandlers({
    "quickViewActivate": function(inData) {
        var quickViewUrl = "http://server/json?productId=" + inData.sku + "&amp;source=100";
     },
 });

Einzelne SKU, befindet sich am URL-Pfad.

s7interactiveimageviewer.setHandlers({
    "quickViewActivate": function(inData) {
        var quickViewUrl = "http://server/product/" + inData.sku;
     },
 });

SKU und Kategorie-ID in der Abfragezeichenfolge.

s7interactiveimageviewer.setHandlers({
    "quickViewActivate": function(inData) {
        var quickViewUrl = "http://server/quickView/product/?category=" + inData.categoryId + "&amp;prodId=" + inData.sku;
     },
 });

Der letzte Schritt besteht darin, die Schnellansichts-URL auszulösen, und für das Aktivieren des Schnellansichtsbereichs ist höchstwahrscheinlich die Unterstützung einer Front-End-IT-Person aus Ihrer IT-Abteilung erforderlich. Sie verfügt am ehesten über das entsprechende Fachwissen, um die Schnellansichtsimplementierung aus dem entsprechenden Schritt entsprechend auszulösen, um über eine einsatzbereite Schnellansichts-URL zu verfügen.

Sie können mit dem Schnellansichtscode sehen, wie diese Schritte auf die Demowebsite angewendet werden, um in das interaktive Bild mit Shopping-Funktion voll integriert zu werden. Die Struktur der Schnellansichts-URL wurde bereits wie folgt ermittelt:

/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 Demowebsite 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, die folgende Codezeile dem quickViewActivate-Handler hinzuzufügen:

loadQuickView(quickViewUrl);

Im Folgenden finden Sie den vollständigen Quellcode:

	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 hat folgendes Aussehen:

https://marketing.adobe.com/resources/help/de_DE/aod/shop-banner/landing-3.html

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie