ナビゲーションフローで 3 ステップの経路を見る方法

フローの左側でページにカーソルを合わせると、そのページから来た訪問者が次にどこへ行ったかがわかります。

1. カスタムディメンション 1: 前のページ

   Analytics で 管理（歯車）→ データの表示 → カスタム定義 → カスタムディメンションを作成。ディメンション名 Previous page。範囲 イベント。イベントパラメータ prev_path。保存。

   prev_path コピー
   Google Analytics を開く ↗

2. カスタムディメンション 2: その前のページ

   同じ画面でもう一度 カスタムディメンションを作成。名前 Page before previous。範囲 イベント。イベントパラメータ prev2_path。保存。

   prev2_path コピー

3. サイトにスクリプトを追加する

   すべてのページで GA4 の後に実行される必要があります。Cloudflare Zaraz があれば zaraz.track 経由、なければ gtag 経由で送信します。WordPress ではコードスニペット系プラグインでフッターに貼り付けます。自前のサイトなら、コーディングエージェントに「seops の nav_step スニペットを追加して」と伝えるだけで十分です。

   <script>
   // seops · three-step navigation (Traffic › Navigation › Flow). Run on every page, after GA4.
   (function () {
     try {
       var S = sessionStorage, h = JSON.parse(S.getItem("nav_hist") || "[]"), c = location.pathname, r = "";
       try { var u = new URL(document.referrer); if (u.host === location.host) r = u.pathname; } catch (e) {}
       if (h[h.length - 1] === c) return; // reload
       if (r && r !== c) {
         var p = { prev_path: r.slice(0, 100), prev2_path: (h[h.length - 1] === r ? h[h.length - 2] || "(entry)" : "(unknown)").slice(0, 100) };
         if (window.zaraz && zaraz.track) zaraz.track("nav_step", p); else if (window.gtag) gtag("event", "nav_step", p);
       }
       S.setItem("nav_hist", JSON.stringify(r ? [r, c] : [c]));
     } catch (e) {}
   })();
   </script>

4. Zaraz を使っている場合は、イベントを GA4 に転送する

   Cloudflare で Zaraz → Tools → Google Analytics 4 → Actions → Create action。Trigger: Create trigger でルール {{ client.__zarazTrack }} Equals nav_step。Action type は Event、イベント名 nav_step。Add field を 2 回: prev_path = {{ client.prev_path }}、prev2_path = {{ client.prev2_path }}。Save。

   Cloudflare Zaraz ↗

5. 確認する

   サイトのページをいくつか閲覧します。GA4 → レポート → リアルタイム に nav_step イベントが表示されるはずです。seops のフローは 1 日以内に埋まり始めます。カスタムディメンションは作成した日以降のデータしか対象になりません。