レコメンド設定方法

①ダッシュボードの「施策」から「レコメンド」をクリックします。

②「作成」をクリックします。

③施策名を登録します。

施策の管理名を入力します。※実際のサイト表示タイトルとは関係ありません。

④URL登録を行います。

レコメンドを稼働させるページを設定します。

表示するサイトのドメインを選択してください。

適用URL：施策を稼働したいページを登録します。
除外URL：適用URLに設定したページの内で、稼働を除外したいページURLを登録します。
表示除外URL：適用URLに設定されているURLのうち、施策を表示しないページURLを登録します。
※データ収集は行いますが、サイト上には施策が表示されません。id/class名の重複で意図しないページに表示される場合にご活用ください。

⑤配信設定を行います。

有効／無効

有効か無効かを切り替えます。配信する場合は有効にしてください。

出力対象

施策を表示するデバイスを選択します。

種別選択

「閲覧履歴」と「ランキング」どちらのレコメンドを使用するか選択します。

　∟閲覧履歴：閲覧した商品の履歴。設定有効後、ページを閲覧したらすぐに表示。
　∟ランキング：ユーザーが閲覧したページを集計して、訪問回数が多い順に表示します。

※「ランキング」を選択した場合、施策設定後データ収集期間中は施策が表示されません。反映までしばらくお時間をいただきます。
　∟集計期間（直近）：収集期間の選択が可能です。用途に合わせてご設定ください。
　∟データ集計期間：データ収集自体は行いつつ、指定した期間はサイト上にレコメンド施策を表示させない設定です。開始日・終了日を指定すると、その期間中はフロントに表示されず、期間外になるとレコメンドが表示されます。データが十分に貯まるまでタイトルのみの状態で表示されてしまうのを防ぐために使用します。

　∟売り切れ判定タイプ／売り切れ判定値：終売・売り切れ商品をランキング一覧から自動的に除外するための判定方法を設定します（ランキング選択時のみ表示）。
　∟id指定／class指定：対象の要素にid/classが付与されている場合、その要素がDOM上に存在するかどうかで売り切れを判定します。「売り切れ判定値」にid名/class名を入力します。
　∟テキスト指定：専用のid/classがなく、要素内のテキスト（例：「売り切れ」「SOLD OUT」）で売り切れを表現しているサイト向けの判定方式です。「売り切れ判定値」に判定したい文字列を入力します。
　∟設定しない：売り切れ判定を行わず、通常通り全商品をランキング対象にします。
※売り切れと判定された商品は、バッチ集計後にランキング一覧から自動的にスキップされます。在庫が戻り判定条件に当てはまらなくなると、再度ランキングに表示されます。

表示件数

レコメンドを表示させる件数を設定します。

URLのクエリパラメータおよびフラグメントを除外

有効にした場合、ランキング集計の際にURLのクエリパラメータ（?以降）に加え、フラグメント（#以降）も除外して同一URLとして扱います。

有効時、直下に「除外するクエリパラメータのキー指定」フォームが表示されます。key/valueを複数登録できます。

　∟未登録の場合：従来どおりクエリパラメータ・フラグメントを全て除外します（既存設定のまま変更なし）。
　∟1件以上登録した場合：登録したパラメータ・フラグメントのみを除外対象とします（集計結果が変わる場合があります）。

URL末尾の文字列だけで同一判定

有効にした場合、URL末尾の文字列だけで同一ページの判定を行います。

カテゴリが異なってもURL末尾の商品IDが同じ場合に、同一商品として集計したい場合にご利用ください。

ランキング集計（バッチ処理）と閲覧履歴の両方に適用されます。

更新日表示

▼表示例

ランキングの見出し右横に「（〇月〇日 更新）」を表示するかどうかを設定します（種別＝ランキングの場合のみ）。
　∟有効／無効：初期値は無効です。有効にすると更新日表示のトグルの下に文字色（カラーピッカー）が表示されます。初期色は赤です。
　∟表示される日付は、ランキング集計バッチが最後に成功した日時です。バッチが一度も成功していない場合や、表示できるカードが0件の場合は表示されません。
　∟見出しが未入力の場合は、ランキングの直前に単独行で表示されます。文字サイズは12px固定で、見出しの文字サイズには追従しません。

表示パターン

