02 · インストール

React や Vite のアプリにスニペットを追加する

シングルページアプリには、すべてのルートが共有する HTML ファイルが 1 つあるので、タグはそこに 1 回入れます。

01設置場所

index.html の <head> 内に置きます。アプリのすべてのルートで共有されます。

index.html

<script defer data-site="k3xq2mfa7twp" src="https://t.tallybyoutpost.com/script.js"></script>

02ルート

React Router や TanStack Router などは History API でアドレスを変更し、パスが変わるたびに 1 つのページビューになります。ルートが # の後にあるアプリ（/#/settings）では、タグに data-hash が必要です。

index.html

<script defer data-site="k3xq2mfa7twp" data-hash src="https://t.tallybyoutpost.com/script.js"></script>

03うまくいったか確認する

04売上を訪問に紐づける

チェックアウトを作成するのはアプリのバックエンドなので、訪問者 ID もそこで渡します。リクエストから _tally_vid Cookie を読み取り、決済サービスに渡してください。ログインしたユーザーを支払いに使うメールアドレスで identify しておけば、ID を持たない決済も照合できます。

JavaScript

// Once the customer is signed in (or on your success page), with the email they pay with.
// It is hashed when it arrives; only the hash is kept.
window.tally = window.tally || function () { (tally.q = tally.q || []).push(arguments); };
tally('identify', { email: user.email });

05見えないもの

足りない情報や、実際の画面と違う点はありませんか？どのページかを添えて support@tallybyoutpost.com までお知らせください。