【第583回】Personalization：Sitemap Builder の利用を開始する

Nobuyuki Watanabe

2026年10月2日 22:34

今回の記事から Salesforce Personalization の検証 を行います。

Salesforce Personalization は、Data 360 の顧客情報・行動データ・商品情報を使い、顧客に応じたコンテンツやおすすめ商品を選ぶ仕組みです。

Marketing Cloud Next と連携したメールのパーソナライズに加え、Web サイトやモバイルアプリなど、メール以外の複数のチャネルで活用できます。

そこで Marketing Cloud Engagement の CloudPages を使用して、架空のアウトドア EC サイト「TrailNest」を作成しました。

今回のサイトには、以下の 6 種類のページを用意しています。

Home
Category
Product Detail
Cart
Checkout
Order Confirmation

商品を閲覧してカートへ追加し、Checkout では、

First Name
Last Name
Customer ID
Email Address
Country

を入力して注文できる、簡易的な EC サイトです。

Customer ID と Email Address を入力したあとに Confirm Customer を行い、注文を確定する構成にしています。

今後、この Customer ID を使用して匿名ユーザーと既知顧客を関連付けて、Salesforce Personalization の ID 解決やリアルタイム Personalization まで検証していきます。

また、購入時には注文全体だけではなく商品明細も保持しているため、後ほど Recommendation で購入履歴を利用するところまで進めます。

Personalization 基礎シリーズ

Sitemap Builder シリーズ

Data 360 設定シリーズ

Personalization 設定シリーズ

TrailNest を作成する

もし CloudPages をお持ちで、同じサイトを作成してみたい方は、まず以下のスクリプトを Automation Studio で実行して、商品マスタとなるデータエクステンションを作成してください。

<script runat="server">
    Platform.Load("Core", "1");

    var dataExtensionConfig = {
        "CustomerKey": "TrailNest_Product_Master",
        "Name": "TrailNest_Product_Master",
        "Fields": [
            {
                "Name": "ProductId",
                "FieldType": "Text",
                "MaxLength": 50,
                "IsPrimaryKey": true,
                "IsRequired": true
            },
            {
                "Name": "ProductName",
                "FieldType": "Text",
                "MaxLength": 150,
                "IsRequired": true
            },
            {
                "Name": "CategoryId",
                "FieldType": "Text",
                "MaxLength": 50,
                "IsRequired": true
            },
            {
                "Name": "CategoryName",
                "FieldType": "Text",
                "MaxLength": 100,
                "IsRequired": true
            },
            {
                "Name": "Activity",
                "FieldType": "Text",
                "MaxLength": 100
            },
            {
                "Name": "ExperienceLevel",
                "FieldType": "Text",
                "MaxLength": 50
            },
            {
                "Name": "Description",
                "FieldType": "Text",
                "MaxLength": 1000
            },
            {
                "Name": "Price",
                "FieldType": "Decimal",
                "MaxLength": 18,
                "Scale": 0,
                "IsRequired": true
            },
            {
                "Name": "ImageUrl",
                "FieldType": "Text",
                "MaxLength": 500
            },
            {
                "Name": "ProductSlug",
                "FieldType": "Text",
                "MaxLength": 150
            },
            {
                "Name": "ProductUrl",
                "FieldType": "Text",
                "MaxLength": 500
            },
            {
                "Name": "InventoryCount",
                "FieldType": "Number"
            },
            {
                "Name": "IsFeatured",
                "FieldType": "Boolean"
            },
            {
                "Name": "IsActive",
                "FieldType": "Boolean"
            }
        ]
    };

    var createdDataExtension = DataExtension.Add(dataExtensionConfig);

    Write("TrailNest_Product_Master created.");
</script>

データエクステンションを作成したら、下にある CSV ファイルを「テキスト引用符あり」でインポート してください。

商品データはデータエクステンションに 30 件登録されます。Product Detail などのページでは、Query String を使用して商品情報を動的に表示する仕組みにしています。

続いて、以下の HTML を CloudPages のコードビューに上書きで貼り付けて公開してください。これで TrailNest のサイトが完成します。

今回の記事では、この TrailNest を使って Sitemap Builder の利用を開始したいと思います。

Website Connector を作成

それでは、Data 360 が導入済みであることを前提として進めます。

今回使用する Sitemap Builder では、Page Type、Event、Resolver などの設定内容をもとに Data 360 Schema を自動生成できます。

