【第587回】Personalization：Sitemap Builder で Event を設定する

前回の記事では、Salesforce Personalization の Sitemap Builder で Profile Attributes を設定し、TrailNest の Checkout で入力された、

• Email Address

• Customer ID

を、それぞれ以下として扱う準備を行いました。

• Email Address
  → Contact Point Email

• Customer ID
  → Party Identification

これまでの記事では、

• Page Types
  → 現在表示されているページを判定

• Resolvers
  → Web ページ上の値を取得

• Profile Attributes
  → ユーザー自身に関する情報を定義

という順番で設定してきました。

ただし、ここまで設定しただけでは、

• 商品を閲覧した

• Cart に商品を追加した

• Checkout を実行した

• 商品を購入した

といった、ユーザーの行動そのもの はまだ Event として定義していません。

そこで、今回は Sitemap Builder の Events タブを設定していきます。

Personalization 基礎シリーズ

• ① Personalization の基本的な仕組み

• ② Personalization の初期セットアップ

Sitemap Builder シリーズ

• ③ Sitemap Builder の利用を開始する

• ④ Sitemap Builder で Page Type を設定する

• ⑤ Sitemap Builder で Resolver を設定する

• ⑥ Sitemap Builder で Profile Attribute を設定する

• ⑦ Sitemap Builder で Event を設定する

• ⑧ Sitemap Builder で Event を紐付ける

• ⑨ Sitemap Builder の Schema を確認する

• ⑩ Sitemap Builder で Debug を確認する

• ⑪ Sitemap Builder で Sitemap と Schema の取得

Data 360 設定シリーズ

• ⑫ Website Connector と Data Mapping の設定

• ⑬ CloudPages に Web SDK を設置する

• ⑭ 顧客 ID で CRM と Web の Profile を統合する

• ⑮ Real-Time Profile Data Graph を作成する

• ⑯ リアルタイム ID 解決の確認方法

• ⑰ 商品データを取り込んで Item Data Graph 作成

Personalization 設定シリーズ

• ⑱ Engagement Signal を設定する

• ⑲ Real-Time Calculated Affinity を設定する

• ⑳ Affinity を使って Hero Banner を切り替える

• ㉑ Affinity に応じた商品レコメンドを設定する

• ㉒ Affinity に応じたレコメンドを Web に表示する

Event とは

Event は、Web サイト上でユーザーが行った Interaction を取得するための仕組みです。

例えば、

• Product Detail を表示した

• Add to Cart をクリックした

• Form を送信した

• 商品を購入した

といった、データとして取得したい行動のみを Event として設定 します。

Salesforce Interactions SDK には

• Catalog

• Cart

• Order

などの標準的な Interaction が用意されており、それ以外の行動は Custom Event として定義できます。

Events タブを確認

Sitemap Builder の Events タブを開きます。

今回の環境では、最初から Page View という Event が用意されています。

これは、次の記事で PageType に対して、Event の紐づけシーンで、

• Home

• Category

• Cart

• Checkout

に紐づけますので、そのままにしてください。

• Event Type：userEngagement

• Line Items：なし

• Interaction Attributes：なし

• Profile Attributes：なし

{
  interaction: {
    name: "Page View",
    eventType: "userEngagement"
  }
}

Standard Event の設定

上の Page View は Custom Event です。その一方で、Product View、Add to Cart、Purchase など、Salesforce Interactions SDK が標準で用意している Interaction を利用する場合は、Standard Event を使用します。

Standard Event を選択すると、Custom Event とは設定画面の構成が少し異なります。

主な設定項目は、

• ① Category

• ② Interaction

• ③ Field Mapping

• ④ Interaction Attributes

• ⑤ Profile Attributes

• ⑥ Preview

です。

1. Category

まず、作成する Event の種類を選択します。

今回の画面では、

• Catalog

• Cart

• Order

から選択できます。

例えば、

• 商品の閲覧 → Catalog

• Cart への追加 → Cart

• 購入 → Order

という形で選択します。

2. Interaction

選択した Category に応じて、利用できる Standard Interaction が表示されます。

例えば Catalog では、

• View Catalog Object

• View Catalog Object Detail

• Quick View Catalog Object

• Share Catalog Object

• Review Catalog Object

• Comment Catalog Object

• Favorite Catalog Object

などから選択できます。

今回 Product Detail の閲覧を取得する場合は、

を使用します。

Standard Interaction を使用する場合は、Custom Event のように Event Type を手入力する必要はありません。

Salesforce Interactions SDK が Interaction の種類から適切な eventType を自動的に判断します。

