# 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: ```nolang 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. | ```nolang 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) return 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. | ```nolang 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) return actionEvent; } } const pageTypes = [...] SalesforceInteractions.initSitemap({ global, pageTypes, pageTypeDefault }) }) ``` ## PageConfig | Field Name | Field Type | Description | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `interaction` | [Cart Interaction](https://developer.salesforce.com/docs/atlas.en-us.c360a_api.meta/c360a_api/c360a_api_cart_interaction.htm) \| [Catalog Interaction](https://developer.salesforce.com/docs/atlas.en-us.c360a_api.meta/c360a_api/c360a_api_catalog_interaction.htm) \| [Order Interaction](https://developer.salesforce.com/docs/atlas.en-us.c360a_api.meta/c360a_api/c360a_api_order_interaction.htm) | 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. | ```nolang 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) return 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 ```nolang 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** ```nolang 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: ```nolang ``` You could extract the value of the canonical href with: ```nolang 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** ```nolang 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: ```nolang https://site.domain.com/search.html?page=3 ``` You could extract the href with: ```nolang 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** ```nolang 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: ```nolang ``` You could extract values from the \ element with: ```nolang 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** ```nolang 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 \ ``` You could extract values from the \ element with: ```nolang 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** ```nolang resolvers.fromMeta( name: string, transform?: (value: string | undefined) => string | undefined ): () => string | undefined ``` Creates a resolver that extracts the content attribute from the first \ 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: ```nolang ``` You could extract values from the \ element with: ```nolang 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** ```nolang 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: ```nolang

Product XYZ

``` You could extract the text of every *\

* element with: ```nolang 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** ```nolang 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: ```nolang ``` You could extract the text of every *\

* element with: ```nolang 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** ```nolang 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: ```nolang

Product 1

``` You could extract the value of the *data-id* attribute with: ```nolang 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** ```nolang 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: ```nolang ``` You could extract the values of every *data-id* attribute with: ```nolang 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** ```nolang 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: ```nolang window = { shop: { name: "SHOP 1", products: [ "PRODUCT 1", "PRODUCT 2" ] }, ... } ``` You can extract data from the shop global object: ```nolang const fromWindow = SalesforceInteractions.resolvers.fromWindow; fromWindow("shop.name")() // => "SHOP 1" fromWindow("shop.products[1]")() // => "PRODUCT 2" ``` - [**Sample Ecommerce Sitemap**](https://developer.salesforce.com/docs/atlas.en-us.c360a_api.meta/c360a_api/c360a_api_sample_ecommerce_sitemap.htm) Review this sample sitemap.