On-Demand Webinar: Ohne Content kein Commerce

Annabella Pscherer: Zusammen und herzlich willkommen zu unserem heutigen diva-e-Webinar „Ohne Content kein Commerce“. Heute zeigen unsere Experten, wie Sie ein nahtloses Einkaufserlebnis mit dem Adobe Experience Manager und Adobe Commerce Magento schaffen. Mein Name ist Annabella Pscherer, ich bin Teil des diva-e-Marketing-Teams und heute eure Moderatorin des Webinars. An dieser Stelle begrüße ich auch unsere Referenten: Simon Buß, Head of Competence Center von Adobe, Dalila Grebovic, Senior Technical Project Manager und Team Lead, und Edin Mustafic von diva-e, Project Manager E-Commerce. Schön, dass ihr heute mit dabei seid. Ich übergebe nun das Wort an Dalila und wünsche euch viel Spaß und spannende Einblicke beim Webinar.

Dalila Grebovic-Fischer: Ja, danke, Annabella. Auch von mir noch mal ein herzliches Willkommen an alle. Wir haben heute einiges vor mit euch. Lasst uns einen kurzen Blick auf unsere Agenda wagen. Wir werden starten mit einer kleinen Vorstellung zu diva-e, bevor wir uns dann dem Hauptthema widmen, nämlich dem Commerce Integration Framework, wo wir euch Einblicke gerne geben möchten. Und dann wird mein Kollege Edin durch eine Demo führen, den eigentlich spannendsten Teil des Ganzen machen, bevor es dann in die Q&A-Runde geht, wo ich wieder an Annabella übergeben werde und wir schon sehr gespannt sind auf eure Fragen. Genau, und damit übergebe ich an dich, Simon, und freue mich auf die diva-e-Vorstellung von dir.

Simon Buß: Ja, vielen Dank. Schönen guten Morgen auch von meiner Seite. Ich freue mich, dass wir euch das spannende Thema heute ein bisschen näherbringen dürfen. Das hat ja hohe Relevanz mehr denn je aktuell, Commerce und Content zusammenzubringen, und passt auch super zur diva-e insgesamt und zu dessen Leitmotiv. Klick mal eins weiter bitte. Also, bevor wir ins Thema einsteigen, ein paar grundlegende Infos zu diva-e und zu unserer Positionierung in dem Zusammenhang hier. Genau, paar Daten und Fakten. Also diva-e ist eine der umsatzmäßig größten Digitalagenturen in Deutschland, seit über 20 Jahren am Markt, ungefähr 80 Millionen Euro Umsatz letztes Jahr gemacht, mit über 800 Mitarbeitern an 9 Standorten in Deutschland vertreten Da haben wir es direkt, das Thema: Commerce- und Content-Plattform-Dienstleister in Deutschland. Seit letztem Januar ist die pro!vision ein Teil der diva-e. Das ist ein Adobe Spezialist, der seit 17 Jahren mit Adobe Lösungen, mit dem Adobe Experience Manager, große Erfahrungen hat und das Adobe Offering der diva-e natürlich maßgeblich jetzt erweitert hat. Da gehen wir gleich noch ein bisschen drauf ein in den nächsten paar Folien. Also das Leitmotiv der diva-e nennt sich Transactional Experience Partner, TXP, und das ist hier schön hergeleitet. Sie als Unternehmen brauchen Transaktionen im digitalen Raum, um erfolgreich zu sein. Ihre Kunden werden diese Transaktionen aber nur durchführen, wenn Sie diese auch zu ansprechenden Kundenerlebnissen machen. Und wir stellen uns so auf, dass wir Ihnen dabei helfen, das umzusetzen. Also Sie erfolgreich zu machen in dieser sehr digitalen Umwelt vollumfänglich in diesem Zusammenspiel zwischen Commerce und Content. Hier sehen wir mal auf einen Blick das Portfolio der diva-e. Also Anspruch ist, wie gesagt, End-to-End-Aufstellung. Sie haben ein digitales Unterfangen, ein Anliegen, eine Problemstellung. Wir helfen Ihnen. Rundum. Begonnen mit der Strategie, mit Kreativ- und Designleistungen über die Beratungen an verschiedenen strategischen Stellen, wie Suchmaschinenoptimierung und so weiter, Implementierungsleistungen und datenbezogene Themen, die ja immer wichtiger werden, bis hin zum Betrieb Cloud- und Datenzentrumslösungen, gibt es alles aus einer Hand. Sind auch viele namhafte Logos, eines davon ist Adobe, über das sprechen wir heute. Hier noch mal das Adobe Offering von der diva-e auf einen Blick. Auch hier: Positionierung ist Full-Service. Also Sie haben sich für Adobe entschieden als Plattform für Ihre Digitallösungen, dann sind wir der Partner, mit dem sie das vollumfänglich angehen können, was immer Sie da vorhaben. Nicht also, sieht man hier auch wieder das Bild, also von der Strategieberatung, Design, Suchmaschinenoptimierungsthemen, Content, Entwicklung und Betrieb. Und um diese Lösung, insgesamt sind das über 90 Leute bei uns, die in dem Thema Adobe unterwegs sind. Davon, oder auf diese 90 verteilen sich über 100 individuelle Zertifizierungen, die Adobe ausgibt. Seit über 17 Jahren sind wir mit Adobe-Lösungen unterwegs. Alles wird aus Deutschland gemacht, gibt also kein Near- oder Offshoring, wir sind einer von ganz wenigen Partnern von Adobe, die Produktentwicklung für Adobe-Produkte machen, insbesondere für den AEM ist das der Fall. Wir richten die einzige AEM Entwicklerkonferenz aus und gewinnen auch Preise mit dem, was wir tun. Ja. Der Partnerstatus ist der höchste, den Adobe zu vergeben hat, seit jüngerem Platinpartner mit verschiedenen Spezialisierungen in den Produkten, die da eine Rolle spielen. Ja, hier sehen wir jetzt noch mal einen Blick auf die Produktpalette, die in der Adobe Experience Cloud enthalten ist. Etwas vergrößert dargestellt sind hier der Adobe Experience Manager, also das marktführende Content-Management-System von Adobe, mit dem wir uns seit langem stark beschäftigen, und eben auch das Adobe Commerce beziehungsweise Magento, und darüber wollen wir heute auch sprechen. Also wie diese beiden Lösungen Content und Commerce, zusammengebracht werden können. Da gibt es einen ganz spannenden Ansatz von Adobe seit einiger Zeit, der jetzt auch ein starkes Investitionsthema für Adobe ist und uns auch umtreibt. Das Commerce Integration Framework, gut, das ist ja auch der, ich sage mal technische Kern des Webinars heute. Genau. Ich freue mich, dass wir das jetzt mal ein bisschen näherbringen dürfen. Dalila, du übernimmst wieder.