例えば、

として処理されます。

3. Field Mapping

Field Mapping では、その Standard Interaction に必要な値を Resolver と結び付けます。

Product View の場合は、

• Catalog Object Type

• ID Resolver

などを設定します。

例えば、

• Catalog Object Type：Product

• ID Resolver：Product ID

とすることで、「Product ID Resolver で取得した商品が閲覧された」という Catalog Interaction を作成できます。

選択する Standard Interaction によって、ここに表示される Field Mapping の項目は異なります。

例えば Add to Cart では Line Item、Purchase では Order ID や Total Value など、Event の種類に必要な項目が表示されます。

4. Interaction Attributes

Standard Interaction に追加情報を持たせたい場合に使用します。

例えば Product View では、

• Product Name

• Product Price

などを Resolver から追加できます。

5. Profile Attributes

必要であれば、前回作成した Email Capture などの Profile Data を Event と一緒に送信できます。

ただし、すべての Event に Profile Attributes を付ける必要はありません。

例えば Product View の時点では Email Address が分かっていない可能性があるため、今回は None とします。

6. Preview

最後に Preview で、Standard Interaction がどのような Payload として生成されるか確認します。

今回作成する Event

今回は、TrailNest で使用する次の Event を作成します。

① Product View

Product Detail が表示されたことを取得します。

② Add to Cart

商品を Cart に追加したことを取得します。

③ Customer Confirm Email

Checkout で確認された Email Address を Contact Point Email として取得します。

④ Customer Identification

Checkout で確認された Customer ID を Party Identification として取得します。

⑤ Purchase

注文が完了したことを、購入した商品明細とあわせて取得します。

• Product View、Add to Cart、Purchase では、これまで作成してきた Resolver を利用します。

• Customer Confirm Email と Customer Identification では、前回作成した Profile Attributes を利用します。

① Product View を作成

それでは + Add New Event をクリックします。

今回は商品情報を扱うため Standard Event を選択します。

Product View には、次の内容を設定します。

• Label：Product View

• Category：Catalog

• Interaction：View Catalog Object

• Catalog Object Type：Product

• ID Resolver：Product ID

View Catalog Object は、Product や Category、Article などの Catalog Object が閲覧されたことを取得するための Standard Interaction です。

Catalog Interaction では、Catalog Object の Type と ID によって、何が閲覧されたのか を特定します。

Product Name と Product Price を追加

Product View には、Product ID だけでなく Product Name と Product Price も追加します。

Interaction Attributes の Add Attribute をクリックし、次の Attribute を追加します。

Price

• Key：Price

• Type：Resolver

• Value：Product Price

Name

• Key：Name

• Type：Resolver

• Value：Product Name

Preview を確認して問題がなければ Save をクリックします。

{
  interaction: {
    name: SI.CatalogObjectInteractionName.ViewCatalogObject,
    catalogObject: {
      type: "Product",
      id: null,
      attributes: {
        Price: productprice(),
        Name: productname()
      }
    }
  }
}

Product View を作成しただけでは送信されない

ここで重要なのは、Product View Event を作成しただけでは、Product Detail を開いた際に自動的に送信されるわけではない点です。

このあと Page Types に戻って、

と設定することで、

という関係を作ります。

この設定は次回の記事で行います。

② Add to Cart を作成

次に Add to Cart Event を作成します。

Add To Cart は、商品を Cart に追加したことを取得する Standard Cart Interaction です。

1 回の Add To Cart では、追加された商品を 1 つの Line Item として送信できます。

Add to Cart Event を設定

再び Events タブに戻り、+ Add New Event をクリックして Standard Event を選択します。

次の内容を設定します。

• Label：Add to Cart

• Category：Cart

• Interaction：Add To Cart

• Line Item Mode：Single Item

• Catalog Object Type：Product

• Catalog Object ID Resolver：Product ID

• Quantity Resolver：Product Quantity

• Price Resolver：Product Price

途中の設定である Cart ID Selector は任意項目です。今回の TrailNest では Cart を識別する固有の Cart ID を持っていないため、設定せずに進めます。ログインカートや Commerce システムなどで一意の Cart ID を取得できる場合は、その値を Resolver で設定できます。

これで、

Cart に追加したのかを取得できます。

設定できたら Preview を確認して Save をクリックします。

{
  interaction: {
    name: SI.CartInteractionName.AddToCart,
    lineItem: {
      catalogObjectType: "Product",
      catalogObjectId: productid(),
      quantity: productquantity(),
      price: productprice()
    }
  }
}

