Implement internal search variables using Web SDK

Learn how to use the Web SDK to implement analytics variables for an internal search term tracking use case. See the flow of data from the page to the Experience Edge, and then to Adobe Analytics.

Hey, what’s up everybody it’s Doug. In this video I want to show you how to implement internal search variables when using the Web SDK. We’re going to start here in the business requirements document, also known as a BRD, and we have defined what we want to track with internal search. So, we have a number of items here. We have, you know, tracking the search terms themselves, how many searches, the number of search results, also tracking filters, and then also unsuccessful searches or those searches that return no results. So we’re going to look at the Web SDK, we’re going to look at some data elements, we’re also going to look at a schema in platform and see how it ends up here in these different eVars and events and list Vars. And to give away the ending a little bit as this gets pushed back to analytics we’re going to use processing rules to fill these variables. Now let’s jump over to a browser and we’re here in Adobe experience platform data collection, and we’re in the data streams also known sometimes as edge configuration. And I’ll show you how we’re going to map to this but I want you to see that we have enabled Adobe analytics and we have specified a report suite ID. So, as we use the web SDK on our site we will configure it to point to this data stream. At which point it will be able to push the data to this report suite. And you’ll see up here that this one is called Luma web SDK Analytics Demo. Now I’m going to go to this client button right here and we basically go into launch and I’m going to say SDK and choose this property. I’m going to click to extensions just to show you that the only extension we have here is the AEP web SDK extension, of course besides the core extension, but we don’t have the analytics extension because once again this web SDK is going to be configured to push data to analytics via that data stream. So, if I click into configure, it has my IMS org ID which is the org ID for this tech marketing demos organization here. And then you’ll see, down here the edge configuration is pointing at Luma web SDK analytics demo which we just looked at in the data streams. So that’s how anything that happens here is going to get mapped over to analytics. Now let me jump back to our data stream just for a second and our development. And if I scroll down you will also see that we have enabled the platform. And we’re going to point at this event dataset which is Luma web events dataset. So, if I go to that Luma web events dataset you can see over here on the right that it is using the Luma web events schema. And if I go to that, the Luma web events schema you’ll see basically the schema here that we have configured for the site. On the left, you’ll see this composition. So the class is this XDM experience event and we’ve got some field groups here like the consumer experience event and the AEP web SDK experience event mix-ins but we also added this one called support site search. And if I click on that one it will highlight just a portion of this. And you’ll see this site knowledge underneath that, support site search and then under that some items for internal search. So, this is where we wanted to end up because this is the kind of thing that we’re talking about in this video is how to set this up for internal search. So basically, you need to add this field group called support site search, or you could create your own but this one has already created an available for you. And then it has all these different fields that you can use for internal search, including at the bottom of it, the search term, yay. We’re going to use that and a couple of these other ones. But just, you know, keep an eye on this, notice this site knowledge, support site search, et cetera because as we go back to launch I’m going to click into that and go to client. Once again, SDK.
I’m going to go to the data elements. I’m going to go into this XDM data element, which I have added. So, I went to add data element and when I went in there the extension that I used was the web SDK extension and the data element type was XDM object. And so, it grabs the schema that I select right there Luma web events schema, in the sandbox that I wanted. And so now we can see everything there including that site knowledge node and under that support site search, et cetera and all those items that were there. Okay, so it maps over to that schema. So, as you click on any one of these, it’ll have information on how to get data into that field or object. And so, you can see down here, for example, as I select term which is the internal search term and scroll up and take a look at it you can see that the value is right here. Now you’ll see that I’m using another data element to fill that. And so let me cancel out of this for a minute. What I like to do is get the individual items into other data elements. And so basically this is where you will pull data from your page. So, for the internal search term, you need to know where you’re going to get the internal search term on your page. Now I’m pulling it from a query string parameter but it’s also very common to be pulled from a JavaScript variable. If you have internal search on your site then certainly the search term is already in a variable somewhere on the page. So, you can select JavaScript variable and then put the path to it. Or in my case here, again, I’m just going to use a query string parameter to make it very simple. And the q query string parameter will fill this data element with the internal search term. Now, I did the same thing if I cancel out of that with number of search results and I’m using a query string parameter called results and then also the search filters and a query string parameter called filters. But again, on any of these items that you’re going to track where are you going to get them? Just make sure that you grab them from whatever JavaScript variable, or custom code that you want to use to create that value and populate that data element. But then again, in my case I’m just going to use this query string parameter to keep it very easy to show you the results. So, once you’ve got individual values in everything that you’re going to track there then you can basically just map them into the XDM. If I click on the XDM again you’ll be able to see if I scroll down over here inside of that site knowledge object and support site search that I am populating number of results, refinement value, which is the filters and then term with the internal search term. And that’s of course, easy to see because it is, you know filled in blue on the ones that I have populated. So that will populate the XDM object in here this XDM data element, but then how does it send it? Well, if we go over to the rules, I’ve created this rule default page load rule. It is firing on DOM ready, and all I’m doing is sending it in. So, if I click on this send event, I then point at my XDM data right here. And so, I can click on this and I can point to that XDM data element that includes all these other ones in it. And so that will just be sent in because the action type is send event, right? So I use the web SDK extension to send event and basically just say, send in the entire XDM data. And remember from our configuration that that’s not only going to go into the platform, but it’s also going to go into analytics and into the report suite that we configured. So, let’s take a quick look if I go over here to the site and I go to my debugger, make sure that’s up and running. And I have my AEP web SDK right there. Okay, so you hopefully can see up here that I have Q equals tube socks and results equals four and filters equals become a D. So, when I run that again and I go to my debugger and I go to the events here, click on that and scroll down for everything that’s coming from the XDM. And you can see here in site knowledge, support site search, I get the search term tube socks, which is up there in the queue parameter. I have the number of results equals four which is right there. And then I have my refinement value, which was pulled from this filter’s parameter, and I have B coma D. So that’s how everything gets mapped through the web SDK and then over into analytics. As it comes into analytics we’re going to use processing rules. If I jump back over to my BRD, we’ll use processing rules to take those search terms and put them into eVar 10, to take the number of search results and put it into eVar 11 and to trigger event four on every search to trigger event five if there are zero search results. And of course, if there are filters to put them into list Var one hope that was helpful. And on another video, we’ll take a look at those processing rules. Have a great day. -