そのため今回は、Schema の JSON を最初から手作業で作成するのではなく、まず Website Connector を作成し、その後 Sitemap Builder で Sitemap と Schema を作成します。

Website Connector だけ先に作成
→ TrailNest に SDK を読み込む
→ Sitemap Builder で Page Type / Event を作る
→ Schema を生成
→ その Schema を Website Connector へアップロード

Sitemap Builder の Schema タブでは、設定した Sitemap の内容をもとに自動生成された Data 360 Schema を確認できます。

1. 「設定」で Websites を検索し、Websites & Mobile Apps を選択して、新しい Website Connector を作成します。

2. 今回は、次の内容で Website Connection を作成しました。設定値は皆さんの環境に合わせて変更してください。

Connection Name：TrailNest Website
Alias：nes
Connection Type：A Custom Website
Website Base URL：下に記載されている Cloudpages の公開済み URL

https://mcxkknz3m0zj3jqsxn4hm3dp3q-4.pub.sfmc-content.com/f0sn3uhu0p0

※ Alias は 2026 年 8 月の新機能リリースで登場しました。

この機能は、複数の Website または Mobile Connection に同じ Data Kit Package をデプロイする場合、コネクタ間で名前が重複する可能性があります。そこで固有の Alias を設定することで、そのような 名前の衝突（Name Collision）を回避 できるようになりました。
最大のメリットは、例えば今回の「nes」であれば、データストリームや DLO の名前の頭に nes が付くことになりますので、データエクスプローラーなどでの検索が非常に楽になります。そのような視点で命名すると良いかもしれません。

Salesforce Interactions SDK の URL を取得

3. Website Connector を作成すると、画面下部に Integration Guide が表示されます。その「Add the Script to your source code」には、その Website Connector 専用の Salesforce Interactions SDK の CDN URL が表示されます。

Salesforce Interactions SDK は、Web サイト上のユーザー行動や Profile 情報などを取得するための Web SDK です。
SDK を初期化して適切な Consent を取得すると、Web ページ上で発生した Interaction や Profile 情報を Data 360 に送信できるようになります。

4. 通常の Web サイトへ正式に実装する場合、この URL を <script> タグの src に指定して <head> 内に追加します。

<script src="https://cdn.c360a.salesforce.com/beacon/c360a/XXXXXXXX/scripts/c360a.min.js"></script>

ただし、今回はこの段階では、まだ CloudPages に SDK の初期化処理まで実装しません。

これから使用する Sitemap Builder には、取得した Web SDK を現在開いている Web ページへ一時的に読み込む Inject 機能が用意されています。
まずはこの Inject を使用して Sitemap を作成・検証し、生成された Sitemap と Schema を確認した後に、実際の Web サイトへ組み込む最終的なコードを決定します。
こうすることで、CloudPages 側で設定した init() と Sitemap Builder が生成する初期化処理が重複することも避けられます。

Sitemap とは

Salesforce Personalization における Sitemap は、Web サイトの構造やページ上の情報、ユーザー行動を Salesforce に伝えるための設定です。

一般的な Web サイトの Sitemap というと、検索エンジン向けのものを思い浮かべるかもしれませんが、Salesforce Personalization の Sitemap はそれとは別物です。

Salesforce Personalization の Sitemap では、例えば次のようなことを定義します。

このページは Home なのか
このページは Product Detail なのか
表示中の商品 ID や価格は何か
どの場所を Personalization の表示領域として使うか
ユーザーが Add to Cart をクリックしたか
購入完了ページに到達したか
Customer ID や Email Address が入力されたか

つまり、Salesforce Personalization に対して「今ユーザーが見ているページは何で、どの商品を見ていて、どんな行動をしたのか」を理解させるためのルールセットが Sitemap です。

例えば、TrailNest の商品詳細ページでは、HTML 上に次のような情報があります。

<main
    id="trailnest-app"
    data-page-type="product_detail"
    data-product-id="TN-BP-003"
    data-product-name="Trail Pro 35L"
    data-product-price="139000">

Sitemap では、こうした DOM や URL、JavaScript の値などを利用して、

Page Type = Product Detail
Product ID = TN-BP-003
Product Name = Trail Pro 35L
Price = 139000

という情報を Salesforce に渡せるようにします。

DOM（Document Object Model）とは、Web ページの HTML をブラウザが構造化して扱うための仕組みです。

