こんにちは、野田です
この記事では、Adobe Target Recommendationsで出力結果のフィルタリングの方法を紹介します
ブラウザ側からデータ送信（今回はgetOffer）してレコメンド結果を表示します
クリアしたい課題
- 絞り込みができること
- 取得した分だけ表示すること
使用データは、Adobe Targetに取り込んだ商品データを使用しています
デザイン設定
まずは、デザイン＝出力結果の形を作ります
デザインの作成にはVelocityテンプレートを使います
※ Velocity参考URLは記事末
式には#, 変数には$をつけます
ちなみにレコメンドの最大出力件数は99件です（思ったより少ない・・・）
大量に出したい場合は、何回も呼び出しが必要になりそうですね
とりあえず今回は50件にしておきましょうか
#set($count=1)
#foreach($e in $entities)
#if($e.id != "" && $count < $entities.size() && $count <= 50)
$count, "sku": "$e.id", "category": "$e.categoryId", "price": $e.value.replace(",", "").replace(".00", "")
#set($count = $count + 1)
#end
#endざっくりやっていること
- $countを初期化
- 取得したデータがなくなるか50個超えるまでぐるぐる回す
- $count, $sku, $categoryId, $priceの形式で表示
- $priceは1234.00形式なので数値ぽい形に変換
全件取得
adobe.target.getOffer({
"mbox": “mbox_hoge”,
"success": function(offer) {
adobe.target.applyOffer( {
"mbox": "mbox_hoge",
"selector": document.querySelector(“.output-target”),
"offer": offer
} );
},
"error": function(status, error) {
console.log('Error', status, error);
}
});結果
<div class="output-target" __recsclicktrackidplaceholder__="">
1, "sku": "A1", "category": "catA", "price": 3000
2, "sku": "B1", "category": "catB", "price": 2000
3, "sku": "A2", "category": "catA", "price": 3000
4, "sku": "A3", "category": "catA", "price": 4000
5, "sku": "C1", "category": "catC", "price": 5000
6, "sku": "B2", "category": "catB", "price": 9000
7, "sku": "C2", "category": "catC", "price": 5000
8, "sku": "D1", "category": "catD", "price": 5000
9, "sku": "E1", "category": "catE", "price": 2000
10, "sku": "D2", "category": "catD", "price": 6000
11, "sku": "F1", "category": "catF", "price": 7000
12, "sku": "D3", "category": "catD", "price": 5000
13, "sku": "A4", "category": "catA", "price": 4000
14, "sku": "A5", "category": "catA", "price": 4000
15, "sku": "A6", "category": "catA", "price": 7000
16, "sku": "E2", "category": "catE", "price": 2900
17, "sku": "B3", "category": "catB", "price": 8000
18, "sku": "B4", "category": "catB", "price": 9000
19, "sku": "A7", "category": "catA", "price": 4000
20, "sku": "A8", "category": "catA", "price": 3000
21, "sku": "G1", "category": "catG", "price": 3000
22, "sku": "H1", "category": "catH", "price": 2000
23, "sku": "H2", "category": "catH", "price": 3000
24, "sku": "A9", "category": "catA", "price": 4000
25, "sku": "H3", "category": "catH", "price": 2000
26, "sku": "E3", "category": "catE", "price": 1800
27, "sku": "B5", "category": "catB", "price": 2000
28, "sku": "G2", "category": "catG", "price": 2000
29, "sku": "B6", "category": "catB", "price": 9000
30, "sku": "B7", "category": "catB", "price": 2000
31, "sku": "B8", "category": "catB", "price": 6000
32, "sku": "I1", "category": "catI", "price": 4000
33, "sku": "A10", "category": "catA", "price": 4000
34, "sku": "D4", "category": "catD", "price": 5000
35, "sku": "G3", "category": "catG", "price": 3000
36, "sku": "A11", "category": "catA", "price": 9000
37, "sku": "J1", "category": "catJ", "price": 9000
38, "sku": "J2", "category": "catJ", "price": 3000
39, "sku": "A12", "category": "catA", "price": 9000
40, "sku": "F2", "category": "catF", "price": 1000
41, "sku": "E4", "category": "catE", "price": 2000
42, "sku": "G4", "category": "catG", "price": 6000
43, "sku": "B9", "category": "catB", "price": 6000
44, "sku": "K1", "category": "catK", "price": 9000
45, "sku": "A13", "category": "catA", "price": 9000
46, "sku": "K2", "category": "catK", "price": 9000
47, "sku": "G5", "category": "catG", "price": 9000
48, "sku": "G6", "category": "catG", "price": 2000
49, "sku": "H4", "category": "catH", "price": 6000
50, "sku": "B10", "category": "catB", "price": 9000
</div>指定の50件、色々なカテゴリの商品がでているので全件出ているようです
絞り込みを実施(この記事のメインはココです)
条件を設定します
①絞り込みたい項目を設定します
②getOfferで送信するパラメータ名を設定します
③送信されなかった場合、無視する設定を行います
これでrec_categoryを送信時はフィルタし、未送信時は全件取得できます
絞り込み条件をつけて実行
adobe.target.getOffer({
"mbox": “mbox_hoge”,
"success": function(offer) {
adobe.target.applyOffer( {
"mbox": "mbox_hoge",
"selector": document.querySelector(“.output-target”),
“rec_category”: “catA”,
"offer": offer
} );
},
"error": function(status, error) {
console.log('Error', status, error);
}
});結果
出力されませんでした
<div class="output-target" __recsclicktrackidplaceholder__=""></div>rec_categoryパラメタを外して実行すると正常に出力されるが、外すと出力されない・・・
原因調査のため、mboxTraceを使ってリクエスト→処理→レスポンスの中身を確認します
今回の伝えたい部分ではないので割愛します
※ mboxTrace参考URLは記事末
注意：わかりやすくするため、出力できなかったケースではdiv.output-targetを空にしてます
実際に動かすと空データで上書きされるのではなく「何も処理が行われない」ため、前回の出力のままとなります
その結果、「あれ？絞り込まれてない？」となるため、注意が必要です
確認した結果
- 絞り込みのリクエストは正常
- 処理も正常
- レスポンス時のデザイン書き出しでデータが途切れていそう
レコメンドの設定を見直します
「バックアップコンテンツ」項目の「デザインの部分レンダリング」をONにします
先ほど実行したrec_categoryありのgetOfferを再実行
<div class="output-target" __recsclicktrackidplaceholder__="">
1, "sku": "A1", "category": "catA", "price": 3000
2, "sku": "A2", "category": "catA", "price": 3000
3, "sku": "A3", "category": "catA", "price": 4000
4, "sku": "A4", "category": "catA", "price": 4000
5, "sku": "A5", "category": "catA", "price": 4000
6, "sku": "A6", "category": "catA", "price": 7000
7, "sku": "A7", "category": "catA", "price": 4000
8, "sku": "A8", "category": "catA", "price": 3000
9, "sku": "A9", "category": "catA", "price": 4000
10, "sku": "A10", "category": "catA", "price": 4000
11, "sku": "A11", "category": "catA", "price": 9000
12, "sku": "A12", "category": "catA", "price": 9000
13, "sku": "A13", "category": "catA", "price": 9000
</div>取れました
件数が満たない場合の設定をしていないと正常に出力はできないようです
つまり、全件取った際には99件以上取れて、うち50件を表示した結果が表示されました
フィルタをかけることで99件に満たず、デザイン崩れにて表示ができなかったようです
ちなみに同じ項目に対してOR条件で取得する場合、以下の形式でパラメータに設定します
“rec_category”: ‘[“catA”, “catB”]’配列をそのまま送っても出力されません
配列型の文字列として送信してください
まとめ
フィルタすると取得結果が99件未満になりがちなのでバックアップコンテンツの設定を確認する
getOfferで行いましたが、WebSDKの場合は、sendEventで行えそうです
参考URL
条件 – バックアップコンテンツ:
https://experienceleague.adobe.com/ja/docs/target/using/recommendations/criteria/create-new-algorithm#content
