exit-intent-popups

離脱インテントポップアップ

概要

離脱インテントポップアップは、訪問者がサイトを離れようとしているタイミングを検知します。デスクトップでは、ブラウザーのアドレスバーに向かうマウスの素早い動きを追跡し、対象を絞ったオファーを表示します。適切なターゲティングと表示頻度の制限を設定すれば、本来失われるはずだった訪問者の5～10％を呼び戻せます。専用のポップアップアプリを使えば、検知ロジック、A/Bテスト、ESPとの連携をすべて処理できるため、カスタムコードは不要です。

このスキルを使う場面

• サイトの直帰率が60％を超え、コンバージョン率が2％を下回っている場合
• セッション中にマーケティングリスト用のメールアドレスを収集する場合
• まだ購入に至っていない新規訪問者に初回購入割引を提供する場合
• 離脱前に、チェックアウトを放棄した訪問者へカート内の商品を知らせる場合
• ポップアップのオファーの種類（割引率、送料無料、無料ギフト）をA/Bテストする場合

基本手順

ステップ 1：適切なポップアップツールを選ぶ

プラットフォーム	おすすめツール	理由
Shopify	Klaviyo Forms（無料、Klaviyoと同期）またはPrivy（月額30ドル）	Klaviyo FormsはKlaviyoのフローと直接連携します。PrivyにはA/Bテスト、固有のクーポンコード、詳細な分析機能が含まれています
WooCommerce	OptinMonster（月額9ドル）またはPopup Maker（無料）	OptinMonsterには離脱インテント検知、A/Bテスト、WooCommerce連携があります。Popup Makerはよりシンプルで無料です
BigCommerce	JustunoまたはKlaviyo Forms	どちらもBigCommerceとのネイティブ連携と離脱インテント検知に対応しています
カスタム／ヘッドレス	Klaviyo Forms（JavaScript埋め込みを使用）またはカスタム実装	Klaviyo FormsはJavaScriptスニペットを使って、あらゆるサイトで動作します

ステップ 2：離脱インテントの検知とターゲティングを設定する

ほとんどのポップアップツールには、離脱インテント検知機能が組み込まれています。重要なのは、訪問者に不快感を与えないよう適切に設定することです。

---

Klaviyo Formsを使ったShopify

1. Klaviyoで、Sign-up Forms → Create Formに移動します
2. フォームタイプとしてPopupを選択します
3. Targetingで次のように設定します：
   • Display when：Exit intent（マウスがブラウザーの上部に移動したとき）
   • Delay：有効化までのページ滞在時間を最低5秒に設定
   • Frequency：14日ごとに1回表示（KlaviyoがCookieを使って管理します）
4. Targeting → Conditionsで、次の条件を追加します：
   • 表示するページ：ホームページ、商品ページ、コレクションページ
   • 表示しないページ：/checkout、/cart、/account
   • 表示しない対象：既存の購読者（Klaviyoは識別済みのプロフィールについて自動で確認します）
5. Form Contentでオファーを設定します：
   • メールアドレスを収集する場合：「初回注文が10％オフ」＋メールアドレス入力欄＋GDPR同意チェックボックス
   • カートをリマインドする場合：「カートに商品があります。購入を完了してください」＋カートに戻るリンク
6. Success Actionで割引コードを作成します：
   • Shopify → Discountsに接続します。Klaviyoは、1回限り使用できる10％オフの固有コードを自動作成できます
   • これらのコードは成功メッセージに表示され、購読者のプロフィールにも自動で同期されます

---

Privyを使ったShopify

1. Shopify App StoreからPrivyをインストールします
2. Privy → Displays → New Display → Popupに移動します
3. When to showで「Exit intent」を選択します
4. Who to show it toで、次のように設定します：
   • 新規訪問者のみ（ログイン済みの顧客には表示しない）
   • サイト滞在時間を最低30秒に設定
   • チェックアウト中は表示しない
   • 表示頻度の上限：14日
5. Offersで、PrivyがShopifyの割引システムと同期する固有のクーポンコードを自動生成します
6. IntegrationsでPrivyをKlaviyoまたはMailchimpに接続し、リストを自動同期します

---

WooCommerce と OptinMonster

1. WordPress ディレクトリから OptinMonster プラグインをインストールします
2. 新しいキャンペーンを作成します：ポップアップ → 離脱インテント
3. 表示ルールで、次のように設定します：
   • 離脱インテントトリガー：感度 = 中
   • ページ滞在時間：最短 30 秒
   • ページターゲティング：ホームページ、ショップ、商品ページを含め、チェックアウト、カート、マイアカウントを除外
   • 表示頻度：14 日間の Cookie 抑制（OptinMonster のデフォルト）
4. 連携で、Mailchimp、Klaviyo、またはお使いのメールプロバイダーに接続します
5. 固有のクーポンコードを使う場合：WooCommerce → クーポンからクーポンを作成し、成功メッセージにコードを表示します（OptinMonster の無料プランでは固有コードは自動生成されません）

---

BigCommerce と Justuno

