Web Sitemap

Introduction

In this workshop, you will create a website sitemap using the low-code Sitemap Builder Chrome extension, which allows you to focus on defining what should be tracked on the website without needing to manage the underlying sitemap language and schema creation.

Before starting the hands-on exercises in this workshop, watch the video below to learn important sitemap concepts and components in Data 360.

Enter the password LearnSPtoday to play the video.

Configure Sitemap Builder

1. Click the icon from the top setup menu and select Data Cloud Setup.
2. In the quick find field, enter Websites and select Websites & Mobile Apps from the navigation menu.
3. Click the Training Site connection you created in the Sitemap workshop.
4. Scroll to the bottom of the page and copy the Script URL.
5. Open the demo website
6. Open the Sitemap Builder Chrome extension.
7. Optionally, click the puzzle icon in your browser toolbar, then click the pin icon next to the Sitemap Builder extension to keep the extension icon visible in your toolbar.

Pin Chrome Extension to Toolbar

8. Click the Inject tab.
9. Paste the Script URL from step 4 in the Web SDK URL field.
10. Click Inject.

Configure SDK Injection in Sitemap Builder

11. Click the Configure tab.
12. With the Get Started tab active, select the Start from Scratch tile.
13. Click Select and Start.

Mapping Consent Elements

To enable the Data 360 SDK to capture behavioral data and allow the Personalization module to return personalized decision responses, you must configure consent management and define CSS selectors that identify specific consent elements on the website.

1. Click the Consent link in the footer of the demo website.
2. Open Sitemap Builder and click on the Consent Management tab.
3. Enter Website in the Consent Provider Name field.
4. Click Save.
5. Click the Pick button next to the Opt-In Element field.
6. Click the green Opt In button in the website dialog to populate the Opt-In Element field with the CSS selector.
7. Click Save.
8. Click the Pick button next to the Opt-Out Element field.
9. Click the red Opt Out button in the website dialog to populate the Opt-Out Element field.

Configure consent elements in Sitemap Builder

1. Click Save.

Mapping Page Types

Page types allow you to define groups of similar pages on your website so that personalization experiences can be easily targeted across all pages of the same type. Each page type can also include item data or trigger specific events that you may want to track—these will be configured in later exercises.

In this exercise, you will use Sitemap Builder to create four page types and define the url matching strategy for each page sypte.

1. Open Sitemap Builder and click on the Page Types tab.
2. Click Add New Page Type.
3. Populate the configuration fields for the home page based on the following values:
   • Name: Home Page
   • Match Strategy: Includes
   • Pathname: /
   • On Page Load Interaction: None
4. Click Save.
5. Click Add New Page Type.
6. Populate the configuration fields for product detail pages based on the following values:
   • Name: Product Detail Page
   • Match Strategy: Includes
   • Pathname: /product/
   • On Page Load Interaction: None
7. Click Save.
8. Click Add New Page Type.
9. Populate the configuration fields for the cart page based on the following values:
   • Name: Cart Page
   • Match Strategy: Includes
   • Pathname: /cart
   • On Page Load Interaction: None
10. Click Save.
11. Click Add New Page Type.
12. Populate the configuration fields for the contact page based on the following values:
    • Name: Contact Us Page
    • Match Strategy: Includes
    • Pathname: /contact
    • On Page Load Interaction: None
13. Click Save.
14. Navigate to the relevant page URLs on the website and observe how each URL’s pathname matches the pattern you defined for the corresponding page types.

Mapping Resolvers

In Salesforce Personalization, resolvers are JavaScript functions used within the Sitemap to safely extract data from a web page's Document Object Model (DOM), meta tags, or JavaScript objects. They are part of the Web SDK and allow the platform to capture specific attributes—such as product names, prices, user IDs, or page types—to build a comprehensive, real-time profile of the user.

In this exercise, you will use the Sitemap Builder to select page elements that represent the respective page attributes.

Capturing Data