Dalila Grebovic-Fischer: Genau, ja. Simon, du hast es schon gesagt, also Unternehmen und Shop Betreiber müssen sich tatsächlich heutzutage immer mehr die Frage stellen, wie sie aus jedem Einkaufserlebnis, wie sie aus jedem Einkauf ein aufregendes Einkaufserlebnis gestalten. Einkaufen, ein aufregendes Commerce-Erlebnis, um entsprechend den Anforderungen der Kunden auch gerecht zu werden, die ja definitiv nicht kleiner werden. Und mit dem Commerce Integration Framework legt Adobe also die Weichen für eine sehr elegante Verschmelzung von Content und Commerce, sprich Commerce-Kanäle wie Adobe Commerce und Magento lassen sich dadurch einfach mit der Adobe Experience Cloud verbinden. Steigen wir einfach mal direkt ein in das technische Gebilde von CIF, wie wir es auch kurz nennen. Also ganz links sehen wir die Storefront, das Venia Storefront, das hier mitgeliefert wird. Ganz rechts in dem Fall, dass Magento Backend, das entsprechend die Produktdaten verwaltet und die Commerce-Komponente darstellt. Und das Commerce Integration Framework mit all seinen Elementen, auf die wir gleich noch mal genauer eingehen, bildet praktisch die Schnittstelle zwischen den beiden Systemen. Das CIF ist quasi ein Modul in AEM, und seine Hauptbestandteile sind im Prinzip serverlose Funktionen. Das heißt, diese Aktionen laufen innerhalb eines isolierten Containers und interagieren mit dem Commerce Backend oder anderen Endpunkten auch über deren APIs. Also kurzum, Magento steuert also das Commerce Backend und AEM das Frontend mit Venia als moderne Referenz Storefront. Auf der nächsten Folie können wir dann auch noch mal sehen, das heißt, wenn wir vom Content und Commerce sprechen, dann sprechen wir natürlich immer von der Storefront, also allen direkten Kontaktpunkten mit dem Nutzer und dem Backend-System. Die Produkte aus der Experience Cloud lassen sich natürlich auch nahtlos mit AEM, also dem CMS, entsprechend verknüpfen. Adobe macht hier mit seiner breiten Produktpalette eine End-to-End-Verwaltung digitaler Inhalte möglich, sei das Marketing Automation über Adobe Campaign oder A/B Testing mittels Adobe Target, all diese Systeme sind natürlich vorneweg sehr tief integriert. Und auf der anderen Seite haben wir ein entsprechendes Backend System, das die Produktinformationen wie Bestände und Preise bereithält. Und dazwischen operiert das CIF. Am nahtlosesten funktioniert es tatsächlich mit Magento natürlich, weil auch Teil des Adobe Produktportfolios. Da funktioniert die Kommunikation über GraphQL. Allerdings ist es auch möglich, wie Sie hier sehen, andere Drittlösungen mittels CIF an AEM anzubinden. Ja, werfen wir einen kleinen Blick in die einzelnen oder auf die einzelnen Elemente, die sich hinter CIF verbergen, allen voran der AEM CIF Cloud Connector natürlich, der es mittels Graph QL, wie gerade schon erwähnt, ermöglicht, Commerce-Daten entsprechend abzurufen. Dann haben wir die Referenz-Storefront mit dem schönen Namen Venia. Die zahlreichen Autorentools, die es entsprechend Shop Managern ermöglichen, wirklich einfach schöne Nutzererlebnisse zu kreieren, Content und Commerce entsprechend miteinander zu verbinden, wir haben die Commerce-Core-Komponenten, auf die wir gleich noch mal genauer eingehen werden, und natürlich eine Reihe an Integrationsmustern, die hier out-of-the-box auch mit unterstützt werden. Genau. Zu den CIF Core Components, die hier out-of-the-box mitgeliefert werden. Das heißt, das sind all jene Commerce-Komponenten, die praktisch mitgeliefert werden. Also Sie sehen hier von Produkten, Produktausspielungen, Sign-in natürlich, Accountkreationen, also zum Kundenkonto die Navigation selbstverständlich, um nur ein paar zu nennen. Suche ist ein Teil dessen, Related Products beispielsweise, also dass die auch Produktdetailseiten gerne mal unter der Rubrik: „Das könnte ihnen auch noch gefallen“ sehen. Das wird alles schon out-of-the-box mitgeliefert. Was natürlich super ist, weil es uns erlaubt, oder dem Shop Betreiber erlaubt, ja, ein komplett funktionsfähiges Magento Shopsystem an AEM anzubinden. Ja, noch mal kurz zusammengefasst die wichtigsten Vorteile des CIF. Das CIF hilft natürlich ganz stark bei der Verzahnung von Content und Commerce, die aus Nutzersicht und Usability Gründen immer wichtiger wird. Durch die Verbindung der beiden Systeme ist es also Shop Betreibern praktisch möglich, einfach und schnell Themenwelten zu erstellen und damit dem User sowohl einen recht charmanten Einstieg zu geben in das eigene Produktangebot als auch die Kunden relativ früh schon im Kaufprozess abzugreifen. Also das ist hier ganz klar der Vorteil. Adobe liefert damit eine sehr moderne, erweiterbare Headless Architektur mit Single- und Multipage-Anwendungen. Also der Trend geht hier auch ganz, ganz klar zu Microservice-Lösungen. Und ja, jetzt freuen wir uns darauf, zu sehen, wie man sich das im System tatsächlich vorstellen kann. Und ich übergebe für diesen spannenden Part an Edin.

