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 toTop()

    JavaScript

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

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

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる

    すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人なが…

  3. Section Scroller

    JavaScript

    セクションごとに自動でスクロールしてくれるボタン実装「Section Scroller」

    Section Scrollerは、セクションごとにスムーズにスクロー…

  4. Guardian

    JavaScript

    フォームにバリデーションを実装できるjQueryプラグイン「Guardian」

    Guardianはフォームにバリデーション機能を実装することができるj…

  5. jR3DCarousel

    JavaScript

    レスポンシブな3Dカルーセルを実装できる「jR3DCarousel」

    jR3DCarouselはレスポンシブな3Dカルーセルを実装できるjQ…

  6. Switchery

    JavaScript

    チェックボックスをiOS7のようなスタイルにしてくれるjQueryプラグイン「Switchery」

    SwitcheryというjQueryプラグインを使えば、チェックボック…

最近の記事

  1. グーディオ オーガニックチョコレート(ミント)
  2. チキンバターマサラとシュリンプバターマサラ
  3. 恵比寿のダ・ミケーレのピザ
  4. ハムエッグホットサンドとドリップコーヒー
  5. 高輪ゲートウェイ駅のスタバ

アーカイブ

PAGE TOP