セッションリプレイの仕組み：行動分析の内部

※これはMouseflowからの翻訳転載です。配信元または著者の許可を得て配信しています。

How Session Replays Work: Under the Hood of Behavior Analytics

要約

セッションリプレイツールは、ユーザーセッションのビデオを記録しません。代わりに、ページの初期状態、セッション中に発生した変更、およびページ全体のユーザーイベント（一部のカスタムイベントも含む）のスナップショットをキャプチャするスクリプトを使用します。

キャプチャの仕組みにより、プライベートデータを除外することができます。同じ理由で、ウェブサイトにMouseflowを配置しても、ユーザーエクスペリエンスに影響を与えたり、大量のストレージスペースを必要としたりすることはありません。

再生中、セッションリプレイツールはこのプロセスを逆に実行し、キャプチャされたデータからウェブページとユーザーアクションを再構築します。

より詳しい説明については、続きを読んでください。

セッションリプレイツールは、ウェブサイトのバーチャルCCTVカメラのように機能するとよく言われます。この例えは初心者には便利ですが、セッションリプレイの背後にある実際の技術は、単純なビデオ録画よりもはるかに複雑です。

この投稿では、主要な行動分析ツールの1つの背後にあるメカニズムを探り、セッション記録が実際にどのように機能するかを詳しく説明します。

セッションリプレイとは？

定義から始めましょう。セッションリプレイツール（Mouseflowにあるようなもの）は、ウェブサイトやウェブアプリケーションを介した訪問者の移動を再生できる機能です。

これには、ユーザーがブラウザで実際に見たものや、ウェブサイト上での行動を再現することが含まれます。つまり、マウスの動きやクリック、画面のタップ、スクロール、キーボードストローク、フォーム、ボタン、メニューなどのさまざまなウェブサイト要素とのインタラクションなどです。

セッションリプレイは、ウェブサイトまたはアプリケーションとユーザーのインタラクションを再現し、ユーザーエクスペリエンスを正確に反映させる方法を提供します。

セッションリプレイを使用する主な目的は、顧客エクスペリエンスを向上させ、ウェブサイト上のユーザージャーニーにおける潜在的な障害を特定することです。しかし、セッション記録は、バグや不具合の発見、ユーザー行動の調査、カスタマーサポートケースの問題の再現など、これらのコア機能を超えた創造的なアプリケーションを豊富に提供します。

セッション記録の使用例の詳細については、ウェブサイト訪問者を記録して学べる7つのことに関するこの投稿をお読みください。

セッションリプレイは通常、ユーザーのセッション全体を再生するビデオ録画のように見えます。この再生中、ウェブサイト上でのユーザーのインタラクションは通常、視認性を高めるために強調表示されます。

セッション記録はビデオに似ているかもしれませんが、ほとんどのセッション再生ツールは実際のビデオ記録を使用していません。代わりに、再生はユーザーがウェブサイトで実際に見て操作した内容を正確に再構築したものです。

これは自然に次の疑問につながります…

なぜセッションリプレイツールは実際のビデオを録画しないのか？

セッションリプレイの概念は一見単純に見えるかもしれませんが、実際にはそれよりもずっと複雑です。

では、なぜセッションリプレイは、実際の画面キャプチャを含むビデオだけではないのでしょうか？なぜなら、このアプローチには重大な欠点がいくつかあるからです。

• 帯域幅とストレージ要件：ビデオ録画は大量のストレージ容量を消費します。これらを訪問者のコンピューターからウェブサーバーに転送すると、大量の帯域幅が消費され、ユーザーエクスペリエンスに悪影響を与える可能性があります。
• プライバシー問題と規制遵守：完全なビデオ録画は機密情報や個人情報をキャプチャする可能性があり、プライバシーの問題や潜在的なコンプライアンスにつながります。
• セキュリティリスク：セッション全体を記録すると、ログイン情報や機密情報がキャプチャされる可能性があり、セキュリティ侵害が発生した場合に潜在的なセキュリティリスクが発生します。
• 検索機能の制限と非効率的な分析：ビデオは簡単にインデックス化または検索できないため、特定のインタラクションを特定することが困難です。したがって、ビデオコンテンツを分析して有意義な洞察を抽出するには、長時間の録画をリアルタイムで見る必要があるため、時間がかかります。

では、何を記録しているのでしょうか？Mouseflowや他のほとんどのセッションリプレイツールが記録するのは、ユーザーがアクセスしたページの構造（DOM）、ユーザーのセッション全体におけるページの変化（DOMの変異）、ウェブページ要素に対するユーザーのアクション、および一部のメタデータです。

DOMとは何か、DOM変異とは何か？

ドキュメントオブジェクトモデル（略してDOM）は、ウェブページをオブジェクト中心に表現したものです。プログラムやスクリプトによるウェブページの構造、スタイル、コンテンツの動的な操作を可能にするプログラミングインターフェイスとして機能します。

DOMはツリー状の構造で構成されており、各ブランチはノードで終わります。各ノードには、ウェブページの特定の部分を表すオブジェクトが含まれています。

HTMLとDOMは、ウェブページを記述する2つの微妙に異なる方法だと考えることができます。古き良きHTMLがページの静的な構造とコンテンツを提供するのに対し、DOMはそのウェブページの動的でインタラクティブな表現です。

そして、現在ほとんどのウェブページがダイナミックかつインタラクティブであるため、DOMはウェブ開発に非常に役立ちます。たとえば、ウェブページがブラウザに読み込まれると、ブラウザは実際にそのページに関連するHTMLファイルとCSSファイルに基づいてページのDOM表現を作成します。

