表示位置の指定について

概要

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

前提

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

表示位置指定

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

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

例：レコメンド表示タグ
<script>
try{
_rcmdjp._displayRecommend({
  type: 'pv',
  code: 'XXXXX',
 template: 'XXXXX',
 el: document.getElementsByTagName('XXXXX')[0],
  el_append: 'top'
});
} catch(err) {}
</script>

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

elについて

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

HTMLタグを指定する場合
el: document.querySelectorAll('abc')[0],
el: document.getElementsByTagName('abc')[0],

IDを指定する場合
el: document.querySelectorAll('#abc')[0],
el: document.getElementById('abc'),
el: 'abc'

classを指定する場合
el: document.querySelectorAll('.abc')[0],
el: document.getElementsByClassName('abc')[0],

name属性を指定する場合
el: document.getElementsByName('abc')[0],

CSSセレクタで指定する場合
el: document.querySelectorAll('[data-info="abc"]')[0],
el: document.querySelectorAll('div > .content')[0], 

el_appendについて

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

例：elパラメータの値を、HTML内にある「id="recommend"」指定した場合

1. id=”recommend”タグ内の中身をレコメンド表示タグに置き換える

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

2. id=”recommend”タグの上に出力

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

3. id=”recommend”タグ内の上部に出力

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

4. d=”recommend”タグ内の下部に出力

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

5. id=”recommend”タグの下に出力

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