デフォルトでは、トラッカーは多くの有用な情報をプラットフォームに送信しますが、それらはすべて標準的な情報です。Web API の一部であるデータポイントであれば、ほぼ間違いなく追跡しています。

しかし、アプリケーション固有のデータでセッション録画を補強したい場合はどうでしょうか。

たとえば、ユーザーのリプレイを確認するときに、そのユーザーがどの有料プランに加入しているかを把握したい場合です。こうした情報は開発者に追加のコンテキストを提供できます。標準的なデータではないからといって、無視してよいわけではありませんよね。

そこで登場するのがメタデータです。

注記：YouTube チャンネルにこのチュートリアルの動画版があります。見て学ぶほうが得意な方は、ぜひご覧ください。

セッションリプレイにおけるメタデータとは、ユーザーが生成するものではないものの、何らかの形でそのユーザーに関連するすべての情報を指します。

つまり、ユーザーが特定のリンクをクリックしたり、特定の操作を行ったりするのはメタデータではなく、カスタムイベントです（詳細はカスタムイベントに関するドキュメントをご覧ください）。

しかし、ユーザーが無料プランか有料プランかを示すフラグがある場合や、ユーザーがどこから来たかを示すトラッキングコードがある場合はどうでしょうか。これらはすべてメタデータであり、セッションに簡単に追加できます。

最初に行うのは、プラットフォーム上で直接メタデータフィールドを設定することです。

この手順を省略すると情報を記録できなくなるため、必ず実施してください。

そのためには、トップメニューの右上にある歯車アイコンをクリックして、プロジェクトの設定ページに移動します。

移動したら、画面の左端にある「Metadata」メニュー項目をクリックします。

メタデータの設定画面が表示されます。ドロップダウンから正しいプロジェクトを選択していることを確認し、必要な数だけフィールドを作成してください。

この例では、「e-commerce test」プロジェクトに 3 つのフィールドを作成しました。

• 「plan」：ユーザーの現在のプランを保持します。
• 「utm_source」：ユーザーの流入元を識別するコードを保持します。
• 「items_in_cart」：ユーザーのカート内のアイテムの合計数を保持します。

最後のフィールドはユーザーの操作に依存するデータであり、推奨している使い方とは異なります。ただし、この例を通じて、メタデータフィールドの制限と、この情報が本来カスタムイベントであるべきだった理由を確認できます。

この設定が完了したら、次はセッションの一部としてデータを実際に送信するために必要なコードを追加します。

セッションにメタデータを追加するには、トラッカーの setMetadata メソッドを使用します。このメソッドはユーザーセッション中いつでも使用できますが、次の 2 点に注意してください。

1. 同じメタデータフィールドに複数の値を設定した場合、最後の値だけがセッションの一部として保存されます。
2. すべての値は文字列である必要があります。そうでない場合は保存されません。トラッカーは値を文字列に変換しないため、この点に注意してください。

赤い矢印は、関連する変更を加えた箇所を示しています。このコンテキストプロバイダーは setMetadata という関数をエクスポートしており、その関数がトラッカーの setMetadata メソッドを呼び出します。

動作するサンプルが必要な場合は、このリポジトリをご確認ください。

あとは、メタデータフィールドを設定したいときに、エクスポートした関数を使用するだけです。

この例では、utm_source と plan フィールドをホームページで直接設定し、ユーザーがカートにアイテムを追加するたびに、残りの 1 つのフィールドを更新することにします。

pages/index.tsx ファイルに、次のコードを追加します。

// inside the main component
const { startTracking, setMetadata } = useContext(TrackerContext)
//...
useEffect(() => {
    async function getProds() {
      await startTracking()
      setMetadata('plan', getPlan()) //addition 
      setMetadata('utm_source', getUTMSource()) //addition
      dispatch(getMakeUpProducts() as any)
    }

    getProds()
  }, [dispatch])

このフックの大部分はすでに存在していましたが、setMetadata 関数への参照と、それを呼び出す 2 つの呼び出しを追加しました。getPlan と getUTMSource の 2 つの関数は、この例ではランダムなデータを返します。実際のユースケースでは、それに合わせて実装する必要があります。

このコードにより、ホームページの読み込み時にこれらのメタデータ値が設定されます。

次に、最後の値であるカート内のアイテム数を追加する必要があります。そのために、「Add to cart」をクリックしたときの動作を制御する ProductSidebar コンポーネントに移動し、カート内アイテム数の変化に反応するフックをもう 1 つ追加します。

useEffect(() => {
    setMetadata('items_in_cart', productsInCart)
  }, [productsInCart])

もちろん、先ほどと同様にコンテキストプロバイダーから setMetadata 関数を取得する必要がありますが、それができれば完了です。

これでデータが保存されるようになりました。プラットフォームのセッション一覧からも確認できます。

すべてのセッションリプレイ内にメタデータが保存されるようになりました。では、それをどのように活用できるでしょうか。

まず、リプレイから直接メタデータを表示できます。

プレイヤー画面の右上にメタデータフィールドが表示されるはずです。この例では、ユーザーは Enterprise Edition プランで、Reddit から来ており、カートに追加したアイテムは 1 つだけであることがわかります。

メタデータのもう 1 つの強力な使い方は、検索パラメーターとして利用することです。Omnisearch バーを使用すると、作成したカスタムメタデータフィールドを検索パラメーターとして選択できます。

たとえば、Enterprise Edition のリプレイだけを確認したい場合は、Plan フィールドを選択し、次のように「ee」でフィルターするだけです。

ダッシュボード用のウィジェットを作成する際にも、同じ Omnisearch バーを使用できます。EE の例を続けると、Enterprise 顧客だけを対象としたダッシュボードを作成したい場合は、各カスタムウィジェットを「Plan」属性でフィルターできます。

たとえば、次のウィジェットは、「Add to cart」ボタンをクリックしている Enterprise 顧客の数を示しています。

その結果、次のようなウィジェットになります。

メタデータフィールドを使えば、セッションリプレイから得られるインサイトを、好きなだけカスタマイズして拡張できます。

メタデータは、セッションリプレイから得られるインサイトを大幅に高めることができ、セットアップも比較的簡単です。

保存したい情報は必ず文字列の形式にする必要があることを覚えておいてください。そうでない場合は無視されます。

メタデータを使用したサンプルプロジェクトの完全なソースコードを確認できます。

このプロセスのいずれかの手順で問題が発生した場合は、Slack コミュニティで、開発者に直接ご質問ください。