表示位置の指定について

概要

表示位置の指定は、WebサイトHTML内の表示したい位置に表示タグを貼り付けていただく方法の他に「el」「el_append」パラメータによって指定する方法があります。
ここでは、その指定方法について説明します。

前提

以下をご利用いただくためには、基本タグ（recommend.js）が新バージョンであることが必須です。
2023年10月17日以前にお申込みいただいたお客様の基本タグは旧バージョンですので、レコメンドサポート宛てにメールにて「基本タグバージョンアップ希望」の旨ご連絡ください。
※基本タグバージョンアップによるお客様の作業はありません。

表示位置指定

表示タグ内に「el」「el_append」パラメータを追加することで、タグ記述位置に依存せず、HTML内の指定位置に機能表示が可能になります。

「el」パラメータでHTML内の表示位置を指定し、「el_append」パラメータでレコメンド表示パーツのHTML出力位置を指定します。

例：レコメンド表示タグ
レコメンドを表示したいHTML要素のIDが「#recommend_area」 の場合
<div id="recommend_area"></div>
<script>
try{
_rcmdjp._displayRecommend({
type: 'pv',
code: 'XXXXX',
template: 'XXXXX',
el: 'recommend_area',
el_append: 'top'
});
} catch(err) {}
</script>

※「el」「el_append」パラメータの記述がない場合は、通常通り表示タグを記述した位置に表示を行います。

elについて

以下の記述に対応しています。

// ID指定（推奨）
el: 'abc',
el: document.querySelector('#abc'),

// class指定
el: document.querySelector('.abc'),

// 属性指定
el: document.querySelector('[data-info="abc"]'),

// CSSセレクタ指定
el: document.querySelector('div > .abc'),

※class指定の場合、同じclassが複数あると先頭の要素が対象になります。
※指定した要素がページ内に存在しない場合、レコメンドは表示されません。

el_appendについて

elで指定したid, classなどに対し、表示パーツの出力位置を次の5種の中から指定します。

例：elパラメータの値を、HTML内にある <div id="recommend_area"></div> 指定した場合

1. <div id="recommend_area"></div>タグ内の中身をレコメンド表示タグに置き換える

<div id="recommend_area">
 ★このタグ内をレコメンド表示タグに置き換える　→　el_append: 'replace',
 <div class="row">・・・省略・・・</div> //置き換えのため非表示となる
</div>

2. <div id="recommend_area"></div>タグの上に出力

★ここにタグを出力する場合　→　el_append: 'before',
<div id="recommend_area">
  <div class="row">・・・省略・・・</div>
</div>

3. <div id="recommend_area"></div>タグ内の上部に出力

<div id="recommend_area">
  ★ここにタグを出力する場合　→　el_append: 'top',
  <div class="row">・・・省略・・・</div>
</div>

4. <div id="recommend_area"></div>タグ内の下部に出力

<div id="recommend_area">
 <div class="row">・・・省略・・・</div>
 ★ここにタグを出力する場合　→　el_append: 'bottom',
</div>

5. <div id="recommend_area"></div>タグの下に出力

<div id="recommend_area">
  <div class="row">・・・省略・・・</div>
</div>
★ここにタグを出力する場合　→　el_append: 'after',