この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

サイトマップ

Salesforce Interactions SDK サイトマップでは、ページナビゲーション中にデータを抽出することができます。また、複数のページでデータキャプチャロジックを共有したり、データキャプチャロジックを Web ページプレゼンテーションロジックから切り離したりできます。

サイトマップは、Web SDK の初期化直後に設定することができます。一般的なパターンを次に示します。

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

サイトマップの各セクションで次を定義できます。

複数の listener。ページで実行された特定の顧客イベントを取得します。
onActionEvent フック。これを使用してデータを傍受し、取得したデータを変更できます。
name。ページ設定を識別します。
ページで取得する locale。
interaction。ページの読み込み後に取得します。

GlobalPageConfig

global 設定は、対象の Web ページに適用される PageConfig または DefaultPageConfig にマージされます。対象の Web ページに一致する設定がない場合、global 設定は適用されません。

項目名	項目の型	説明
listeners	listener	`SalesforceInteractions.listener` 関数を使用して作成されたイベントリスナーの配列。このイベントは、Web SDK を介したイベントの送信をトリガする顧客インタラクションをリスンします。
locale	string	ISO 639 Alpha-2 言語コードと ISO 3166 Alpha-2 国コードで表される現在のページのロケール。例: en_US、de_DE
onActionEvent	`(event: ActionEvent) => ActionEvent`	`ActionEvent` オブジェクトが Web SDK に渡されるときに実行されるコールバック。このコールでは、送信前にイベントのプロパティを挿入または変更するためのフックが提供されます。

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

デフォルトページ設定は、登録された PageConfig に一致するものが対象の Web ページで見つからない場合に有効化されます。

項目名	項目の型	説明
listeners	listener	`SalesforceInteractions.listener` 関数を使用して作成されたイベントリスナーの配列。このイベントは、Web SDK を介したイベントの送信をトリガする顧客インタラクションをリスンします。
locale	string	ISO 639 Alpha-2 言語コードと ISO 3166 Alpha-2 国コードで表される現在のページのロケール。例: en_US、de_DE
name	string	デフォルトページ設定を識別する名前。
onActionEvent	`(event:ActionEvent) => ActionEvent`	`ActionEvent` オブジェクトが Web SDK に渡されるときに実行されるコールバック。このコールでは、送信前にイベントのプロパティを挿入または変更するためのフックが提供されます。

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

項目名	項目の型	説明
interaction	カートインタラクション \| カタログインタラクション \| 注文インタラクション	ページから取得するインタラクション。ページ設定が一致すると、この項目が自動的に抽出されて送信されます。サイトマップの設定時に、抽出するデータが完全にレンダリングされていないことがあるため、静的値または関数でラップされた値を指定して、値を後で評価するようにします。
isMatch	`() => Boolean`	必須。特定のページ設定を適用するかどうかをテストする関数。
listeners	listener	`SalesforceInteractions.listener` 関数を使用して作成されたイベントリスナーの配列。このイベントは、Web SDK を介したイベントの送信をトリガする顧客インタラクションをリスンします。
locale	string	ISO 639 Alpha-2 言語コードと ISO 3166 Alpha-2 国コードで表される現在のページのロケール。例: en_US、de_DE
name	string	必須。ページ設定を識別する一意の名前。
onActionEvent	`(event:ActionEvent) => ActionEvent`	`ActionEvent` オブジェクトが Web SDK に渡されるときに実行されるコールバック。このコールでは、送信前にイベントのプロパティを挿入または変更するためのフックが提供されます。

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})

サイトマップメソッド

1initSitemap(siteMapConfig: SiteMapConfig): boolean

項目名	型	説明
global	GlobalPageConfig	必須。global 設定は、対象の Web ページに適用される PageConfig または DefaultPageConfig にマージされます。対象の Web ページに一致する設定がない場合、global 設定は適用されません。
pageTypes	PageConfig[]	必須。指定された、対象の Web ページの条件に一致するページでデータ収集ルールを実行するかどうかを指定するページ設定の配列。複数のページ設定が 1 つのページに一致する可能性があります。これらの設定は GlobalPageConfig (提供されている場合) と共にまとめてマージされます。
pageTypeDefault	DefaultPageConfig	デフォルトページ設定は、登録された PageConfig に一致するものが対象の Web ページで見つからない場合に有効化されます。

HTML ドキュメントからの正規リンクの抽出

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

