表示内容を指定したいとかPC/SP対応を考えると意外と選択肢が少ない。
望む動作
「LPを表示しました。戻る（離脱）を押したときにポップアップを表示して足止めさせたいです。」簡単に言うとそういう動作。
発火点
離脱を厳密に考えると以下の場合が考えられる。
- 別のページに遷移する（リンククリック）
- 戻る（ブラウザバック）
- 閉じる
リンククリックは該当ページから派生するフローが考えられる（フォームとか）ので、止めたほうがいいし付けるなら対象を選り分けたい。
閉じる動作はページ遷移を超えてブラウザ自体の動作なので、WEBページが操作できる範疇を超えてる。一応対策として、マウスカーソルがブラウザ上部に移動した（ページ表示領域外にはみ出す）ときを発火点にする方法があり、導入してるところとか紹介してる記事とかもある。
だけどマウス操作はPCに限定されるので包括的な手段とは言えない。それに5ボタンマウスだとカーソル移動が不要なので動作を取得できないし、めっちゃ早く動かした場合も拾えないことがある。大体のサイトはスマホ環境からの閲覧が多いので、導入するにせよ最優先ではない感じ。
そうすると戻る動作に焦点が当たる。
表示内容
手っ取り早いのはjsによるalertで、表示できる内容が限られてるのでとてもシンプルに組める。メリットでもある反面デメリットになるので、画像を貼りたいとかリンクを付けたいとか欲張ると使えない。フォーム画面での離脱くらいしか用途はないかもしれない。
似たものでdialogがある。alertよりもできることは増えるけど、iphone環境下で動かなかったので汎用性を求めると却下。
自分の好きなものを表示させたいとなるとhtmlで好きに組むのが一番。何も制限はない。どうやって発火させるかだけを考えたらいい。
発火方法
手っ取り早いところではbeforeunloadを使えばいいんだけど、使えない環境があるらしい。スマホだとダメなんだとか。めんどくさい。
昔ながらのhistoryをいじる手段が鉄板になる。これだとスマホでも動くのでいい感じにできる。
コードをそのままコピーして、表示させたい対象にidを付与するか逆にそこだけ書き換えたらOK。jQuery1.6の頃から現役ってすごい。ライブラリを最新にしてもそのまま動いてる。
5ボタンマウスとかの戻る動作においては、ブラウザの戻るボタンが機能しない本来なら戻る先のない新規タブで開いた状態でも強制的にhistoryをねじ込むので、そういう意味で確実にポップアップを表示させることができる。かなり強い。
色々あるように見えて手法は結局限られるので、探すのに時間を掛ける前に一旦鉄板のものを使用するのがいいと思う。それから、余裕があるときに別の手法を探す感じで。
活用時の注意とか
LPに仕込むのが一番の活用方法。言い換えると他では扱いづらい。強制的に「戻る」に1枚噛ませることになるので、WEBサイト内に仕込むと同一サイト内にも関わらず表示されて閲覧がものすごくめんどくさいことになる。「外部ドメインへの遷移時だけ表示」の条件をつけるなら別だけど。
一応、遷移元の取得自体は難儀しないので照合して条件を作ってifで囲っちゃえば導入できるっちゃできる。ただ、そこまで欲張って組み上げるもんなのかなーと思ったり。
デモ
一応組んだ。
コメント