レコメンドの表示形式を選択します。

コンバージョンURL

コンバージョンに設定するURLを入力します。

位置

レコメンド差し込み位置を設定します。

レコメンドを表示させたい箇所のid値かclass名を入力します。
└id値から指定：id値を基準として差し込み位置を指定します。「id名」にid値を入力します。
└classから指定：class名を基準として差し込み位置を指定します。
　　　　　　　　「class名」にclass名を、「順番（index）」にそのclass名がHTML内で何番目かを入力します。
　　　　　　　　※class名がサイトに1つしかない場合は、最低でも「1」の数字をいれてください。

差し込み要素

「位置」で指定した要素を基準とし、差し込み箇所を選択します。
　左2つは要素の内側、右2つは要素の外側になります。

配置

差し込みの配置を「左寄せ」「中央寄せ」「右寄せ」から選択します。

メタデスクリプション・OGPの使用設定

・メタディスクリプション使用：説明文が取得できなかった場合、meta-descriptionの内容を使用します。
・OGPタイトル使用：商品名が取得できなかった場合、og:titleの内容を優先的に使用します。
・OGP画像使用：商品画像が取得できなかった場合、og:imageの内容を優先的に使用します。

⑥クリエイティブ設定を行います。

見出し設定(HTML/CSS)

レコメンドに表示する見出しを入力します。

　閲覧履歴：「閲覧履歴」「最近チェックした商品」など
　ランキング：「アクセスランキング」「よく見られている商品」など

▽設定エリア

〇〇からレコメンドしたいものを選択

レコメンドを表示するにあたり、取得するデータの設定が必要です。

id、class、実際の画面からの３つから選択して設定を行います。

■id名からレコメンドしたものを選択

・タイトルid：取得したいタイトルに設定されているidを入力します。
・説明id：取得したい説明文に設定されているidを入力します。
・イメージid：取得したい画像に設定されているidを入力します。
・FREE1id～FREE3id：上記以外で表示させたい要素のidを入力します。

■class名からレコメンドしたものを選択

・タイトルclass：取得したいタイトルに設定されているclassを入力します。
・説明class：取得したい説明文に設定されているclassを入力します。
・イメージclass：取得したい画像に設定されているclassを入力します。
・FREE1class～FREE3class：上記以外で表示させたい要素のclassを入力します。
※「順番（index）」にそのclass名がHTML内で何番目かを入力します。
※class名がサイトに1つしかない場合は、最低でも「1」の数字をいれてください。

■実際の画面からレコメンドしたいものをクリックして選択

・URL：レコメンドしたいページのURLを入力し、「表示」をクリックします。
　入力したURLのページが下部に表示されます。
・タイトルの情報～FREE3の情報：レコメンドしたいものを下の画面から取得します。
　例）タイトルの場合は「タイトルの情報」をクリックしたのち、下の画面からタイトルをダブルクリックします。

⑦レコメンドの表示設定を行います。

レコメンド全体のスタイル

レコメンド全体の要素（.tag-recommend__wrapper）に対してCSSを記述できます。
※styleタグは不要です。例の通り箇条書きで記述してください。

レコメンド全体のスクリプト

レコメンド全体に対するスクリプトを記述できます。
※scriptタグは不要です。

各レコメンドコンテンツのHTML/CSS入力

各レコメンド要素の設定を記述します。

新規作成の段階で、デフォルトのHTML設定値が入力されています。

サイトのUIに合わせてデザインをカスタマイズしてください。

レコメンド取得データを動的にHTMLに格納

閲覧履歴やランキングのイメージパスやURL（商品名）を動的に設定できます。

以下のようにご設定いただくとその箇所に各情報が反映されます。

〇〇からレコメンドしたいものを選択で設定したデータは以下の通りに格納されています。

・タイトル：%title%
・説明文：%description%
・イメージ画像：%img%
・リンク：%url%
・フリーワード：%free1%
・フリーワード：%free2%
・フリーワード：%free3%
・順位：%rank%

⑧取得適用ページURL

データ取得対象ページを設定します。

未設定の場合は、適用URLに登録した全ページが対象になります。

⑨取得除外ページURL

データ取得を除外したいページのURLがあればこちらにURLを設定します。
※レコメンドは「タイトル」のデータが取得できた場合に生成されます。

