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.stepper.js

    JavaScript

    マウス操作で値の増減ができるjQueryプラグイン「jquery.stepper.js」

    jquery.stepper.jsは、マウス操作から手軽に値の増減を行…

  2. no-image
  3. VenoBox

    JavaScript

    画像・Google マップ・YouTubeなどを埋め込めるLightbox風jQueryプラグイン「…

    VenoBoxは色んなコンテンツを埋め込めるLightbox風jQue…

  4. Morphext

    JavaScript

    複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

    MorphextというjQueryプラグインを使えば、複数テキストをア…

  5. Albumize

    JavaScript

    アルバムみたいな画像コレクションのギャラリーを管理・実装できるjQueryプラグイン「Albumiz…

    Webページにある画像コレクションをアルバムのようなギャラリーに管理・…

  6. curtains.js

    JavaScript

    カーテンがヒラヒラ動くようなテクスチャ面を実装できる「curtains.js」

    curtains.jsはカーテンがヒラヒラと波打つ動きのようなテクスチ…

最近の記事

  1. ハンガリー産 純粋アカシアはちみつ
  2. COMOLI ダブルレイヤー L/Sクルー
  3. メキシコ オアハカ
  4. ドリップ
  5. チェリー

アーカイブ

PAGE TOP