Experience Platform SDKs and Launch Server Side

Transcript

All right, well, thank you everyone for joining us today for the Adobe Developers Live event. My name is Rudy Schumpert, Senior Evangelist on the Experience Platform team. And I’m joined today by Emilia Dobryn and Aaron Hardy, both great engineers who are going to help us today be able to walk through how the SDKs can help you kind of supercharge the launch server side. So before we get into that, I’m just going to provide a little background on Adobe’s new data collection approach. So with the launch of the Experience Edge network, we’ve actually combined and consolidated all of our data collection on the client side, so through our mobile and web SDKs. So whether you’re using just one of Adobe’s services like Analytics or Target, or you’re using the whole suite, you can get rid of all those different tracking libraries and just consolidate down to using the web SDK and the mobile SDK. And it sends one call using an XDM format to the Adobe Edge network. And from there, it syndicates that data out to any of the Adobe solutions that you’ve selected in the Edge configuration. And if you’re using launch server side, which is what we’re really going to get into later in this talk, you can syndicate that data out to any non-Adobe destinations. So what is XDM? If you’re not familiar with XDM, it’s our extensible data model within the Adobe Experience platform. And what it does is it allows you to create a common structure for any application that you’re using to be able to communicate and send that data to Adobe’s Experience platform. So you’re teaching us the type of data that you’re going to send. So instead of, if we’re thinking like in analytics tracking, instead of sending props and EVARS, you’re going to send name value pairs. These name value pairs, some of them we’ve pre-built some mix-ins for you, but you can also customize those that’ll be very specific and unique to your business. So think of XDM as just kind of the blueprint for how the data that you’re working with is defined and how it should be ingested and consumed. And so with that, I’m going to head over to Aaron Hardy, who’s going to actually go through how you can configure and set up the Experience platform web SDK. So for this portion of the presentation, we’re going to go over a demo and let me just kind of set that up for you. So this is a user interface that we have. We have a website that shows this user interface, and then Amelia is going to show a mobile app that shows a similar user interface. The user is going to come to this user interface and they’re going to choose a product from that top dropdown. And then they’re going to add the product to a cart. And then later they’re going to purchase the product. And then sometime later, after they get the product, they’re going to leave a review. Now we want to track the interactions that the user is taking on the website and send that to Adobe so that later we can analyze it, maybe match it up with CRM data or call center data or things like that. Maybe send that data off to a third party. Right? Okay. So the first step in this process is to create a schema. And that’s what Rudy was talking about. And the schema describes the data that we’re going to send from the website and mobile app into the Edge network. And here I’ve already created a schema. So on the right hand side, you can see the fields that I’ve added to the schema. These are key value pairs, but they can also be broken down into objects and arrays, kind of like what you see right there. Now how did those fields get into my schema in the first place? So I have added what are called mixins to my schema. And over here on the left hand side, you’re going to see four different mixins. And three of them have this little lock icon. And one of them does not. The ones with the lock icon means that they are out of the box mixins that Adobe provides. And if I use those, well, it makes a lot of sense to use these built in mixins. If for example, if I am a commerce website, I’m probably going to want the commerce mixin. And those are going to give me commerce related fields. So a mixin is a group of related fields that serve a purpose. Here I’ve added three built in mixins. And then I’ve created a mixin of my own, the product review mixin. The product review mixin are fields that are specific to how I deal with product reviews in my organization. So let’s dig into a couple of these mixins a little bit more and see the fields that they add. The first field that we’re going to look at is this product list items field. This is provided by the commerce details mixin. And when we add a product to the cart, we’re going to use this field and the fields inside. So this product list items is an array of objects. So for one product, we’re going to add an object to the product list items array. And that object is going to have things like SKU and currency code and name and price. This next field commerce is also provided by the commerce details mixin. When the user checks out, we’re going to use the order field within the commerce object to provide information about the order and the payment methods and things like that. But there’s also some other really interesting fields that we could use here as well if we wanted. Another field that’s in my mixin, a group of fields, I guess, are these right here. Product SKU, rating, review text, and reviewer ID. These pertain to the user leaving a review. And these were added by the custom product review mixin that I created. Okay, we have our schema set up. Now the next step is to create an edge configuration. So when data comes from the website or mobile app to the experience edge, which our server is owned by Adobe, the experience edge is going to look up an edge configuration. And the edge configuration is going to tell the edge network where to send that data. So here I’ve configured an edge configuration using the edge configuration user interface provided by Adobe. And I’m telling the edge network that when it receives data, that it should send that data to Adobe analytics using this report suite right here. It should send it to Adobe experience platform and place that data inside the experience edge demo data set. And it should send the data to launch server side, where we’re going to run rules and send that data to a third party. As you can see, I could have also enabled audience manager through this user interface or target for personalization. Okay, once I have the edge configuration in place, I need to install the web SDK onto my website. Now I could do that by downloading or just loading the JavaScript library, the web SDK JavaScript library onto my website directly. But for this demo, I’ve used launch, which is Adobe’s tag manager to install and deploy the web SDK. So in launch, when I’m installing the web SDK extension, I get a user interface that looks like this. And the important part here that I want to show is that we are configuring the web SDK extension with… I’m using the edge configuration that we just created in the previous screen. So here I’ve chosen the experience edge demo edge configuration. And so when we send data from our website, it’s going to include the idea of that edge configuration so that the edge network knows which edge configuration to look up and use. And I’ll show you that in the demo in just a second. Okay, the next thing we want to do is in launch, we want to create rules. So we want to react to the user’s behavior. So here is an example of one rule, add to cart. So when the user clicks the add to cart button, this rule is going to run and it’s going to run this action. It’s going to send an event using the web SDK. So this send event action looks like this. We say which instance of the web SDK we’re going to use. We define the type. This type is going to be sent on the event that gets sent to the server. And then we are also going to include a bunch of other XDM data that matches the schema that we looked at previously. Now for the purpose of this demo, I’m using a data element called add to cart XDM. We’re not going to get into data elements too much, but a data element in launch typically pulls information from the website. And in this case, it’s going to pull information from what the user has entered into the form on the website. And then it’s going to send that data through the web SDK to the edge network. Okay. And then now it is time to look at the demo. So here’s my demo website. I’ve deployed launch onto this website. It’s just waiting for user interaction. So as a user, I’m going to select brown leather shoes. And I’m going to go ahead and add brown leather shoes to my cart. Now we can see here, if we look at this network request that went out, this is the one from the web SDK. And on the URL, there’s a config ID. That’s the edge configuration ID. So the edge network is going to look up that edge configuration and then send that data out to the different Adobe products. Now in the request payload, I have the event here with XDM. And here we can see product list items includes an object that represents the brown leather shoes. So it’s SKU, it’s currency code, the name, price total, quantity. Yeah. So we’ve added the product to the cart. Now we’re going to act like we’re purchasing the product. So we’re going to hit the purchase button and we see another event go out to the server. If we look at this one’s payload, we’ll open that up here. I’m going to make this a little bit larger. We’re going to look at this commerce one now, and we can see that order has been filled out and includes the price total and it includes payments. So it includes a payment from a credit card for 5281. Okay. So I receive my brown leather shoes. Don’t they match my eyes? I’m going to leave a review and I’m going to say, okay, test at example.com. And I’m going to say, I’m feeling good. I’m going to say fantastic. And I’m going to say the brown really brings out my eyes. I’m going to submit that review. So this third request that goes out is me submitting the review. And if we look at the payload here, we’ll open up that XDM again. And right here, we have this custom mix-in of these fields from the custom mix-in right here. Products queue, rating, review text, and reviewer ID. So again, this data is going to the edge network and the edge network is sending this data out to the Adobe products behind the edge network. So now let’s go see the mobile side of this demo. So it’s over to you, Emilia. Thanks, Aaron. I will give you an introduction. Actually it’s an end-to-end workflow of how to set up your mobile application to deliver XDM data to Adobe Experience Edge. So let’s get started. First, for my mobile property, I’ll go in Adobe Experience Platform Launch and configure my extensions. I will install the Adobe Experience Platform Edge network extension and I will do my configuration in there. As in Aaron’s example, I selected the same edge configuration from the dropdown and I will save this to my library and use the configuration on my client side. So while this is building, I will move over to the client side implementation. For this example, I have an iOS mobile application and here it is how it looks. It’s very similar to the website. And in order to be able to start collecting the data, I’ll start by importing the client side, the libraries that are required for this demo on the client side. So this is my pod file, which will declare my dependencies for this application. And at the minimum, I will need the AEP core extension, which would be responsible for processing any events within the SDK, as well as downloading your remote configuration, which contains the Experience Cloud Edge ID. Then you have the AEP identity extension, which will provide the device identity for my events, including the Experience Cloud Identifier. And then I have the AEP Edge extension, which will be used for delivering the XDM events over to the edge network. So once I have installed these dependencies, I’ll switch over to my AppDelegate, which is my main class for this application. And I will set up my launch environment ID, which will be fetching my remote configuration. And then I will just register the two extensions, the identity and edge extension with the mobile core, so then they can start processing the events as soon as the application launches. With that, I will move over to the two examples we have in here. The first one is the XDM Commerce example, and the second one is the product review. I’ll start with the Commerce one and let’s see how that looks in my code. For the Commerce example, I chose to use Commerce Schema class, which is structured one-to-one, like a one-to-one mapping on my XDM object that Aaron showed in Adobe Experience platform. So this holds information like commerce details or product list items, which is an array of items, as you’re showing earlier. And each of them may have other classes underneath as properties, and we will need to populate these classes as we need for our examples. So let’s see how that looks in the implementation example. For the addToCard, I’m going to pick the element from the picker and then populate all the data about this product, like name, price total, and so on. And then I need to indicate that this is a commerce product list ads action, so I’ll select that as well. I will set my XDM event type to commerce product list ads. And then lastly, I will send this event over to Edge using the Edge.sendEvent API with my experience event with the data I have just built. This is pretty simple. And then a purchase event is even simpler. As you may have already guessed, because we are using the same schema, the commerce schema, we can pretty much define the event in the same way. So we have the product information, and then I’m computing about a bunch of other details about the order, like the order total, the payment amount, and so on. And then once I’m putting all that in there, lastly, I’ll select the event type, commerce purchases, and then I will send it over to the Edge using the Edge.sendEvent API. For the last example, for product reviews, I chose to use a simple dictionary with key value pairs, because that custom mixing that we are using for product reviews is very simple. So it has just a few fields. So I can very well do this as well for building my SDN data. So in this example, I populate the product SKU rating, review text, and so on. And then I don’t forget to send it over to the Edge. Okay, so let’s see how that looks in practice. I’ll open this so you can see my events flowing. I will say that I will purchase a straw hat and I will add it to cart. And you can see that this is my add to cart event with the product information. And then I will also purchase this event. And let’s see how this looks. You can see that I have the order information, the payment type, and so on. And as in Aaron’s case, like deliveries are very fast nowadays. So I already received my straw hat, and I’m wearing it and I’m very excited about it. So I’ll provide a review for this item. So let’s say lovely hat. I’ll submit my review. And you can also see the SDN payload for this event that I have just sent. Everything was great on the client. But let’s see if the data was also sent over to the other solutions or Adobe Experience platform that we selected earlier. In Adobe Experience platform, I am going to see the data in my data set that I have configured for this application. So you can see that the data comes here in batches. There are some of them from the previous days and some from today. The batch may take a while to show in here, but you can see that they are processing. And then of course, you can also do queries on these batches and see how the data looks, the SDN data looks inside. So you can see that the data was delivered properly. And in here, I’m just querying for the purchase event. So very simple. I will also switch over to the analytics report to see how that looks like. I have a real-time report in here for cart additions, orders, and reviews. So you can see that I have brown leather shoes and the straw hat added to the cart. And then I have two orders as well. Both Aaron and I purchased the items. And then we have the reviews in real time. Please note that these reports are based purely on SDN data. So you can see the data as soon as it reaches Adobe Analytics. Before I go, I just wanted to look a little bit back to the Edge configuration that Aaron showed earlier. And I will focus a little bit on this launch server-side configuration. You can see that I’m selecting a property ID in here, which indicates that the data should be executed against server-side rules. And then forward that information to non-Adobe services. And I will not spoil the fun of this. I will just hand it over back to Rudy so he can show you the full demo of this. Great. Well, thank you both. So it was really cool to see the same application, the same type of application, both on the web and the mobile, sends very similar data to the Edge and to see it flow all the way through to the Adobe solutions. But what’s really cool about launch server-side is you can syndicate that data out to non-Adobe destinations. And so here is the experience Edge demo property that Amelia just showed us that she connected everything to in the Edge configuration. And so the first thing we’re going to do is look at how do we consume that XDM objects that we talked about in the beginning and break it out into data points that we want to use. And so we’ll do that using the data elements. And so what we’ve done is we’ve created a few data elements to get the product SKU information and like the review text. And so if we take a look at the review text, for example, you can see what we’re doing here is we’re just referencing the location in that XDM object that was populated on both the web and the mobile SDKs to send that data over. And so right here, using that schema that we talked about, the review text, so the exact same field in the XDM object was populated by both the web and the mobile. And then we were able to extract that here and create a data element. This data element we can reuse in any number of rules to send that data to an infinite number of locations if we choose. And what we’re going to do is we’ve actually installed an extension here on the server side launch property, very similar to how the extensions work on the mobile and the client side, allows you to expand some functionality. And we’re using this Adobe Cloud connector. The Adobe Cloud connector allows us to actually send the data to any third party destination that has a mechanism already set up to receive that data. So let’s take a look at what that would look like inside of an actual rule. We’re going to open up and take a rule, we’re going to collect product feedback. And the event type in server side is that the base event is an XDM object was received, but we can layer in conditions. And so what we’ve done is we’ve added a condition that says if the event type that we’re looking for equals a product review, then we’re going to execute this rule. And what do we do in the rule action? Well, we’ve defined an address to a webhook site, and it’s using a post method and we’re sending along the product SKU and the review text. And so we know which product was reviewed and of course the text that was sent. And this is pushed through server side in really close in real time. And what’s great about this is we didn’t have to have this extra code running on the client side. And so actually, while Aaron and Amelia were talking, they actually triggered these server side rules. And so if we actually go and look at this webhook site, which is receiving this data, and this can stand in for any marketing tech that you’re using. We’ll see here at just about 15 minutes ago, the brown leather shoes were added. And then we can look at the next call and we can see that the brown really does bring out the brown shoes really bring out the brown and Aaron’s eyes. So that’s always fantastic to see such great customer feedback. And then even shorter time ago, this is where the straw hat was added and purchased. And then of course, the review for the straw hat. It was indeed a lovely hat for the demo. So it’s like the webhook site is just a placeholder for any other kind of marketing tech that you’re using. But at the same time that that real time data hit Adobe Analytics, leveraging launch server side, we’re able to syndicate that data out to this non Adobe destination. And if you think about all the different third party tags that might be running within your web application or your mobile application, and think about what that would do from a performance perspective, be able to offload those off the client side and move them to the server side. It’s really exciting to see what kind of opportunities this opens up. And so with that, I’m going to go back into the PowerPoint slide for just a second. And it brings us back to this slide again. And so what I think is really powerful about the Adobe Edge and launch server side forwarding, of course, is the fact that the edge doesn’t really care where the data is coming from. As long as it’s been sent with the right configuration ID and formatted properly in the XDM format. It can consume that data from the web, it can consume it from the mobile SDK. And then of course, as you saw in real time, distributed out to any Adobe and non Adobe solution as required. And this is great because once you’ve actually taken the steps to construct the XDM object, construct your schema, and configure the web and mobile SDKs to send that data, it opens up all the power of the Adobe Experience platform. So it helps with the data ingestion, validating the data as we saw, it really powers the segmentation and audience creation, and even further drives personalization. You can tap into the real time customer profile. And of course, just from the building out of the SDKs, we have a whole library of schemas built. Like remember, Aaron showed you the padlocked mixins, that we already have a huge number of stuff that’s already predefined for you. But of course, you can always customize it to whatever your specific product or specific application needs are. So the web and mobile SDKs plus the Adobe Experience edge and launch server side really does equal happiness. And what we’ve got here on the last slide for you is a set of handy reference links. I do know this will all be included in the video afterwards. So you can screenshot this now and then of course, hopefully be available for you later. But thank you very much for joining our session today. Hopefully you found it very beneficial. And of course, they’d like you to, there’s some poll questions there on the side for folks to be able to provide feedback about the session. All right, well, if there are no other questions, I think we’re done. Thanks, everybody. And we’ll see you all later. Thank you. Bye bye. Bye.