https://sample.com/item/.*

⑩プレビュー設定

【プレビュー用】データ一括取得ツール

プレビュー表示用の商品情報を登録します。

①商品ページURLを入力

改行で複数登録可能です。

②「一括取得実行」をクリック

③商品情報が登録されます。

取得済みデータは、URL・title・desc・image・free1・free2・free3の列で一覧表示されます。
「現在の検索キー」には、⑥クリエイティブ設定で選択中の取得方式（id指定／class指定）が表示され、その設定に沿ってデータを取得します。

不要になったデータは「全て削除」ボタンでまとめて削除できます。

プレビュー設定
④レコメンドを表示したいページURLを入力します。

※URLからの取得がうまくいかないサイトの場合、「HTMLソースを登録」から任意のHTMLソースを直接貼り付けてプレビュー確認することもできます。

集計処理を実行※ランキングの時のみ表示

ランキングの集計はご施策設定後、夜間バッチ処理で行われます。

動作確認をすぐに行いたい場合、こちらのボタンをクリックすると、その施策限定でランキング集計処理をその場で実行できます。ボタン下部の「最終集計日時」には、直近で集計処理が行われた日時が表示されます。

⑪入力が完了したら「作成」をクリックします。

⑫レコメンド一覧画面に戻り、一覧に追加されていれば作成完了です。

⑬施策を稼働

全ての施策設定が完了したら施策を稼働します。

施策設定画面内の「有効/無効」をON。

もしくは、一覧画面から状態を「稼働中」に変更します。

稼働したら、実際のサイトで表示確認を行なってください。

一覧画面の見方

レコメンド一覧画面の説明をします。

【全体】

ドメイン管理ページ

レコメンドを表示したいドメインを追加したい場合は、こちらのボタンから管理ページに移動できます。

ドメインの管理ページについてはこちら

作成

レコメンド施策の作成ボタンです。

絞り込み機能

設定した施策の絞り込みが行えます。

■ステータス
　施策の状態で絞り込みができます。
　∟全て：設定した全ての施策
　∟稼働中：稼働中の施策のみ
　∟停止中：停止中の施策のみ

■部分一致検索
　施策名の部分一致検索ができます。

■施策IDで検索
　HTML内に埋め込まれる施策ID（例：plug-area-12345）で施策を検索できます。サイトのソースコードに表示されているIDから、それがどの施策か管理画面上ですぐに特定したい場合に使用します。

※絞り込み機能は併用可能です。

施策数

画面右上に「施策数：現在の登録数／上限数」の形式で表示されます。上限に近づいている場合、新規作成前に不要な施策の削除を検討してください。

並べ替え

施策の更新日による並べ替え機能です。
　∟名前順（デフォルト）：名前順（並び順設定がある場合は優先）
　∟新しい順：更新日の新しい順
　∟古い順：更新日の古い順

並び順

施策の並び順を設定できます。

①並び替えたい順に数字を入力します。入力が完了したら「並び順(更新)」をクリックします。

②入力した数字順に施策が並び替わります。

施策

・No.：施策の並び順番号
・施策名：①で設定した施策名です。「設定画面を開く」から変更可能です。
・状態：有効か無効かを表示します。有効の場合は「稼働中」、無効の場合は「停止中」と表示されます。
・機能：②で選択した種別が表示されます。
・ドメイン：②で設定した対象ドメインが表示されます。
・プレビュー：⑩で設定したページをプレビューで確認できます。
・レポート：レポートを確認します。
・作成日：施策を作成した日時
・更新日：施策を更新した日時
・最終更新者：その施策を最後に編集したユーザー名を表示します。複数人で管理画面を運用している場合、誰が設定を変更したか確認する際に使用します。
・設定
　∟設定画面を開く：設定した内容の変更ができます。
　∟複製：施策の複製ができます。
　∟削除：施策を削除できます。※削除した施策を戻すことはできません！

プレビューの画面の操作方法

※PC版の解説になりますが、スマホでも操作は変わりません。

①プレビューアイコンをクリックします。

②プレビューURLに登録したページが開きます。

ダイアログが表示されますが、「OK」をクリックして進んでください。

③レコメンドの表示を確認します。

表示位置・表示されている情報に問題が無いか確認します。

その他、設定中に不明点がございましたらお問い合わせください！