例えば、商品名、商品 ID、ボタン、画像などの HTML 要素を、JavaScript や Sitemap から取得・操作することができます。

- HTML = ページの設計図
- DOM = ブラウザがその設計図を読み込んで作った、操作可能な部品の構造

また、Sitemap は単にページを分類するだけではありません。

例えば商品詳細ページで、

Add to Cart

ボタンがクリックされたことを検知したり、

home_hero
home_recs
product_detail_recs_row_1

といった Content Zone を定義して、後から Hero Banner や Recommendation を表示する場所として利用することもできます。

そのため、Sitemap は Web 実装において、Web サイトと Salesforce の間をつなぐ設計図のような役割 を持っています。

Sitemap Builder とは

今回使用する Sitemap Builder は Spring ’26 で追加された新機能で、Sitemap と Schema の作成を支援する Chrome 拡張機能 です。

従来のように Sitemap の JavaScript を一から直接記述するだけでなく、Page Type、Resolver、Profile Attributes、Event などを画面上から設定できます。

Salesforce も Sitemap Builder を、JavaScript の知識への依存を減らし、非開発者でも Personalization の実装に取り組みやすくするための low-code / no-code ツールとして案内しています。

Sitemap Builder をインストール

1. Chrome Web Store から Sitemap Builder をインストールします。

2. インストール後、TrailNest の Home ページを Chrome で開き、その状態で Chrome の拡張機能一覧から Sitemap Builder を起動します。

Sitemap Builder は、起動時に対象となる Web ページと関連付けて使用するため、Sitemap を設定したい Web サイトを開いた状態で起動します。
Sitemap Builder を開いたら、すぐに右隅の拡大ボタンをクリックすることをオススメします。これによりブラウザの別タブに移動しても Sitemap Builder が閉じられなくなり、作業が効率的になります。

Web SDK を Inject する

Sitemap Builder を使用して Sitemap を作成する前に、Website Connector で取得した Salesforce Interactions SDK を TrailNest に読み込ませます。

3. Sitemap Builder の上部にある Inject タブを開きます。

今回のようなテスト用 CloudPages であれば、事前に Salesforce Interactions SDK を埋め込んでおくことも可能ですが、実際の Web サイトでは、検証段階から自由に SDK を追加できるとは限りません。

そこで、まずは Sitemap Builder の Inject 機能を使用します。Inject は、Salesforce Interactions SDK と作成中の Sitemap を、現在開いている Web ページへ一時的に適用し、Sitemap Builder 上で開発や動作確認を行うための機能です。

4. Web SDK URL の欄に、先ほど Website Connector からコピーした Script URL を入力します。

https://cdn.c360a.salesforce.com/beacon/c360a/db4dce08-43c3-406c-b901-1d0fc6a9e009/scripts/c360a.min.js

5. Script URL を入力したら、以下の設定のまま Inject をクリックします。

Use SDK-embedded sitemap：OFF
Browser Overrides：デフォルトのまま

6. 正常に読み込まれると、画面上部に、SDK Loaded ✓ が表示されます。

これによって、Sitemap Builder から現在の TrailNest 上で Web SDK を使用して Sitemap の動作を検証できる状態になりました。

注意：Inject で読み込まれた SDK は、Sitemap Builder による開発・テスト用のものです。この時点で Web サイトへ Salesforce Interactions SDK を正式に実装したという意味ではありません。

画面に Use SDK-embedded sitemap という設定がありましたが、今回は Sitemap Builder で作成する Sitemap を検証したいので、OFF のまま進めます。

この設定を ON にすると、Sitemap Builder で作成中の Sitemap ではなく、SDK にすでに組み込まれている Sitemap を使用して検証できます。
これは Sitemap を Website Connector にアップロードした後の確認などで利用できます。

Sitemap Builder の作成方法を選択

7. 続いて Configure タブに移動します。

Sitemap Builder を初めて設定する場合、Sitemap の作成方法として複数の選択肢が表示されます。

今回の画面では、

Start from Scratch
Import Sitemap Builder Config
Retail Quick Start

が表示されています。

Import Sitemap Builder Config とは、後にエクスポートできる Sitemap Builder の設定ファイルを読み込み、作業を再開するためのものです。

8. ここで Retail Quick Start を使用すると、EC サイト向けの Page Type、Resolver、Event、Listener などがあらかじめ用意されるため、一般的な Retail サイトでは Sitemap の作成を素早く開始できます。

