Sitemap

Salesforce Interactions SDK Sitemap provides the ability to extract data during page navigation. Also, the sitemap can share data capture logic across multiple pages, and it can separate data capture logic from web page presentation logic.

A sitemap can be configured immediately after initializing the Web SDK. A general pattern is:

SalesforceInteractions.init().then(() => {
          SalesforceInteractions.initSitemap({
          global: { ... },
          pageTypeDefault: { ... },
          pageTypes: [...]
          })
          }))

In each section of the sitemap you can define:

Multiple listeners to capture specific customer events that occur on a page
An onActionEvent hook that can be used to intercept and modify data captured
A name to identify the page configuration
The locale to capture for the page
An interaction to capture after the page loads

GlobalPageConfig

The global configuration is merged into the PageConfig or DefaultPageConfig that is applied to a target web page. If there are no matching configurations for the target web page, the global configuration isn’t applied.

Field Name	Field Type	Description
`listeners`	listener	An array of event listeners created using the `SalesforceInteractions.listener` function. These events listen for customer interactions that trigger events to send through the Web SDK.
`locale`	string	The locale of the current page as an ISO 639 alpha-2 language code and ISO 3166 alpha-2 country code. For example, en_US, or de_DE.
`onActionEvent`	`(event: ActionEvent) => ActionEvent`	A callback that executes when an `ActionEvent` object is passed into the Web SDK. This call provides a hook to insert or modify properties of an event before it’s sent out.

SalesforceInteractions.init().then(() => {
  const {
    listener,
    CatalogObjectInteractionName,
    resolvers
  } = SalesforceInteractions

  const global = {
    locale: 'en_US',
    listeners: [
      listener('click', '[title="Log In"]', (event) => {
        console.log(event)
      })
    ],
    onActionEvent: (actionEvent) => {
      console.log(actionEvent)
    }
  }

  const pageTypeDefault = {...}

  const pageTypes = [...]

  SalesforceInteractions.initSitemap({
    global,
    pageTypes,
    pageTypeDefault
  })
})

DefaultPageConfig

The default page configuration is activated when no registered PageConfig matches are found on a target web page.

Field Name	Field Type	Description
`listeners`	listener	An array of event listeners created using the `SalesforceInteractions.listener` function. These events listen for customer interactions that trigger events to send through the Web SDK.
`locale`	string	The locale of the current page as an ISO 639 alpha-2 language code and ISO 3166 alpha-2 country code. For example, en_US, or de_DE
`name`	string	A name that identifies the default page configuration.
`onActionEvent`	`(event: ActionEvent) => ActionEvent`	A callback that executes when an `ActionEvent` object is passed into the Web SDK. This call provides a hook to insert or modify properties of an event before it’s sent out.

SalesforceInteractions.init().then(() => {
  const {
    listener,
    CatalogObjectInteractionName,
    resolvers
  } = SalesforceInteractions

  const global = {...}

  const pageTypeDefault = {
    name: 'default',
    locale: 'en_US',
    listeners: [
      listener('click', '.example-selector', (event) => {
        console.log(event)
      })
    ],
    onActionEvent: (actionEvent) => {
      console.log(actionEvent)
    }
  }

  const pageTypes = [...]

  SalesforceInteractions.initSitemap({
    global,
    pageTypes,
    pageTypeDefault
  })
})

PageConfig

Field Name	Field Type	Description
`interaction`	Cart Interaction \| Catalog Interaction \| Order Interaction	The interaction to capture from the page. These fields are automatically extracted and sent when a page configuration matches. Sometimes the data to extract isn’t fully rendered when the sitemap is configured, so provide static values or values wrapped by a function to ensure that they’re evaluated lazily.
`isMatch`	`() => Boolean`	Required. A function that tests whether to apply the given page configuration.
`listeners`	listener	An array of event listeners created using the `SalesforceInteractions.listener` function. These events listen for customer interactions that trigger events to send through the Web SDK.
`locale`	string	The locale of the current page as an ISO 639 alpha-2 language code and ISO 3166 alpha-2 country code. For example, en_US, or de_DE.
`name`	string	Required. A unique name identifying the page configuration.
`onActionEvent`	`(event:ActionEvent) => ActionEvent`	A callback that executes when an `ActionEvent` object is passed into the Web SDK. This call provides a hook to insert or modify properties of an event before it’s sent out.

