[Music] [Darin Kuntze] We made it. It's the final day, final session of Summit.
I can tell you I barely made it, but this is our ninth Edition of AEM Rockstar, if you can understand Roman numerals, which most people can. But don't do the math on the 20-- Or since or established 2017 because if you do the math on that, it's really 8 years. But if you know the history of AEM Rockstar, we did EMEA Rockstar one year, so we did two sessions in one year. So then instead of saying, this is Rockstar IX, nine year, or whatever, it's just the ninth edition. So let's get to it.
Here's the agenda. So it's pretty straightforward. I'm going to do a little introduction here, as you can probably tell. And then we're going to get right to our rockstars. You can see their topics here on the screen. And then Ian, my colleague over here, who's been handing out shirts, he's got his hand up now.
There's a smattering of boos, but I don't know. I don't know where that came from.
And then we're going to do voting. So if you were here last year, you probably saw us experiment with the audience voting. And if you notice up here in front, there's no judges. What happened? We're going to do that again this year. So we're doing audience voting. So when we get to the end, you guys will have a chance to vote, who is your favorite? So it's less about technology or it's a popularity contest really, right? So you have enough of your friends here in the audience, you're going to do well. So this is just for fun. So everyone just have a good time, ask questions. So they're going to come up, do their presentations, and then you guys can ask a few questions as we hand it off to the next person, and then we'll do a big Q&A at the end and vote, okay? So here's the big question for those who are familiar with AEM Rockstar. Where's Kaushal? He's done this with me eight years in a row.
Well, he came down with a rash.
He visited his family in India and he came down with something. So it's too bad that he's not here because I know he'd love to be here. In fact, he'd probably lick a shirt, and it seems like they're almost gone. So thank you for coming and supporting us through the years.
This is our second year in person of actually handing out shirts. We did do the limited edition hoodies for the competitors and some select people. Obviously, Ian has one, few others. There's only 12 of them. So if you see somebody with one, pat them on the back or...
And I think we're out of stickers. - Ian? - [Ian Reasor] I better-- So if you need a sticker, Ian wants to keep some of those for his friends, but if you harass him enough, he'll probably give you one.
The rules are, each presenter gets an equal amount of time. Audience questions are encouraged. We want you to ask questions.
I don't know posting on social media is as important as it used to be because it's kind of what platform do you use and how important it is. But you've probably seen your social feeds now of all of the Adobe Summit stuff in there. So continue to do that. That helps us out. And this year, the winner will be decided by audience vote. So here's our finalists and where they're from, a little description of them. So instead of me talking about this anymore, let's just get right to it. Let's get the rockstars begin. So let's send up Anian.
[Anian Weber] Hi. Welcome.
So Building Multi-Site and Multi-Brand Platforms with AEM Edge Delivery Services. That's my submission for the AEM Rockstar nomination and that's what I want to talk about today. I'm Anian Weber, I'm with TechDivision. I'm a tech lead for Frontend Development at TechDivision, and I'm a Software Architect by heart.
"AEM Edge Delivery Services can only be used for blogs and small sites." That's something I heard from other partners, that's something I heard from clients that looked at some presentations and so on. And today I want to show you that it's not the case, and I want to give you a small blueprint on how you can solve a lot of challenges that come with such large scale projects.
What actually are the challenges? So large businesses most of the time have multiple brands.
And each of these brands need different corporate identities. They have different feature requirements. Of course, they have different content.
But they also share a lot of features. They share a lot of implementations, and most of the time the identity and the styling isn't that different between all of those because you want to keep a consistent visual.
And that's the case with our customer EDER as well.
There's a main holding, a main EDER Group called, and they are our sub-brands, for example EDER Landtechnik, sorry it's German.
And there are 10 more and even more to come after that.
Each of these brands, as I told you, they are their own brand. They have a custom theme and they have custom features for each of those sites. But they also have a shared appearance and they also share a lot of features. In fact, they share almost all features.
And we thought to ourselves, "Okay, how can we solve this? And how can we solve this preferably in one single share codebase?" Let's have a look at some technical background.
AEM Edge Delivery Services Site typically consists of one domain.
And you can connect a content source to this Edge Delivery Services Site, so for example, an AEM.
And, of course, you need some code source. So in this case a GitHub repository.
And you can build another site, you can build another site, and so on. And you can choose a different content source for the second site. And you need, in this case for example, a Google Drive, so Google Docs. And, of course, you need code repository for that as well. So if you remember, we wanted to achieve a shared codebase, and we want to share features. So the question is, okay, how can you handle those two repositories? How? You can use the same exact repository. That's super fine, it works, especially if you have like only language specific sites, then use the same code repository.
But what happens if you, as I told, if you need some differentiation, if you need to maybe sync those repositories...
And that's where our solution comes in, or our idea.
The basic concept behind it is that we have one main repository. And this is the only repository that developers interact with. It's the only repository that's actively used, and let's call it that's a real repository.
And then we have child repositories for the first site for either group, for the second site, and for all of the other sites we have child repositories, and there's a sync process in place. So all of the changes sync down to this one repository.
And there's a special thing in there, and that's what we are coming to now.
So it gets a little bit more technical.
We have this main repository as I showed you earlier. This main repository is just super basic, normal Edge Delivery Services projects like we all know it...
Illustrated by some sample files in there.
But we also have a special multisite folder in there. And this multisite folder, as you can see, has subfolders for each of the brands. In this case just two because otherwise it gets too unreadable on the screen. But you can imagine it, so for each of the brands we have a separate folder there.
What happens now in the process is that we take these files from these subfolders and we copy them over...
Into the main root directory.
After that, we commit those files and we push them to the child repository. And if you have a keen eye, you can see the force parameter in there, which is always bad to never use Git force. But in this case it's fine for us because we absolutely don't care about the history. In the other projects we just use it as some, let's call it a code dump to be able to access it from the different brands.
And, yeah, we pushed that to the repository, and after that we repeated for all of the other repositories. So as I just told you, the EDER Group, and EDER Landtechnik, and so on for all of the other repositories.
Let's see it in action.
And I'm doing a live demo here, so bear with me.
I have set up two brands, Brand Red and Brand Blue. I'm very creative as you can see.
And they have obviously different content as you can see in the image and in the description there, but the requirement is now that we need to change the header, that we need to have a red header for the Red Brand and a blue header for the Blue Brand.
And to do that, as I told you, we have this, so there's a theme file and all of the colors are specified in there, and we now want to override this for those two brands.
I already prepared that.
So we have the Brand Blue folder.
We need a styles subdirectory in there because it gets overwritten directly. Let's copy this over.
There's the red color in there but we want the blue color.
So one second.
And the last one.
And the same for the Red Brand as well. Let's cover it over and let's see.
Red.
And let's do it here. We don't care about the hover. So we now have the two theme files overwritten.
Let's commit it and hope that everything works here live on stage.
Commit and Push.
Go back into the repository.
And, yeah, as you can see, just the sync process in place.
It should take a few seconds. Let's refresh quickly. Okay, of course, it's still in progress. Let's refresh again. Okay, the sync process is done. And let's see and hope that all of it worked.
Yeah. And as you can see, Brand Red now has a red header. And Brand Blue, if we refresh, has a blue header. So in this case it's just a very simple example, but I guess you can imagine that you can override every specific file, you can be really creative, and I think it's very flexible.
So what possibilities are there? You can solve, as I just showed you, you can solve different requirements for different brands.
But you can also have dedicated repositories for different environments. So if you have a dev environment, a stage environment, and a production environment, you can have different repositories in there and use this kind of sync process to have really dedicated repositories for each of the environments to have more fine-grained control about release processes and synchronizations.
You can do highly controlled release processes with this synchronization, especially useful for regulated industries, I think so.
And you can have custom frontend-build processes in there.
Not really recommended, but sometimes it's required to have something like React in there and that you can build it and then sync it to another repository. And you could also use this approach to just connect to a different Git repository in GitLab or BitBucket for example.
So some takeaways.
I think and from our experience, we are live with this thing for over a year. It works great for us, the customer is happy, our developers are happy. And I think it's easy to set up.
Also, the concept is quite easy to understand, I hope so at least. And it's easy to maintain because it's very straightforward.
I think it's a simple and powerful setup, and I also think that it fits the spirit of the simple, but highly powerful architecture of Edge Delivery Services. So it's simple, but powerful.
I have open-sourced all of the things I just showed you. It's in the GitHub repository, you can look it up.
There's also more documentation and more technical deep dive in there, so feel free to check it out if you have questions. Of course, reach out to me afterwards or on LinkedIn or whatever you want.
And that's all, thank you very much.
[Martin Altmann] So you guys can hear me? Like, I won't have a fancy PowerPoint presentation today. I use Lucidchart. So I'm Martin from Comwrap Reply, and thank you, guys.
And today I'm going to show you the Co-Pilot for the Adobe Experience Manager, which is a tool to support AEM Editors to boost productivity like 10x. I know that's bold, but you will see in a second what I mean by that. So the solution is aimed at many large enterprises actually, that will not be able to adopt the latest innovations from Adobe. I don't know if you guys joined the latest AEM, sorry, Assets highlights yesterday, or you see the Sites Optimizer, these kind of things, and we see that it will take a couple of years maybe for enterprises to really adapt it because they may have customized AEM for a lot of reasons.
And I would say let's start. So I brought four use cases for the Co-Pilot, and the first use case is Asset Metadata Generation, right? I will show you a demo and then give you a little bit of context. So you all know this, right? This is the properties view from AEM Assets, and you see this little magic wand we brought in here, and you hit that wand, and it will create a title for you using OpenAI. You can take a description, and it will create a description via OpenAI of this picture.
Also you can in theory-- Wait, no, nothing in theory, let's go back here. So how does it work? Okay. So you have a prompt, you can configure this in the backend. I will show this in some minutes. The prompt is generate a concise and SEO-friendly title. You take this prompt, you take the picture, send it to OpenAI, it creates the title.
The same we did for the description, but you see the prompt is a little bit more complex. We say, "Provide a detailed yet concise description in easy language, someone using a screen reader," so for blind people, right? But we added the image title and the image text there as variables to make the response from OpenAI much more rich, right? So what we do, we send the prompt, we send the picture, we send the title, and we send the text over to OpenAI in order to get a really good meta description.
The next use case is Tagging. And let me start with the explanation first, and then I show you the results. So we'll go into my lovely client Sunstar, I don't know if they are around here. Thank you. I will use your prod instance now, right? So you see the prompt, right? This is for returning tags. So it's actually smart tags with your own tagging taxonomy. We send in not just the prompt, but also the image name because the image name contains a lot of information. So taking this prompt saying return three tags, one from sub-brand, one from category, and one from solution.
Then we take the image, and we take the title as well in the prompt because the title contains a lot of information, right? And all tags from one name space. So just to create a picture like a screenshot of the name space, so this is the name space of GUM. GUM is the name space, and these are all of the tags that are in there. I don't know, like 200, those are a lot of tags. And now let's go into the system, hopefully no single sign on please.
Yes! Great. Okay, yeah, we don't like second factors, right? So this is the tagging thing. I hover over here, and I see all of the namespaces. And now I hit that GUM, and it would take all of the 200 tags, and the title, and the image, sends it over to AI and say return with the three. So you see now it says Sub Brand Playbrush, category Toothbrushes, and the solution is Kids Oral Care. So it's like your own tagging taxonomy that you spend so much time on developing, and not just the Adobe Smart Tags, it's your tagging taxonomy applied with AI.
Next feature is the Metadata Generation. And again, quick demo, and then a little bit of explanation.
So we see the magic wand in the page metadata as well, right? This is the Page Properties tab, and you can generate the title if you want, you can generate tags for your SEO keywords, but I guess most interesting is actually description field. So right now, it just describes your SEO description, right? So you don't need to type your SEO metadata anymore.
And what's happening here is, when I hit the magic wand, it takes the full HTML, which is here in this case 16,000 rows long, a lot of information in there. We then remove all of the not needed parts of the DOM, which is the header and footer. You don't want to send this over, right? We can also configure to remove certain classes in the DOM. We then convert it to markdown because this reduces the token size by 90%. I don't know, who knows markdown? Yeah, some of you here. Anyways, it's another format of text, but it reduces all the waste, right? HTML is full of waste, it reduces all of the waste, but it maintains all of the necessary information like headers, and whatever. Send this out to OpenAI, and returns with the description. And by this I want to show you the bulk capabilities, so the assets feature that you saw at first, the feature for pages, and the third feature you are going to see supports bulk capabilities, so do a lot at once. I show this here, so we go to classic WKND site, I guess you all know this. We go to the Adventure section, and just to show you, it should be empty. Description is not there. Take another one.
Description is empty. So I select all of them. I create this workflow. Select it's Co-Pilot's page metadata, yes, give it a title, and run it.
Now on the back it creates all of the descriptions, and actually quite fast should be done by now. Right, let's see. Old move. There it is. So it created all by-- Thank you.
So just imagine the possibilities. You create your-- You do a search on pages, and select the subset. For assets you do a collection, maybe a smart collection. You create a smart collection with, give me all assets without description, right? And then run the workflow on them, or you do a post-processing workflow, and you upload something to a folder directly, creates all the title and description for you. So there's a lot of options, and this is why we decided this to be a workflow piece, we can be very creative with this being a workflow.
Last feature, this is actually not in beta, it's that one, is the component metadata. So I'm going to this page, and I guess you know this classic Teaser.
I open the cq:dialog, I'm a lazy bum, and I just say create the teaser text for me, right? So this is what you see in the back is now created.
I can go to my assets view, and this is I guess very, very interesting because yes, we can inherit the description as alternative text, but just let me show you that it works, and I come and I'll show you what the little bit of magic is behind. Sorry, I have extremely dry mouth.
So going back here, so what we do, it takes the image and the website content, and creates the alt text. Why is that necessary? Just take this very, very, very simple example.
Thank you. Is that for me? That's great. Thank you.
Thanks, Ian. So I have a web shop, and I only sell two products. I sell a wooden table, and I sell a glass of wine. But I don't have money, only took one picture.
So I'm using the Co-Pilot here, it will return with the alt text like a stemmed wide-bowled, super nice wine glass filled with red wine, and by the way, there's also a wooden table. Do the same for the wooden table, would say round rustic, super nice wooden table, by the way, there's a glass on top. So alt text have to be context aware. So I feel that this is a quite cool feature that you get a context-aware alt text for your components. By the way, it will work with any custom component you build. We build it like with you, in the configuration, I know you can show it later if somebody wants to see it, a little bit complex, but it will work with all of your core components, custom components, whatever, it will work. And by configuration only, no coding necessary.
Time left, anyone? Or whatever. So how do you configure this? So we configure this by profiles, and one profile, I will show you how a profile looks like, but one profile is going to one folder, and it inherits down, right? So I have a German profile for the German Asset Folder, and an English profile for the English Asset Folder. And let me quickly show you how you configure this. I'll give you a very simple example. You go here, you go to Co-Pilot, you go to asset metadata generation, there are my profiles. I take the English Profile, Edit. I can set even a custom GPT model if you want, by the way, you can set any model that you want. But let me give you an example, so this is how you configure it. This thing will show the magic wand next to the description field. This is the prompt for the configuration, and there I have this little checkbox saying Create in Workflow Run. That means if you unselect this, and you bulk at metadata, it will skip that one, right? It will not create the description. But in this case, it would create the title for workflow run, right? So you see how easy this is to configure. You just add a new, like you can add some lot of metadata here, and then the magic wand will disappear there, right? Let me get back to my thing here, and yes, let me show a little use case why profiles are so important. I go back to Sunstar.
Yay.
And I go to this configuration they created for the metadata generation. It's very simple actually, and I love this use case because it's so, so simple, so this one. Generate an SEO-friendly title, and this is the magic thing in Estonian, right? Created in Estonian language. So when you go back to the assets that's under this profile.
Let me delete that.
I will not save by the way, don't you worry, right? And I create the title, and it now, boom, should be in Estonian. And now imagine the possibilities here. You don't need to prompt an Estonian, you just say answer in Estonian, and you maybe not have a Spanish speaking team, but you have Spanish websites, or if you don't have marketing resources in Spain, you can then just automate all your metadata through, and I think this is a very nice feature as well.
Lastly, let's say now this is now super alpha what I'm going to show you now, but this is what we're working on because it's a Co-Pilot, right? It should be very like, should help you editors out there. And we actually, thinking about this feature a long time, and now like Sites Optimizer comes along-- - Screw them. - Right. So anyhow, this is your sidebar, and the idea is you have finished up your page, you're done, right? But you're not really sure if it's good or not, so you just hit this Content Preflight thing, and it gives you a lot of tips. It says, "Ensure there's only one h1 tag on the page." Show me where that is. Okay, understand. "Header tags out of order and h4 came after an h2." You should not do this. After an h2, you should do an h3, right? Show me that one. Okay, so you can go here, we can fix that.
Done, and do the preflight again, yes, and it fixed it. There are some other features, but I will show you this as last thing here. We did this as services, so this is a service, and this is the SEO or the accessibility service. This is the link validation service. This is the contextual link checkout service, and currently with Sunstar and some other clients, we're developing more services that will show up in this bar. A service to auto-generate schema.org markup. Readability checker, rewrite content, check my SEO description. If it's there, or if it's there and it's good or not, right? So it'll be all little OSGi services that each customer can decide which to show on the sidebar.
Quick QA section, is it available for Universal Editor? DAM 2, no, Adobe did it himself. Which AEM versions are supported? 6.5 in cloud. Is only OpenAI support? Currently, it's OpenAI and OpenAI via Microsoft Azure. But in theory, every large language model that has vision capabilities, and structured output, meaning JSON's coming back and not text, will work. Who's paying for OpenAI tokens? It's the customer, so bring your own API key so to say. And how much are the OpenAI costs by this? It's not that much. So take 4o, which is a good model from OpenAI, and you hit the magic wand like 10,000 times, it will be like 243 bucks, to get you a feeling. Okay, so that's not a lot, and by this, I'm done. Thank you.
[Scott Simmer] So good afternoon, everybody. I'm going to give a little talk about personalization, so first, help me personalize the presentation a little bit. I'm going to ask a couple questions. So the personas in the room might be a little mixed between technical and business. So how many people identify themselves as a purely technical role? Okay. Cool. And maybe business or product ownership? Good. Okay. Now obviously, my first question or the next question was how many people know about Edge Delivery Services? So that's probably everybody, right? But how many people are actually building or running an Edge Delivery Service site right now? Okay, about 30%. Okay, and of you guys, how many actually have one-to-one personalization actually running on that site? One. Excellent, right? Good stuff. Thank you very much. So my name is Scott Simmer. I work with Cognizant Moment or Netcentric in Europe. And I'm going to talk to you today about how to build a high performance personalized site in an Edge Delivery with AJO and its blazingly fast experience decision functionality.
But first, something I think we can all probably agree on, set some context.
We at Cognizant Moment use a certain priority in terms of what we believe is really important for effective digital experiences. The first obviously is being performance.
The speed in which the code is delivered to the device, so we keep attention and hold it. We don't want people waiting and getting lost in refreshes.
And secondly, relevance. Because once the content hits the page, it has to be useful immediately or we lose them. So why is that important? Performance is obvious, I think, and thank you, Adobe. With Edge Delivery, we now have a huge step forward to solving that problem.
Here is an example. We have our corporate websites, netcentric.biz It was migrated, I think it was the first production website migrated from classic AEM Sites to Edge about two years ago. And so therefore we had to keep it really simple. There's no personalization on the site, but it scores a perfect 100 in our Google Lighthouse score. For those that don't know, that's just a combined metric of lots of different performance factors. And we can deliver that site that our site feels comfortable and it hits the end user mobile or desktop very, very quickly.
But if we also think about relevance, and I think my CMO is in the room, so I have to be a little gentle here, right? But I have a great marketing team. They create so much content. The page is refreshed almost daily. We've got tiled content. You can see stuff from today, yesterday, it feels like every 10 minutes there's something posted. But without a concept of personalization, it's not as optimal as it might or it could be if we had some degree of personalization to the persona, right? What if you're a technical user? What if you're a business user? What if you're a customer looking to solve a content velocity problem or a customer looking to solve a data analytics and destination activation problem? The top of page content should be immediately relevant to you to hold and keep your attention. Or maybe you're a job seeker.
Keep that in mind. I'm talking to a room full of top flight Adobe talent, so I'm going to use this as an example for my demo.
So we're going to do something about that. So a group of us at Netcentric decided, "Okay, how are we going to add some personalization to our site?" And we thought, "Okay, we can use some of the out-of-the-box functionality of Edge." We've got the experimentation feature, but it's relatively basic. It's fully open, so we can do tons of stuff with it, but it'll be a lot of code and a lot of work to do reasonably small things.
We could use Target.
Target is extremely functional in many ways, but it's fairly heavy in terms of client side. It's still generally segment based. We can't really personalize to a specific person. So we thought, what can we really, really do to make it as sexy as possible for Rockstar, right? So we're going to use Adobe Journey Optimizer, and we're going to drop the personalization content and personalization mechanics of AJO on the Edge within an Edge Delivery site, and so we can try to get both performance and relevance. And we like AJO because number one, it's profile based. It shows and determines content to the specific profile, profile attributes, profile person, and the million of variations of what that could be as you have different personas going through different journeys on the site. It's exponential in terms of variance. And it also integrates well into cross-channel campaigns. So we can personalize the website, but maybe you also want to kick off an email campaign and do a virtuous loop. So this is a classic use case of AJO.
And just to make it more fun for Rockstar, the team wanted to really focusing on the fact that we didn't want to use the WebSDK because we wanted to keep it completely Server-Side just to get a real test of how fast personalization can happen purely on the Edge. And we also decided we're not going to save or use any externally generated cookies, so like the ECID that's provided by Adobe Identity, mainly because we at Cognizant work a lot with highly regulated customers with heavy security issues with their websites, banks, etcetera, pharma companies, high performance e-commerce sites. So we thought, "Well, let's add these conditions as well." And we thought, "Okay, here's what we'd like to do." This is our homepage, so we're going to try to personalize in three different ways. The first way is classic. We're going to try to take the tiled content on the bottom and replace that with targeted content tiles. The second technique we're going to use is to try and personalize the header, right? So it feels like a logged in authenticated experience, particularly for me. And the third idea is to replace the generic hero bar with component that the marketing team can use to communicate a high priority message to specific customers or specific audiences when they need.
Okay. So this is where we start.
Edge is, you see a classic, and let me actually, we'll have some fun, and I'll jump over to the actual page.
This is our Edge Delivery base index page. So probably pretty familiar to everybody. You can see how it reflects the current page as it's deployed. And we're simply going to-- In order to add personalization, we're just going to simply add three additional blocks. And a block is just a table with two rows. We're going to add the personalization card component, and we just give it a name. And the magic, or the first part of our pattern here that we're going to share with you, is that in the content block, we're going to provide the name of an Adobe Journey Optimizer web channel. And so we're going do that three times. So we've got three different types of personalizations that we want to do.
And if I was to publish this page now, it simply publishes the page as it's structured with placeholders for the personalization areas.
Okay? So now, how do we pump content into these personalization areas? Hold on to your seats. I'm going to do a very, very quick demo of Adobe Journey Optimizer because this is the AEM Rockstar, not the AJO Rockstar. By the way, I've been waiting for an AC Rockstar for many years, but it never happened. Maybe it's a little bit too late, but maybe next year an AJO Rockstar would be really, really cool.
Okay.
So this is Adobe Journey Optimizer. The first thing we have to do to provide personalized content is configure channels that reflect the placeholders that we just created in Edge. So we've got three channels configured.
Content card, we're going to use three different features within AJO to create personalization context. Authenticated header channel, and an experience decision channel. This one's going to do the targeted tiles with multiple offers. And if we crack one channel open, this is what it looks like. So we have the same naming convention in the channel name as we've used in Edge.
And the other thing I want to point out is that for these channels and for our solution, we're going to use the JSON content type as opposed to HTML because it's an architecture decision, but we believe that we want to keep pagination and decoration close to in AEM, right? So we're going to treat AJO much like a headless content engine.
And so now we have our destination, the channel itself.
Now we're going to have to create the mechanism, the how to pump content into that channel. Now we're going to move up to campaigns within AJO, and we're going to create essentially one campaign per channel. We've got a campaign for the logged in offers channel. This is going to be our tiled offer mechanism. So let's crack that open and have a look at what it looks like to set that up.
So this is the logged in offers channel. And the couple of things I want to point out. Number one, again, we're targeting this channel using the same or targeting this campaign using the same naming convention as the channel. So its action, the thing that it will activate, is pumping campaign into this particular channel. And the other side of what we're going to do is the actual content. So as we said, we want AJO to provide structured JSON, so that AEM can decorate that JSON and render the final components. And this is what it's like in AJO. So if I want to have AJO provide personalization, I build a JSON structure with all of the attributes that I need. Things like the offer name, offer ID, the offer text. And we'll see all of this in a second, subject line, button text. All of the things that the frontend will need to produce and to render the frontend. And it's all surrounded by this thing up here because this particular campaign is not going to just provide content for one component. It's going to generate a set of offers and prioritize those offers intelligently. And so it's using something in AJO called a decision strategy.
We'll park that for a second, but essentially this is how it produces the number of offers that it's asking for, and how it orders them into the frontend.
So let's have a look at what the offer looks like itself.
So here I'm jumping down under Edge Decisioning, this is the new feature.
We're going to go to Catalogs, and we can see the various offers I've set up for the demo.
These offers essentially reflect different stages of a-- There are different messages within a job seeker's journey. When they hit our site and we want to lead a job seeker through the experience of experiencing Netcentric and going through each stage, we want a specific message to be shown to them, especially, specific field to the site with a call to action that reflects moving them to the next step, right? So each of these are individual pieces of content that do that.
If we have a look at what an offer looks like, if we jump into one, you'll notice it simply looks a lot like maybe an AEM content fragment because this is how we're treating it. This is what a marketer would complete and fill out. So here's an experience we want to show when a job seeker reaches and has visited a careers page, and we want to then pump up the fact that there's specific roles available for that particular job area.
And each of these offers then has personalization targeted at a specific audience. So in this case, AJO is determining based on the profile and events and all sorts of stuff, that this offer would be appropriate to this particular individual because they're a member of this particular audience. And we've got a number of audience as well set up, so lots of stuff in AJO going on, but each of these audiences is how we classify and order our customers into groups and be able to then prioritize communicate.
All right. So once this is all set up, what happens when AJO is called by an external system is that AJO then would return on the Edge a payload that looks a little bit like this. So it is a pure JSON structure that for each of the specific customer identities will provide the rendered offer content for each of the three surface areas that we've defined. So one call, one response.
Very, very easy to handle once you get used to the pattern.
So the magic is, how do-- I'll step back a little bit and just summarize. So in AJO, what we're doing is we're defining a channel, the where. We're defining campaigns, the how to get data or get personalization into that channel. And we're defining offers, which is the content itself to be able to provide into the campaign for the campaign to select, and the offer also has the associated audiences and a priority in which to present those offers.
And then we use that same channel name as a placeholder in Edge that will connect the two applications.
And if we look at the way that the architecture works, we've got one last step. What pulls them together, right? So we've got Edge, which provides the page content really, really quickly. And we've got AJO, which provides the payload of personalization. And so what we want to do for a solution with server-side in the middle is that we're going to use Cloudflare as a serverless function, which is a little JavaScript in the cloud for those of you that aren't familiar with serverless functions. And the code to bring those two elements together, the page itself and the personalization, blend it together and return it to the browser really, really fast. Keep in mind, all of these are Edge Services. So services close to the proximity of a customer for performance optimization.
So how does that Cloudflare script work? It essentially does a number of things, and this code will all be shared with you guys for feedback and to use and abuse, but it's essentially doing three things. It's going to the Edge Delivery Services to grab the page, which initially has the placeholders. The second thing it's doing is it's going to AJO, taking the cookie it received from the browser, asking AJO, "Hey, do you have any offers for these particular placeholder content areas and receiving that payload back?" And then a little script down at the bottom, which is simple magic, right? RegExReplace, so it's taking the JSON received from AJO, and overriding the placeholder in the received page, and then returning that whole merged page back to the browser with a tiny bit of JavaScript and CSS on the page side to receive that JSON and beautify it on the client side. So it's really, really, really fast and very, very straightforward.
So you guys want to see a demo? [Man] Yes. Yeah. Nice. So a job seeker's journey, for those that can take a hint. This is going to be a job seeker experience, so we'll lead people through the idea of what an experience on the website will look like if you're looking for a particular job.
Typical steps, right? So I'm curious. I've heard something about Netcentric. I browse the site. Maybe then there's some gated content that I want to sign up for and authenticate. You don't have to do an authentication step if you want to, if you accept cookies, etcetera. But we're going to, for the purposes of Rockstar, we'll do an authenticated experience, it's more fun.
And then what's going to happen? Yeah, browse some roles, eventually submit a CV, hopefully, get selected for an interview and receive an offer. So we want our Netcentric side to move from its kind of generic, static way of working to identify a job seeker and pull and push them through this experience.
All right. Let me pray to the demo gods. This is all live.
All right.
I'm just going to start with a new incognito cookie list window.
I'm going to hit a clone of our website sitting over in our innovation space. Remember, what I'm doing now is I'm hitting the Cloud Worker, which is then going out to Edge and saying, "Here, please give me a page," and going to AJO and saying, "I don't have a cookie yet." Do you have anything? AJO is returning essentially a fallback offer, which is this element here.
This was returned in JSON, and the page details have been rendered by the local JavaScript. The rest of the page is still the same, but this is now dropped in.
So let's log in and see what it looks like from a logged in experience. I'm going to cheat a little bit. There's a sign up form here. You guys can hit this page and play with it, give us some feedback. But I'm going to cheat a little bit to save some time, and I'm going to throw some things from Postman over.
Give me a number between, I don't know, 60 and 70. - Anybody? - [Man] Sixty eight. Sixty eight. All right.
Thank you very much. Audience participation. All right. So what I'm going do is I'm just going to post this event over to AJO, Real-Time CDP, the both, and it's going to create a profile just like submitting the form, right? And then when I go back to my site, now I'm going to log in.
I'm just using my demo account. What did we say? Sixty eight? Yeah.
My highly secure password.
And boom. Now all of a sudden I have a personal experience that and it was that fast, right? There's no wait time. It's really, really, really fast because it's Edge to Edge to Edge, right? And now the prioritized experience that you see is three offers, right? One is across both columns with two additional pieces of content tiling below, and they're all personal. They're all related to a job seeker now, right? And the most, the highest priority offer determined by AJO is rendered by my page code as the big got your attention, right? And so what's going to happen, we went through our little job seeker experience, so I'm browsing and checking out some job openings. These are all real job openings by the way.
Maybe I'm going to have a look at a solution architect role, and I click Learn more, and then my boss comes, and I'm like, "Shit, I have to log out." Right? But when I log back in, boom, I have yet another offer that is increasingly more relevant. As I was browsing, I was firing experience events back to AJO. What happens is AJO is re-ranking and replacing me on the Edge into new audiences and re-determining the next best offer, and all of this happened in practically near real-time, right? So now I have additional offers, offers, dynamic content, that is relevant to me at this step. So this step of the journey, what Netcentric is trying to do is, "Okay, there's offers available. We know you're interested in architecture." Right? Now we want you to submit a CV. Right? So I'm going to simulate submitting a CV because now I think this is so cool and Netcentric is put all this together with Adobe stuff, and I want to really check it out.
I'd like to apply for that job. So I've submitted my CV. And the next time I log in and keep in mind, this is using AJO, so there's omnichannel possibilities as well. Maybe I've just fired an email saying thanks for submitting your CV, come back to the site. The next time I log in, I've got additional personalization, right? I've got a little this guy up here in the corner, right? So I've replaced the logo, handsome looking dude. And I've got a little personalization in the header over here with last name because why not? It's Rockstar, you've to personalize some aspects of the user experience, but it now feels a lot more personal all of a sudden, right? And again, real-time, near real-time response.
And again, another offer in this experience as well. So now I've got two surfaces working for me now. I've got a thanks for submitting your CV, etcetera, we're working on it, and now I'm feeling closer to Netcentric as my photo is on their webpage, that's exciting. And so now let's say the next step is our recruiting manager is like, "God, we've got a lot of great candidates. We'd really like to do an interview event." Can you guys quickly set up something on the web and do a little campaign to attract and make sure that all of the people that we flagged as particular candidates that are really interesting that when they log back onto the website, they see a particular announcement for a job fair next Friday, and we had already set that campaign up.
Over here is the content card job fair.
Yeah. All right. And so here we go with-- We didn't fork our entire recruitment platform, so I'm just again going to simulate the fact that I've selected this particular guy for a job interview.
And the next time he logs in, boom, now I have the third element we were looking for, which is the big banner that is now attracting me to come to my job fair. So again, all of this is near real-time, AJO and Edge working together to provide a really comfortable experience, really relevant experience.
So that's the demo. All right.
Just a quick summary, this is what we've done, easy offering of three personalized channels, we're not using WebSDK, we've got the FPIDs, no client's ID ECID, and we've got less than 300 milliseconds.
Just to point out, shout out to my team, Valdas, Marko, Joan, and Andreas. None of these are rarely one person, so all of us rockstars share the glory. And just to leave you with this, we've got three QR codes up there. The first one is the QR code for the site, so feel free to play, log in, play with it. We won't send you any marketing, promise. The second one is the GitHub repo for the CloudWorker, totally open source, have fun, learn from it. If you can, share what you know, remember which company sent it to you in case you're looking for next job. And the third one is a presentation that my friend Andreas did at AEMLive, which is a fantastic event on a very similar topic with AI and personalization inside in EDS. And with that, thank you so much.
Thanks, Scott.
All right. So next we're going to invite Anian and Martin to come back up and take a seat. We're a little over, but we'll take five minutes maybe for Q&A. We've got mics in the aisles. Let me take it out. So please step up to one of the microphones if you have a question. And then after five minutes of Q&A, we'll go to voting.
For anybody who's leaving the room right now, please take the time to fill out the survey. This session only happens if we get survey results and those survey results say that you enjoyed it. So if you'd like to see us back next year, make sure to go fill out a survey and tell the powers that be that. All right. Well done. Courteous. Courteous. Courteous. All right. Any questions? [Man] Yeah, we can do voting.
Sure. We can do the voting. So before we get to voting, two quick things.
Next week, there's an event on Discord. There's this QR code here. Obviously, the Developer Hours already happened at the booth. So hopefully, you got to join us for that. But if not, or even if you did, check out the Discord. There's also some cards by the door for an event that's happening in San Jose next week. So if you're in the Bay Area and you're a developer, make sure to check that out. And then again, please make sure to take the survey. So yeah, let's go ahead and do the voting. There's a QR code here on the left. Scan that, you're going to get an experience similar to what's over on the right, and you can choose which of the three presenters whose presentation you like the best, and you can give them a vote-- - Vote for each other. - Sure. I'll vote for you. And we got this really flashy experience. - I'll vote for Anian. - Vote for me. - Are you going to vote for Anian? - All right. I'll vote for you. Who's voting for me? I can't.
I was-- So our first presenter today-- I take Anian. Was Anian Weber who presented on-- What did you call presentation, Anian? Building Multi-Site and Multi-Brand Platforms with AEM Edge Delivery Services. And then we heard from Martin Altmann who presented on-- - A Co-Pilot. - Yes. Co-Pilot. And then our final presenter today was Scott Simmer who presented on Personalization at the Edge.
All right. We'll give you all maybe one more minute to get your votes in.
Quick, run the script. Yeah. Run the script. Share it with you. Share the QR code. Share it. Come on. Post it. Post it.
All right. So it seems from the results that we've got a winner. So the AEM Rockstar for 2025 is Martin Altmann.
Thank you.
Great. And thank you all for coming. [Music]