Edin Mustafic: Ja, vielen Dank, Dalila. Ja, jetzt kommen wir zur Demo Anteil anhand des Bike Blogs und Shops. Und in der nachfolgenden Demo wollen wir aufzeigen, wie das Zusammenspiel der drei Produkte beziehungsweise Komponenten, in dem Fall AEM, Magento und dem CIF-Modul dargestellt werden kann. Dazu haben wir die Seite eines fiktiven Bike Blogs und eines Bike Shops erstellt und wollen anhand dieser Seiten auch zeigen, wie einfach man Content und Commerce verknüpfen kann und welcher Mehrwert daraus entsteht für Unternehmen und für die jeweiligen Kunden. Kurzer Hinweis: In der heutigen Demo verwenden wir ausschließlich die Out-of-the-box-Features, die AEM, Magento und CIF mitbringen, nachdem man die Instanzen aufgesetzt hat. Das heißt, wir haben diese Produkte sofort zur Verfügung und brauchen keine weiteren Entwicklungsarbeiten, die hier notwendig sind. Dann kommen wir zuerst zu den Demo Personas, die wir uns für diese Demo überlegt haben. Das heißt, an erster Stelle haben wir Lena. Sie ist Fan des Bike Blogs und möchte im Sommer mit dem Fahrrad nach Italien verreisen, sofern Corona zulässt, und ist auf der Suche nach einer passenden Regenjacke beziehungsweise Fahrradjacke. An zweiter Stelle haben wir aus Innensicht des Unternehmens Frank, den Website-Redakteur. Der ist zuständig für den Bike Blog und setzt diese Arbeiten mit Hilfe von AEM um. Und an dritter Stelle ist Simone. Sie ist Shop Managerin des Bike Shops und arbeitet vorwiegend in Magento. Dann ein kurzer Blick auf die Demo Journey, die wir heute durchlaufen werden. Das heißt, wir beginnen mit dem Blick in den AEM-Author. Das heißt, wie der Frank Content Pflege betreiben kann, wie einfach das geht. Dann wechseln wir in die Frontend-Sicht und besuchen in Person von Lena die Webseite und möchten Informationen zu Fahrradjacken finden. Und dann wechseln wir noch mal in die Perspektive von Simone und zeigen auf, wie wir, wie einfach wir Produkte aus Magento in AEM verknüpfen können, einbinden können, damit Lena dann ein nahtloses Einkaufserlebnis erleben kann und mithilfe des CIF Moduls einen Kaufabschluss tätigen kann. Und zuletzt wechseln wir dann noch mal in die Perspektive von Simone, der Shop Managerin, die dann im Magento Backend noch mal die Bestellung sich anschauen kann und dann die nächsten Schritte einleiten kann. So. Dazu wechseln wir jetzt in die Sicht des AEM-Authors. Das heißt, das ist hier die Übersicht, die der Frank für die Content Pflege hat. Er kann damit beginnen, Assets zu pflegen, das heißt Bilder zu verknüpfen, die er dann in seine Blogartikel einbinden kann. Wir wollen aber hier erst mal aufzeigen, wie wir einzelne Seiten bearbeiten können. Das heißt, wir haben hier den Demostore, den wir erstellt haben, beziehungsweise die Demo-Content Seiten, die wir erstellt haben für den Bike Blog 2021, und wollen beispielsweise jetzt in der Kategorie Tests und Technik die Jacken für Radreisen bearbeiten, den Artikel dazu. Dazu gehen wir auf Edit und haben dann hier die Autorensicht, bei der wir verschiedenste Aktionen ausführen können. Beispielsweise können wir durch ganz einfaches Klicken Texte bearbeiten, Abschnitte bearbeiten und diese publizieren. Hinzu kommt noch über die Sidebar, dass wir eine Auswahl an Assets haben, die wir einbinden können. Wir können verschiedenste Komponenten auch einbinden, die den Kategorien Content oder Commerce zugehören. Dazu kommen wir aber gleich. Wir wechseln jetzt erst mal in die Perspektive der Lena, welche auf den Bike Blog kommt und beispielsweise jetzt hier diesen Artikel sich ansehen möchte, in welchem berichtet wird von Praxiserfahrungen zu Fahrradjacken. Da haben wir hier jetzt verschiedenste Inhalte drin, und hier wäre dann ohne den Commerce Part schon die Reise beendet. Das heißt, Lena könnte hier an dieser Stelle sich die Erfahrungsberichte durchlesen, aber könnte keine weiteren Transaktionen tätigen. Dazu müsste sie in andere Shops wechseln, müsste sich auf die Suche nach den Produkten begeben. Aber dem können wir hier vorgreifen, indem wir das CIF-Modul verwenden, und dazu wechseln wir in die Perspektive von Simone, der Shop Managerin, und in das Magento Backend. Da haben wir bereits Produkte angelegt, das heißt einloggen, und können über den Katalog uns die Produkte ansehen. Ich habe hier schon mal Regenjacken vorgefiltert. Das heißt, wir haben hier drei Jacken zur Auswahl. Was wir uns für den nächsten Schritt noch merken müssen oder im Hinterkopf behalten müssen, sind SKOs, um diese dann in den Content Bereich im AEM einzubinden. Das heißt, dazu gehen wir noch mal in die AEM-Übersicht und wählen den Artikel aus, den wir pflegen möchten. Dazu gehen wir hier auf Edit und können beispielsweise jetzt die Regenjacke Grau, das einfache Image, können wir rausnehmen und dazu, über das Side Panel können wir die Komponente für diesen Zweck jetzt einen Product Teaser verwenden und an die entsprechende Stelle ganz einfach rüber ziehen. Das heißt, den setzen wir hier unter die Praxiserfahrung der Regenjacke Grau ein, passen die Größe, die Breite an und können dann hier in diesem Auswahlfeld die Product SKU einsetzen, das wäre in diesem Fall die Regenjacke Grau. Und dazu können wir noch eine Call to Action auswählen. In diesem Fall möchten wir den Button hinzufügen, dass ein Seitenbesucher direkt hier in dem Artikel hier auf der Content Seite einen Artikel in den Warenkorb setzen kann und dort den Check-out ausführen kann. Das würde dann so aussehen. Oh.

