On-Demand Webinar: Without Content, No Commerce

Annabella Pscherer: Together and welcome to today's diva-e webinar "No Content, No Commerce". Today our experts will show you how to create a seamless shopping experience with Adobe Experience Manager and Adobe Commerce Magento. My name is Annabella Pscherer, I'm part of the diva-e-marketing team, and today I'm your moderator for the webinar. I would also like to welcome our speakers: Simon Buß, Head of Competence Center at Adobe, Dalila Grebovic, Senior Technical Project Manager and Team Lead, and Edin Mustafic from diva-e, Project Manager E-Commerce. It's great to have you with us today. I'd now like to hand it over to Dalila and wish you lots of fun and exciting insights during the webinar.

Dalila Grebovic: Yes, thank you, Annabella. Again, a warm welcome from me to all of you. We have many things planned for you today. Let's take a quick look at our agenda. We're going to start with a bit of introduction to diva-e before we move on to the main topic, the Commerce Integration Framework, where we'd like to give you some insights. And then my colleague Edin will lead through a demo, actually do the most exciting part of the whole thing, before it goes into the Q&A round, where I'll hand it over to Annabella again. We're looking forward to your questions. Right, and with that, I'll hand over to you Simon and look forward to the diva-e introduction from you.

Simon Buß: Yes, thank you very much. Good morning from my side as well. I'm glad that we can bring you a bit closer to this exciting topic today. It's more relevant than ever, bringing together commerce and content, and it's also an excellent fit for diva-e as a whole and its leitmotif. Click one more, please. So, before we get into the topic, a few basic facts about diva-e and our positioning in this context here. Right, a few facts and figures. diva-e is one of the largest digital agencies in Germany in terms of turnover, has been on the market for more than 20 years, had a turnover of around 80 million euros last year, has more than 800 employees in 9 locations in Germany, and is a commerce and content platform service provider in Germany. Since last January, pro!vision has been part of diva-e. This is an Adobe specialist who has 17 years of experience with Adobe solutions, with the Adobe Experience Manager, and has, of course, significantly expanded diva-e's Adobe offering. We'll go into that a bit more in the next few slides. The guiding principle of diva-e is called Transactional Experience Partner, TXP, and this is nicely derived here. You as a business need transactions in the digital space to be successful. But your customers will only do those transactions if you make them engaging customer experiences. And we set ourselves up to help you make that happen. We were making you successful in this very digital environment fully in this interplay between commerce and content. Here we have a look at diva-e's portfolio. So aspiration is, as I said, an end-to-end setup. You have a digital venture, a concern, a problem. We help you. All around. We started with the strategy, with creative and design services, through consulting at various strategic points, such as search engine optimization, implementation services and data-related issues. Which are becoming increasingly crucial to the operation of cloud and data center solutions, there is everything from a single source. There are also many well-known logos. One of them is Adobe, which we're talking about today. Here again, the Adobe Offering from diva-e at a glance. Also here: Positioning is full service. So you have chosen Adobe as the platform for your digital solutions, then we are the partner with whom you can fully tackle whatever you have in mind. You see here again the picture, from the strategy consulting, design, search engine optimization topics, content, development and operation. And around that solution, all in all, that's over 90 people at our company in the Adobe theme. Out of that, or out of those 90, Adobe issues over 100 individual certifications. We have been on the road with Adobe solutions for over 17 years. Everything is done from Germany, so there is no near- or offshoring. We are one of the very few partners of Adobe who do product development for Adobe products, especially for the AEM is the case. We host the only AEM developer conference, and we also win awards for what we do. Yes. The partner status is the highest that Adobe has to give since, more recently, platinum partners with different specializations in the products that play a role there. Yeah, now here we're going to take another look at the range of products included in the Adobe Experience Cloud. The Adobe Experience Manager, Adobe's market-leading content management system, which we have been working on for a long time, and Adobe Commerce or Magento, which we also want to talk about today, are shown here somewhat enlarged. So how these two solutions, content and commerce, be brought together. Adobe has been an inspiring approach for some time, which is now also a vital investment topic for Adobe and drives us around. The Commerce Integration Framework, well, that's also the, let's say, the technical core of the webinar today. Exactly. I'm glad that we're going to be able to bring that a little bit closer. Dalila, you take over again.

