Use a data layer to set Analytics variables in Experience Platform tags

In this video, I’ll review using a data layer to set analytics variables in tags. This is what I’ll cover. I’ll start by explaining the purpose and benefits of using one. We’ll look at a data layer used on the Lumo retail site. Then I’ll hop over to tags to create new data elements that store some of these data layer values, followed by adding a rule to send those new data points to analytics. And then last, I’ll wrap up by validating that those new data points are being sent in from the Lumo website. A data layer is a JavaScript object implemented on a website that acts as a middleman. It standardizes the data you want to collect into other tools like analytics, and it facilitates communication between a website and a tag management system like tags. Now, for companies not using a data layer on their site, this can lead to some issues over time. First, separate implementations for each marketing technology vendor introduces redundancy so it becomes very inefficient. Next. Each martech vendor typically has some differences in how they define events, so the data across vendors can become inconsistent. Third, separate implementations for each martech vendor leads to performance issues on your website over time. Now, on the flip side, companies that use a data layer reap some benefits. First, the data layer, if designed properly, surfaces key data points in a vendor agnostic way. Second, the data is standardized so can support the full martech stack and eliminate inconsistencies of data. Third, implementing a single data layer means your website will be more performant because all martech vendors use the same set of variables and events. This is the Luma Retail website used in many Adobe tutorials. Let’s take a look at the source for this page. At the top in the head section. There’s the tags library script. This is the ideal placement, especially if you use tools like Adobe Target. It’s loaded asynchronously so the rest of the page will continue to render and it won’t be held up. Right above the library is the data layer. This site uses the W3C Digital Data Layer, which uses a JavaScript object with digital data being the root object, and then sub objects branching from it to define attributes for things like the page and category. Your organization may use something completely different for a data layer. Adobe even has its own data layer called the AC DL, which stands for Adobe Client Data Layer, and it’s an event driven one as compared to the object based one like this W3C version. Whatever you want to use is fine, but we do recommend that you use a data layer, and that is the best practice for analytics and other Experience Cloud solutions. What I’ll show you next is how to set analytics, page name and channel variables with values from this data layer, and then send them into analytics. We’ll be pulling them from the page and category objects. Here’s the page name value. And here’s what we’ll pass in to the channel variable. I’ll just mention now that implementing the data layer and associated values is an activity done by your development team. If you worked with Adobe consultant or a partner consulting firm to help you define your analytics data collection requirements, then you’ll have two key documents that will help a solution design reference and a text spec. You’d pass these off to your development team to help them implement part of the data layer. Jumping into the tags interface, and I’ll show you that the basic configuration for analytics is already set up. I have the library management set to manage the library for me, and I have my reports suites defined below that in the general section, I have my tracking server defined as well. Now there’s a rule set up for the campaign tracking code, and there’s some data elements in here, but nothing for page name or channel. And there’s no rule for sending an analytics beacon. Back in the Luma website. I need to understand how to reference the data attributes I’ll need for setting up my data elements. How open developer tools, and in the console I’ll start typing in digital data. This shows me the objects available from the route. I’ll continue by typing in page. Same thing. I’m going deeper into the object path. I’ll type in page info and then finally page name. Once I hit enter, it returns the value for that attribute. This is the path I’ll use for creating a new data element for page name, so I’ll copy this to use. Once I’m back in tags. Now, I’ll grab the category value I’ll use to set the analytics channel variable. I’ll type in digital data and then page followed by category and ending with type. When I press enter, the value is returned. I’ll copy the path to this value as well. To have handy. Once I’m back in tags. In tags, I’ll start by creating my two data elements for page name and channel. I’ll select add Data Element in the upper right corner. I’ll name it Page name. The default extension here is core and that’s what I’ll use. It’s a JavaScript element type. So I’ll select that. Last I’ll paste in the data layer path I copied in the previous step. All right. Now I’m going to go ahead and set up the site section. Again I’ll give it a name. And I’ll paste in the data layer path that I copied previously for this site. All right. At this point I’ve created the data elements that will store the respective values from the data layer. Now I need to create a rule to send this data into an analytics beacon. So I’ll select Add rule at the top. I’ll enter a name. Now I need to configure an event. Essentially when do I need to execute this rule. There’s a lot of options here, but I need to send this data for every page view. So I’ll choose Dom ready under page load. The tags library is loaded async in my property. So page bottom doesn’t apply in this case. Now here in the advanced options the order is set to 50. If you have other rules that set analytics variables that you want to merge in with the beacon I’m setting up here. Then the order number should be higher than that of any of the other rules. Now I’ll select the analytics variables with the data layer attributes. This is done in the actions section. Under extension I’ll select Adobe Analytics. I’ll choose set variables from the action type. And then to the right I’ll set up the analytics variables that will be set from page name and site section.

Okay. Last I need to send the beacon. I’ll add an action at the bottom to the right of set variables. I’ll select Adobe Analytics for the extension. Then I’ll choose Send Beacon as the action type. I’m sending a page view. So the first option S-T is correct. Now I’ll save my changes. At the top I’ll add a new working library and add all my changed resources to it. And then I’m going to save and build this to my development library. Now I’m going to test my code on the Luma website. First I’ll refresh the page and then I’ll open the browser’s development tools. On the console tab I see my new rule fired, and above it I see var for channel and page name included as data points sent in. This concludes using a data layer to set analytics variables and tags. You should now understand how to create data elements and rules to send these data points to Adobe Analytics. Good luck!