Simon Buß: Glaube da ist ein Häkchen verlorengegangen.

Edin Mustafic: Genau. Da haben wir einen Haken vergessen. Genauso sieht das aus. Diese Seite würden wir dann publizieren und hätten die Frontend-Ansicht folgendermaßen. Das heißt, hier haben wir wieder den Blogartikel mit den Praxiserfahrungen zu den Fahrrad-Regenjacken und hätten anstelle jetzt des vorherigen einfachen Bildes hier die Möglichkeit, den Artikel gleich zu kaufen. Dazu müsste Lena nur hier auf Add to Cart klicken, und das Produkt würde in den Warenkorb gesetzt werden. Hier können wir sehen, um welches Produkt es sich handelt. Natürlich würden wir dann auch noch im weiteren Verlauf dann die weiteren Faktoren hinzubauen mit Größe und Anzahl. Hier würden wir ein Produkt auswählen, könnten dann die Versandadresse befüllen, bestätigen. Die Bezahlmethode können wir hier auswählen und die Versandmethode. Und somit können wir hier die Bestellung bestätigen und erhalten die Bestellnummer. Und alle weiteren Informationen erhalten wir natürlich per E-Mail, was den Order Status und die weiteren Details angeht. Und wir können jetzt ganz einfach weiter auf der Seite surfen und uns Inhalte ansehen. Dazu oder für den nächsten Schritt würden wir jetzt noch mal in die Perspektive von der Simone, der Shop Managerin, wechseln, die die gerade eben bestätigte Bestellung sich im Magento Backend noch mal ansehen kann und diese weiterbearbeiten kann. Dazu gehen wir ins Magento Backend unter Sales & Orders und können hier die Bestellung 8, die wir gerade getätigt haben, uns ansehen. Das heißt, hier haben wir die Rechnungs- und Versandadresse und die bestellten Artikel in der Übersicht. Genau. Und Sie konnten nun sehen, wie ein nahtloses Einkaufserlebnis ganz einfach umgesetzt werden kann mit der, ja, Kombination von AEM als Frontend Tool und Magento im Backend und das wird alles mit Inhalt mit Hilfe des CIF Moduls umgesetzt. Und wie mein Kollege Simon schon gesagt hat: Adobe plant sehr viel mit dem CIF Modul und so weiteren Roadmap von Adobe. Dazu kann Ihnen meine Kollegin Dalila noch bisschen was erzählen. Ich gebe zurück zu dir.

Dalila Grebovic-Fischer: Ja, danke, Edin. Danke für die Vorstellung. Das war schön zu sehen, wie schnell und einfach das Ganze funktioniert. Und vor allen Dingen was da auch schon out-of-the-box mitgeliefert wird, nämlich ein vollumfängliches E-Commerce-Erlebnis. Wir sind allerdings natürlich gespannt zu sehen, was Adobe die nächsten, in der nächsten Zeit so vorhat mit dem CIF. Es wird ja stetig weiterentwickelt, und wir möchten Ihnen hier einen ganz kurzen Ausblick geben, was uns da erwarten könnte in nächster Zeit. Zum einen dezidierte Seiten für Warenkorb Pop und Check-Out. Das ist ein Thema, an dem Adobe gerade arbeitet. Selbstverständlich die weitere Verzahnung mit der Magento Storefront. Also es geht tatsächlich übergreifend immer darum, die Systeme noch besser miteinander zu verschmelzen und zu verzahnen, sowohl aus Shop Betreiber Sicht als auch aus Nutzersicht da ein nahtloses Erlebnis zu liefern. Wenn wir ein Stückchen weiter in die Zukunft denken, Usability für die Business Anwender soll hier noch besser werden, und auch hier spielen natürlich KI-Funktionen, Stichwort Adobe Sensei, auch noch mal eine wichtige Rolle in Zukunft. Genau. Ja, das war im Prinzip unser Kurzüberblick zum Thema CIF. Und jetzt sind wir gespannt auf Ihre Fragen und bin gespannt, was uns da erwartet, Annabella. Gibt es da schon welche?