Documentation Experience Platform Web Tutorial

Add a data element, a rule and a library

Last update: November 14, 2022

Topics:
Tags

CREATED FOR:

Beginner
Intermediate
Developer

In this lesson, you will create your first Data Element, Rule, and Library.

Data Elements and Rules are the basic building blocks of tags. Data Elements store the attributes you want to send to your marketing and advertising solutions, while Rules fire the requests to those solutions under the right conditions. Libraries are the JavaScript files that load on the page to do all of the work. In this lesson, you will use all three to make our sample page do something.

NOTE

Adobe Experience Platform Launch is being integrated into Adobe Experience Platform as a suite of data collection technologies. Several terminology changes have rolled out in the interface which you should be aware of while using this content:

Platform Launch (Client Side) is now tags
Platform Launch Server Side is now event forwarding
Edge configurations are now datastreams

Learning Objectives

At the end of this lesson, you will be able to:

Create a data element
Create a rule
Create a library
Add changes to a library
Validate that your library is loading in your web browser
Use the “Working Library” feature to work more efficiently

Create a Data Element for Page Name

Data elements are tags’ version of a data layer. They can store values from your own data layer object, cookies, local storage objects, query string parameters, page elements, meta tags, etc. In this exercise, you will create a data element for Page Name, which you will use later in your Target and Analytics implementations.

To create a data element

In the left navigation, click Data Elements
Since you haven’t created any data elements yet in this property, a brief video appears with additional information on this topic. Watch this video, if you like.
Click the Create New Data Element button:
Name the data element, e.g. Page Name
Use the JavaScript Variable Data Element type to point to a value in your sample page’s data layer: digitalData.page.pageInfo.pageName
Check the boxes for Force lowercase value and Clean text to standardize the case and remove extraneous spaces
Leave None as the Storage Duration setting since this value will typically be different on every page
Click the Save button to save the data element

.

NOTE

Data element capabilities can be extended with Extensions. For example, the ContextHub extension allows you to add data elements using features of the extension.

Create a Rule

Next you will use this data element in a simple rule. Rules are one of the most powerful features in tags and allow you to specify what should happen as the visitor interacts with your website. When the criteria outlined in your rules are met, the rule triggers the action you have specified.

You are going to create a rule that outputs the Page Name data element value to the browser console.

To create a rule

In the left navigation, click Rules
Since you haven’t created any rules yet in this property, a brief video appears with additional information on the topic. Watch this video, if you like.
Click the Create New Rule button:
Name the Rule All Pages - Library Loaded. This naming convention indicates where and when the rule will fire, making it easier to identify and re-use as your tag property matures.
Under Events, click Add. The Event tells tags when the rule should fire and can be many things, including a page load, a click, a custom JavaScript event, etc.
1. As the Event Type, select Library Loaded (Page Top). Note that when you select the Event Type, tags pre-populates a name for the event using your selection. Also note that the default order for the event is 50. Ordering is a powerful feature in tags which gives you precise control over the sequence of actions when you have multiple rules that are triggered by the same event. You will use this feature later in the tutorial.
2. Click the Keep Changes button
Since this rule should fire on all pages, leave Conditions blank. If you open the Conditions modal, you will see that conditions can add both restrictions and exclusions based on a large variety of options, including URLs, data element values, date ranges, and more.
Under Actions, click Add
Select Action Type > Custom Code, which at this point is the only option. Later in the tutorial, as you add extensions, more options will become available.
Select </> Open Editor to open the code editor
Add the following to the code editor. This code will output the value of the Page Name data element to the browser console so you can confirm it’s working:
console.log('The page name is '+_satellite.getVar('Page Name'));
Save the code editor
On the Action configuration screen click Keep Changes
Click Save to save the rule

On the Rules page, you should see your new rule:
Rule appears on page

Save Your Changes to a Library

After configuring a collection of extensions, data elements, and rules in the Data Collection interface, you need to package these capabilities and logic into a set of JavaScript code that you can deploy on your website so that marketing tags will fire when visitors come to the site. A library is the set of JavaScript code that will do this.

In an earlier lesson, you implemented the embed code of your development environment on the sample page. When you loaded the sample page a 404 error was returned for the embed code URL because a tag library had not been built yet and assigned to the environment. Now you will put your new data element and rule in a library so that your sample page can do something.

To add and build a library

In the left navigation, click Publishing Flow
Click Add New Library
Name the Library, e.g. Initial Setup
Select Environment > Development
Click Add All Changed Resources
Note that after clicking Add All Changed Resources tags summarizes the changes you just made.
Click Save & Build for Development

After a few moments, the status dot will turn green indicating the library successfully built.

Library Built

Validate Your Work

Now validate that your rule is working as expected.

Reload your sample page. If you look at the Developer Tools -> Network tab, you should now see a 200 response for your tag library!

Library loads with 200 response

If you look at the Developer Tools -> Console, you should see the text “The page name is home”

Console Message

Congratulations, you created your first data element and rule and built your first tag library!

Use the Working Library Feature

When you are making a lot of changes in tags, it is inconvenient to have to come to the Publishing tab, add changes, and build the library each time you want to see the result. Now that you have created your “Initial Setup” library, you can use a feature called “Working Library” to rapidly save your changes and rebuild the library in a single step.

Make a small change to your “All Pages - Library Loaded” rule. In the left navigation, click Rules and then click on the All Pages - Library Loaded rule to open it up.

Reopen the rule

On the Edit Rule page, click the Working Library dropdown and select your Initial Setup library.

Select Initial Setup as the Working Library

Once you’ve selected the library, you should see that the Save button now defaults to Save to Library. When you make a change in tags, you can use this option to automatically add the change directly to your working library and/or rebuild it.

Test it out. Open your Custom Code action and just add a colon after the text “The page name is” so the entire code block reads:

console.log('The page name is: '+_satellite.getVar('Page Name'));

Save the code, keep the changes in the action, and now click the Save to Library and Build button.

The Save and Build option now exists

Wait a moment until the green dot reappears next to the Working Library dropdown. Now, reload your sample page and you should see your change reflected in the console message (you may have to clear your browser cache and reload, in order to see the change to the page):

Console Message with Colon

This is a much faster way of working and you will use this approach for the rest of the tutorial.

Next “Switch Environments with the Experience Cloud Debugger” >

recommendation-more-help