Sitemap

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

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

1SalesforceInteractions.init().then(() => {
2  SalesforceInteractions.initSitemap({
3    global: { ... },
4    pageTypeDefault: { ... },
5    pageTypes: [...]
6  })
7}))

Each section of the sitemap allows you to 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, then 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.

1SalesforceInteractions.init().then(() => {
2  const { 
3    listener, 
4    CatalogObjectInteractionName,
5    resolvers
6  } = SalesforceInteractions
7  
8  const global = {
9    locale: 'en_US',
10    listeners: [
11      listener('click', '[title="Log In"]', (event) => {
12        console.log(event)
13      })
14    ],
15    onActionEvent: (actionEvent) => {
16      console.log(actionEvent)
17    }
18  }
19  
20  const pageTypeDefault = {...}
21  
22  const pageTypes = [...]
23  
24  SalesforceInteractions.initSitemap({ 
25    global, 
26    pageTypes,
27    pageTypeDefault 
28  })
29})

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.

1SalesforceInteractions.init().then(() => {
2  const { 
3    listener, 
4    CatalogObjectInteractionName,
5    resolvers
6  } = SalesforceInteractions
7  
8  const global = {...}
9  
10  const pageTypeDefault = {
11    name: 'default',
12    locale: 'en_US',
13    listeners: [
14      listener('click', '.example-selector', (event) => {
15        console.log(event)
16      })
17    ],
18    onActionEvent: (actionEvent) => {
19      console.log(actionEvent)
20    }
21  }
22  
23  const pageTypes = [...]
24  
25  SalesforceInteractions.initSitemap({ 
26    global, 
27    pageTypes,
28    pageTypeDefault 
29  })
30})

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. Since the data to extract might not be fully rendered when the Sitemap is configured, provide static values or values wrapped by a function so 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.

1SalesforceInteractions.init().then(() => {
2  const { 
3    listener, 
4    CatalogObjectInteractionName,
5    resolvers
6  } = SalesforceInteractions
7  
8  const global = {...}
9  
10  const pageTypeDefault = {...}
11  
12  const homePage = {
13    name: 'home',
14    locale: 'en_US',
15    isMatch: () => {
16      return window.location.pathname === '/'
17    },
18    listeners: [
19      listener('click', '#promo', (event) => {
20        console.log(event)
21      })
22    ],
23    onActionEvent: (actionEvent) => {
24      console.log(actionEvent)
25    }
26  }
27  
28  const productPage = {
29    name: 'product',
30    isMatch: () => {
31      return /product\/\d+/.test(window.location.pathname),
32    },
33    interaction: {
34      name: CatalogObjectInteractionName.ViewCatalogObject,
35      catalogObject: {
36        type: 'Product',
37        id: resolvers.fromSelectorAttribute('.product', 'data-id')
38      }
39    }
40  }
41  
42  const pageTypes = [homePage, productPage]
43  
44  SalesforceInteractions.initSitemap({ 
45    global, 
46    pageTypes,
47    pageTypeDefault 
48  })
49})

Sitemap Methods

1initSitemap(siteMapConfig: SiteMapConfig): boolean

Field Name	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 then the global configuration isn’t applied.
pageTypes	PageConfig[]	Required. An array of page configurations that specify whether data collection rules should 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

1resolvers.fromCanonical(
2  transform?: (value: string | undefined) => string | undefined
3): () => 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:

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

You could extract the value of the canonical href with:

1const fromCanonical = SalesforceInteractions.resolvers.fromCanonical
2const toUpperCase = (value) => value.toUpperCase()
3
4fromCanonical()()
5// => "/some/url"
6
7// extract and transform the value 
8fromCanonical(toUpperCase)()
9// => "/SOME/URL"

Extract the Href Value From the HTML Document Location Object

1resolvers.fromHref(
2  transform?: (value: string | undefined) => string |
3      undefined
4): () => 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 located at the URL:

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

You could extract the href with:

1const fromHref = SalesforceInteractions.resolvers.fromHref
2const toUpperCase = (value) => value.toUpperCase()
3
4fromHref()() 
5// => "https://site.domain.com/search.html?page=3"
6
7// extract and transform the value 
8fromHref(toUpperCase)() 
9// => "HTTPS://SITE.DOMAIN.COM/SEARCH.HTML?PAGE=3"

Extract the Content Attribute From the First Element

1resolvers.fromItemProp(
2  itemProp: string,
3  transform?: (value: string | undefined) => string | undefined
4): () => 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:

1<ul>
2  <li itemprop="name" content="first">First</li>
3  <li itemprop="name" content="second">Second</li>
4</ul>

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

1const fromItemProp = SalesforceInteractions.resolvers.fromItemProp
2const toUpperCase = (value) => value.toUpperCase()
3
4fromItemProp("name")() 
5// => "first"
6
7// extract and transform the value 
8fromItemProp("name", toUpperCase)()
9// => "FIRST"

Extracts JSON Linked Data

