Datadog Real User Monitoring (RUM) を使用すると、アプリケーションの個々のユーザーのリアルタイムパフォーマンスとユーザージャーニーを視覚化して分析できます。
Datadog RUM ブラウザモニタリングを設定するには
clientToken
と applicationId
が生成されます。注: Datadog がデータの受信を開始するまで、アプリケーションはアプリケーションリストページに「保留中」として表示されます。
インストール方法 | 使用例 |
---|---|
npm (node package manager) | 最新の Web アプリケーションには、この方法が推奨されます。RUM SDK は、残りのフロントエンド JavaScript コードとともにパッケージ化されます。ページの読み込みパフォーマンスに影響は出ませんが、SDK が初期化される前にトリガーされたエラー、リソース、ユーザーアクションは取りこぼされる場合があります。注: 使用する場合、ログ SDK と一致するバージョンの使用が推奨されます。 |
CDN 非同期 | この方法は、パフォーマンス目標のある Web アプリケーションに推奨されます。RUM SDK は、CDN から非同期的に読み込まれます。この方法を使用すると、SDK のダウンロードによるページの読み込みパフォーマンスへの影響を回避できます。ただし、SDK が初期化される前にトリガーされたエラー、リソース、ユーザーアクションは取りこぼされる場合があります。 |
CDN 同期 | この方法は、すべての RUM イベントを収集する場合に推奨されます。RUM SDK は、CDN から同期的に読み込まれます。この方法を使用すると、最初に SDK を読み込み、すべてのエラー、リソース、ユーザーアクションを収集することができます。この方法は、ページの読み込みパフォーマンスに影響を与える可能性があります。 |
@datadog/browser-rum
を package.json
ファイルに追加したら、次のコマンドを実行して初期化します。
import { datadogRum } from '@datadog/browser-rum'
datadogRum.init({
applicationId: '<DATADOG_APPLICATION_ID>',
clientToken: '<DATADOG_CLIENT_TOKEN>',
site: '<DATADOG_SITE>',
// service: 'my-web-application',
// env: 'production',
// version: '1.0.0',
sampleRate: 100,
trackInteractions: true,
})
注: trackInteractions
パラメーターは、アプリケーション内のユーザークリックの自動収集を有効にします。ページに含まれている機密データと非公開データは、やり取りされた要素を特定するために含まれる場合があります。
生成されたコードスニペットを、アプリケーションで監視するすべての HTML ページの head タグに追加します。
<script>
(function(h,o,u,n,d) {
h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
d=o.createElement(u);d.async=1;d.src=n
n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
})(window,document,'script','https://www.datadoghq-browser-agent.com/datadog-rum.js','DD_RUM')
DD_RUM.onReady(function() {
DD_RUM.init({
clientToken: '<CLIENT_TOKEN>',
applicationId: '<APPLICATION_ID>',
site: '<DATADOG_SITE>',
// service: 'my-web-application',
// env: 'production',
// version: '1.0.0',
sampleRate: 100,
trackInteractions: true,
})
})
</script>
注:
trackInteractions
パラメーターは、アプリケーション内のユーザークリックの自動収集を有効にします。ページに含まれている機密データと非公開データは、やり取りされた要素を特定するために含まれる場合があります。DD_RUM.onReady()
コールバックにラップされている必要があります。こうすることで、SDK が適切に読み込まれたときにのみコードが実行されるようにできます。生成されたコードスニペットを、アプリケーションで監視するすべての HTML ページの head タグ(他のスクリプトタグの前にあるタグ)に追加します。同期型のスクリプトタグをより高い位置に含めると、Datadog RUM ですべてのパフォーマンスデータとエラーを収集できます。
<script src="https://www.datadoghq-browser-agent.com/datadog-rum.js" type="text/javascript"></script>
<script>
window.DD_RUM &&
window.DD_RUM.init({
clientToken: '<CLIENT_TOKEN>',
applicationId: '<APPLICATION_ID>',
site: '<DATADOG_SITE>',
// service: 'my-web-application',
// env: 'production',
// version: '1.0.0',
sampleRate: 100,
trackInteractions: true,
})
</script>
注:
trackInteractions
パラメーターは、アプリケーション内のユーザークリックの自動収集を有効にします。ページに含まれている機密データと非公開データは、やり取りされた要素を特定するために含まれる場合があります。window.DD_RUM
チェックは、RUM SDK で読み込みエラーが起きた際に問題を防ぐために使用されます。タイプは TypeScript >= 3.0 と互換性があります。以前のバージョンの場合は、JS ソースをインポートし、グローバル変数を使用してコンパイルの問題を回避します。
import '@datadog/browser-rum/bundle/datadog-rum'
window.DD_RUM.init({
applicationId: 'XXX',
clientToken: 'XXX',
site: 'datadoghq.com',
resourceSampleRate: 100,
sampleRate: 100,
})
次のパラメーターを使用できます。
パラメーター | タイプ | 必須 | デフォルト | 説明 |
---|---|---|---|---|
applicationId | 文字列 | 〇 | RUM アプリケーションの ID。 | |
clientToken | 文字列 | 〇 | Datadog クライアントトークン。 | |
site | 文字列 | 〇 | datadoghq.com | 組織の Datadog サイト。US: datadoghq.com 、EU: datadoghq.eu |
service | 文字列 | ✕ | アプリケーションのサービス名。 | |
env | 文字列 | ✕ | アプリケーションの環境 (例: prod、pre-prod、staging) | |
version | 文字列 | ✕ | アプリケーションのバージョン (例: 1.2.3、6c44da20、2020.02.13) | |
trackInteractions | Boolean | ✕ | false | ユーザーアクションの自動収集を有効にします。 |
resourceSampleRate | 数値 | ✕ | 100 | リソースを収集するセッションのうち追跡されるセッションの割合。100 は全てのセッションが追跡されることを、0 は追跡されるセッションがないことを意味します。 |
sampleRate | 数値 | ✕ | 100 | 追跡するセッションの割合。100 は全てを、0 は皆無を意味します。追跡されたセッションのみが rum イベントを送信します。 |
silentMultipleInit | Boolean | ✕ | false | Datadog の RUM がページ上ですでに初期化されている場合、初期化が暗黙に失敗します。 |
proxyHost | 文字列 | ✕ | オプションのプロキシホスト (例: www.proxy.com)。詳細については、完全なプロキシ設定ガイドを参照してください。 | |
allowedTracingOrigins | リスト | ✕ | トレースヘッダーを挿入するために使用されるリクエスト元のリスト。 |
logs
SDK も使用する場合、一致するコンフィギュレーションが必要なオプション:
パラメーター | タイプ | 必須 | デフォルト | 説明 |
---|---|---|---|---|
trackSessionAcrossSubdomains | Boolean | ✕ | false | 同じサイトのサブドメイン間でセッションを保持します。 |
useSecureSessionCookie | Boolean | ✕ | false | 安全なセッション Cookie を使用します。これにより、安全でない (HTTPS 以外の) 接続で送信される RUM イベントが無効になります。 |
useCrossSiteSessionCookie | Boolean | ✕ | false | 安全なクロスサイトセッション Cookie を使用します。これにより、サイトが別のサイトから読み込まれたときに、RUM SDK を実行できます (iframe)。useSecureSessionCookie を意味します。 |
追跡を開始するには、Init を呼び出す必要があります。
init(configuration: {
applicationId: string,
clientToken: string,
site?: string,
resourceSampleRate?: number
sampleRate?: number,
silentMultipleInit?: boolean,
trackInteractions?: boolean,
service?: string,
env?: string,
version?: string,
allowedTracingOrigins?: Array<String|Regexp>,
trackSessionAcrossSubdomains?: boolean,
useSecureSessionCookie?: boolean,
useCrossSiteSessionCookie?: boolean,
})
このページ