SalesforceInteractions.init().then(() => {
  const {
    listener,
    CatalogObjectInteractionName,
    resolvers
  } = SalesforceInteractions

  const global = {...}

  const pageTypeDefault = {...}

  const homePage = {
    name: 'home',
    locale: 'en_US',
    isMatch: () => {
      return window.location.pathname === '/'
    },
    listeners: [
      listener('click', '#promo', (event) => {
        console.log(event)
      })
    ],
    onActionEvent: (actionEvent) => {
      console.log(actionEvent)
    }
  }

  const productPage = {
    name: 'product',
    isMatch: () => {
      return /product\/\d+/.test(window.location.pathname),
    },
    interaction: {
      name: CatalogObjectInteractionName.ViewCatalogObject,
      catalogObject: {
        type: 'Product',
        id: resolvers.fromSelectorAttribute('.product', 'data-id')
      }
    }
  }

  const pageTypes = [homePage, productPage]

  SalesforceInteractions.initSitemap({
    global,
    pageTypes,
    pageTypeDefault
  })
})

Sitemap Methods

initSitemap(siteMapConfig: SiteMapConfig): boolean

Field Name	Field Type	Description
`global`	GlobalPageConfig	Required. The global configuration is merged into the PageConfig or DefaultPageConfig that is applied to a target web page. If there are no matching configurations for the target web page, the global configuration isn’t applied.
`pageTypes`	PageConfig[]	Required. An array of page configurations that specify whether data collection rules execute on any page that matches a specified criteria for a target web page. Multiple page configurations can match a single page. These configurations are merged together along with the GlobalPageConfig, if provided.
`pageTypeDefault`	DefaultPageConfig	The default page configuration is activated when no registered PageConfig matches are found on a target web page.

Extract the Canonical Link From an HTML Document

resolvers.fromCanonical(
  transform?: (value: string | undefined) => string | undefined
): () => string | undefined

Creates a resolver that extracts the canonical link from an HTML document. Transform is an optional function that transforms the resolved value into a new value.

For example, giving the HTML:

<link rel="canonical" href="/some/url">

You could extract the value of the canonical href with:

const fromCanonical = SalesforceInteractions.resolvers.fromCanonical
const toUpperCase = (value) => value.toUpperCase()

fromCanonical()()
// => "/some/url"

// extract and transform the value
fromCanonical(toUpperCase)()
// => "/SOME/URL"

Extract the Href Value from the HTML Document Location Object

resolvers.fromHref(
  transform?: (value: string | undefined) => string |
      undefined
): () => string | undefined

Creates a resolver that extracts the href value from the HTML document’s Location object. Transform is an optional function that transforms the resolved value into a new value.

For example, giving an HTML document at the URL:

https://site.domain.com/search.html?page=3

You could extract the href with:

const fromHref = SalesforceInteractions.resolvers.fromHref
const toUpperCase = (value) => value.toUpperCase()

fromHref()()
// => "https://site.domain.com/search.html?page=3"

// extract and transform the value
fromHref(toUpperCase)()
// => "HTTPS://SITE.DOMAIN.COM/SEARCH.HTML?PAGE=3"

Extract the Content Attribute from the First Element

resolvers.fromItemProp(
  itemProp: string,
  transform?: (value: string | undefined) => string | undefined
): () => string | undefined

Creates a resolver that extracts the content attribute from the first element matching the target itemprop attribute value in an HTML document.

Arguments:

itemProp — The value of the itemprop attribute to match against
transform — An optional function that transforms the resolved value into a new value

For example, giving the HTML:

<ul>
  <li itemprop="name" content="first">First</li>
  <li itemprop="name" content="second">Second</li>
</ul>

You could extract values from the <meta> element with:

const fromItemProp = SalesforceInteractions.resolvers.fromItemProp
const toUpperCase = (value) => value.toUpperCase()

fromItemProp("name")()
// => "first"

// extract and transform the value
fromItemProp("name", toUpperCase)()
// => "FIRST"

Extracts JSON Linked Data

