外部サイトからトップページにアクセスされたときに処理を実行する方法

See the Pen load by oheyril (@oheyril) on CodePen.

const ref = document.referrer;
const myDomain = window.location.origin;
const isInternal = ref.startsWith(myDomain);

if (!isInternal) {
  if (location.pathname === "/") {
    window.addEventListener("load", () => {
      setTimeout(() => {
        // ここに任意の処理を記述
      }, 2000);
    });
  }
}

const ref = document.referrer;
const myDomain = window.location.origin;
const isInternal = ref.startsWith(myDomain);

if (!isInternal) {
  if (location.pathname === "/") {
    window.addEventListener("load", () => {
      setTimeout(() => {
        // ここに任意の処理を記述
      }, 2000);
    });
  }
}

ポイント

• document.referrer
  遷移元のURLを取得します。外部サイトからのアクセスかどうかを判定するのに使います。
• window.location.origin
  現在表示しているページのドメイン情報が入ります。
  startsWithを使って、遷移元が自サイト内か外部サイトかを判定します。
• 条件分岐

if (!isInternal) {
  if (location.pathname === "/") { ... }
}

if (!isInternal) {
  if (location.pathname === "/") { ... }
}

外部サイトからのアクセスかつ、現在表示しているページがトップページ（”/”）の場合にのみ処理が実行されます。

• window.addEventListener("load", ...)
  ページが完全に読み込まれた後に処理を開始します。
  setTimeoutを使うことで、任意の遅延（ここでは2秒）を設定できます。

この構造は、外部からトップページへ訪れたときに、ロード画面や広告、アニメーションなどを表示したい場合に便利です。