離脱防止用ポップアップの作り方( javascript )

離脱防止用のポップアップを調べてみたところ

戻るボタンをフックした実装が主流みたいでした

ポップアップ自体は以前の記事

javascriptとCSSとHTMLでのポップアップの実装

を使用しました。

まず戻るボタンにのみフックしてみます。

window.onload = function() {
	history.pushState(null, null, null);
	window.addEventListener("popstate", function (e) {
		history.pushState(null, null, null);
		//ここでポップアップを呼ぶ
		popupImage();
		return;
	});
};

ブラウザのセッション履歴（URL履歴）の書き換えを行う事で戻るボタンを押した時に関数を実行できる様です。

今回は作ったLPの仕様上、もう少し機能を追加します。

まずユーザーが右クリックしたらポップアップが発動する機能を追加します。

window.onload = function() {
	history.pushState(null, null, null);
	window.addEventListener("popstate", function (e) {
		history.pushState(null, null, null);
		//ここでポップアップを呼ぶ
		popupImage();
		return;
	});
　　　　//追加部分（ユーザーが右クリックしたら発動）
	document.oncontextmenu = function(){
		//ここでポップアップを呼ぶ
		popupImage();
		return false;
	};
};

document.oncontextmenuで右クリックに対してポップアップを呼び出せました。
スマホなら長押しに対応します。
画像を保存したりする動作をするとポップアップが立ち上がる仕組みになっています。

さらにユーザーがタブ移動やホームボタンを押した後に再び同じページを開いたらポップアップを開くようにします。

window.onload = function() {
	history.pushState(null, null, null);
	window.addEventListener("popstate", function (e) {
		history.pushState(null, null, null);
		//ここでポップアップを呼ぶ
		popupImage();
		return;
	});
	//ユーザーが右クリックしたら発動
	document.oncontextmenu = function(){
		//ここでポップアップを呼ぶ
		popupImage();
		return false;
	};
	//ユーザーが再び訪れたら発動
	setVisibilityEvent();
};

function setVisibilityEvent(){
	var hidden, visibilityChange;
	var flag = false;
	if (typeof document.hidden !== "undefined") {
		hidden = "hidden";
		visibilityChange = "visibilitychange";
	}
	else if (typeof document.mozHidden !== "undefined") {
		hidden = "mozHidden";
		visibilityChange = "mozvisibilitychange";
	}
	else if (typeof document.msHidden !== "undefined") {
    	hidden = "msHidden";
    	visibilityChange = "msvisibilitychange";
	}
	else if (typeof document.webkitHidden !== "undefined") {
		hidden = "webkitHidden";
		visibilityChange = "webkitvisibilitychange";
	}
	document.addEventListener(visibilityChange, function(){
		if(document.hidden){
			flag = true;
		}
 		else if(flag){
			flag = false;
			//ここでポップアップを呼ぶ
			popupImage();
		}
	}, false);
}

これはPage Visibility APIという仕組みで実現してるようです。
バックグラウンドからの復帰の際にポップアップを開くようにしています。

しつこいくらいポップアップを出す事ができました。
離脱防止用ポップアップとしてあとは滞在時間に応じて等も考えられますが、
とりあえずこんだけしとけば十分じゃない？
と思いました。