resolvers.fromJsonLd(
  path?: string,
  transform?: (value: string | undefined) => string | undefined
): () => string | undefined

Creates a resolver that extracts JSON Linked Data (JSON-LD) from the first <script> element with a type attribute of application/ld+json in an HTML document.

Arguments:

path — A path of the property to get
transform — An optional function that transforms the resolved value into a new value

For example, giving the HTML:

<script type="application/ld+json">
{
  "@context": "https://json-ld.org/contexts/person.jsonld",
  "@id": "http://dbpedia.org/resource/John_Smith",
  "name": "John Smith",
  "born": "1940-10-09",
  "spouse": "http://dbpedia.org/resource/Cynthia_Smith",
  "gr:includes": {
    "@type": [
      "gr:Individual"
    ]
  }
}
</script>

You could extract values from the <meta> element with:

const fromJsonLD = SalesforceInteractions.resolvers.fromJsonLD
const toUpperCase = (value) => value.toUpperCase()

fromJsonLD()()
// => {@context: "https://json-ld.org/contexts/person.jsonld", @id: …}

// extract a property
fromJsonLD("@id")()
// => "http://dbpedia.org/resource/John_Smith"

// extract a nested property
fromJsonLD("gr:includes.@type")()
// => ["gr:Individual"]

// extract and transform the value
fromJsonLD("name", toUpperCase)()
// => "JOHN SMITH"

Extract the Content Attribute from the First Meta Element

resolvers.fromMeta(
  name: string,
  transform?: (value: string | undefined) => string | undefined
): () => string | undefined

Creates a resolver that extracts the content attribute from the first <meta> element that matches the given name attribute in an HTML document.

Arguments:

name — The value of the name attribute to match against
transform — An optional function that transforms the resolved value into a new value

For example, giving the HTML:

<meta name="id" content="product-1">

You could extract values from the <meta> element with:

const fromMeta = SalesforceInteractions.resolvers.fromMeta
const toUpperCase = (value) => value.toUpperCase()

fromMeta("id")()
// => "product-1"

// extract and transform the value
fromMeta("id", toUpperCase)()
// => "PRODUCT-1"

Extract the Text from the First Element

resolvers.fromSelector(
  selector: string,
  transform?: (value: string | undefined) => string | undefined
): () => string | undefined

Creates a resolver that extracts the text from the first element that matches the given CSS Selector in an HTML document.

Arguments:

selector — A target CSS Selector to match against
transform — An optional function that transforms the resolved value into a new value

For example, giving the HTML:

<div id="product-1">
  <h1 class="name">Product XYZ</h1>
</div>

You could extract the text of every <h1> element with:

const fromSelector = SalesforceInteractions.resolvers.fromSelector
const toUpperCase = (value) => value.toUpperCase()

fromSelector("#product-1 .name")()
// => "Product XYZ"

// extract and transform the value
fromSelector("#product-1 .name", toUpperCase)()
// => "PRODUCT XYZ"

Extract the Text from the First Element

resolvers.fromSelectorMultiple(
  selector: string,
  transform?: (value: string[] | undefined) => string[] | undefined
): () => string[] | undefined

Creates a resolver that extracts the text from each element that matches the given CSS Selector in an HTML document.

Arguments:

selector — A target CSS Selector to match against
transform — An optional function that transforms the resolved value into a new value

For example, giving the HTML:

<ul class="products">
  <li class="name">Product 1</li>
  <li class="name">Product 2</li>
  <li class="name">Product 3</li>
</ul>

You could extract the text of every <h1> element with:

const fromSelectorMultiple = SalesforceInteractions.resolvers.fromSelectorMultiple
const mapToUpperCase = (values) => values.map(v => v.toUpperCase())

fromSelectorMultiple(".name")()
// => ["Product 1", "Product 2", "Product 3"]

// extract and transform the values
fromSelectorMultiple(".name", mapToUpperCase)
// => ["PRODUCT 1", "PRODUCT 2", "PRODUCT 3"]

Extract the Value From of the Target Attribute From the First Element

resolvers.fromSelectorAttribute(
  selector: string,
  attribute: string,
  transform?: (value: string | undefined) => string | undefined
): () => string | undefined

Creates a resolver that extracts the value of the target attribute from the first element that matches the given CSS Selector in an HTML document.

Arguments:

selector — A target CSS Selector to match against
attribute — The target attribute to extract the value from
transform — An optional function that transforms the resolved value into a new value

For example, giving the HTML:

<div id="product">
  <h1 class="name" data-id="product-1">Product 1</h1>
</div>

You could extract the value of the data-id attribute with:

const fromSelectorAttribute = SalesforceInteractions.resolvers.fromSelectorAttribute
const toUpperCase = (value) => value.toUpperCase()

fromSelectorAttribute("#product .name", "data-id")()
// => "product-1"

// extract and transform the value
fromSelectorAttribute("#product .name", "data-id", toUpperCase)()
// => "PRODUCT-1"

Extract the Value of the Target Attribute

resolvers.fromSelectorAttributeMultiple(
  selector: string,
  attribute: string,
  transform?: (value: string[] | undefined) => string[] | undefined
): () => string[] | undefined

Creates a resolver that extracts the value of the target attribute from each element that matches the given CSS Selector in an HTML document.

Arguments:

selector — A target CSS Selector to match against
attribute — The target attribute to extract the value from
transform — An optional function that transforms the resolved value into a new value

For example, giving the HTML:

<ul class="products">
  <li class="name" data-id="product-1">Product 1</li>
  <li class="name" data-id="product-2">Product 2</li>
  <li class="name" data-id="product-3">Product 3</li>
</ul>

You could extract the values of every data-id attribute with:

const fromSelectorAttributeMultiple = SalesforceInteractions.resolvers.fromSelectorAttributeMultiple;
const mapToUpperCase = (values) => values.map(v => v.toUpperCase())

fromSelectorAttributeMultiple(".name", "data-id")()
// => ["Product 1", "Product 2", "Product 3"]

// extract and transform the value
fromSelectorAttributeMultiple(".name", "data-id", mapToUpperCase)()
// => ["PRODUCT 1", "PRODUCT 2", "PRODUCT 3"]

Extract the Value of an Object

resolvers.fromWindow(
  path: string,
  transform?: (value: string[] | undefined) => string[] | undefined
): () => string[] | undefined

Creates a resolver that extracts the value of an object, usually a global variable, attached to the window object.

Arguments:

path — A string representing the path to the object in the window object. Uses dot notation.
transform — An optional function that transforms the resolved value into a new value

For example, giving the window object:

window = {
   shop: {
        name: "SHOP 1",
        products: [
                "PRODUCT 1",
                "PRODUCT 2"
        ]
   },
   ...
}

You can extract data from the shop global object:

const fromWindow = SalesforceInteractions.resolvers.fromWindow;

fromWindow("shop.name")()
// => "SHOP 1"

fromWindow("shop.products[1]")()
// => "PRODUCT 2"

Sample Ecommerce Sitemap

Review this sample sitemap.

Login

Products

Experiences

Agentforce

Sales

Service

Marketing

Commerce

Analytics

Slack

Net Zero

Small Business

Data

Salesforce Platform

Customer Success

Partner Apps & Experts

Discover the #1 AI CRM

Discover the #1 AI CRM

Automotive

Communications

Engineering, Construction & Real Estate

Consumer Goods

Education

Energy & Utilities

Financial Services

Healthcare & Life Sciences

Manufacturing

Media

Nonprofit

Professional Services

Public Sector

Retail

Technology

Travel, Transportation & Hospitality

Explore Salesforce for industries.

Explore Salesforce for industries.

Customer Stories

Salesforce on Salesforce Stories

Trailblazer Stories

Explore success stories.

Explore success stories.

Learning on Trailhead

Events

Resources

Blogs

Become a Trailblazer.

Become a Trailblazer.

Help & Documentation

Communities

Services & Plans

Account Management

Questions? We can help.

Questions? We can help.

About Salesforce

Our Values

Our Impact

Careers

Newsroom

Legal

More Salesforce Brands

Hear our story.

Hear our story.

Events

My List

Explore Salesforce+.

Explore Salesforce+.

Login

Products

Experiences

Contact Us

By phone

Online

Products

Experiences

Developer Centers

Salesforce Platform

Industries

Resources

Developer Tools

Build Skills