テンプレートを編集してスロットの設定を作成する

Cloud Kicks のマーチャンダイザー、Brandon Wilson は、これからデベロッパーの Vijay Lahiri に推奨項目を表示するための ISML テンプレートを作成してもらいます。Brandon は Business Manager でこのテンプレートを使用してスロットの設定を作成できます。

先に進む前に、Salesforce B2C Commerce でのコンテンツスロットのしくみとここで使用する理由を説明します。

ストアフロントページはシンプルな HTML ページです。B2C Commerce ではさまざまなツールを使用して作成されます。(詳細は「Salesforce B2C Commerce の開発」トレイルを参照してください。)

重要な B2C Commerce デベロッパーツールはテンプレートです。B2C Commerce ではテンプレートを使用して、データとページ情報を動的な HTML ベースの Web ページに変換し、ブラウザーに表示する方法を定義します。デベロッパーは B2C Commerce 独自の HTML 拡張機能である Internet Store Markup Language (ISML) を使用してテンプレートを作成します。

コンテンツスロットは、テンプレートに定義されるページ上の具体的な場所です。Business Manager でコンテンツスロット設定を作成できます。これにより、場所内に何をいつどのくらいの期間表示するかを指定します。コンテンツスロット内には商品、カテゴリ、コンテンツアセット、静的 HTML を表示できます。コンテンツアセットには、フラッシュグラフィック、商品カルーセル、商品検索結果セット、マーケティンググラフィックなど (ここでは推奨項目) があります。

Recommender では、Einstein の結果に基づいてコンテンツスロットに表示する推奨商品を識別します。

次のセクションは少し技術的になります。Vijay が推奨項目のコンテンツスロットとして使用するために既存のテンプレートを変更する必要があるからです。Brandon はプロセスのあらゆるステップを理解して、次回何を依頼すればよいかわかるようにしたいと考えています。最初は、前の単元で触れたアンカーフィールドについて説明します。

アンカーフィールドは参照元オブジェクトから参照先オブジェクトを指し示します。たとえば、参照元オブジェクトが Einstein の計算で使用される特定のカテゴリ、商品、または商品セットだとします。参照先オブジェクトは推奨商品です。当然、アンカーは商品 ID、カテゴリ ID、または none (アンカーなし) になります。

次の図は、アンカーフィールドとそれぞれの戦略で商品、商品セット、カテゴリが推奨商品にどうマッピングされるかを示しています。

Recommender タイプは常に次のようにアンカーと一致する必要があります。

• 商品から商品: product-id (商品 ID)
• カテゴリ内の商品: category-id (カテゴリ ID)
• すべてのカテゴリ内の商品: none (なし)
• 最近見た商品: product-id (商品 ID) (アンカー不要)
• セットを完成: product-id (商品 ID)

戦略のタイプごとに、Einstein ではアンカーを使用して表示する商品を認識します。戦略は次のように機能します。

たとえば「この商品を見た顧客が最終的に購入した商品」戦略の場合、データはランニングシューズを見た買い物客が最終的にトレイルランナーを購入することを示しています。Einstein ではこの相関関係を使用して、ランニングシューズを見た買い物客への推奨商品のリストを作成します。

Vijay は、Brandon がスロットの設定で使用するコンテンツスロットを定義できるように ISML テンプレートを変更します。 商品情報ページのスロットを次のように定義します。

<isslot id="product-show-recommend" context="global"
context-object="${pdict.product}"/>

context-object 属性を商品のバスケットまたはコレクション (dw.util.Collection) に渡すこともできます。これにより Brandon は選択した最大 5 個の商品またはバスケット内のすべての商品に基づいて推奨項目を作成して使用できます。

カテゴリのランディングページのスロットを次のように定義します。

<isslot id="cat-banner" context="category"
context-object="${pdict.productSearchResult.category}" />

商品情報ページの場合、Vijay はコンテキストをグローバルとして定義します。これは Brandon が Business Manager でこのページのコンテンツスロットをグローバルとして設定するからです。カテゴリのランディングページには、カテゴリコンテキストを使用します。この設定に基づき、Einstein では Business Manager で定義された商品のカテゴリとサブカテゴリを使用して推奨項目を作成します。どちらのページのスロットにも、参照元項目 (カテゴリ) ID への参照を context-object 属性の一部として含める必要があります。

Vijay はすでにストアフロントにコンテンツスロットを定義してあるため、必要なのは推奨商品を表示するためのテンプレートを作成することだけです。他のタイプの商品コンテンツスロットを表示するテンプレートがすでにあるので、それを少しだけ変更して再利用します。

