【第584回】Personalization：Sitemap Builder で Page Type を設定する
前回の記事では、Salesforce Personalization の「Sitemap Builder の利用を開始」というテーマを扱い、
Website Connector の作成
→ Web SDK の取得
→ Sitemap Builder への Inject
→ Settings
→ Consent Management
までの準備ができました。
Personalization 基礎シリーズ
Sitemap Builder シリーズ
Data 360 設定シリーズ
Personalization 設定シリーズ
今回の記事では TrailNest のページを Page Type として設定していきます。
Page Type とは、名前の通りですが、「今表示されているページが、どのような種類のページなのか」を Salesforce 側に伝えるための設定です。
例えば、同じ Web サイトの中でも、
「ホーム」を見ているのか
「商品一覧」を見ているのか
「商品詳細」を見ているのか
「カート」まで進んでいるのか
「購入が完了」したのか
によって、ユーザーの状態や興味の強さは大きく異なります。
そのため、今回の TrailNest では、次の 6 種類の Page Type を用意します。
Home
サイトへの入口となるページです。Hero Banner や Recommendation など、最初に見せる Personalization に利用できます。Category
Backpacks や Tents など、ユーザーがどのカテゴリの商品を見ているのかを把握するために利用します。Product Detail
ユーザーが具体的にどの商品を見ているのかを取得するページです。商品 ID、商品名、価格などを取得し、Product View の Event につなげます。Cart
ユーザーが商品を購入候補として選び、Cart まで進んだ状態を表します。商品閲覧よりも購入意向が高まった行動として扱うことができます。Checkout
実際に購入手続きへ進んだ段階です。今回の TrailNest では First Name、Last Name、Customer ID、Email Address などを入力します。後ほど Customer ID を Party Identification、Email Address を Contact Point Email として取得し、匿名時の行動と既知顧客を Identity Resolution で関連付けるための情報として利用します。Order Confirmation
購入が完了したことを表すページです。Purchase Event の送信や、購入後の Recommendation などに利用できます。
このように Page Type を分けることで、Salesforce Personalization は単に「ユーザーが Web サイトを見た」というだけではなく、
どの種類のページを見たのか
どの商品やカテゴリに興味を持っているのか
購入までどこまで進んでいるのか
を区別できるようになります。
その結果、Page Type ごとに異なる Event を送信したり、異なる Personalization を表示したりできるようになります。
Page Matching とは
Page Type では、名前などの他、まず Page Matching を設定します。
Page Matching とは、「現在表示されている Web ページが、この Page Type に該当するか」を判断するための条件 です。
Sitemap Builder では、次の「Match Strategy」を使用できます。
① Exact path
URL の Pathname が指定した値と完全に一致する場合に、その Page Type として判定します。例：/cart② Regex
正規表現を使用して URL の Pathname を判定します。複数の URL パターンをまとめて扱いたい場合などに使用します。
例えば、
^/products/[^/]+/?$
とすれば、
/products/TN-BP-001
/products/TN-BP-002
のような URL をまとめて Product Detail として判定できます。
③ Includes
URL の Pathname に指定した文字列が含まれている場合に一致と判定します。例えば /products/ を指定すると、その文字列を含む Pathname を対象にできます。④ Custom JS
JavaScript の式を使用して Page Type を判定します。URL だけでは判別できない場合や、DOM、JavaScript の値などを利用したい場合に使用します。
注意：Exact path、Regex、Includes は Pathname を利用します。そのため、今回の TrailNest のように Query String で表示内容を切り替えるサイトでは、それだけでは各 Page Type を区別できません。
TrailNest では Custom JS を使用
今回の TrailNest は Marketing Cloud Engagement の CloudPages 上に 1 つのページを作成し、Query String によって表示内容を切り替える構成にしています。
例えば、
Home：/f0sn3uhu0p0
Category：/f0sn3uhu0p0?view=category&category=backpacks
Product Detail：/f0sn3uhu0p0?view=product&id=TN-BP-003
Cart：/f0sn3uhu0p0?view=cart
のように URL は変化しますが、window.location.pathname はすべて、
/f0sn3uhu0p0
のままです。
そこで TrailNest では、ページを作成した段階で各画面の <main> 要素に data-page-type を設定してあります。
例えば Home では、
<main
id="trailnest-app"
data-page-type="home">Product Detail では、
<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">となっています。
今回は、この data-page-type を利用して Page Type を判定します。
重要：Page Type の判定方法は Web サイトの構造によって異なります。実際の Web サイトで、どの情報を利用すれば各ページを一意に識別できるのかを確認することが重要です。
Home の設定
それでは、まず Home の作成を開始します。
Start From Scratch であっても、Home Page だけは存在していますので、Add New Page Type をクリックしての「新規」作成は不要です。
内容を以下に編集します。
Name：Home
Match Strategy：Custom JS
ここで Match Strategy で「Custom JS」を選択すると、
Custom isMatch (JS expression returning boolean)
という入力欄が表示されます。
ここには、その Page Type に該当する場合に true、該当しない場合に false となる JavaScript の式を設定 します。
Home では、次の式を使用します。
document.querySelector('#trailnest-app[data-page-type="home"]') !== null
これは、現在のページに、
id="trailnest-app"
data-page-type="home"
が設定された要素が存在するかを確認しています。
該当する要素が見つかれば Check に合格「＝ Matches current page」し、そのページを Home として認識します。
Home 以外のページを開いているとエラー「Unable to evaluate on this page.」になります。エラーが発生したとしても「保存」を妨げるものではありません。
Page Type に関連するその他の設定
Page Matching の下には、Page Type に関連するいくつかの設定があります。
今回は Page Type の判定条件を作成することが目的なので、それぞれの役割だけ確認し、Event や Personalization に関する設定は後の記事で行います。
① On Page Load Interaction
On Page Load Interaction は、その Page Type が表示されたときに自動的に送信する Interaction を指定する設定です。
例えば Product Detail が表示されたときに Product View を送信する、といった使い方ができます。
今回は Start from Scratch で Sitemap を作成しており、Event はまだ作成していません。
そのため、ここでは敢えて
None
のまま進めます。
Page Type の表示時に送信する Event は、後ほど Events を作成した後に、再度 Page Type に戻って割り当てます。
② Listeners
Listeners は、ボタンのクリックなど、Web ページ上で発生したユーザー操作を監視して Event を送信するための設定 です。
例えば Product Detail では、Add to Cart ボタンのクリックを検知して Add to Cart Event を送信するといった使い方ができます。
今回は Event をまだ作成していないため、設定しません。
No listeners added yet.
のまま進めます。
Listeners についても、Event を作成する際に改めて設定します。
③ Content Zones
Content Zones は、Salesforce Personalization から Hero Banner や Recommendation などのコンテンツを表示する場所を定義する設定です。
今回はまず Page Type の設定に集中するため、Content Zones は設定しません。
No content zones added yet.
のまま進めます。
④ Contextual Attributes
Contextual Attributes は、現在表示しているページに関する追加情報を Personalization に渡すための設定です。
例えば Category や Product Detail では、Category や商品の属性を Recommendation の絞り込み条件として利用できます。
今回は Page Type の判定だけを行うため、
No contextual attributes added yet.
のまま進めます。
⑤ Preview
画面下部の Preview では、設定した Page Type が Sitemap の JavaScript としてどのように生成されるかを確認できます。
今回の Home では、次のようになります。
{
name: "Home",
isMatch: () => document.querySelector('#trailnest-app[data-page-type="home"]') !== null
}
今回は Event、Listener、Content Zone、Contextual Attributes をまだ設定していないため、Preview も非常にシンプルです。
ここまで確認できたら Save をクリックします。
これで Home の Page Type が完成しました。
次は Category を新しい Page Type として作成します。
Category 以降の Page Type を設定
Home と同じ方法で、残りの Page Type も追加します。
Add New Page Type をクリックし、それぞれ Match Strategy に Custom JS を選択して、HTML の data-page-type を判定します。
今回は Page Type の Matching に集中するため、Category 以降についても以下の設定は変更しません。
On Page Load Interaction：None
Listeners：なし
Content Zones：なし
Contextual Attributes：なし
これらは、Event や Salesforce Personalization を設定する際に改めて追加します。
Category の設定
Category ページには、
data-page-type="category"
を設定しているため、次の内容で作成します。
Name：Category
Match Strategy：Custom JS
On Page Load Interaction：None
document.querySelector('#trailnest-app[data-page-type="category"]') !== null
これにより、Backpacks や Tents など、表示しているカテゴリに関係なく、Category ページとして認識できます。
※ 実際に、何らかの Category のページに遷移してから JS を入力することで、「Matches current page」の判定が出ます。
Product Detail の設定
Product Detail は次のように設定します。
Name：Product Detail
Match Strategy：Custom JS
On Page Load Interaction：None
document.querySelector('#trailnest-app[data-page-type="product_detail"]') !== null
Product Detail には商品 ID、商品名、価格などの情報も用意していますが、それらの取得については次回以降の Resolvers で設定します。
今回は、Product Detail であることを判定するところまでにします。
Cart の設定
Cart は次のように設定します。
Name：Cart
Match Strategy：Custom JS
On Page Load Interaction：None
document.querySelector('#trailnest-app[data-page-type="cart"]') !== null
Cart View などの Event はまだ設定せず、今回は Cart ページとして認識できる状態だけを作成します。
Checkout の設定
Checkout は次のように設定します。
Name：Checkout
Match Strategy：Custom JS
On Page Load Interaction：None
document.querySelector('#trailnest-app[data-page-type="checkout"]') !== null
今回の TrailNest では Checkout で First Name、Last Name、Customer ID、Email Address などを入力します。
ただし、今回は Checkout という Page Type を判定するところまでです。
Customer ID や Email Address の取得については、後ほど Resolver と Profile Attributes を使用して設定します。
Order Confirmation の設定
最後に Order Confirmation を設定します。
Name：Order Confirmation
Match Strategy：Custom JS
On Page Load Interaction：None
document.querySelector('#trailnest-app[data-page-type="order_confirmation"]') !== null
Purchase Event についてもこの段階では設定せず、購入完了ページとして認識できる状態だけを作成します。
これで TrailNest の、
Home
Category
Product Detail
Cart
Checkout
Order Confirmation
の 6 種類を、それぞれ Page Type として判定できるようになりました。
いかがでしたでしょうか。
今回は 、「現在表示しているページが何のページなのかを Sitemap に認識させる」ところまでを設定しました。分けた上で、どのような施策をしたいのか、という視点で分けてみてください。
次回は、Resolvers を使用して、Product Detail の商品 ID、商品名、価格に加えて、Checkout の Customer ID や Email Address、購入完了後の Order 情報など、Web ページ上に存在する実際のデータを取得していきます。
今回は以上です。
