Welcome to the add data elements course. In this training we’ll explain the power and flexibility of data elements by walking through some examples.

Data elements are part of the basic building blocks of tags within Launch. Data elements store the attributes we want to send to our marketing and analytic solutions. Think of our data elements as Launch’s version of a data layer.

Now data elements can pull values from JavaScript objects, cookies, local storage objects, query string parameters, page elements, meta tags, and more. Once we have defined a data element we can use it over and over in multiple tags. The power of this is in changing the value once instead of in all the places it was used. Let’s go over to Launch and setup some common data elements.

Data elements can store any value for any purpose that we want. But most commonly it’s used for the values of the website data layer. So just to briefly introduce or remind you what a data layer is, let’s jump over to our We.Retail site and view the page source code. So here on the homepage of We.Retail let’s jump over here to view page source.

As we can see here there’s a JavaScript object called digital data. And then below we can see this cascading schema where we’ve got digital data, page, page info, page name. Or page category, primary category. Then we could come down here and see information about the user or product. Now because we’re on the homepage there’s not a lot of information here, it’s just the homepage. And the primary category is homepage but we’ve the server of We.Travel. Now as we go into other pages we’ll see different information. So the schema of the data layer is always consistent but the values are unique to each page of the website.

Data layers are becoming more and more popular because they’re very stable elements of the page. Once the schema is decided on, all the web developers and content providers use it to input information about the page. Now you don’t have to use a data layer, Launch can accept cascading style sheets or other methods to pull the information from the page. But in the example of a cascading style sheet, as changes happen it will change the cascading style sheets on the page which could break your data element. So data layers are very powerful. So let’s create a data element and capture some information from the page.

Back here in Launch we want to click on our data elements tab. And if we’ve never put a data element in here then it will say create new data element.

So we want to have a good naming convention for our data elements and for that matter for everything that we name within Launch. So we’re just going to use part of that data structure here and we will call it page name.

So back in here, page name. Now the extension, we’re going to use the core extension for this example so we’ll just leave it the way it is. Then we come down here to the data element type. As we look at this list there are many different ways that we can scrub data from the pages of our website. In this example with a data layer we’re going to use the JavaScript variable. Once we select that over here in the main window it asks us for the path to that specific element. So back on the page source again we will use digital data, dot, to separate the next value of page, dot page info, dot page name. And we do have to realize that this JavaScript needs to be case sensitive for it to be able to read this path. So once we have got that, it will grab whatever value is in here. So it works not just on the homepage but on every page where it keeps this consistent schema. So back in here we’ll just type in that information.

So digital data, dot page, dot page info, dot page name with the caps on the I and the N, as well as the D. So once we’ve got that we can move onto the next thing. The next one is the default value. If there is no value found in the data element, it will use this default value. Now depending on what the value is and what the data element’s purpose is, you may want to put a default value in but in most cases we would recommend leaving this blank.

The next thing is force to lowercase. Now many times when different developers are populating data layers, they may not do it exactly the same way. So by checking this box, we’re able to ensure that at least the case sensitivity is consistent. This helps reduce duplicate values that are treated as separate values. There are times when we would not want values to be all lowercase, like capturing a user ID or something where the format of the value relies on if it’s being upper or lowercase. Now the next one, clean text, it’s simply takes out spaces before and after the value and any double spaces within the value, so it just makes it more consistent again. It’s probably a good idea to always check that. Now our last one here is storage duration. This is the length of time that Launch will store the value. And this is based on the browser, not any specific solutions session time. In 99% of use cases, we recommend choosing none. There’s usually no reason to persist the value of a data element. It’s best practice to explicitly call the data element when you want it for that specific server call. And not depend on previous values of the data element. Now granted there could be some edge case where you may find it useful to persist the value but in most cases just choose the none.

So once we’ve got this setup, we can just go ahead and click save.

Now we see it in our list. So now that we’ve gone through what each of the fields are, let’s just run through a couple of others quickly. So let’s add another data element. And this time we want to grab a customer ID. If we jump back in here into our code, we can see that under the user profile we have something called a profile ID and it will grab the value. When we hop on the website and we log in it will identify who these individuals are and that will be consistent throughout their visit or through multiple visits when they log in. So what we want to do is we want to go back in here into Launch and we’re going to call this customer ID. We’re still going to use core. And the data type is still going to be our JavaScript variable. But this time we need to pull it from a little bit different location. So see if you can do this. Pause the recording here and see if you know the exact path to pull this profile ID. So take a second, figure out. You need to start with the digital data and put dots in-between each level. See if you can figure this out.

Okay let’s see if we can put this value in here. In fact, let me come back here and we say; okay it’s going to be digital data and instead of using page, we’ve got to come down here to user. So it’s digital data, dot user, dot profile, dot profile ID. So then we just put that in there. Again no default, force to lowercase, and clean text, and none. And you could say that this may be an option where you don’t want to force to lowercase if the value is alphanumeric and it had upper and lower in that value.

We’ll go ahead and save that one.

Let’s do just one more and here I want to show you inside the website as we look for things on the website, we may use the search function. And let’s say we’re looking for information in Paris.

Once we hit enter in this fictitious website it doesn’t really show any results, but if we look up here in the URL for this search results page, we see here that we typed in Paris. And the query string parameter is an S. So we can use Launch to say look for the query string parameter of S and grab the value and put it in a variable. So let’s go ahead and add this last one here. We’re going to call this internal search term.

And this time our element type is going to be query string parameter. And the value it’s looking for is that S. And we could say we want it case sensitive but we just want to leave it as it is. No default value, and here’s a case when people are typing in and some people type Paris all uppercase or upper and lowercase, there just could be lots of variety there so we want to clean that up. And again, duration of none. And we’ll go ahead and save this one.

Now we could do this all day long and we could create lots of different data elements and there’s different ways to grab it. But this is just a simple little introduction of some of the data elements that you would want to create. -