スクロールに合わせて表示するテンプレート

配信ページのコンテンツをある程度まで読了してから表示させたい、ある要素を表示してから接客をしたいという時にご利用いただける、スクロールに合わせてアクションを表示する設定のできるテンプレートを用意しています。テンプレートは以下の4種類用意しています。デザインは画像を当てはめていただく形の通知タイプをメインに用意しています。

  • スクロール率に応じて表示するテンプレート
  • トップから nピクセルで表示するテンプレート
  • ボトムから nピクセルで表示するテンプレート
  • CSSセレクタを指定して表示するテンプレート

それぞれの設定については以下の各項目で説明いたします。

上記テンプレートは、テンプレート一覧からキーワード「スクロール」でフィルターするとご確認いただけます。

__________2017-09-12_17.38.02.png

スクロール率に応じて表示するテンプレート


スクロール率に応じて表示するテンプレートでは、画面全体の高さのうち「トップから何%までスクロールをした時に表示をするか」によって表示を制御します。ヒートマップなどで離脱しやすい傾向にあるスクロール率を把握していたり、ページ閲覧の大体の位置をスクロール率で定義できる場合はこちらの利用が便利です。

「非表示にするスクロール率(%)」までにスクロールした時に非表示にする、にチェックボックスを入れるとその地点まで遷移した時に表示は消える仕様になります。

 

トップから nピクセルで表示するテンプレート


このテンプレートではトップからの距離をピクセル数で指定します。ユーザーに届けたい情報の位置をある程度把握されている時に、その情報まで見てくれたユーザーには接客を表示をする、といった意図をもたせて設定するときに便利です。

「非表示にするピクセル数」までにスクロールした時に非表示にする、にチェックボックスを入れるとその地点まで遷移した時に表示は消える仕様になります。

 

ボトムから nピクセルで表示するテンプレート


このテンプレートではボトムからの距離をピクセル数で指定します。記事の長さは可変なのでスクロール率やトップからの距離で指定が難しいが、フッターなど下からの高さは固定のことが多いのでそういったケースで利用しやすいテンプレートです。

このテンプレートはほぼフッターまで降りてきて表示となるので、非表示になるピクセル数指定はできません。

 

CSSセレクタを指定して表示するテンプレート


このテンプレートではサイト上のCSS要素を指定して表示・非表示をするテンプレートです。サイトの構成を把握している必要があるので少し上級者向けのテンプレートとなりますが、ユーザーに訴求したいエリアで適切に出すことができるので便利なテンプレートです。また、こちらのテンプレートを使うとマウスオーバーでの表示にも対応できます。

テンプレートでは3つのチェックボックスがあります。上の2つは表示条件、3つめは非表示をするかどうかの選択です。

表示条件の2つは併用も可能で「マウスオーバーする」か「スクロールしたとき」という表示条件も可能です。 

 

セレクタは以下の項目で設定します。「セレクタのマージン(px)」という項目は、セレクタの前後何ピクセルという範囲で指定をする項目です。マイナスの値は指定セレクタの上方向で表示、プラスの値は指定セレクタの下方向で表示されます。

 

 

上記の「表示するセレクタ」「非表示にするセレクタ」に入れるセレクタはブラウザのChrome Developer Toolなどを利用するとわかりやすいです。

以下はレコメンドが表示しているエリア(#recommend_area)のセレクタ名を確認したときのキャプチャです。

 

表示・閉じる・再表示の挙動の設定について


 「条件を満たした時に再表示する」にチェックが入っていると、非表示までのスクロール率/px/CSSセレクタに達し、接客アクションが非表示になった後、表示するスクロール率/pxの位置に戻った時に再び表示がされるようになります。
※CSSセレクタ指定の場合は再表示の設定はできません。

設定による、表示/非表示の挙動の違いについては下図をご参照ください。

________.001.jpeg