1resolvers.fromJsonLd(
2  path?: string,
3  transform?: (value: string | undefined) => string | undefined
4): () => 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:

1<script type="application/ld+json">
2{
3  "@context": "https://json-ld.org/contexts/person.jsonld",
4  "@id": "http://dbpedia.org/resource/John_Smith",
5  "name": "John Smith",
6  "born": "1940-10-09",
7  "spouse": "http://dbpedia.org/resource/Cynthia_Smith",
8  "gr:includes": {
9    "@type": [
10      "gr:Individual"
11    ]
12  }
13}
14</script>

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

1const fromJsonLD = SalesforceInteractions.resolvers.fromJsonLD
2const toUpperCase = (value) => value.toUpperCase()
3
4fromJsonLD()()
5// => {@context: "https://json-ld.org/contexts/person.jsonld", @id: …}
6
7// extract a property 
8fromJsonLD("@id")()
9// => "http://dbpedia.org/resource/John_Smith"
10
11// extract a nested property 
12fromJsonLD("gr:includes.@type")()
13// => ["gr:Individual"]
14
15// extract and transform the value
16fromJsonLD("name", toUpperCase)()
17// => "JOHN SMITH"

Extract the Content Attribute From the First Meta Element

1resolvers.fromMeta(
2  name: string,
3  transform?: (value: string | undefined) => string | undefined
4): () => 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:

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

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

1const fromMeta = SalesforceInteractions.resolvers.fromMeta
2const toUpperCase = (value) => value.toUpperCase()
3
4fromMeta("id")()
5// => "product-1"
6
7// extract and transform the value
8fromMeta("id", toUpperCase)()
9// => "PRODUCT-1"

Extract the Text From the First Element

1resolvers.fromSelector(
2  selector: string,
3  transform?: (value: string | undefined) => string | undefined
4): () => 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:

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

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

1const fromSelector = SalesforceInteractions.resolvers.fromSelector
2const toUpperCase = (value) => value.toUpperCase()
3
4fromSelector("#product-1 .name")() 
5// => "Product XYZ"
6
7// extract and transform the value
8fromSelector("#product-1 .name", toUpperCase)() 
9// => "PRODUCT XYZ"

Extract the Text From the First Element

1resolvers.fromSelectorMultiple(
2  selector: string,
3  transform?: (value: string[] | undefined) => string[] | undefined
4): () => 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:

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

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

1const fromSelectorMultiple = SalesforceInteractions.resolvers.fromSelectorMultiple
2const mapToUpperCase = (values) => values.map(v => v.toUpperCase())
3
4fromSelectorMultiple(".name")()
5// => ["Product 1", "Product 2", "Product 3"]
6
7// extract and transform the values
8fromSelectorMultiple(".name", mapToUpperCase)
9// => ["PRODUCT 1", "PRODUCT 2", "PRODUCT 3"]

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

1resolvers.fromSelectorAttribute(
2  selector: string,
3  attribute: string,
4  transform?: (value: string | undefined) => string | undefined
5): () => 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:

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

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

1const fromSelectorAttribute = SalesforceInteractions.resolvers.fromSelectorAttribute
2const toUpperCase = (value) => value.toUpperCase()
3
4fromSelectorAttribute("#product .name", "data-id")()
5// => "product-1"
6
7// extract and transform the value
8fromSelectorAttribute("#product .name", "data-id", toUpperCase)()
9// => "PRODUCT-1"

Extract the Value of the Target Attribute

1resolvers.fromSelectorAttributeMultiple(
2  selector: string, 
3  attribute: string, 
4  transform?: (value: string[] | undefined) => string[] | undefined
5): () => 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:

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

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

1const fromSelectorAttributeMultiple = SalesforceInteractions.resolvers.fromSelectorAttributeMultiple;
2const mapToUpperCase = (values) => values.map(v => v.toUpperCase())
3
4fromSelectorAttributeMultiple(".name", "data-id")()
5// => ["Product 1", "Product 2", "Product 3"]
6
7// extract and transform the value
8fromSelectorAttributeMultiple(".name", "data-id", mapToUpperCase)()
9// => ["PRODUCT 1", "PRODUCT 2", "PRODUCT 3"]

Extract the Value of an Object

1resolvers.fromWindow(
2  path: string,
3  transform?: (value: string[] | undefined) => string[] | undefined
4): () => 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:

1window = {
2   shop: {
3        name: "SHOP 1",
4        products: [
5                "PRODUCT 1",
6                "PRODUCT 2"
7        ]
8   },
9   ...
10}

You can extract data from the shop global object:

1const fromWindow = SalesforceInteractions.resolvers.fromWindow;
2
3fromWindow("shop.name")()
4// => "SHOP 1"
5
6fromWindow("shop.products[1]")()
7// => "PRODUCT 2"

Customer Data Platform Developer Guide

Sitemap

GlobalPageConfig

DefaultPageConfig

PageConfig

Sitemap Methods