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. Materialize Tags

    JavaScript

    マテリアルデザインのタグ管理を実装できる「Materialize Tags」

    Materialize Tagsは、マテリアルデザインのタグ管理を実装…

  2. trunk8

    JavaScript

    長い(はみ出した)テキストを「・・・」に置き換えてくれるjQueryプラグイン「trunk8」

    長いテキストやはみ出したテキストを「・・・」といった文字に置き換えてく…

  3. no-image

    JavaScript

    シンプルなイメージカルーセルを実装できる「Boishakh carousel」

    Boishakh carouselはシンプルなイメージカルーセルを実装…

  4. SWAPMYLI

    JavaScript

    スライドが切り替わるタイミングも分かりやすく表示させるギャラリーを実装できるjQueryプラグイン「…

    シンプルでよさそうだったのでメモしときます。スライドが切り替わるタイミ…

  5. zingtouch

    JavaScript

    タッチジェスチャーをカスタマイズできるJSライブラリ「zingtouch」

    Zingtouchは、タッチ対応のデバイスにおける基本的なジェスチャー…

  6. no-image

    JavaScript

    シンプルなイメージスライダーとカルーセルを実装できる「SkySlider」

    SkySliderはシンプルで軽量、そしてレスポンシブにも対応したイメ…

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP