WordPressサイトで、ユーザーが離脱しようとした際にLINE公式アカウントへの誘導ポップアップを表示する機能を実装しました。

実装の目的

申込みフォームページで、離脱時にLINE公式アカウントへの誘導を表示し、コンバージョン向上を目指します。

実装の構成

1. ページごとの表示制御

カスタムフィールド show_exit_popup で表示ON/OFFを切り替え。ページごとに設定可能。

2. ショートコードでHTML生成

[exit_prevention_popup] で画像とリンクを含むHTMLを生成。画像パスとリンク先URLをパラメータで指定できます。

3. アセットの読み込み制御

ショートコード使用時のみCSS/JSを読み込むようにし、不要なページでは読み込まないようにしました。

4. 離脱検知の仕組み

2つの方法で離脱を検知します。

方法1: マウスがページ上部外に出た時

• mouseleave でマウスがページ上部（タブバー方向）へ移動したことを検知
• タブを閉じる、別タブへ移動、ブラウザを閉じるなどの動作を検知

方法2: ブラウザの戻るボタン

• History API（pushState/popstate）を使用
• ダミーの履歴エントリを追加し、戻るボタンで popstate が発火したらポップアップを表示

5. モーダル表示の制御

• CSSで初期は非表示（display: none）
• JavaScriptで active クラスを追加すると表示（display: flex）
• 1回のみ表示する仕組み（hasShown フラグ）

実装で気をつけたポイント

• ショートコードとグローバル変数でアセット読み込みを制御
• History APIで戻るボタンを検知する仕組み
• 1回のみ表示する制御
• 不要なページではアセットを読み込まない

今後の改善点

• 離脱検知の精度向上（キーボード操作なども検知できるか検討）
• 表示タイミングの最適化（一定時間滞在後にのみ表示するなど）
• アニメーションの追加

まだ改善の余地はありますが、基本的な機能は動作しています。段階的に改善していきます。