Add to Cart は Listener から送信する

Product View は Product Detail の表示時に送信しますが、Add to Cart はページを表示しただけでは発生しません。

ユーザーが、

ときに送信する必要があります。

TrailNest には Add to Cart 用のボタンを用意しています。

次回の記事で Page Types に戻り、このボタンを Listener で監視して、

という設定を行います。

③ Customer Confirm Email を作成

まず、Checkout で確認された Email Address を送信する Event を作成します。

+ Add New Event をクリックし、Custom Event を選択します。

次の内容を設定します。

• Label：Customer Confirm Email

• Event Type：userEngagement

• Profile Attributes：Email Capture

Preview では、次のような構成になります。

{
  interaction: {
    name: "Customer Confirm Email",
    eventType: "userEngagement"
  },
  user: {
    attributes: {
      eventType: "contactPointEmail",
      email: checkoutemail()
    }
  }
}

この 1 回の Event から、userEngagement の Engagement Event と contactPointEmail の Profile Event がそれぞれ Data 360 へ送信されます。

問題がなければ Save をクリックします。

④ Customer Identification を作成

続いて、Checkout で確認された Customer ID を Party Identification として送信する Event を作成します。

再び + Add New Event をクリックし、Custom Event を選択します。

次の内容を設定します。

• Label：Customer Identification

• Event Type：userEngagement

• Profile Attributes：Customer Identification

Preview では、次のような構成になります。

{
  interaction: {
    name: "Customer Identification",
    eventType: "userEngagement"
  },
  user: {
    attributes: {
      eventType: "partyIdentification",
      IDName: "TrailNest Customer ID",
      IDType: "Customer ID",
      userId: checkoutcustomerid()
    }
  }
}

Customer ID は userId として送信され、後ほど Party Identification DMO の Identification Number に Mapping します。

問題がなければ Save をクリックします。

この段階では 2 つの Event を作成するところまでにします。

次回の記事で、どちらも Checkout の Confirm Customer ボタンに紐付けます。

⑤ Purchase を作成

最後に Purchase Event を作成します。

Purchase は注文が完了したことを取得する Standard Order Interaction です。

Purchase では、

• Order ID

• Total Value

• Line Items

を使用して、注文全体と購入した商品明細を取得します。

TrailNest では Place Order を実行すると、

• Order ID

• Date Time

• Customer

• Items

• Total

を含む Order Object を作成し、trailnest_last_order として Local Storage に保存しています。

また、Order Confirmation では購入商品ごとに、

<div
    class="checkout-summary-item"
    data-product-id="TN-BP-003"
    data-quantity="1"
    data-price="79000">

のような要素を出力しています。

今回は、この商品要素を Purchase の Line Items として取得します。

Purchase Event を設定

Events タブで + Add New Event をクリックし、Standard Event を追加します。

次の内容を設定します。

• Label：Purchase

• Category：Order

• Interaction：Purchase

• Order ID Selector：Order ID

• Total Value Selector (number)：Order Total

続いて Line Items Mapping を設定します。

• Line Items Selector：.checkout-summary-item

• Catalog Object Type：Product

• Catalog Object ID Resolver：Order Item Product ID

• Quantity Resolver：Order Item Quantity

• Price Resolver：Order Item Price

Line Items Selector には、Order Confirmation 上に表示されている各購入商品を表す .checkout-summary-item を指定します。

一致した各商品要素は $item として、前回作成した Order Item 用 Resolver に渡されます。

そのため、

として、購入商品ごとの情報を取得できます。

今回は、

• Line Item Attributes：なし

• Interaction Attributes：なし

• Profile Attributes：None

のまま進めます。

Preview を確認して Save をクリックします。

{
  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 は Order Confirmation で送信する

TrailNest では、注文完了後に Order Confirmation ページへ移動します。

そのページには Order ID や Total が表示されるだけでなく、Local Storage に保存した Order 情報も利用できます。

そのため Purchase は、

という設定にします。

これも次回、Page Types の On Page Load Interaction から設定します。

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

今回 Event を作成したことで、これまで個別に設定してきた Resolver や Profile Attribute を、実際のユーザー行動と結び付ける準備ができました。

ここまでで、

• 何を Event として送信するのか は定義できました。

ただし、

• まだ、いつ、その Event を送信するのか を設定していません。

次回は、今回作成した Event を Page Type に紐付けて、実際に発火する条件を設定します。

Page Load Interaction や Listener を使用して、

が送信されるように設定していきます。

今回は以上です。

次の記事はこちら

前回の記事はこちら

私の note のトップページはこちら