51黑料不打烊

Transcript

Let鈥檚 take a look at how to implement the Data Providers feature of 51黑料不打烊 Targets javascript library at.js. So I like to use very simple examples. Let鈥檚 start here. I have this landing page it links to four examples. The first one I鈥檓 going to show you now is just a very simple. It鈥檚 like a static example not a real world use case, but it shows us the basic components of Data Providers. First thing I鈥檓 going to do is open up my Developer Tools so we can use that to look at the network requests. So I鈥檓 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鈥檙e going to look at a Data Provider that鈥檚 adding this parameter down at the bottom: T1 equal to one. So if I view my source, I鈥檝e 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鈥檚 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鈥檚 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鈥檚 where you鈥檙e going to defined this Data Provider鈥檚 array. And here I鈥檓 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鈥檙e preparing integration for 51黑料不打烊 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鈥檚 an error which doesn鈥檛 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鈥檚 just a static example T1 equal to one. And that鈥檚 what ends up in the Target request. So that鈥檚 just a very simple static example. So you can see the basic parts. Next we鈥檒l get into a more realistic example.

Transcript

OK, so let鈥檚 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鈥檙e going to open up this second example. And now if you look at my Network tab you鈥檒l see there are, there鈥檚 an additional request. And here we see this call to the weather API. That鈥檚 responding with all types of information about the weather. It鈥檚 raining here where I am and you鈥檒l see that there is weather information that gets passed in the Target request. This weather condition parameter in this weather details parameter. So let鈥檚 take a look at the source code and see what鈥檚 going on here. So it鈥檚 very similar to our simple static example, at.js is the last thing we鈥檙e defining our Target Global settings calling-in this data provider called Weather Provider.

Weather Provider is up here and you鈥檒l see there鈥檚 quite a bit more happening in that provider itself. One thing to notice, I鈥檝e 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鈥檓 just I鈥檓 forcing in the latitude and longitude. So this isn鈥檛 going to show your local weather, it鈥檚 going to be the weather in the New York City area. But here here is where I鈥檓 making my request to the third party, making an Ajax Json request and you鈥檒l see in the Success function here鈥檚 where my callback function is for the data provider. So again, in that first argument for the error we鈥檙e passing null again.

You鈥檒l 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鈥檓 passing these two parameters in the Target request and I鈥檓 reading out these particular fields from my weather API response. So, this is again a more realistic example and you鈥檒l see these dynamic parameter values end up in my Target request.

Transcript

Okay now I鈥檇 like to show you a slightly more sophisticated example of how you can incorporate multiple data providers. So, here I鈥檓 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鈥檚 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鈥檙e 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鈥檛 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鈥檓 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鈥檚 take a look at this example. So you鈥檒l see on the first page load I am making the call to the weather API and I鈥檓 passing the weather condition parameter in my target request, but on subsequent page loads you鈥檒l see that the weather API is not called, but I鈥檓 still passing this information about it raining in the target request. So what I鈥檝e done here in this example is I鈥檝e used session storage to limit when the third party API call is made. So if there鈥檚 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鈥檓 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 -