Implement Data Providers to integrate third-party data into Adobe Target

Transcript

Let’s take a look at how to implement the Data Providers feature of Adobe Targets javascript library at.js. So I like to use very simple examples. Let’s start here. I have this landing page it links to four examples. The first one I’m going to show you now is just a very simple. It’s like a static example not a real world use case, but it shows us the basic components of Data Providers. First thing I’m going to do is open up my Developer Tools so we can use that to look at the network requests. So I’m going to start with this simple static example showing Data Providers. So the end result with Data Providers is that when you look at your Target request you end up with additional parameters that are coming from your Data Provider. So in this case, we’re going to look at a Data Provider that’s adding this parameter down at the bottom: T1 equal to one. So if I view my source, I’ve just implemented it just directly in the source code of the page. You can do this same thing in your tag manager as well. There’s DTM launch or a third party tag management system. So the basic requirements for Data Providers at.js will go after the Data Provider. So let’s start at the bottom of the head and work our way up. So again at.js 1.3 and above is required. You have at.js the as the last thing here. And before that, have your Target Global Settings Definition. So here’s where you’re going to defined this Data Provider’s array. And here I’m just using one Data Provider called Simple Data Provider. This needs to be defined before the Target global settings. And it requires a name which can be different from this variable name here which is being called in a version. So if you work for a Data Provider and you’re preparing integration for Adobe Target, maybe you want to keep track of the version number. You can do that here. And then you have the provider which is a function. And the main thing that it requires is this callback. So the callback has two arguments. The first part is what should happen if there’s an error which doesn’t really apply to this example. And then here next, you have the second argument: is an object of what parameters you would like to append to the Target request. So here it’s just a static example T1 equal to one. And that’s what ends up in the Target request. So that’s just a very simple static example. So you can see the basic parts. Next we’ll get into a more realistic example.

Transcript

OK, so let’s take a look at a more realistic example that incorporates a third party API call to provide the information that we wanted to pass to Target. So we’re going to open up this second example. And now if you look at my Network tab you’ll see there are, there’s an additional request. And here we see this call to the weather API. That’s responding with all types of information about the weather. It’s raining here where I am and you’ll see that there is weather information that gets passed in the Target request. This weather condition parameter in this weather details parameter. So let’s take a look at the source code and see what’s going on here. So it’s very similar to our simple static example, at.js is the last thing we’re defining our Target Global settings calling-in this data provider called Weather Provider.

Weather Provider is up here and you’ll see there’s quite a bit more happening in that provider itself. One thing to notice, I’ve set a timeout here since it involves this third party request. The data providers will hold up the Target request for as long as your timeout setting. The default is two seconds. You can make that higher, you can make it lower and the Target request will wait until the provider comes back or this timeout is reached. At.js will manage Flicker while waiting for this third party call. So here I’m just I’m forcing in the latitude and longitude. So this isn’t going to show your local weather, it’s going to be the weather in the New York City area. But here here is where I’m making my request to the third party, making an Ajax Json request and you’ll see in the Success function here’s where my callback function is for the data provider. So again, in that first argument for the error we’re passing null again.

You’ll see in the area handling we are using that first parameter, the first argument of the function call. But then the meat of it I’m passing these two parameters in the Target request and I’m reading out these particular fields from my weather API response. So, this is again a more realistic example and you’ll see these dynamic parameter values end up in my Target request.

Transcript

Okay now I’d like to show you a slightly more sophisticated example of how you can incorporate multiple data providers. So, here I’m using my simple static example, and my weather API example to pass these two parameters, T1 equals one, and weather condition equals rain. So if I look at the source code of my page, here is my simple data provider. Here is my weather provider. I just pass them data providers and the target global settings is an array, so you just comma separate your multiple providers and that’s all there is to it. -

Transcript

Next example, we are going to look at a technique you can use to improve the page load time performance when you’re making these third party API calls. As I mentioned, the target request will be held until the data provider returns or the timeout is reached. Now, the thing is most data providers, the information that they respond with doesn’t really change much within the session of the visitor. So for example, I was using a weather provider, usually the weather is not going to change that quickly between different page loads as I’m browsing a site. So there is no need to hold up the page load for that third party API call on every single page, you can use techniques to limit that while also be sending the data to target every time. So let’s take a look at this example. So you’ll see on the first page load I am making the call to the weather API and I’m passing the weather condition parameter in my target request, but on subsequent page loads you’ll see that the weather API is not called, but I’m still passing this information about it raining in the target request. So what I’ve done here in this example is I’ve used session storage to limit when the third party API call is made. So if there’s not the session storage object, I will make the call and once it exists, I can just read the information that I want out of the session storage item and thus I’m limiting the number of API calls. So if they come back with a new browser tab it will make the call, otherwise not. So thanks a lot -