gliojs

JavaScript

viewportから離れた時にイベントをトリガーしてくれる「gliojs」

gliojsは、ページを閲覧している時にマウスがviewport(表示領域)から離れてしまった時にイベント(コールバック)をトリガーしてくれるJSライブラリです。その使用目的ですが、「コンバーション率」を高めるためのものです。「コンバーション率」とはページを閲覧した際に得られる「収穫=成功率」のようなものです。例えば、お問い合わせや資料請求、商品の購入などの制作者側の目的が達成される確率です。ウェブサイトを作成する目的の根幹ですね。
それでは、gliojsについて見ていきましょう。

gliojs

デモ

gliojsは、Chrome・Firefox・IE・Opera・Safariへの対応が確認されています。Safariでも問題ないのは、嬉しいですね。また、Vivaldiの最新バージョンでも挙動の確認ができました。

冒頭でも述べましたが、gliojsを使用すればコンバーション率を高めることができます。その具体的な理由は、マウスの位置がviewport(表示領域)を離れた時に、メッセージをポップアップで表示させるイベントを起こすことができるからです。

例えば、「◯◯に関するご案内を見てみませんか?」「◯◯(企業サイトの場合、展開しているサービスに関すること)についてお困りではないですか?」「初回特典で送料無料」などのページに留まってもらえそうな情報を表示させるといいと思います。ユーザーの注意を確実につかむことができます。

ただし、注意点もあります。ポップアップが表示されると、それを消すためにユーザーは[OK]をクリックしないといけません。やたらと表示させてしまうと、「このサイトうるさい」という悪いイメージを持たれてしまうことも考えられます。なるべく重要な箇所で使用することを気に留めておいてください。

また、viewport(表示領域)の検知は、「上、左上、右上、左下、右下」の5箇所のポイントにより行うことができます。すべてのポイントで使用するのは、まさしく先ほどの「うるさい」に繋がりかねませんので、気をつけましょう。

gliojs

Lightense Images軽量で依存しないピュアJavaScriptライブラリによるズーミング実装「Lightense Images」前のページ

要素を選択するときに直感的な操作を実現する「Multipicker」次のページMultipicker

関連記事

  1. jQuery Notebook
  2. no-image

    JavaScript

    タッチ対応のドロワーコンポーネント「hy-drawer」

    hy-drawerはタッチに対応したドロワーコンポーネントです。And…

  3. jQuery toTop()

    JavaScript

    シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」

    jQuery toTop()はトップへ行くための滑らかなスクロールを実…

  4. infoBox

    JavaScript

    マウスオーバーでインフォメーションボックスを表示させる「infoBox」

    infoBoxはアイコンにマウスオーバーするとインフォメーションボック…

  5. jQuery Quick Modal
  6. Tosrus

    JavaScript

    スマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」

    TosrusというjQueryプラグインを使えば、スワイプやスクロール…

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP