[Premium]{class="badge positive" title="Target Premium に含まれる機能を確認してください。"}
デザインの作成
デザインによって、レコメンデーションがページに表示される方法が定義されます。
デフォルトデザインを使用するか、カスタムデザインを作成することで、Recommendations デザインを作成できます。 Recommendations > Designs画面には、デフォルトのデザインカードと、アカウントで作成されたデザインの両方が表示されます。
デザインを操作する際は、次の情報を考慮してください。
- デフォルトデザインを使用してレコメンデーションデザインを作成したり、カスタムデザインを作成したりできます。
- デフォルトデザインを編集または削除することはできません。
- カスタムデザインを編集、コピー、または削除できます。
- デフォルトデザインに基づいてデザインを作成するには、まずデザインをコピーしてから、そのコピーを編集する必要があります。
次の図は、デフォルトの1 x 4 デザインを示しています。
次の図は、カスタムデザインを示しています。
アクティビティ作成プロセス中に、Visual Experience Composer （VEC）内またはアクティビティ作成以外のデザインライブラリからデザインを作成できます。 次のセクションでは、ライブラリからデザインを作成することを前提としていますが、手順は似ています。
デザインを作成
デフォルトデザインに基づいてデザインを作成することも、カスタムデザインを作成することもできます。
デフォルトデザインに基づくデザインの作成
-
Recommendations > Designsをクリックして、Designs ライブラリを表示します。
-
作成するデザインの「その他のアクション」アイコン（
Create Design ダイアログボックスが表示されます。
-
デザイン カードに表示する Name とオプションのプレビュー画像を入力します。
デフォルトのデザインを使用すると、Content Name フィールドにデザイン名と「コピー」が表示されます。 名前は編集できます。 デザインカードに表示する画像を選択することもできます。
-
（条件付き）必要に応じて、デザイン Codeを編集します。
レコメンデーションデザインには、オープンソースの Velocity デザイン言語が使用されています。 Velocityに関する情報は、https://velocity.apache.orgおよびVelocityを使用したデザインのカスタマイズで確認できます。
デザインは HTML または HTML 以外にすることができます。 デフォルトでは、HTML デザインは
<div>タグでラップされ、Web環境でのクリックトラッキングが可能になります。 HTML 以外のデザインは、Web 環境ではない環境用のもので、クリック追跡ができません。 HTML以外のコードを使用するには、HTML Design トグルを「オフ」の位置にスライドさせます。note NOTE デザインで参照できるエンティティの最大数は、ハードコーディングの場合もループの場合も 99 です。 -
Create をクリックします。
カスタムデザインの作成
-
Recommendations > Designsをクリックして、Designs ライブラリを表示します。
-
Create Design をクリックします。
新しいカスタムデザインを既存のデザインに基づいて作成する場合は、作成するデザインのMore Actions アイコン（
-
Nameとオプションのプレビュー画像を追加します。
-
（条件付き）必要に応じて、デザイン Codeを編集します。
詳しくは、上記の手順4の情報を参照してください。
-
Create をクリックします。
デザインの編集、コピー、削除
デフォルトデザインは編集またはコピーできません。デフォルトデザインのみコピーできます。
編集または削除するデザインのMore Actions アイコン（
既存のデザインをコピーして複製したデザインを作成し、変更することができます。 このプロセスにより、より少ない労力で同様のデザインを作成できます。
デザインはアカウント全体で利用できます。 デザインを削除する前に、アカウント間の使用状況を考慮してください。 削除されたデザインは復元できません。
JSON の例 section_75BFB2537CFF4FBD9B560F59EB32C8DD
次の例は、 フォームベースのエディターを使用してアクティビティを設定する際に、JSON応答を返す方法を示しています。
-
Design library内またはフォームベースのワークフロー内からデザインを作成します。 Visual Experience Composer （VEC） ワークフロー内でデザインを作成しようとすると、クリックトラッキング用に
<div>にラップされたHTML デザイン以外は作成できません。 -
「HTML デザイン」オプションがオフになっていることを確認します。
-
次のコードは、デザインにペーストできる内容の例です。
code language-javascript #* * "Return a simple list of recommended entity ids" *# { "notes":{ "purpose": "Return a simple list of recommended entity ids", "use-case": "Use this approach if you prefer to do a real-time lookup of entity attribute details (such as inventory, price, rating) from another system (such as a CMS, PIM or ecommerce platform)", "version": "01" }, "recommendedItems": { "key": "$key.id", "slot-01": "$entity1.id", "slot-02": "$entity2.id", "slot-03": "$entity3.id", "slot-04": "$entity4.id", "slot-05": "$entity5.id", "slot-06": "$entity6.id", "slot-07": "$entity7.id", "slot-08": "$entity8.id", "slot-09": "$entity9.id", "slot-10": "$entity10.id" } } -
このデザインを使用するフォームベースのRecommendations アクティビティを設定します。
- Activities ページに移動します。
- Create Activity／Recommendationsをクリックします。
- Choose Experience Composerで「Form」を選択し、「Next」をクリックします。
- 「場所」で “Sample_Recs_Response” というテキストを入力します。
- Default Contentで下向き矢印をクリックし、Add Recommendationをクリックします。
- 「ページタイプ」を選択します。 これにより、次の画面の最初のフィルタリングが決まります。
- 条件カードを選択し、Nextをクリックします。
- 前の手順で作成したデザインを選択し、Nextをクリックします。
- 設定プロセスを完了します。
- Inactiveの横にある右向き矢印をクリックし、Activateを選択します。
-
アクティビティを設定してアクティブ化したら、クリーンな JSON 応答を返すサンプルのリクエストを設定できます。
アクティビティを保存してから、Targetは、選択した条件設定をサポートするモデルを構築する必要があります。 さまざまな要因によっては、このプロセスに時間がかかることもあります。 モデルの構築が完了すると結果が表示されます。
次に例を示します。
code language-none https://[YOUR_CLIENT_CODE].tt.omtrdc.net/m2/YOUR_CLIENT_CODE/ubox/raw?mbox=[YOUR_MBOX_NAME]&mboxContentType=text/html&mboxXDomain=disabled&entity.id=[ENTITY_ID]&mboxHost=rawbox_sample&at_property=[AT_PROPERTY_TOKEN]&mboxNoRedirect=true&mboxPC=1234-4321&mboxSession=9876-7000where
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 パラメーター 値 [YOUR_CLIENT_CODE]Target クライアントコード（/help/target/products.html#recsSettings/Recommendations API トークン/クライアントコードで利用可能）。 [YOUR_MBOX_NAME]フォームベースのレコメンデーションの「場所」セクション（この場合はSample_Recs_Response）で選択した名前。 [ENTITY_IDカタログ内の項目の entity.idです。[AT_PROPERTY_TOKEN]（オプション）アクティビティの設定時にプロパティ（Enterprise 権限の一部）を選択した場合は追加します。
アルゴリズムを実行して結果が得られたら、応答は次のようになります。
追加のJSON オブジェクトのヒントとテクニック section_C305673C68944749969DB239E3221DC2
また、次の構文を使用してデザインを設定することで、単純なコンマ区切りのアイテムのリストを送り返すこともできます。
entity1.id, $entity2.id, $entity3.id, $entity4.id, $entity5.id,
応答でその他の情報を送信することもできます。 次のコードファイルはより複雑なサンプルで、エンティティ ID と関連するスロット（順序）以外に様々な情報を返します。 このデザインの例では、アクティビティの詳細、Target Profileの詳細（該当する場合）、および返された項目に関連するその他entity.attributesも返します。
{
"adobeRecommendations": {
"notes": {
"purpose": "Return a list of entity ids with their associated entity.attributes",
"use-case": "Use this approach to avoid looking up attribute details after receiving a response from Target",
"version": "01"
},
"recommendedItems": {
"slot-01": "$entity1.id",
"slot-02": "$entity2.id",
"slot-03": "$entity3.id",
"slot-04": "$entity4.id",
"slot-05": "$entity5.id",
"slot-06": "$entity6.id",
"slot-07": "$entity7.id",
"slot-08": "$entity8.id",
"slot-09": "$entity9.id",
"slot-10": "$entity10.id"
},
"activityDetails": {
"mbox.name": "email-mbox",
"campaign.name": "\${campaign.name}",
"campaign.id": "\${campaign.id}",
"campaign.recipe.name": "\${campaign.recipe.name}",
"campaign.recipe.id": "\${campaign.recipe.id}",
"offer.name": "\${offer.name}",
"offer.id": "\${offer.id}",
"criteria.title": "$criteria.title",
"algorithm.name": "$algorithm.name",
"algorithm.dayCount": "$algorithm.dayCount"
},
"visitorProfile": {
"profile.favorite-category": "\${profile.favorite-category}",
"profile.test": "\${profile.test}",
"user.endpoint.lastPurchasedEntity": "\${user.endpoint.lastPurchasedEntity}",
"user.endpoint.lastViewedEntity": "\${user.endpoint.lastViewedEntity}",
"user.endpoint.mostViewedEntity": "\${user.endpoint.mostViewedEntity}",
"user.endpoint.categoryAffinity": "\${user.endpoint.categoryAffinity}",
"profile.geolocation.city": "\${profile.geolocation.city}",
"profile.geolocation.dma": "\${profile.geolocation.dma}",
"profile.geolocation.state": "\${profile.geolocation.state}",
"profile.geolocation.country": "\${profile.geolocation.country}",
"profile.sessionCount": "\${profile.sessionCount}",
"profile.averageDaysBetweenVisits": "\${profile.averageDaysBetweenVisits}",
"profile.browserTime": "\${profile.browserTime}",
"user.activeActivities": "\${user.activeActivities}",
"user.pcId": "\${user.pcId}",
"user.isFirstSession": "\${user.isFirstSession}",
"user.isNewSession": "\${user.isNewSession}",
"user.header": "\${user.header}",
"user.parameter": "\${user.parameter}"
},
"recKey": {
"recKeyDetails": {
"id": "$key.id",
"name": "$key.name",
"category": "$key.category",
"pageUrl": "$key.pageUrl",
"thumbnailUrl": "$key.thumbnailUrl"
}
},
"recDetailedResults": {
"recEntity1Details": {
"id": "$entity1.id",
"name": "$entity1.name",
"category": "$entity1.category",
"pageUrl": "$entity1.pageUrl",
"thumbnailUrl": "$entity1.thumbnailUrl"
},
"recEntity2Details": {
"id": "$entity2.id",
"name": "$entity2.name",
"category": "$entity2.category",
"pageUrl": "$entity2.pageUrl",
"thumbnailUrl": "$entity2.thumbnailUrl"
},
"recEntity3Details": {
"id": "$entity3.id",
"name": "$entity3.name",
"category": "$entity3.category",
"pageUrl": "$entity3.pageUrl",
"thumbnailUrl": "$entity3.thumbnailUrl"
},
"recEntity4Details": {
"id": "$entity4.id",
"name": "$entity4.name",
"category": "$entity4.category",
"pageUrl": "$entity4.pageUrl",
"thumbnailUrl": "$entity4.thumbnailUrl"
},
"recEntity5Details": {
"id": "$entity5.id",
"name": "$entity5.name",
"category": "$entity5.category",
"pageUrl": "$entity5.pageUrl",
"thumbnailUrl": "$entity5.thumbnailUrl"
},
"recEntity6Details": {
"id": "$entity6.id",
"name": "$entity6.name",
"category": "$entity6.category",
"pageUrl": "$entity6.pageUrl",
"thumbnailUrl": "$entity6.thumbnailUrl"
},
"recEntity7Details": {
"id": "$entity7.id",
"name": "$entity7.name",
"category": "$entity7.category",
"pageUrl": "$entity7.pageUrl",
"thumbnailUrl": "$entity7.thumbnailUrl"
},
"recEntity8Details": {
"id": "$entity8.id",
"name": "$entity8.name",
"category": "$entity8.category",
"pageUrl": "$entity8.pageUrl",
"thumbnailUrl": "$entity8.thumbnailUrl"
},
"recEntity9Details": {
"id": "$entity9.id",
"name": "$entity9.name",
"category": "$entity9.category",
"pageUrl": "$entity9.pageUrl",
"thumbnailUrl": "$entity9.thumbnailUrl"
},
"recEntity10Details": {
"id": "$entity10.id",
"name": "$entity10.name",
"category": "$entity10.category",
"pageUrl": "$entity10.pageUrl",
"thumbnailUrl": "$entity10.thumbnailUrl"
}
}
}
}
トレーニングビデオ：Recommendations （3:20）でカスタムデザインを作成する
このビデオには、次の情報が含まれています。
- カスタムデザインの作成
- デザインで表示変数を参照する方法について説明します