JSパーツを改修&追加しました(C-24.0717)
＜目次＞
目次[非表示]
JSパーツの改修①（バナー：JS）
※各自、デモの挙動・留意事項ご確認をお願いします。
バナーのJSパーツに「一定期間バナーの再表示禁止 」と「フッター上で追従停止」を付与できるようになりました。
現在バナーを表示するJSパーツはタイミングやきっかけの差分はあれど一部を除き、「バナーを表示する」挙動のみ実装されていました。
今回の改修で、それぞれのバナー表示JSパーツは自由に「バナーの再表示禁止期間の設定」と「指定したフッタークラスの直上でバナーを停止」の２種類のオプションがつけられるようになりました。
オプション①「一定期間バナーの再表示禁止 」設定とは
ウェブサイトを見ているときに、一度表示されたバナーをページ巡回中に何度も表示されるのを防ぐ仕組みのことです。
初回に表示して、バナーの「×（バツ印）」をクリックし、バナーを閉じてもバナーの再表示禁止期間が設定されていれば、設定されている期間はバナーが表示されません。
オプションではデフォルトで30分間の再表示を禁止にしています。
時間や日数は変更することが可能です。
✳︎注意点✳︎
サイト内にバナーを複数設置している場合、バナーAは再表示禁止３日間、バナーBは30分間再表示禁止。のように個別で同一セッション内の再表示を禁止設定することはできません。
オプション②「指定したフッタークラスの直上でバナーを停止」とは
ウェブサイトを下にスクロールしていくと、表示されているバナーは追従してついてきます。
このオプションを設定しているとクラスを指定しているフッターの直上10pxの位置で追従が止まります。
このオプションを使うことで、バナーがフッターに被らず、フッターの視認性を維持できます。
✳︎注意点✳︎
フッターのクラス指定は２つまで可能です。
そのため３種類以上のフッターを同一アカウント内で使い分けている場合は、JSをユニークに変更する必要があります。
設定方法
【ディレクター向け】
オプションはデフォルトでOFFになっています。事前に内容を確認し、それぞれの設定をコーダー依頼時に指定してください。
注意点がありますので、実装可否を事前にご確認ください。
- オプション①「一定期間バナーの再表示禁止」を使用したい。
→ 再表示禁止期間をご指示ください（デフォルト30分） - オプション②「指定したフッタークラスの直上でバナーを停止」
→ ONにする旨をお伝えください。共通フッター以外で使用する場合はその旨もお伝えください。
【コーダー向け】
JS内の指定箇所をtrueに変更することで各オプションが使用可能です。
使用したくない場合は、特に触らないで大丈夫です。
詳細は各ページをご確認ください。
ディレクターから指示がでた場合は指定箇所をtrueに設定してください。
改修したバナー表示系JSパーツは４つです。
バナー（3秒後に表示）
バナー（特定のセクションを超えたら表示）
（旧： 特定のセクションを超えたら表示）
バナー（スクロール量20％でバナー表示）
（旧：バナー（閉じるボタンクリック後、同一セッション内では非表示）
バナー （MVの高さを超えたら表示） NEW！
JSパーツの改修②（AND検索 ：CSS）
※各自、デモの挙動・留意事項ご確認をお願いします。
「絞り込む」ボタンにデフォルトで下矢印がつくようになりました。
JSパーツの追加（MVの高さを超えたらバナーを表示）
※各自、デモの挙動・留意事項ご確認をお願いします
バナーのJSパーツに「MVの高さを超えたらバナーを表示」が追加されました。
このパーツはスクロールが指定したクラスのMVの高さを超えたらバナーが表示されます。
このバナーについても上記のオプション設定が可能です。
デフォルトで共通のTOPMVのクラス、下層MVクラスが入力されています。
TOPのMV、下層のMVの他に、MV上に要素がきた場合のことを考慮し、MV上に設定している要素のクラスを指定することも可能です。
const topMVClass = '.mv_custom'; /* MVクラス /
const subPageMVClass = '.sub-page-custom'; / 下層MVクラス /
const sectionAboveMVClass = '.xxxxxxxxxx'; / MV上のクラス（未入力可） */
