Add a data element, a rule and a library

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.

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

1. In the left navigation, click Data Elements

2. 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.

3. Click the Create New Data Element button:

   

4. Name the data element, e.g. Page Name

5. Use the JavaScript Variable Data Element type to point to a value in your sample page’s data layer: digitalData.page.pageInfo.pageName

6. Check the boxes for Force lowercase value and Clean text to standardize the case and remove extraneous spaces

7. Leave None as the Storage Duration setting since this value will typically be different on every page

8. Click the Save button to save the data element

   .

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

1. In the left navigation, click Rules

2. 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.

3. Click the Create New Rule button:

   

4. 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.

5. 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

   

6. 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.

7. Under Actions, click Add

8. 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.

9. Select </> Open Editor to open the code editor

   

10. 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'));
    

11. Save the code editor

    

12. On the Action configuration screen click Keep Changes

13. Click Save to save the rule

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

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

1. In the left navigation, click Publishing Flow

2. Click Add New Library

   

3. Name the Library, e.g. Initial Setup

4. Select Environment > Development

5. Click Add All Changed Resources

   

6. Note that after clicking Add All Changed Resources tags summarizes the changes you just made.

7. Click Save & Build for Development

   

After a few moments, the status dot will turn green indicating the library successfully 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!

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!

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.

On the 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.

Next “Switch Environments with the Experience Cloud Debugger” >