[jQuery]離脱時のポップアップ表示ギミック

表示内容を指定したいとかPC/SP対応を考えると意外と選択肢が少ない。

望む動作

「LPを表示しました。戻る(離脱)を押したときにポップアップを表示して足止めさせたいです。」簡単に言うとそういう動作。

発火点

離脱を厳密に考えると以下の場合が考えられる。

  • 別のページに遷移する(リンククリック)
  • 戻る(ブラウザバック)
  • 閉じる

リンククリックは該当ページから派生するフローが考えられる(フォームとか)ので、止めたほうがいいし付けるなら対象を選り分けたい。

閉じる動作はページ遷移を超えてブラウザ自体の動作なので、WEBページが操作できる範疇を超えてる。一応対策として、マウスカーソルがブラウザ上部に移動した(ページ表示領域外にはみ出す)ときを発火点にする方法があり、導入してるところとか紹介してる記事とかもある。

滞在時間を延ばすために離脱防止モーダルをJavaScriptで作成する
離脱防止モーダルというテクニックを知っていますか?小手先のテクニックですが、滞在時間やコンバージョン率の数値向上に貢献するようです。この記事では、離脱防止モーダルの作り方について解説しています。コピペすれば、すぐに離脱防止モーダルを実現できます。

だけどマウス操作はPCに限定されるので包括的な手段とは言えない。それに5ボタンマウスだとカーソル移動が不要なので動作を取得できないし、めっちゃ早く動かした場合も拾えないことがある。大体のサイトはスマホ環境からの閲覧が多いので、導入するにせよ最優先ではない感じ。

そうすると戻る動作に焦点が当たる。

表示内容

手っ取り早いのはjsによるalertで、表示できる内容が限られてるのでとてもシンプルに組める。メリットでもある反面デメリットになるので、画像を貼りたいとかリンクを付けたいとか欲張ると使えない。フォーム画面での離脱くらいしか用途はないかもしれない。

似たものでdialogがある。alertよりもできることは増えるけど、iphone環境下で動かなかったので汎用性を求めると却下。

自分の好きなものを表示させたいとなるとhtmlで好きに組むのが一番。何も制限はない。どうやって発火させるかだけを考えたらいい。

発火方法

手っ取り早いところではbeforeunloadを使えばいいんだけど、使えない環境があるらしい。スマホだとダメなんだとか。めんどくさい。

昔ながらのhistoryをいじる手段が鉄板になる。これだとスマホでも動くのでいい感じにできる。

LPからの離脱時にポップアップ表示機能を導入する - Qiita
やりたいこと 広告や他社に出稿してるページから弊社の企業ページにランディングした時、 「戻る」というアクションをした時に離脱防止をするためのポップアップを表示させたい PC・SPでもどちらでも動いて欲しい 前提 jQuer...

コードをそのままコピーして、表示させたい対象にidを付与するか逆にそこだけ書き換えたらOK。jQuery1.6の頃から現役ってすごい。ライブラリを最新にしてもそのまま動いてる。

5ボタンマウスとかの戻る動作においては、ブラウザの戻るボタンが機能しない本来なら戻る先のない新規タブで開いた状態でも強制的にhistoryをねじ込むので、そういう意味で確実にポップアップを表示させることができる。かなり強い。

色々あるように見えて手法は結局限られるので、探すのに時間を掛ける前に一旦鉄板のものを使用するのがいいと思う。それから、余裕があるときに別の手法を探す感じで。

活用時の注意とか

LPに仕込むのが一番の活用方法。言い換えると他では扱いづらい。強制的に「戻る」に1枚噛ませることになるので、WEBサイト内に仕込むと同一サイト内にも関わらず表示されて閲覧がものすごくめんどくさいことになる。「外部ドメインへの遷移時だけ表示」の条件をつけるなら別だけど。

直前に閲覧したページのURL(リファラ情報)を得る方法 - JavaScript TIPSふぁくとりー
JavaScriptを使ってブラウザが保持している「直前に閲覧していたページのURL」を得るには、document.referrerを使います。このリファラ情報のドメイン(ホスト)部分を参照すれば、アクセス者がサイト内を回遊して来たのか、サイト外からリンクを辿って訪れたのかなども区別できます。

一応、遷移元の取得自体は難儀しないので照合して条件を作ってifで囲っちゃえば導入できるっちゃできる。ただ、そこまで欲張って組み上げるもんなのかなーと思ったり。

デモ

一応組んだ。

Document

コメント

タイトルとURLをコピーしました