Dalila Grebovic: Exactly, yes. Simon, you said it already, so companies and shop operators have to ask themselves nowadays more and more the question how they create an exciting shopping experience out of every shopping experience, how they create an exciting shopping experience out of every shopping experience. Shopping is an exciting commerce experience to meet the customers' demands, which is not getting smaller. And with the Commerce Integration Framework, Adobe is setting the stage for an exquisite fusion of content and commerce, meaning commerce channels like Adobe Commerce and Magento can be easily connected to the Adobe Experience Cloud. Let's jump right into the technical structure of CIF, as we call it for short. So on the far left, we see the storefront, the Venia storefront that comes with this. In this case, on the far right, the Magento backend, which manages the product data and represents the commerce component. And the Commerce Integration Framework with all its elements, which we'll go into in more detail in a moment, is practically the interface between the two systems. The CIF is effectively a module in AEM, and its main components are serverless functions. These actions run within an isolated container and interact with the commerce backend or other endpoints via their APIs. So, in short, Magento controls the commerce backend, and AEM contains the frontend with Venia as the modern reference storefront. On the next slide, we can see again that when we talk about content and commerce, we are, of course, always talking about the storefront, so all direct contact points are with the user and the backend system. Of course, the products from the Experience Cloud can also be linked seamlessly with AEM, i.e. the CMS. Adobe makes end-to-end management of digital content possible here with its broad product range, whether it's marketing automation via Adobe Campaign or A/B testing using Adobe Target, all of these systems are, of course, very profoundly integrated upfront. And on the other side, we have a corresponding backend system that holds the product information like inventory and pricing. And the CIF operates in between. Of course, it works almost seamlessly with Magento because it's also part of the Adobe product portfolio. That's where the communication works via GraphQL. However, as you can see here, it's also possible to connect other third-party solutions to AEM using CIF. Yes, let's take a little look into the individual or the individual elements behind CIF, first and foremost the AEM CIF Cloud Connector, of course, which allows using Graph QL, as I just mentioned, to retrieve commerce data accordingly. Then we have the reference storefront with the lovely name of Venia. The numerous authoring tools that allow therefore shop managers to create simply beautiful user experiences, to connect content and commerce accordingly, we have the commerce core components, which we'll talk about in more detail in a moment, and of course, several integration patterns that are also supported out-of-the-box here. Exactly. To the CIF Core Components that are delivered here out-of-the-box. These are all those commerce components that are practically provided with the system. So you see here from products, product displays, sign-in of course, account creations, so to the customer account the navigation, of course, to name a few. Search is part of that, Related Products, for example, so they also like to see product detail pages sometimes under the heading of, "You might also like this." That's all already delivered out-of-the-box. This is, of course great, because it allows us, or allows the shop owner, yes, a completely functional Magento shop system to connect to AEM. Yes, again, briefly summarizing the main advantages of the CIF. Of course, the CIF helps a lot with integrating content and commerce, which is becoming increasingly important from a user perspective and for usability reasons. By connecting the two systems, it is practically possible for shop operators to create theme worlds quickly and easily and thus give the user a charming introduction to their product range and pick up customers relatively early in the buying process. So that's the advantage here. Adobe delivers a modern, expandable headless architecture with single and multi-page applications. So the trend here is also very, very clearly towards microservice solutions. And yes, now we're looking forward to seeing how you can imagine this in the system. And I'll hand it over to Edin for this exciting part.

