ブラウザバック バナー表示

Question

解決したいこと

サイトからユーザーが出ようとした時に（ページバック）バナーを表示したい。

現状

Chromeではサイトから出る時のみバナーを表示できています。
ですが、別ブラウザ(safari・firefox)や別デバイス(iphoneなど)では、別のタイミングでバナーが表示されてしまいます。
Chrome以外では、ランディングページからサイト内リンクに飛んだ後、ランディングページに戻ったタイミングでバナーが表示されてしまう（ランディングページからサイトを出るタイミングでバナーを出したい）。

検証

Chromeのみ機能するのは、ページバックするときに再読み込みされるからのようです。
Chromeと同じようなページバックを実装しようと、location.reloadなどを試みましたが、これだとreferrerの情報が消えてしまい、Chromeと同じような挙動にはなりませんでした。

お力添えよろしくお願い致します。

  const current_url = window.location.hostname;
  let before_url;
  if ( document.referrer ) {
    before_url = document.referrer.match(/^https?:/{2,}(.*?)(?:/|?|#|$)/)[1]; //リンク元ドメイン
  } else {
    before_url =document.referrer = "○○○○○○○○○○○○○○○○"
  }
  if ( current_url != before_url ) { //ランディングページか判定
    history.pushState(null, null, location.href); //戻る制御
    window.addEventListener('popstate', (e) => {
      document.getElementById("campaign-banner-modal").style.display = "block";
      document.getElementById("campaign-banner-close").onclick = function() {
        document.getElementById("campaign-banner-modal").style.display = "none";
        document.cookie = "visited=true";
        window.location.href = LINK_SOURCE_URL;
      };  
    });
  }

Answer 1

ランディングページから別サイトに出る時のみ発火させることができました。
pushStateの第一引数を任意の値に変えて、popstateのe.stateの値がnullの時のみ発火という処理を書くことで解決できました。
まだ、別デバイスや様々な状況を検証できていないので確実ではないですが、、
検証次第、完成したソースコードを載せたいと思います！

Answer 2

pagehideイベント、もしくはunloadイベントで遷移前に処理を行えます。

ただし、iosの厄介なところはpagehide、unloadイベントはbeforeunloadではないという点です。
beforeunloadでは文字通りの遷移前の処理のため、遷移の処理がまだ実行されていません。
beforeunloadの処理が終わってから遷移に移ります。
pagehide、unloadは遷移処理中というイメージの方が近いと思います。
遷移処理中のため、遷移の中断やスリープのように遅延はできなかったと思われます。

https://qiita.com/ta__ho/items/937257c3c9891bdf2d38

Comments

[mizo777]

ご回答ありがとうございます。
遷移前に処理をするのは、現在可能なのですが
タイミングを変えたいというのが解決したい問題です。
説明が悪く申し訳ありません。
現在のページがランディングページであること、戻る先のページがドメイン外のページである場合にと実装したのですが。これだとランディングページに戻った際に発火しています。
このタイミングをランディングページから戻る処理を行った時に発火できるようにしたいです。
Chrome以外では、戻る処理をした際にリロードされないので挙動が変わるようです。