Datadog Advent Calendar 1日目で紹介されていましたとおり、RUM(Real User Monitoring)のSession Replayという機能が正式公開されています。
見ていただいた方が早いと思います。こんな感じです。2倍速再生にしているので忙しいです。
ユーザーがブラウザ上でWebサイトをナビゲートする様子が、動画のように再現されています。実際に動画で記録しているわけではなく、表示しているページの要素や遷移、マウスの操作などが記録されていて、それがDatadogに送られてDatadog側で再現されています。
RUMとはReal User Monitoringの略で、UXモニタリングというカテゴリーに入る監視です。サービス提供者が直接手の届かないユーザーの環境でのWebサイトの状況が観測できるという点で、最近とても関心を集めているように思います。イメージとしては、ブラウザの開発者ツールで見られる情報の一部をDatadogに送るようなイメージです。上記のWikipediaのトップページのロードの状況は以下のように見えます。
ページを構成する要素をダウンロードするのにどのくらいの時間がかかっているかが分かり、ユーザー体験の良し悪しがCore Web Vitalsで示されています。このように様々な環境からアクセスしているユーザーがどのようなパフォーマンスでサイトを見ているのかが定量的に観測できます。
具体的な仕組みとしては、各WebページでDatadog提供のJavaScriptを読み込んで、RUMを起動し、データを収集して、各ブラウザから直接Datadogに送るようになっています。同様の手法を使っているツールとしてはGoogle Analyticsが有名ですが、Google Analyticsがマーケティングやキャンペーンの実施に特化しているのに対し、DatadogのRUMはWebページのパフォーマンスやエラーの解析に重点を置いていると考えて良いかと思います。
では、いざ試してみようという段階になると、WebページにRUMを組み込んでいく必要があります。ですが、テスト環境ならまだしも本番環境にいきなり入れるということにはならないかと思います。そこで、まずはRUMやSession Replayがどんなもので、何が見られて、何がわかるのかといったことを最短で体感していただくために、Chromeの拡張をご用意しました。この拡張によりWebページにDatadogのRUMのJavaScriptが差し込まれて、そのブラウザからのアクセスだけRUMが有効になります。これを使って上のGIFアニメのように、本番サイトに変更を加えることなくRUMを試すことができます。なお、これはDatadogが提供するものではなく、筆者個人で作成公開しているものです。
こちらがChrome拡張のレポジトリで、開発者モードで読み込むようになっています。実質数行のファイルが2つだけという簡素な内容ですので、何をやっているかは分かりやすいかと思います。
ぜひみなさんの本番サイトでもRUMを試してみてください。
なお、同僚氏がこのChrome拡張を進化させてChrome Web Store版の開発に取り組んでいますので、そちらもぜひお楽しみに。
ところで、Session Replayのようにユーザーの操作や画面が全部見えてしまって大丈夫だろうか？という懸念が出てくると思いますが、デフォルトでは、ユーザーのフィールドへの入力文字列をマスクするモードになっています。一番厳しいモードでは文字を全てマスクするようになっていますので、適切なプライバシー設定が可能になっています。
以上Datadog RUMを本番サイトに手を入れずに試す方法をご紹介しました。
Happy Datadogging!