ただし、今回の TrailNest は 1 つの CloudPage 上で Query String によって Home、Category、Product Detail などを切り替える特殊な構成です。また、この記事では Sitemap Builder の仕組みを一つずつ確認しながら設定したいため、今回は Start from Scratch を選択します。

Retail Quick Start は、Product Listing Page、Product Detail Page、Cart など、Retail / EC サイトで一般的なページ遷移や Interaction を想定して Sitemap の作成を開始できる テンプレート です。但し、ド定番の EC サイト用のため、完全にそのまま適用できる可能性は低いです。

注意事項：この「Start From Scratch」や「Retail Quick Start」を切り替えて開始ボタンをクリックしてしまうと、これまで設定した内容がすべてクリアされて戻せなくなりますので注意してください。

Sitemap Builder の各タブの説明

Configure 画面には、Sitemap を作成するための複数のタブが用意されています。各タブの役割は、次のように考えると分かりやすいです。

Settings
Sitemap 全体の共通設定を行う場所です。Data Space、Logging Level、SPA 向けの URL 変更時の動作などを設定します。
Consent Management
Web サイト上の Consent と Sitemap を連携し、Salesforce Interactions SDK が Tracking を開始してよいかを設定します。
Page Types
Web サイト上のページを種類ごとに分類します。例えば、複数の商品ページをすべて Product Detail としてまとめて扱うことができます。
Resolvers
Web ページ上から、商品 ID、商品名、価格、Customer ID、Email Address、Order 情報 など、必要な値を取得するための設定です。
Profile Attributes
Email Address や Customer ID など、ユーザーを識別するために必要な Profile 情報を Event に含めるために使用します。
Events
Product View、Add to Cart、Purchase など、ユーザーが Web サイト上で行った行動を定義します。
Schema
Page Type、Resolver、Profile Attributes、Event などの設定内容をもとに、自動生成された Data 360 Schema を確認します。

Settings を設定

Start From Scratch をクリックすると、最初に Settings タブが開かれます。

Settings は特定の Page Type だけではなく、Sitemap 全体に適用される設定です。

今回の TrailNest では、デフォルトのままで問題ありません。

Personalization Dataspace：default
Logging Level：Debug
Single Page Application Support：Off

Personalization Dataspace

Personalization Dataspace は、Personalization Points や Recommenders など、Salesforce Personalization のアセットを利用する Data Space を指定する設定です。
今回は default Data Space を使用するため、そのまま default とします。

Logging Level

Logging Level は Salesforce Interactions SDK が出力するログの詳細度を設定します。
今回は Sitemap を構築・検証している段階なので、問題を確認しやすいように Debug を使用します。
Salesforce Interactions SDK にはブラウザの Console へデバッグ情報を出力する Logger が用意されています。

Single Page Application Support

Single Page Application Support は SPA（Single Page Application）向けの設定です。
SPA とは、ページ全体を再読み込みせずに URL や画面内容だけを変更する Web アプリケーションのことです。

今回の TrailNest は Query String を使用して、

?view=product
?view=cart
?view=checkout

などを切り替えていますが、リンクをクリックするたびに CloudPages 自体が再読み込みされます。そのため SPA ではないので、今回は OFF のままにします。

Consent Management を設定

続いて Consent Management タブを開きます。

Salesforce Interactions SDK は、適切な Tracking Consent が得られるまでは、取得した行動データを保存・送信しません。

有効な Opt In が与えられると Tracking を開始し、Consent が後から変更された場合は updateConsents() を使用して状態を更新する仕組みです。

Sitemap Builder の Consent Management では、

Opt In（常にオプトインとする仕組み）
Opt Out（常にオプトアウトとする仕組み）
Advanced Setup（Consent Banner が存在する場合など）

から Consent の扱いを設定できます。

今回は、Sitemap や Event の動作を確認できるようにしたいので Opt In を設定して進めます。つまり、この検証サイトでは、「訪問者は最初から Tracking に同意しているものとして扱う」ということです。

注意：今回の Opt In は検証環境で動作を確認するための設定です。実際の Web サイトでは、利用している Cookie Banner や Consent Management Platform、プライバシーポリシー、法務上の要件などに応じた Consent 管理を実装してください。

実際の Web サイトに Consent Banner が存在する場合は、Advanced Setup を使用して、Tracking を許可する Opt-In Element と拒否する Opt-Out Element を指定できます。（「承諾」や「拒否」のボタンなど）

