createData

テレメトリーのビーコンを、自分のエンドポイントへ送ります。

API

setReportUrl(config)

起動時に一度だけ、既定のエンドポイントを設定します。URL の文字列か、次のオブジェクトを受け付けます。

フィールド	説明	型
`url`	`url` を自分で持たない `report()` すべてに使われる既定のエンドポイント	`string`
`userIdCookie`	ユーザー ID が入っている Cookie。`createData()` が拾います	`string`

getReportUrl()

設定されているエンドポイント。なければ ''。

report({ url?, type?, payload })

payload を送ります。navigator.sendBeacon を優先し、だめなら 1x1 の画像リクエストに切り替えます。どれかの手段が受け取れば true、どれも送れなければ false を返します。エンドポイントが設定されていない場合も false です。

createData(params?)

決まった形の外枠を組み立てます。イベント ID、ページの URL、タイムスタンプ、リファラー、ビューポート、User Agent。userIdCookie が設定されていれば userId も入ります。渡した params は最後に適用されます。SSR では {} を返します。

使用例

import { createData, report, setReportUrl } from 'ranuts';

setReportUrl({ url: 'https://telemetry.example.com/collect', userIdCookie: 'uid' });

report({ payload: { ...createData(), type: 'page_view' } });

補足

既定のエンドポイントは、あえてありません。 ライブラリの側では、あなたのテレメトリーがどこへ行くべきかを知りようがありません。ですから report() は当て推量をせず false を返します。
どの手段を使うかは、sendBeacon が実際に成功したかどうかで決まります。 navigator があるかどうかではありません。sendBeacon は、ブラウザーのキューが上限を超えたときも false を返します。その場合も画像のビーコンへ回ります。
createData() はイベントごとに呼んでください。 準備のときに一度だけではいけません。この関数は走ったその瞬間の URL とタイムスタンプを写し取ります。ハンドラーの外へ出してしまうと、以後のイベントがすべてページ読み込み時の状態を報告することになります。