したがって、DOM変異とは、最初のページ読み込み後に動的に発生するウェブドキュメントの構造またはコンテンツで発生する変更を指します。DOM変異の一般的な例としては、ウェブページへの新しい要素の追加、既存の要素の削除、要素内の属性またはコンテンツの変更、要素の順序の再配置などがあります。

これらの変更は通常、ページ上で実行されるスクリプトの結果として、ユーザーのインタラクションに応じて発生します。たとえば、ウェブサイトのメインページ上のカルーセルがあるバナーから別のバナーに切り替わると、DOMが変化し、新しいコンテンツが追加され、ページの構造が更新されます。DOM変異のもう1つの例は、メニュー項目をクリックしてサブメニューを表示する場合です。

MouseflowはShadow DOMもサポートしています。しかし、すべてのセッションリプレイがそうではありません。

セッションリプレイはどのように機能するのか？

すでにお察しのとおり、セッション記録を構成するのは、最初のDOMとそれに続くDOMの変異です。しかし、もう1つ重要な部分があります。それはウェブページ要素に対するユーザーインタラクションです。これらは主にJavaScriptイベントから発生します。
ただし、特定の状況では、これらのイベントだけでは十分な場合があり、カスタムイベントが必要になります。たとえば、ユーザーが最初にフォームフィールドに入力し、送信する前に再入力するシナリオを考えてみましょう。

JavaScriptの観点からは、これは1つのイベントとみなされます。しかし、ユーザーエクスペリエンスを分析する場合、このフォームの再入力は、ユーザーが混乱したり躊躇したりしている瞬間を示している可能性があります。これは行動分析の観点から見て重要なイベントです。したがって、この相互作用を正確に記録することが重要になります。そして、これをキャプチャするJavaScriptイベントがないため、カスタムユーザーイベントを記録する必要があります。

これでセッション記録の構成要素がわかりました。Mouseflowのようなツールでは、以下のものがセッション記録に含まれます。

• 初期DOM（ドキュメントオブジェクトモデル）：ウェブページが読み込まれたときの状態をキャプチャします。
• DOM変異：ウェブページ上で発生した変更です。
• ユーザーイベント：これにはマウスの動き、クリック、スクロール、キーボードイベントなど、ユーザーによって行われたインタラクションが含まれます。ほとんどの場合、それらはJavaScriptイベントから取得されますが、いくつかのカスタムイベントも使用します。
• メタデータ：これには、ブラウザのバージョン、OSバージョン、画面解像度、訪問者の地理的位置（記録されないIPアドレスから得られる）、およびほとんどのウェブ分析ツールによって収集されるその他の情報など、公開されているデータが含まれます。

再生する際、Mouseflowは基本的に逆のプロセスを実行します。まず、最初のDOMからウェブページの元の状態を再作成します。次に、ユーザーのセッションを通じて、DOMの変更からウェブページの後続の変更を復元します。そして第三に、記録されたイベントから得られたユーザーのインタラクションを重ね合わせます。Mouseflowは同じイベントを使用して、ヒートマップやコンバージョンファネルなどを作成します。

このアプローチの最も重要な利点の1つは、セッションを記録する際に多くのトラフィックを生成する必要がないことです。ここでは、メガバイトではなく数キロバイトについて説明します。したがって、ウェブサイトにMouseflowを設置しても、ユーザーエクスペリエンスに影響を与えたり、大量のストレージスペースを必要としたりすることはありません。

同時に、このアプローチにより、セッションのスナップショットではなく、展開されるユーザージャーニー全体をキャプチャできるようになります。品質に関しては、ピクセル化された不鮮明な低解像度ビデオではなく、実体験を反映した再生結果が得られます。

さらに、このアプローチでは、セッション中の最も重要なイベントを強調表示し、明確に見ることが可能です。

そして最後に、ビデオ録画とは異なり、個人データの取得を避けることができます。キャプチャ後にマスキングするのではなく、まったくキャプチャしません。

セキュリティ、プライバシー、および規制の遵守

スクリプトがユーザーのデバイス上でDOMとDOMの変異をキャプチャする場合、Mouseflowサーバーに送信することなく、機密情報をすぐにフィルタリングできることを意味します。このアプローチにより、プライバシーとセキュリティの懸念が大幅に軽減されます。

たとえば、Mouseflow記録スクリプトは、パスワード、電話番号、銀行カードの認証情報などを分析します。スクリプトが個人情報を検出した場合、セッションリプレイで確実にフィルタリングされます。

しかし、別1つの課題もあります。たとえば、「（123）4567-8901がお客様の電話番号で間違いありませんか？」というメッセージのように、ユーザーが入力した機密情報がウェブページの別の場所に表示される可能性があります。この情報は、もはやユーザー入力ではなく、サーバーによって送信されたページの一部です。対処しないと、セッション記録に入り込んでしまうかもしれません。この問題を対処するために、セッション記録スクリプトは、プライベートとみなされたフィールドへのユーザーの入力をハッシュし、同じハッシュを持つものすべてをサーバーに送信されたものから削除します。

まとめ

Mouseflowセッションリプレイは、ドキュメントオブジェクトモデル（DOM）で表される訪問ページの初期状態、訪問中のページ上の変更（DOMの変異）、およびユーザーイベントで表されるウェブページとのユーザーインタラクションをキャプチャして保存します。

この構造化データアプローチの利点は、ユーザーエクスペリエンスへの影響を最小限に抑え、効率的なデータ保存、機密情報のフィルタリングを可能にし、そして最も重要なこととして、ユーザーのプライバシーとセキュリティを保持することです。また、録画の分析も容易になります。

Danny KjærはMouseflowの開発責任者です。彼は多くの人が記憶しているよりも長い間この会社に所属しており、プラットフォームの全機能の開発に貢献してきました。