New Relic Browser で画面遷移した時にカスタム属性の値は引き継がれる？

「SPAだと属性は勝手に引き継がれる？」New RelicのsetCustomAttributeの挙動をMPAと比較検証しました。SPAならではのメリットと、意外な落とし穴（リロード時の消失）についてまとめます。

New Relic Browser を利用していると、ユーザー種別や会員ランクなどの情報を setCustomAttribute で付与して、分析に使いたくなるシーンがよくあります。

javascript

// 例：ユーザータイプを属性としてセット
newrelic.setCustomAttribute('userType', 'premium');

ここで一つ疑問が湧きました。
「これ、画面遷移してURLからパラメータが消えた後、セットした属性値はどうなるの？」

今回は、Single Page Application(SPA) と Multi-Page Application(MPA) のようなWebサイトの作りによってこの挙動がどう異なるのかを検証し、実装時の注意点をまとめました。

最新のアップデートの詳細はこちら
New Relic アップデート一覧

無料のアカウントで試してみよう！
New Relic フリープランで始めるオブザーバビリティ！

そもそもSPAとMPAは何が違う？New Relic計測に関わる仕組み

検証の前に、前提となる「仕組みの違い」を整理しておきます。 New Relicのようなブラウザ監視ツールにとって、最大の違いは 「ページ遷移時にリロード（再読み込み）が発生するかどうか」 です。

• MPA (Multi-Page Application)

  • リンクをクリックするたびに、サーバーから新しいHTMLを丸ごと取得し直します

  • 重要: 画面遷移のたびに 「ブラウザの再読み込み」が発生し、JavaScriptのメモリもすべてリセットされます

• SPA (Single Page Application / モダン型)

  • ReactやVue.jsなどで作られたアプリケーションです

  • 画面遷移しても 「ブラウザの再読み込み」は発生せず、JavaScriptが画面の必要な部分だけを書き換えます

  • 重要: New Relicのエージェント（JavaScript）は裏で動き続けています

この仕組みの違いが、今回の「カスタム属性が引き継がれるか」という結果に直結します。

【検証結果】SPAとMPAでカスタム属性の挙動を比較
実際に、以下のシンプルなコードを使って固定の文字列を属性としてセットして検証を行いました。

javascript

// 検証用コード：固定値をセット
newrelic.setCustomAttribute('testAttr', 'from_mpa_page1');

newrelic.setCustomAttribute('testAttr', 'from_spa_page1');

この状態で画面遷移を行い、遷移後の PageAction や BrowserInteraction イベントにこの属性が含まれているかを確認します。

結果の確認には下記のNRQLを使用しています。

NRQL

SELECT appName,eventType(), targetUrl or pageUrl, category or actionName,browserInteractionName, testAttr
FROM PageView, `BrowserInteraction`, PageAction, AjaxRequest 
SINCE 30 minutes ago UNTIL now LIMIT MAX

MPAの場合

• 検証フロー: 属性をセット → リンクをクリックして次ページへ遷移

• 結果: × 値は引き継がれない（消える）

• 理由: 画面遷移のタイミングでブラウザがリロードされるため、New Relicのエージェントも初期化されます。遷移先のページで再度 setCustomAttribute を実行しない限り、属性は付与されません

SPAの場合

• 検証フロー: 属性をセット → ルーター機能で次画面へ遷移
• 結果: ◎ 値は引き継がれる（残る！）

• 理由: 画面遷移してもHTMLのリロードが行われず、メモリ上のNew Relicエージェントが維持されているためです。 つまり、「最初の着地時に1回セットするだけ」 で、そのユーザーがサイト内を回遊している間ずっと属性を維持し続けることが可能です

SPA実装時の注意点とPageActionの使い分け

検証の結果、「SPAなら実装が楽で便利！」と思われるかもしれませんが、いくつか重要な注意点（Tips）があります。

Tips 1：ブラウザリロード（F5）をすると値は消える

SPAであっても、ユーザーが ブラウザの更新ボタン（F5）を押した場合は話が別です。 この場合、アプリケーション全体が再起動するため、MPAと同様にメモリ上の属性値はリセット（消失） します。

確実に値を永続化させたい場合は、sessionStorage などを活用して、アプリ初期化時に再セットする処理が必要です。

Tips 2：一時的なイベントには PageAction を使う

SPAでは値が残り続けるため、逆に「残ってほしくない情報」には注意が必要です。

例えば 「検索ボタンを押した時のキーワード」 などの一時的な情報を setCustomAttribute してしまうと、その後ユーザーが全く関係ないページに遷移しても、属性に検索ワードが残り続けてしまいます。

• setCustomAttribute: ずっと保持したい情報（会員ランク、状態フラグなど）

• addPageAction: その一瞬の出来事（検索、エラー、ボタンクリックなど）

このように、データの性質に合わせてAPIを使い分けるのがベストプラクティスです。

まとめ：サイト構造に合わせて実装方針を決めよう

• MPAの場合:

  • 画面遷移で属性はリセットされる
  • 全ページ共通の処理などで毎回セットする必要がある

• SPAの場合:

  • 画面遷移しても属性は維持される
  • ただし、リロード（F5）されると消えるため、必要に応じてストレージ等での対策を行う

Webサイトのアーキテクチャ（SPAかMPAか）によって挙動は全く異なります。 「気付いたらデータが取れていなかった！」とならないよう、仕様を理解して実装しましょう。

New Relicでは、新しい機能やその活用方法について、QiitaやXで発信しています！
無料でアカウント作成も可能なのでぜひお試しください！

New Relic株式会社のX(旧Twitter) や Qiita Organizationでは、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。

無料のアカウントで試してみよう！
New Relic フリープランで始めるオブザーバビリティ！