【第588回】Personalization：Sitemap Builder で Event を紐付ける
前回の記事では、Salesforce Personalization の Sitemap Builder で Event を設定しました。
TrailNest では、
Product View
→ Product Detail の表示Add to Cart
→ 商品を Cart に追加Customer Confirm Email
→ 確認された Email Address を取得Customer Identification
→ 確認された Customer ID を取得Purchase
→ 注文完了
の 5 つを作成しました。
ただし、Event を作成しただけでは、まだ実際の Web サイト上では送信されません。
前回までに、
何を Event として送信するのか
を定義したので、今回は、
いつ、その Event を送信するのか
を設定していきます。
そのために、今回の記事では、再び Page Types タブへ戻ります。
Personalization 基礎シリーズ
Sitemap Builder シリーズ
Data 360 設定シリーズ
Personalization 設定シリーズ
Page Type と Event を紐付ける
Page Type には、Event を発火させるための主な設定として、
① On Page Load Interaction
② Listeners
があります。
この 2 つは、Event が発生するタイミングが異なります。
① On Page Load Interaction
On Page Load Interaction は、その Page Type が表示されたときに送信する Event を設定します。
Salesforce Interactions SDK の Sitemap では、Page Type が Match すると、その Page Config に設定されている interaction が Page Load に伴う Interaction として送信されます。
例えば、
Product Detail が表示された
↓
Product View を送信
という使い方です。
② Listeners
一方、Listeners は、Web ページ上で発生するユーザー操作を監視するための設定です。
例えば、
ボタンのクリック
フォーム操作
などを検知し、そのタイミングで Event を送信できます。
Salesforce の Sitemap では Listener を使用してページ上のユーザー操作を監視し、取得した操作を Web SDK の Event として送信できます。
今回の TrailNest では、
Add to Cart ボタン → Add to Cart
Confirm Customer ボタン → Customer Confirm Email
Confirm Customer ボタン → Customer Identification
という設定を行います。
① Product Detail Page Type
Product Detail に Event を設定
まず Page Types タブを開き、以前作成した Product Detail を選択します。
Product Detail には、次の 2 つの Event を設定します。
Page Load → Product View
Add to Cart のクリック → Add to Cart
On Page Load Interaction に Product View を設定する
On Page Load Interaction から、
Product View
を選択します。
これにより、
Product Detail が Page Type として Match
↓
Product View Event を送信
という動きになります。
Product View には前回、
Product ID
Product Name
Product Price
を Resolver として設定しています。
そのため Product Detail を表示すると、単純なページ表示ではなく、
どの商品が閲覧されたのか
を Catalog Interaction として取得できます。
Salesforce でも、Product Detail のような Page Load で取得する Catalog Interaction は Sitemap の Page Config から送信する方法が案内されています。
Product Detail の Listeners に Add to Cart を追加
続いて、同じ Product Detail の Listeners から Add Listener をクリックします。
今回監視するのは TrailNest の Add to Cart ボタンです。
TrailNest には、
<button id="add-to-cart">
というボタンを用意しています。
Pick をクリックし、Web ページ上の Add to Cart ボタンを選択します。
Selector には、
#add-to-cart
が設定されます。
そして Send Event には、
Add to Cart（イベント）
を選択します。
これで、
Add to Cart ボタンをクリック
↓
Add to Cart Event を送信
という Listener が設定されます。
Add to Cart Event には、
Product ID
Product Quantity
Product Price
を設定しているため、クリックされた商品の情報を Line Item として送信できます。
{
name: "Product Detail",
isMatch: () => document.querySelector('#trailnest-app[data-page-type="product_detail"]') !== null,
interaction: {
name: SI.CatalogObjectInteractionName.ViewCatalogObject,
catalogObject: {
type: "Product",
id: productid(),
attributes: {
Price: productprice(),
Name: productname()
}
}
},
listeners: [listener("click", "#add-to-cart", () => {
sendEvent({
interaction: {
name: SI.CartInteractionName.AddToCart,
lineItem: {
catalogObjectType: "Product",
catalogObjectId: productid(),
quantity: productquantity(),
price: productprice()
}
}
});
})]
}以上、設定できたら Save をクリックします。
Tips：Pick 機能を使うか使わないかの分かれ道
Pick は Selector を簡単に取得するための便利な機能ですが、取得された Selector が長期的に安定しているかを確認することが重要です。
#add-to-cart のような一意で安定した ID や、Tracking 用に用意された data-* Attribute を取得できる場合は、そのまま利用しやすいです。
一方、HTML の階層、nth-child、自動生成された Class などに依存する Selector は、Web サイトの変更によって動作しなくなる可能性があります。
また、注文完了など「処理が成功したこと」を取得したい場合は、ボタンを Pick して Click を監視するだけでは不十分な場合があります。（入力エラーやサーバー側のエラーによって、ボタンをクリックしても注文処理が完了しない場合があるため）その場合は Application Event や Data Layer など、実際の処理結果を表す Event を利用する設計を検討します。
② Checkout Page Type
Checkout に Event を設定
続いて Checkout の Page Type を開きます。
Checkout では、ユーザーが Confirm Customer をクリックしたタイミングで、
Customer Confirm Email
Customer Identification
を送信します。
On Page Load Interaction には、Page View を設定してください。
Customer Confirm Email の Listener を追加
Listeners から Add Listener をクリックします。
今回対象とするのは Checkout の Confirm Customer ボタンです。
Pick を使用して Confirm Customer ボタンを選択すると、Selector には、TrailNest の Confirm Customer ボタンを表す Selector が設定されます。
Send Event には、
Customer Confirm Email
を選択します。
続いて、同じ Confirm Customer にもう 1 つ Listener を追加します。
Customer Identification の Listener を追加
続けて、もう一度 Add Listener をクリックします。
先ほどと同じ Confirm Customer ボタンを対象にしますので、Selector には「#confirm-customer」をコピペします。
Send Event には、
Customer Identification
を選択します。
これらによって、Confirm Customer を 1 回クリックすると、
Customer Confirm Email
→ Contact Point EmailCustomer Identification
→ Party Identification
の 2 つが送信される構成になります。
{
name: "Checkout",
isMatch: () => document.querySelector('#trailnest-app[data-page-type="checkout"]') !== null,
listeners: [listener("click", "#confirm-customer", () => {
sendEvent({
interaction: {
name: "Customer Confirm Email",
eventType: "userEngagement"
},
user: {
attributes: {
eventType: "contactPointEmail",
email: checkoutemail()
}
}
});
}), listener("click", "#confirm-customer", () => {
sendEvent({
interaction: {
name: "Customer Identification",
eventType: "userEngagement"
},
user: {
attributes: {
eventType: "partyIdentification",
IDName: "TrailNest Customer ID",
IDType: "Customer ID",
userId: checkoutcustomerid()
}
}
});
})]
}Sitemap では 1 つの Page Type に複数の Listener を設定できます。
今回は同じ Confirm Customer ボタンに 2 つの Listener を設定することで、1 回のクリックから Customer Confirm Email と Customer Identification の 2 つの Event を送信します。
③ Order Confirmation Page Type
Order Confirmation に Purchase を設定
最後に Order Confirmation の Page Type を開きます。
前回作成した Purchase Event では、
Order ID
Total Value
購入商品の Line Items
を取得するように設定しました。
Order ID と Total Value は Local Storage の trailnest_last_order から取得し、Line Items は Order Confirmation に表示されている各 .checkout-summary-item から取得します。
そのため、
Order Confirmation が表示された
↓
Purchase Event を送信
という設定にします。
On Page Load Interaction に Purchase を設定
On Page Load Interaction から、
Purchase
を選択します。
これで Order Confirmation が Page Type として Match した際（Order Confirmation のページが開かれた際）に Purchase Event が送信されます。
Purchase Event では、
Order ID
Total Value
Product ID
Quantity
Price
を取得するため、
どの注文で、どの商品が、何個、いくらで購入されたのか
を Order Interaction として取得できます。
確認できたら Save をクリックします。
{
name: "Order Confirmation",
isMatch: () => document.querySelector('#trailnest-app[data-page-type="order_confirmation"]') !== null,
interaction: {
name: SI.OrderInteractionName.Purchase,
order: {
id: orderid(),
totalValue: ordertotal(),
lineItems: cashDom(".checkout-summary-item").map((index, el) => {
const $item = cashDom(el);
return {
catalogObjectType: "Product",
catalogObjectId: orderitemproductid($item),
quantity: orderitemquantity($item),
price: orderitemprice($item)
};
}).get()
}
}
}Purchase Event の重複送信には注意
今回の検証では Order Confirmation の Page Load を Purchase Event の発火条件として利用しています。
この方法は Sitemap の動きを理解するうえでは分かりやすい一方、実際の EC サイトでは注意が必要です。
例えばユーザーが Order Confirmation を再読み込みすると、
Page Load
↓
Purchase
がもう一度発生する可能性があります。
実案件では、同じ Order ID の Purchase を重複して送信しないように、
購入完了を一度だけ通知する Application Event
Data Layer
サーバー側の購入完了処理
など、サイトの仕組みに合わせて発火条件を設計することが重要です。
今回は Sitemap Builder の On Page Load Interaction をシンプルに確認するため、Order Confirmation の表示時に Purchase を送信する構成とします。
その他の Page Type
TrailNest には、
Home
Category
Cart
などの Page Type も作成しています。
今回、そちらにはシンプルに On Page Load Interaction だけを設定し、それぞれに Page View だけ を設定してください。
Interaction Name はすべて Page View ですが、sourcePageType に Home、Category、Cart、Checkout が入るため、どの種類のページを表示したかを区別できます。
今回の Mapping では、Page View は Website Engagement に取り込まれます。ページの再表示や再読み込みでもレコードが増えるため、後ほど Hero Banner などの表示・クリックを確認する際は、Interaction Name を使って対象の Event を区別します。
いかがでしたでしょうか。
前回の記事では、何を Event として送信するのか を設定していました。
今回の記事では、Page Types に戻り、On Page Load Interaction と Listener を利用して、いつ、その Event を送信するのか を設定しました。
これで、
Product View
Add to Cart
Customer Confirm Email
Customer Identification
Purchase
という TrailNest の主要な Event を Sitemap から取得するための設定が一通りつながりました。
次回は Schema タブを確認します。
これまで設定してきた Event や Profile Data が、Data 360 の Web Connector Schema とどのように結び付くのかを確認していきます。
今回は以上です。