1. BigCommerce App Marketplace から Justuno をインストールします
2. Justuno → プロモーション → 新しいポップアップに移動します
3. ビジュアルビルダーで、離脱インテントのトリガー、ターゲティングルール、A/B テストのバリエーションを設定します
4. Justuno は Klaviyo および Mailchimp と連携してリストを同期します

---

カスタム／ヘッドレス

カスタム構築の場合、Klaviyo Forms はあらゆる Web サイトで利用できます：

1. Klaviyo JavaScript スニペットをサイトに追加します
2. Klaviyo → 登録フォーム → フォームを作成に移動し、上記のように設定します
3. Klaviyo が離脱検知、表示頻度の制限、リスト同期を処理します

ポップアップの動作を完全に制御する必要がある場合（カスタムの離脱検知ロジック）：

function initExitIntent({ threshold = 20, delay = 5000, onExitIntent }) {
  let activated = false;

  setTimeout(() => {
    document.addEventListener('mouseleave', (e) => {
      if (e.clientY <= 0 && !activated) {
        activated = true;
        onExitIntent();
      }
    });
  }, delay);

  // Mobile: use visibilitychange instead of mouseleave
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden' && !activated) {
      activated = true;
      onExitIntent();
    }
  });
}

// Check frequency cap using localStorage
function shouldShowPopup(popupId, capDays = 14) {
  const lastSeen = localStorage.getItem(`popup_seen_${popupId}`);
  if (!lastSeen) return true;
  return (Date.now() - parseInt(lastSeen)) > capDays * 86400000;
}

ステップ 3：オファーを設定して A/B テストを実施する

最も効果的なのは、オファーの種類をテストすることです。一度に実施する A/B テストは 1 つにします：

オファーの種類	最適な用途	一般的なメールアドレス獲得率
初回注文 10% オフ	一般商品	ポップアップ表示の 3～8%
送料無料	AOV の高いストア（送料が高額）	ポップアップ表示の 4～9%
購入特典の無料ギフト	美容、サプリメント	ポップアップ表示の 5～10%
コンテンツオファー（「ガイドをダウンロード」）	コンテンツを提供する B2C ブランド	2～5%

Klaviyo／Privy の場合：オファーの異なるフォームを 2 種類作成し、トラフィックを 50／50 に分割します。2 週間にわたってコンバージョン率を測定してから、成果の高い方を選びます。

ステップ 4：固有の割引コードを生成する（汎用コードは使わない）

WELCOME10 のような汎用コードはクーポンサイトで共有され、アトリビューションが膨らみます：

• Shopify + Klaviyo：Klaviyo は Shopify の固有の 1 回限りの割引コードを自動生成します。フォームの成功時アクション設定で有効にしてください
• Shopify + Privy：Privy は Shopify の割引システムに接続し、固有コードを自動生成します
• WooCommerce：WooCommerce Unique Coupon Generator プラグインを使うか、顧客ごとの使用回数制限を設定した汎用コードを作成します

ベストプラクティス

• 必ずコントロール／ホールドアウトグループ（20～30%）を含めます。ホールドアウトがなければ、ポップアップが価値をもたらしているのか、それともいずれ発生していたコンバージョンを取り込んでいるだけなのか判断できません（ほとんどのポップアップアプリがこの機能に対応しています）
• 表示開始まで最低 5 秒待ちます。すぐに表示されるポップアップは、訪問者に読まずに閉じる習慣をつけてしまいます
• 表示頻度は最低 14 日に設定します。主要なポップアップアプリはすべて Cookie を使って自動的に処理します。有効になっていることを確認してください
• メール同意のチェックボックスを事前にオンにしないでください。GDPR では明示的なオプトインが求められており、事前にチェックされたボックスは EU では有効な同意とみなされません
• 1 回限りの固有コードを生成します。汎用コード（WELCOME10）はクーポンサイトで共有されます
• すでに登録済みの訪問者を除外します。Klaviyo はこれを自動で確認します。それ以外のツールでは、Cookie を使って表示対象から除外します

よくある問題

問題	解決策
ページの読み込み直後にポップアップが表示される	ターゲティング設定で、最低5秒の遅延と最低スクロール深度（20％）を設定します
同じユーザーに訪問のたびにポップアップが表示される	ポップアップアプリで表示頻度の上限設定が有効になっていることを確認します（Klaviyo：14日間、Privy：設定可能、OptinMonster：設定可能）
モバイルで離脱インテントが作動する	モバイルではスクロールベースまたは時間ベースのトリガーに切り替えます。ほとんどのツールでは、離脱インテントを選択すると自動的に切り替わります
ポップアップがコンバージョンに役立っているか測定できない	ポップアップアプリで対照群を使ったA/Bテストを有効にします。ほとんどのアプリで標準機能として対応しています
ポップアップ経由の配信停止率が高い	オファーの魅力が足りません。送料無料と割引率を比較テストします。また、登録後にメールが頻繁に送信されすぎていないかも確認します

関連スキル

• @cart-abandonment-recovery
• @email-marketing-automation
• @conversion-rate-optimization
• @push-notifications
• @first-party-data-collection