01.レコメンド設定方法
- 646
レコメンド設定方法
①ダッシュボードの「施策」から「レコメンド」をクリックします。
②「作成」をクリックします。
③施策名を登録します。
施策の管理名を入力します。※実際のサイト表示タイトルとは関係ありません。
④URL登録を行います。
レコメンドを稼働させるページを設定します。
表示するサイトのドメインを選択してください。
適用URL：施策を稼働したいページを登録します。
除外URL：適用URLに設定したページの内で、稼働を除外したいページURLを登録します。
表示除外URL：適用URLに設定されているURLのうち、施策を表示しないページURLを登録します。
※データ収集は行いますが、サイト上には施策が表示されません。id/class名の重複で意図しないページに表示される場合にご活用ください。
URL登録の例
ドメイン部分は入力不要です。ドメインの続きのURLを登録してください。
※以下、最後の「」部分がURL登録部分です。
TOPページのみ：https://example.com/ → 「/」
全ページを対象：https://example.com/.* → 「/.*」
固定のアイテムページ：https://example.com/item/001 → 「/item/001」
全アイテムページ：https://example.com/item/.* → 「/item/.*」
⑤配信設定を行います。
有効／無効
有効か無効かを切り替えます。配信する場合は有効にしてください。
出力対象
施策を表示するデバイスを選択します。
種別選択
「閲覧履歴」と「ランキング」どちらのレコメンドを使用するか選択します。
∟閲覧履歴：閲覧した商品の履歴。設定有効後、ページを閲覧したらすぐに表示。
∟ランキング：ユーザーが閲覧したページを集計して、訪問回数が多い順に表示します。
∟集計期間（直近）：収集期間の選択が可能です。用途に合わせてご設定ください。
※「ランキング」を選択した場合、施策設定後データ収集期間中は施策が表示されません。反映までしばらくお時間をいただきます。
表示件数
レコメンドを表示させる件数を設定します。
URLのクエリパラメータを除外
有効にした場合、ランキング集計の際にURLのクエリパラメータを除外します。
URL末尾の文字列だけで同一判定
有効にした場合、URL末尾の文字列だけで同一ページの判定を行います。
カテゴリが異なってもURL末尾の商品IDが同じ場合に、同一商品として集計したい場合にご利用ください。
ランキング集計（バッチ処理）と閲覧履歴の両方に適用されます。
表示パターン
レコメンドの表示形式を選択します。
gallery（ギャラリー）
横一列にレコメンドを表示する形式です。表示件数は自由に設定可能です。
slider（スライダー）
スライダー形式でレコメンドを表示します。
※スライダーを使用する場合は別途設定が必要です。サポートまでお問い合わせください。
コンバージョン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」の数字をいれてください。
「要素内画像検索」「背景画像を表示」について
画像取得に関する機能です。
使用する場合は、設定をON（色付き）にしてください。
■要素内画像検索
取得したい画像にid/class名が設定されていない場合、親要素を指定することで画像が取得できるようになります。
※指定した要素内で一番目にヒットした画像を取得します。
■背景画像を表示
取得したい画像が背景画像（background-image）で設定されている場合でも取得できるようになります。
■実際の画面からレコメンドしたいものをクリックして選択
・URL：レコメンドしたいページのURLを入力し、「表示」をクリックします。
入力したURLのページが下部に表示されます。
・タイトルの情報～FREE3の情報：レコメンドしたいものを下の画面から取得します。
例）タイトルの場合は「タイトルの情報」をクリックしたのち、下の画面からタイトルをダブルクリックします。
⑦レコメンドの表示設定を行います。
レコメンド全体のスタイル
レコメンド全体の要素（.tag-recommend__wrapper）に対してCSSを記述できます。
※styleタグは不要です。例の通り箇条書きで記述してください。
レコメンド全体のスクリプト
レコメンド全体に対するスクリプトを記述できます。
※scriptタグは不要です。
各レコメンドコンテンツのHTML/CSS入力
各レコメンド要素の設定を記述します。
各レコメンド要素とは
以下のように、表示されるレコメンド要素１つ分の表示設定です。
１つ分の表示設定をすることで、同じUIで複数のレコメンドが生成されていきます。
新規作成の段階で、デフォルトのHTML設定値が入力されています。
サイトのUIに合わせてデザインをカスタマイズしてください。
レコメンド取得データを動的にHTMLに格納
閲覧履歴やランキングのイメージパスやURL（商品名）を動的に設定できます。
以下のようにご設定いただくとその箇所に各情報が反映されます。
〇〇からレコメンドしたいものを選択で設定したデータは以下の通りに格納されています。
・タイトル：%title%
・説明文：%description%
・イメージ画像：%img%
・リンク：%url%
・フリーワード：%free1%
・フリーワード：%free2%
・フリーワード：%free3%
・順位：%rank%
順位『%rank%』の使い方
主にランキングで使用します。
レコメンドに１位、２位のように順位を表示したい場所に%rank%を記述します。
生成されるレコメンド順に１〜数字が割り振られます。
コード例：<div class=”rank_num”>%rank%位</div>
▽使用例
⑧取得適用ページURL
データ取得対象ページを設定します。
未設定の場合は、適用URLに登録した全ページが対象になります。
⑨取得除外ページURL
データ取得を除外したいページのURLがあればこちらにURLを設定します。
※レコメンドは「タイトル」のデータが取得できた場合に生成されます。
⑩プレビュー設定
【プレビュー用】データ一括取得ツール
プレビュー表示用の商品情報を登録します。
①商品ページURLを入力
改行で複数登録可能です。
②「一括取得実行」をクリック
③商品情報が登録されます。
プレビュー設定
④レコメンドを表示したいページURLを入力します。
⑪入力が完了したら「作成」をクリックします。
⑫レコメンド一覧画面に戻り、一覧に追加されていれば作成完了です。
⑬施策を稼働
全ての施策設定が完了したら施策を稼働します。
施策設定画面内の「有効/無効」をON。
もしくは、一覧画面から状態を「稼働中」に変更します。
稼働したら、実際のサイトで表示確認を行なってください。
一覧画面の見方
レコメンド一覧画面の説明をします。
【全体】
ドメイン管理ページ
レコメンドを表示したいドメインを追加したい場合は、こちらのボタンから管理ページに移動できます。
ドメインの管理ページについてはこちら
作成
レコメンド施策の作成ボタンです。
絞り込み機能
設定した施策の絞り込みが行えます。
■ステータス
施策の状態で絞り込みができます。
∟全て：設定した全ての施策
∟稼働中：稼働中の施策のみ
∟停止中：停止中の施策のみ
■部分一致検索
施策名の部分一致検索ができます。
※絞り込み機能は併用可能です。
更新日で並べ替え
施策の更新日による並べ替え機能です。
∟デフォルト（選択してください）：名前順（並び順設定がある場合は優先）
∟新しい順：更新日の新しい順
∟古い順：更新日の古い順
並び順
施策の並び順を設定できます。
①並び替えたい順に数字を入力します。入力が完了したら「並び順(更新)」をクリックします。
②入力した数字順に施策が並び替わります。
施策
・No.：施策の並び順番号
・施策名：①で設定した施策名です。「設定画面を開く」から変更可能です。
・状態：有効か無効かを表示します。有効の場合は「稼働中」、無効の場合は「停止中」と表示されます。
・機能：②で選択した種別が表示されます。
・ドメイン：②で設定した対象ドメインが表示されます。
・プレビュー：⑨で設定したページをプレビューで確認できます。
・レポート：レポートを確認します。
・作成日：施策を作成した日時
・更新日：施策を更新した日時
・設定
∟設定画面を開く：設定した内容の変更ができます。
∟複製：施策の複製ができます。
∟削除：施策を削除できます。※削除した施策を戻すことはできません！
プレビューの画面の操作方法
※PC版の解説になりますが、スマホでも操作は変わりません。
①プレビューアイコンをクリックします。
②プレビューURLに登録したページが開きます。
ダイアログが表示されますが、「OK」をクリックして進んでください。
③レコメンドの表示を確認します。
表示位置・表示されている情報に問題が無いか確認します。
スマートフォン版の確認方法
プレビューのスマホアイコンをクリックすると、QRコードが表示されます。
・スマートフォン実機の場合
お使いのスマートフォンでQRコードを読み込み、URLにアクセスしてください。
（TagPlusのログイン情報が必要です。）
・PCで確認したい場合（Chrome）
①ブラウザをChromeにしてTagPlusの管理ページにアクセスします。
②スマホアイコンをクリックしてQRコードを表示します。
③URLバーの右端の「Googleレンズ」をクリックします。
④表示中のQRコードを選択すると、URLが表示されますのでアクセスします。
QRコードが途切れているとURLが表示されません。QRコード全体を囲むように調整してください。
※PCとスマホで操作性が異なる可能性がございます。スマホ実機での表示確認がより確実です。
その他、設定中に不明点がございましたらお問い合わせください！