This exercise uses CSS selectors to capture data for simplicity. In a typical implementation, a customer’s data layer might be a more reliable source for resolver configuration. Data points from the data layer are easily accessible via custom JavaScript.

Map Resolvers on Product Pages

1. Open any product detail page on the demo website.
2. Open Sitemap Builder and click on the Resolvers tab.
3. Click Add New Resolver.
4. Enter Product Id in the Name field.
5. Leave the default values selected in the Kind, Method, and Output Type fields.
6. Leave CSS Selector (text) selected in the Method field.
7. Leave Text selected in the Output Type field.
8. Click the Pick button next to the Selector field.
9. Select the product SKU on a product detail page (see below) to populate the selector field.

Identify product sku on webpage

10. Click Save.
11. Click Add New Resolver.
12. Enter Product Name in the Name field.
13. Leave the default values selected in the Kind, Method, and Output Type fields.
14. Click the Pick button next to the Selector field.
15. Select the product name on a product detail page to populate the selector field.

Identify product name on webpage

18. Click Save.
19. Click Add New Resolver.
20. Enter Category in the Name field.
21. Leave the default values selected in the Kind, Method, and Output Type fields.
22. Click the Pick button next to the Selector field.
23. Select the product SKU on a product detail page to populate the selector field.

Identify product category on webpage

24. Click Save.
25. Click Add New Resolver.
26. Enter Product Price in the Name field.
27. Leave Built-in selected in the Kind field.
28. Leave CSS Selector (text) selected in the Method field.
29. Select Number from the Output Type field.

Set Output Type

Ensure you change the Output Type to Number to ensure the product price is converted from a string to a number.

30. Click the Pick button next to the Selector field.
31. Select the product price on a product detail page to populate the selector field.

Identify product price on webpage

32. Click Save.

Map Resolvers on Contact Page

1. Open the Contact page on the demo website.
2. Open Sitemap Builder and click on the Resolvers tab.
3. Click Add New Resolver.
4. Enter Contact Name in the Name field.
5. Leave the default values selected in the Kind, Method, and Output Type fields.
6. Click the Pick button next to the Selector field.
7. Select the name field in the contact form to populate the selector field.

Name field on contact us form

8. Click Save.
9. Click Add New Resolver.
10. Enter Contact Email in the Name field.
11. Leave the default values selected in the Kind, Method, and Output Type fields.
12. Click the Pick button next to the Selector field.
13. Select the name field in the contact form to populate the selector field.

Email field on contact us form

14. Click Save.

Map Resolvers on Cart Page

1. Add a few products to the cart on the demo website.
2. Open the cart page.
3. Open Sitemap Builder and click on the Resolvers tab.
4. Enter Order Id in the Name field.
5. Leave the default values selected in the Kind, Method, and Output Type fields.
6. Click the Pick button next to the Selector field.
7. Select the order id value to populate the selector field.

Order Id on cart page

8. Click Save.
9. Click Add New Resolver.
10. Enter Order Total in the Name field.
11. Leave the default values selected in the Kind and Method fields.
12. Select Number from the Output Type field.
13. Click the Pick button next to the Selector field.
14. Select the total value to populate the selector field.

Order Total on cart page

15. Click Save.
16. Click Add New Resolver.
17. Enter Line Item Id in the Name field.
18. Click the Pick button next to the Selector field.
19. Select any SKU in an order line item row to populate the selector field.

Line Item Id on cart page

20. Click Save.
21. Click Add New Resolver.
22. Enter Line Item Qty in the Name field.
23. Leave the default values selected in the Kind and Method fields.
24. Select Number from the Output Type field.
25. Click the Pick button next to the Selector field.
26. Select a quantity in an order line item row to populate the selector field.

Line Item Quantity on cart page

27. Click Save.
28. Click Add New Resolver.
29. Enter Line Item Price in the Name field.
30. Leave the default values selected in the Kind and Method fields.
31. Select Number from the Output Type field.
32. Click the Pick button next to the Selector field.
33. Select a line item price in an order line item row to populate the selector field.