Sitemap Builder は、指定した要素のクリックを検知して Consent を判断するコードを生成します。

ただし、実際の Consent Management Platform（CMP）では、ユーザーが以前選択した Consent が Cookie や Local Storage などに保存され、再訪問時には Consent Banner が表示されない場合があります。また、Consent Banner 自体がページ読み込み後に動的に生成される場合もあります。

そのため、本番サイトでは Element Picker によるクリック検知だけでなく、CMP に保存されている現在の Consent 状態をページロード時に取得し、Salesforce Interactions SDK に渡す実装も考慮する必要があります。

なお、Marketing Cloud Next が提供する標準の Web Tracking 用 Consent Banner では、ユーザーの選択は sfmc_consent Cookie に保存されるため、再訪問時にも以前の Consent 状態を利用できます。

init() と Consent の関係

ここで、Salesforce Interactions SDK の 初期化について少し補足します。

Salesforce Interactions SDK を使用するには、init() メソッドによる初期化が必要です。

初期化とは、読み込んだ SDK を実際に利用できる状態にするための準備処理です。

init() では、主に Identity Management や Consent の状態など、SDK がデータ取得を開始するために必要な設定を準備します。

Salesforce の現在の API では、consents は init() に渡す必須の設定です。init() は Promise を返し、初期化が正常に完了すると SDK を利用できる状態になります。

Promise は「処理が完了したら、その結果を後から返す」という JavaScript の仕組みです。

init() の初期化処理が完了した後に実行したい処理は then()、初期化中にエラーが発生した場合の処理は catch() に記述できます。

例えば、ユーザーの Consent がまだ決定していない場合は、API としては次のように空の配列を渡して初期化することもできます。

window.getSalesforceInteractions().init({
    consents: []
});

この場合、SDK 自体は初期化されますが、Opt In が設定されるまでは Tracking を開始しません。

ただし今回は、このコードを CloudPages に直接固定で実装するのではなく、Sitemap Builder の Consent Management で Consent を設定し、最終的に生成される Sitemap の初期化処理を使用します。

Consent Management 画面の Preview を見ると、例えば次のような形で init() に渡される consents の内容を確認できます。

{
  consents: new Promise(resolve => {
    resolve([{
      provider: "Consent Provider",
      purpose: SI.ConsentPurpose.Tracking,
      status: SI.ConsentStatus.OptIn
    }]);
  }),
  personalization: {
    dataspace: "default"
  }
}

つまり、Sitemap Builder の Consent Management は単なる画面上の設定ではなく、Salesforce Interactions SDK の初期化時に渡される Consent の設定にもつながっています。

そのため、CloudPages 側に別の init() を先に固定で記述するのではなく、今回は Sitemap Builder 側を設定の基準として進めます。

Personalization Module について

今回の最終的な目的は、単なる Data 360 への行動データ蓄積だけではありません。

Salesforce Personalization を使用して、

Hero Banner
Recommendation
Web Personalization
Experimentation

などを TrailNest 上で実際に動かすところまで進めます。

Web 上に Personalization の結果を表示する場合は、Salesforce Interactions SDK の Personalization Module も使用します。

現在の Salesforce では、

SalesforceInteractions.Personalization.Config.initialize()

を Sitemap の開始時に実行し、SalesforceInteractions.init() より前に Personalization Module を初期化します。

最終的には概念的に、

Salesforce Interactions SDK を読み込む
↓
Personalization Module を初期化
↓
Salesforce Interactions SDK を初期化
↓
Sitemap を初期化
↓
Data 360 / Salesforce Personalization と連携

という流れになります。

ただし、現時点ではまだ Web Personalization を表示するための、

Profile Data Graph
Item Data Graph
Personalization Point
Experience Template

などを作成していません。

そのため Personalization Module の具体的な設定については、後ほど Hero Banner や Recommendation を実装する段階で改めて確認します。

いかがでしたでしょうか。

これで Website Connector、SDK Injection、Settings、Consent Management までの準備が完了しました。

この後の設定をざっくり言いますと、

Page Types
→ 「どのページ？」
Resolvers
→ 「ページに何がある？」
Profile Attributes
→ 「訪問者は誰？」
Events
→ 「何をした？」

を設定していきます。

それでは、次回の記事では、TrailNest の Home、Category、Product Detail、Cart、Checkout、Order Confirmation 6 種類のページを Sitemap Builder の Page Type として設定していきます。

今回は以上です。