HTML ドキュメントから正規リンクを抽出するリゾルバを作成します。Transform は、解決された値を新しい値に変換する省略可能な関数です。

たとえば、次のような HTML があるとします。

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

正規 href の値を抽出するには、次のコードを使用できます。

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"

HTML ドキュメントの Location オブジェクトからの Href 値の抽出

1resolvers.fromHref(
2  transform?: (value: string | undefined) => string |
3      undefined
4): () => string | undefined

HTML ドキュメントの Location オブジェクトから href 値を抽出するリゾルバを作成します。Transform は、解決された値を新しい値に変換する省略可能な関数です。

たとえば、次の URL に配置されている HTML ドキュメントがあるとします。

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

href を抽出するには、次のコードを使用できます。

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"

最初の要素からのコンテンツ属性の抽出

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

HTML ドキュメント内で対象の itemprop 属性値に一致する最初の要素から content 属性を抽出するリゾルバを作成します。

引数:

itemProp - 照合する itemprop 属性の値
transform - 解決された値を新しい値に変換する省略可能な関数

たとえば、次のような HTML があるとします。

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

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"

JSON Linked Data の抽出

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

HTML ドキュメント内で application/ld+json の type 属性を持つ最初の <script> 要素から JSON Linked Data (JSON-LD) を抽出するリゾルバを作成します。

引数:

path - 取得するプロパティのパス
transform - 解決された値を新しい値に変換する省略可能な関数

たとえば、次のような 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>

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"

最初のメタ要素からのコンテンツ属性の抽出

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

HTML ドキュメント内で特定の name 属性に一致する最初の <meta> 要素から content 属性を抽出するリゾルバを作成します。

引数:

name - 照合する name 属性の値
transform - 解決された値を新しい値に変換する省略可能な関数

たとえば、次のような HTML があるとします。

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

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"

最初の要素からのテキストの抽出

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

HTML ドキュメント内で特定の CSS セレクタに一致する最初の要素からテキストを抽出するリゾルバを作成します。

引数:

selector - 照合する対象の CSS セレクタ
transform - 解決された値を新しい値に変換する省略可能な関数

たとえば、次のような HTML があるとします。

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

各 <h1> 要素のテキストを抽出するには、次のコードを使用できます。

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"

最初の要素からのテキストの抽出

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

HTML ドキュメント内で特定の CSS セレクタに一致する各要素からテキストを抽出するリゾルバを作成します。

引数:

selector - 照合する対象の CSS セレクタ
transform - 解決された値を新しい値に変換する省略可能な関数

たとえば、次のような 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>

各 <h1> 要素のテキストを抽出するには、次のコードを使用できます。

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"]

最初の要素からの対象属性の値の抽出

1resolvers.fromSelectorAttribute(
2  selector: string,
3  attribute: string,
4  transform?: (value: string | undefined) => string | undefined
5): () => string | undefined

HTML ドキュメント内で特定の CSS セレクタに一致する最初の要素から対象属性の値を抽出するリゾルバを作成します。

引数:

selector - 照合する対象の CSS セレクタ
attribute - 値の取得元である対象属性。
transform - 解決された値を新しい値に変換する省略可能な関数

たとえば、次のような HTML があるとします。

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

data-id 属性の値を抽出するには、次のコードを使用できます。

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"

対象属性の値の抽出

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

HTML ドキュメント内で特定の CSS セレクタに一致する各要素から対象属性の値を抽出するリゾルバを作成します。

引数:

selector - 照合する対象の CSS セレクタ
attribute - 値の取得元である対象属性。
transform - 解決された値を新しい値に変換する省略可能な関数

たとえば、次のような 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>

各 data-id 属性の値を抽出するには、次のコードを使用できます。

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"]

オブジェクトの値の抽出

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

window オブジェクトに付加されているオブジェクト (通常はグローバル変数) の値を抽出するリゾルバを作成します。

引数:

path - window オブジェクト内のオブジェクトへのパスを表す文字列。ドット表記を使用します。
transform - 解決された値を新しい値に変換する省略可能な関数

たとえば、次のような window オブジェクトがあるとします。

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

shop グローバルオブジェクトからデータを抽出するには、次のコードを使用できます。

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

Customer Data Platform 開発者ガイド

サイトマップ

GlobalPageConfig

DefaultPageConfig

PageConfig

サイトマップメソッド