離脱防止ポップアップ無料配布中！｜アラフィフこそアフィリエイト

たうビー

まず、下のコードをコピーしたら、ワードプレスのフッターウィジェットにカスタムhtmlを入れて、そこにペーストして保存してください。

        HTML Source Code (1/2)
        
    

        <script>
(function(){
  "use strict";

  // ========= ここだけ編集 =========
  var DISABLE_ON_URL_CONTAINS = "/test";           // この文字を含むURLでは完全停止
  var STORAGE_KEY = "exit_popup_empty_shell_v1";   // リセットしたい時はキー名を変える
  var SHOW_ONCE = true;                            // 1セッション1回
  var DISABLE_ON_MOBILE = false;                   // ★スマホでも有効にするなら false
  var TEMPLATE_ID = "exitPopupContentTemplate";    // 中身HTMLの置き場ID

  // 追加トリガー（スマホでも効く）
  var FAST_SCROLL_PX_PER_SEC = 10000;               // 異常に早いスクロール判定（px/秒）
  var SCROLL_IDLE_MS = 15000;                      // 操作（スクロール等）が止まってから出すまで（ms）
  var ENABLE_INITIAL_IDLE = true;                  // true: 何も操作しなくてもSCROLL_IDLE_MS後に出す
  // ===============================

  // 配布ページでは停止
  try{
    if (DISABLE_ON_URL_CONTAINS && location.href.indexOf(DISABLE_ON_URL_CONTAINS) !== -1) return;
  }catch(e){}

  // モバイル無効
  var isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
  if (DISABLE_ON_MOBILE && isMobile) return;

  // 1回だけ判定（起動直後：すでに出してたら完全停止）
  if (SHOW_ONCE){
    try{ if (sessionStorage.getItem(STORAGE_KEY) === "1") return; }catch(e){}
  }

  // --- 空っぽの箱だけ作る ---
  var overlay = document.createElement("div");
  overlay.style.cssText =
    "display:none;position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.55);" +
    "align-items:center;justify-content:center;padding:16px;box-sizing:border-box;";

  var box = document.createElement("div");
  box.style.cssText =
    "position:relative;max-width:560px;width:100%;background:#fff;border-radius:14px;" +
    "box-shadow:0 12px 40px rgba(0,0,0,.25);padding:16px 18px 18px;" +
    "font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans JP',sans-serif;";

  var closeBtn = document.createElement("div");
  closeBtn.textContent = "×";
  closeBtn.style.cssText =
    "position:absolute;top:10px;right:12px;cursor:pointer;font-size:22px;" +
    "line-height:1;color:#666;user-select:none;";

  var content = document.createElement("div");
  content.style.cssText = "margin-top:18px;";

  box.appendChild(closeBtn);
  box.appendChild(content);
  overlay.appendChild(box);
  document.body.appendChild(overlay);

  function hide(){
    overlay.style.display = "none";
  }

  function fillFromTemplate(){
    var tpl = document.getElementById(TEMPLATE_ID);
    if(!tpl) return false;
    content.innerHTML = tpl.innerHTML;
    return true;
  }

  // ★同一ページ内の多重発火（連続イベント）を確実に止めるロック
  var hasShownOnThisPage = false;

  function show(){
    // 1) 同一ページでは1回だけ（先にロック）
    if (hasShownOnThisPage) return;
    hasShownOnThisPage = true;

    // 2) セッション全体でもう出してたら出さない
    if (SHOW_ONCE){
      try{
        if (sessionStorage.getItem(STORAGE_KEY) === "1"){
          return;
        }
      }catch(e){}
    }

    // 3) テンプレが無いページでは出さない（ロック解除）
    if (!fillFromTemplate()){
      hasShownOnThisPage = false;
      return;
    }

    // 4) 表示確定：セッションに記録
    if (SHOW_ONCE){
      try{ sessionStorage.setItem(STORAGE_KEY, "1"); }catch(e){}
    }

    overlay.style.display = "flex";
  }

  // 閉じる操作
  overlay.addEventListener("click", function(e){
    if (e.target === overlay) hide();
  });
  closeBtn.addEventListener("click", hide);
  document.addEventListener("keydown", function(e){
    if (e.key === "Escape") hide();
  });

  // =========================================================
  // 1) Exit intent（PC向け：上にマウスが抜けたら）
  // =========================================================
  var armed = false;
  function arm(){ armed = true; window.removeEventListener("mousemove", arm); }
  window.addEventListener("mousemove", arm, { passive:true });

  document.addEventListener("mouseout", function(e){
    if(!armed) return;
    var to = e.relatedTarget || e.toElement;
    if(to) return;
    if(typeof e.clientY === "number" && e.clientY <= 0) show();
  }, { passive:true });

  // 手動起動（必要なら）
  window.startExitPopup = show;

  // =========================================================
  // 2) ブラウザバック（戻る操作）で表示（PC/スマホ）
  // =========================================================
  try{
    history.pushState({ __exit_guard: true }, document.title, location.href);
    window.addEventListener("popstate", function(){
      show();
      // 連続戻るでも拾えるように押し戻す
      history.pushState({ __exit_guard: true }, document.title, location.href);
    });
  }catch(e){}

  // =========================================================
  // 3) 異常に早いスクロール / 4) 一定時間操作なし（PC/スマホ）
  // =========================================================
  var lastY = window.scrollY || 0;
  var lastT = Date.now();

  function checkFastScroll(){
    var nowY = window.scrollY || 0;
    var nowT = Date.now();
    var dy = Math.abs(nowY - lastY);
    var dt = Math.max(1, nowT - lastT); // ms
    var speed = dy / (dt / 1000);       // px/sec
    lastY = nowY;
    lastT = nowT;
    if (speed >= FAST_SCROLL_PX_PER_SEC) show();
  }

  var idleTimer = null;
  function resetIdleTimer(){
    if (SCROLL_IDLE_MS <= 0) return;
    if (idleTimer) clearTimeout(idleTimer);
    idleTimer = setTimeout(function(){ show(); }, SCROLL_IDLE_MS);
  }

  // 「操作」とみなすイベント（スマホはタップ/スワイプも拾う）
  ["scroll","touchstart","touchmove","mousemove","keydown","click"].forEach(function(evt){
    window.addEventListener(evt, function(){
      if(evt === "scroll") checkFastScroll();
      resetIdleTimer();
    }, { passive:true });
  });

  // 初回タイマー（ページ表示後、何も操作しなくても一定時間で出す）
  if (ENABLE_INITIAL_IDLE) resetIdleTimer();

})();
</script>

    

たうビー

次に、下のコードをコピーして、内容をお好みで修正したあと、表示させたいページに貼り付けてください。

        HTML Source Code (2/2)
        
    

        <!-- ポップアップの中身（ここをHTMLだけで自由に編集） -->
<div id="exitPopupContentTemplate" style="display:none;">
  <!-- ===============================
    ここから下に、自由にHTMLを書いてOK
    例：見出し、画像、ボタン、フォームなど全部OK
  =============================== -->

  <!-- 例（消してOK）
  <h2>ここにタイトル</h2>
  <p>ここに本文</p>
  <a href="https://example.com" target="_blank" rel="noopener">ボタン</a>
  -->
</div>

    

たうビー

カンタンなトリセツもご用意しています。必要ならば下のフォームからご請求ください！