Edin Mustafic: Yes, thank you very much, Dalila. Yes, now we come to the demo share based on the bike blog and shop. And in the following demo, we want to show how the interaction of the three products or components, in this case, AEM, Magento and the CIF module, can be displayed. For this purpose, we have created a fictitious bike blog and a bike shop and want to use these sites to show how easy it is to link content and commerce and what added value this creates for companies and their respective customers. Quick note: In today's demo, we're only using the out-of-the-box features that AEM, Magento and CIF come with after setting up the instances. This means we have these products available out of the box and don't need any further development work required here. Then we come first to the demo personas that we've come up with for this demo. That is, first and foremost, we have Lena. She is a fan of the Bike Blog and wants to travel to Italy by bike this summer, Corona permitting and is looking for a suitable rain jacket or bike jacket. In the second place, from the company's inside view, we have Frank, the website editor. He is responsible for the Bike Blog and implements this work with the help of AEM. And in third place is Simone. She is the shop manager of the Bike Shop and works mainly in Magento. Then a quick look at the Demo Journey that we will go through today. That is, we're going to start by looking into the AEM author. How Frank can do content maintenance, how easy that is to do. Then we'll switch to the frontend view and visit the website in the person of Lena and want to find information about bike jackets. And then, we'll switch again to Simone's perspective and show how we can, how easily we can link products from Magento into AEM, integrate them so that Lena can then have a seamless shopping experience and make a purchase using the CIF module. And then finally, we'll switch back to the perspective of Simone, the shop manager, who can then look at the order again in the Magento backend and then take the next steps. Like this. We'll now switch to the AEM author's perspective to do this. This is the overview here that Frank has for content maintenance. He can start maintaining assets, linking images that he can then embed into his blog articles. But we want first to show here how we can edit individual pages. We have here the demo store that we have created, or the demo content pages that we have created for the Bike Blog 2021, and want to edit, for example, now in the category tests and technology the jackets for bike travel, the article about it. To do this, we go to Edit and then have the author view here, where we can perform various actions. For example, we can edit texts, edit sections and publish them by simply clicking on them. On top of that, via the sidebar, we select assets that we can include. We can also include various components that belong to the categories of content or commerce. But we'll get to that in a moment. We're going to switch to the perspective of Lena, who comes to the Bike Blog and wants to take a look at this article, for example, which reports on practical experiences with cycling jackets. We now have a wide variety of content here, and without the commerce part, the journey would already be over. This means that Lena could read through the field reports here but would not make any further transactions. For that, she would have to switch to other shops and go in search of the products. But we can anticipate that here by using the CIF module, and to do that, we switch to the perspective of Simone, the shop manager, and into the Magento backend. We have already created products. Log in, and we can look at the products via the catalogue. I have already pre-filtered rain jackets here. That means we have three jackets to choose from here. What we need to remember or keep in mind for the next step are SKOs, so that we can then integrate them into the content area in the AEM. To do this, we go back to the AEM overview and select the article we want to maintain. To do this, we go here to Edit. We can now, for example, the rain jacket grey, the simple image we can take out, and in addition, via the side panel, we can use the component for this purpose now a product teaser and drag it over to the appropriate place. We insert it here under the practical experience of the Rain Jacket Grey, adjust the size and width, and then we can insert the Product SKU here in this selection field, which would be the Rain Jacket, Grey. And to that, we can select a call to action. In this case, we want to add the button that a site visitor can add an item to their cart in the article on the content page and check out there. It would then look like this. Oh.

Simon Buß: I think a checkmark got lost.

Edin Mustafic: Exactly. We missed a hook there. That's exactly what that looks like. We would then publish this page and view the front end. Here we have the blog article with the practical experience with the bike rain jackets again, and instead of now the previous simple image here, we would have the option to buy the article right away. To do this, Lena would have to click Add to Cart here, and the product would be added to the cart. Here we can see which product it is. Of course, we would build in the other system than the other factors with size and quantity. Here we would select a product, fill in the shipping address, confirm. We can choose the payment method here and the shipping method. And so we can confirm the order here and get the order number. And of course, we will receive all further information via email regarding the order status and additional details. And we can now easily continue to browse the site and view content. To do that or for the next step, we would now switch back to the perspective of Simone, the shop manager, who can take another look at the order that she just confirmed in the Magento backend and process it further. To do this, we go to the Magento backend under Sales & Orders and can view the order eight that we just placed. Here we have the billing and shipping address and the ordered items in the overview. Right. And you can now see how a seamless shopping experience can be implemented relatively easily with the combination of AEM as the frontend tool and Magento in the backend. This is all implemented with content using the CIF module. And as my colleague, Simon, said: Adobe is planning very much with the CIF module and so further roadmap from Adobe. My colleague Dalila can tell you a little bit more about that. I'll give it back to you.

Dalila Grebovic: Yes, thank you, Edin. Thank you for the introduction. That was nice to see how fast and easy the whole thing works. And primarily, what's already delivered out-of-the-box is a complete e-commerce experience. Of course, we are curious to see what Adobe plans to do with the CIF soon. It is constantly being developed further, and we would like to give you a very brief preview of what we can expect shortly. On the one hand, dedicated pages for shopping cart pop and check-out. This is a topic Adobe is currently working on. Of course, the further interlocking with the Magento storefront. It's really across the board about merging and dovetailing the systems even better, both from a store operator point of view and from a user point of view there to deliver a seamless experience. If we think a bit further into the future, usability for business users should become even better here, and here too. Of course, AI functions, keyword Adobe Sensei, will also play an essential role in the future. Exactly. Yes, that was our brief overview of the topic of CIF. And now we're looking forward to your questions, and I'm curious to see what awaits us there, Annabella. Are there any already?