In this lesson, you will create your first Data Element, Rule, and Library.
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:
At the end of this lesson, you will be able to:
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.
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
Data element capabilities can be extended with Extensions. For example, the ContextHub extension allows you to add data elements using features of the extension.
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.
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.
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:
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.
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.
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 tags Library!
If you look at the Developer Tools -> Console, you should see the text “The page name is home”
Congratulations, you created your first data element and rule and built your first tag library!
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.
Edit Rule page, click the Working Library dropdown and select your
Initial Setup 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.
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):
This is a much faster way of working and you will use this approach for the rest of the tutorial.