Line Item Price on cart page

34. Click Save.

Create Events

With your item and profile data now defined, the next step is to map the key events a customer can perform on your website. Events can be simple—such as viewing the homepage—or more detailed—such as adding a product to the cart or completing a purchase, where each event includes item attributes you configured earlier.

Create Product View Event

In this exercise, you will use a standard event to capture product page views.

1. Open Sitemap Builder and click on the Events tab.
2. Click Add New Event.
3. Select the Standard Event card.
4. Populate the configuration fields based on the following values:
   • Label: Product View
   • Category: Category
   • Interaction: View Catalog Object
   • Catalog Object Type: Product
   • ID Selector: Product Id
5. Click Add Attribute in the Interaction Attributes section and populate the following values:
   • Key: Price
   • Type: Resolver
   • Value: Product Price
6. Click Add Attribute and populate the following values:
   • Key: Name
   • Type: Resolver
   • Value: Product Name

Configure Interaction Attributes for Event in Sitemap Builder

7. Scroll up and click Save.

Create Add to Cart Event

In this exercise, you will create a standard event to track add to cart events.

1. Click Add New Event.
2. Select the Standard Event card.
3. Populate the configuration fields based on the following values:
   • Label: Add to Cart
   • Category: Cart
   • Interaction: Add To Cart
   • Catalog Object Type: Product
   • Line Items Mode: Single item
   • Cart ID Selector: [leave blank]
   • Catalog Object Type: Product
   • Catalog Object ID Resolver: Line Item Id
   • Quantity Resolver: Line Item Qty
   • Price Resolver: Line Item Price
4. Scroll up and click Save.

Create Purchase Event

In this exercise, you will create a standard event to track cart purchase events.

1. Click Add New Event.
2. Select the Standard Event card.
3. Populate the configuration fields based on the following values:
   • Label: Purchase
   • Category: Order
   • Interaction: Purchase
   • Order ID Selector: Order Id
   • Total Value Selector: Order Total
   • Line Items Selector: .order-item
   • Catalog Object Type: Line Item Id
   • Catalog Object ID Resolver: Line Item Price
   • Quantity Resolver: Line Item Qty
   • Price Resolver: Line Item Price
4. Scroll up and click Save.

Create Contact Form Submissions Event

In this exercise, you will create a custom event to capture contact form submissions.

1. Click Add New Event.
2. Select the Custom Event card.
3. Populate the configuration fields based on the following values:
   • Label: Form Fill
   • Event Type: userEngagement
4. Click Add Attribute in the Interaction Attributes section and populate the following values:
   • Key: eventType
   • Type: String
   • Value: contactPointEmail
5. Click Add Attribute and populate the following values:
   • Key: email
   • Type: Resolver
   • Value: Contact Email
6. Click Add Attribute and populate the following values:
   • Key: name
   • Type: Resolver
   • Value: Contact Name
7. Scroll down to the Preview section and verify that the displayed code matches the example shown below. If there are any differences, update your configuration before proceeding.

{
  interaction: {
    name: "Form Fill",
    eventType: "userEngagement",
    attributes: {
      eventType: "contactPointEmail",
      email: contactemail(),
      name: contactname()
    }
  }
}

8. Click Save.

Using Sitemap Data Capture to Power Real-Time Identity Resolution

When building a sitemap, it’s important to identify opportunities to capture key identifiers such as an email address. Login experiences, form submissions, email capture pop-ups, and similar interactions are all effective ways to convert an anonymous visitor into a known individual—unlocking more meaningful cross-channel personalization. In a later workshop, you’ll see how the email value captured in this exercise helps fuel real-time identity resolution.

Additional Resources

• Sitemap Builder Tour
• Using Sitemap Builder Modes
• Using Sitemap Builder Tabs
• Integrate the Salesforce Interactions SDK
• Data 360 Module of the Salesforce Interactions SDK
• D360 Foundations Videos: Sitemapping, Web Schemas, & Web Data Streams (use password LearnSPtoday)