カスタム View¶

RUM ブラウザ SDK はデフォルトで、ユーザーが新しいページにアクセスしたとき、またはシングルページアプリケーションの URL が変化したときに、自動的に View を作成します。
ビジネスロジックによって View の境界・名前・URL を制御する必要がある場合は、手動 View を有効にできます。

手動 View を有効にする¶

初期化時に trackViewsManually: true を設定します。

<script
  src="https://static.guance.com/browser-sdk/v3/dataflux-rum.js"
  type="text/javascript"
></script>
<script>
  window.DATAFLUX_RUM &&
    window.DATAFLUX_RUM.init({
      applicationId: "<APPLICATION_ID>",
      site: "<PUBLIC_OPENWAY_URL>",
      clientToken: "<CLIENT_TOKEN>",
      trackViewsManually: true,
    })
</script>

この設定を有効にすると、SDK はブラウザの URL に基づいて View を自動的に作成しなくなります。アプリケーションは、最初のページおよびビジネス上のページ切り替えのたびに startView() を呼び出す必要があります。

View を開始する¶

名前のみを指定する場合：

window.DATAFLUX_RUM &&
  window.DATAFLUX_RUM.startView({
    name: "product-detail",
  })

SDK 3.3.6 以降では、View URL も同時に指定できます。

window.DATAFLUX_RUM &&
  window.DATAFLUX_RUM.startView({
    name: "/products/:id",
    url: "/products/42?source=campaign",
    context: {
      page_group: "product",
    },
  })

url には絶対 URL または現在のページからの相対 URL を指定できます。SDK はこの値を使用して View の url、url_path、およびクエリコンテキストを生成します。解決できない場合は、ブラウザの現在の URL にフォールバックします。

startView() は以下のパラメータをサポートします。

文字列の短縮形も使用できます。

window.DATAFLUX_RUM &&
  window.DATAFLUX_RUM.startView("product-detail")

フレームワークルーター¶

React、Vue、Angular、Next.js、Nuxt アプリケーションでは、フロントエンドフレームワークプラグイン の使用を推奨します。ルータープラグインは手動 View を自動的に引き継ぎ、ルートのコミット成功後に startView() を呼び出します。

同じルート変更に対して、ルータープラグインとビジネスコード内の startView() を同時に使用しないでください。重複した View が生成されます。

注意事項¶

1. trackViewsManually を有効にした場合、最初の View もアプリケーションが起動する必要があります。
2. View は該当するビジネスページの表示が開始された時点で起動してください。リソース・エラー・アクションが前の View に属さないようにします。
3. View の名前にはルートテンプレートや安定したビジネス名を使用し、ユーザー ID や注文番号などの高カーディナリティ値は直接使用しないでください。
4. startView() を単独で呼び出してもページ遷移は発生しません。RUM の View コンテキストが切り替わるだけです。