次の商品テンプレートをコピーして home_categories-m.isml テンプレートを作成します。

<iscontent type="text/html" charset="UTF-8" compact="true"/>
<iscomment> should not be cached, the tiles are cached individually.</iscomment>
<isif condition="${slotcontent}">
<div class="product-listing product-listing-1x4">
   <h2>${slotcontent.calloutMsg}</h2>
   <ul class="search-result-items tiles-container">
       <isloop items="${slotcontent.content}" var="product" begin="0" end="3">
           <isobject object="${product}" view="recommendation">
               <li class="grid-tile">
                   <isinclude url="${URLUtils.url('Product-HitTile', 'pid', product.ID,
                   'showswatches', 'true', 'showpricing', 'true', 'showpromotion', 'true',
                   'showrating', 'true')}"/>
               </li>
           </isobject>
       </isloop>
  </ul>
</div>
</isif>

Vijay は新しいファイル home_categories-m をステージングインスタンスにアップロードします。商品の推奨は動的であるため、スロット全体がキャッシュされないようにします。そうしないと、すべての訪問者に同じ推奨項目が表示されてしまいます。テンプレート全体ではなく個々の商品タイルが表示されるときのみキャッシュされるようにします。

Brandon はグローバルとカテゴリの両方のコンテンツスロットを構成して推奨項目を表示したいと考えています。コンテンツスロットは次のようにストアフロントページにマッピングされます。各ページでは次の Recommender タイプを使用できます。

Brandon がコンテンツスロットを構成するために必要なものがすべて揃いました。商品情報ページのグローバルスロットの設定を作成できます。グローバルでもカテゴリでも設定の作成と管理の手順は同じです。

このモジュールでは、受講者が B2C Commerce のマーチャンダイザーで、これらのタスクを実行する適切な許可を得ているものと想定しています。B2C Commerce のマーチャンダイザーでなくても大丈夫です。このまま読み進み、ステージングインスタンスでマーチャンダイザーがこれらの手順をどのように実行するのかを確認します。Trailhead Playground で次の手順を実行しないでください。Trailhead Playground では B2C Commerce を使用できません。B2C Commerce のステージングインスタンスがある場合は、そのインスタンスで手順を実行できます。ステージングインスタンスがない場合は、使用可能なインスタンスがないかマネージャーにお問い合わせください。

Brandon は Business Manager で Vijay が作成したテンプレートを使用してコンテンツスロット設定を作成します。Brandon はスケジュールに従ってこの設定を実行し、的確な商品の推奨を買い物客に表示できます。

この手順は次のとおりです。

1. Business Manager を開きます。
2. サイト > [マーチャントツール] > [オンラインマーケティング] > [コンテンツスロット] を選択します。結果のリストが Business Manager の [コンテンツスロット] ページに表示されます。
3. スロットを選択します。Brandon は home-categories-m を選択します。
4. 新規の設定を作成するには、[新規] をクリックします。
5. 設定を有効にします。
6. デフォルトとして選択し、説明を入力します。
7. コンテンツタイプで [推奨項目] を選択します。
8. Recommender を選択します。Brandon は前の単元で作成した related-product-brand-x Recommender を選択します。(メモ: 表示されるのはプライマリインスタンスグループ (PIG) インスタンス上にある Recommender のみです。Einstein は Sandbox インスタンスでは有効化されていません。)
9. テンプレート pdp.isml を選択して [保存] をクリックします。
10. [スケジュールの追加] をクリックし、スケジュールのタイプを選択します。スロットの間隔を 1 時間 (60 分) 未満にすることはできません。時刻の条件は、常にタイムゾーンと夏時間の考慮を前提としています。
11. 顧客グループ [Big Spenders (高額利用者)] を割り当てます。
12. [ランク] 列内をクリックしてスロットのランクを指定します。これにより、複数のスロットの設定がスケジュールされた場合にどのスロットを表示するかを B2C Commerce に指示します。複数のスロットの設定に同じランクが指定されている場合、B2C Commerce では最後に編集された設定を使用します。ランクが小さいほど、優先度が高くなります。
13. [適用] をクリックします。
14. プレビューアイコンをクリックしてストアフロントでスロットを表示します。

Vijay と Brandon はアンカータイプと各戦略の結果について学習しました。Vijay は既存のテンプレートをコピーして推奨商品を表示する新しいテンプレートを作成しました。Brandon は新しいスロットの設定でこのテンプレートを参照しました。では、いくつかの質問に答えて素晴らしいバッジを獲得してください。