01 · はじめに
4 つのステップで始める
登録から、訪問までたどれる売上まで。各ステップで、やること、表示される内容、うまくいったかの確認方法を説明します。
ステップ 1:アカウントを作成してサイトを追加する
やること
名前、メールアドレス、パスワードで登録します。14 日間無料で、カードは不要です。
届いたメールのリンクを開き、Confirm を押します。
最初のサイトを追加します。名前、ドメイン(サブドメインも計測対象です)、訪問者の数え方を指定します。
モード 動作 Cookie ファーストパーティ Cookie で、日をまたいで再訪問者を識別します。 Cookie なし Cookie は使いません。訪問者は 1 日に 1 回数えます。 同意優先 バナーが同意を伝えるまでは Cookie なし、その後は Cookie を使います。 迷ったら、最も多くを見られるのは Cookie モードです。EU と英国では、厳密に必要とはいえない Cookie には通常同意が必要で、同意優先モードはその同意を求めます。モードの違い。
表示される内容
上部に設定の手順が並びます:Your site、The snippet、Payments。どの手順の途中でも離れることができ、再びログインするとその手順に戻ります。
うまくいったか確認する
次のページは Add the snippet to yoursite.com で、あなたのサイト専用のタグが表示されます。このタグはサイトの Setup ページにも残ります。
ステップ 2:スクリプトを追加する
やること
タグをすべてのページの <head> に貼り付けます。defer で読み込まれるため、ページの表示を遅らせることはありません。プラットフォームを選んでください。
<script defer data-site="k3xq2mfa7twp" src="https://t.tallybyoutpost.com/script.js"></script>すべてのページの <head> に貼り付けます。
<head>
<script defer data-site="k3xq2mfa7twp" src="https://t.tallybyoutpost.com/script.js"></script>
</head>ルートレイアウトの app/layout.tsx の <head> 内に置きます。
<script defer data-site="k3xq2mfa7twp" src="https://t.tallybyoutpost.com/script.js"></script>index.html の <head> 内に置きます。アプリのすべてのルートで共有されます。
<script defer data-site="k3xq2mfa7twp" src="https://t.tallybyoutpost.com/script.js"></script>クラシックテーマの header.php の </head> の直前か、ヘッダーコード用のプラグインに入れます。
<script defer data-site="k3xq2mfa7twp" src="https://t.tallybyoutpost.com/script.js"></script>Site settings › Custom code › Head code に入れて、公開します。
<script defer data-site="k3xq2mfa7twp" src="https://t.tallybyoutpost.com/script.js"></script>Site settings › General › Custom code の <head> タグの末尾に入れて、公開します。
<script defer data-site="k3xq2mfa7twp" src="https://t.tallybyoutpost.com/script.js"></script>手作業で入れる場所はありません。Tally のアプリが、テーマエディタでオンにするテーマアプリ埋め込みからタグを追加するので、テーマのコードは不要です。アプリの掲載は審査中です。
これはサンプルサイトのタグです。あなたのタグには、あなたのサイトの ID が入ります。プラットフォームごとに専用のページがあります。
表示される内容
このページは最初の訪問を待ち、届くとその流入元を表示します。
It works. Receiving visits.
First visitor: Berlin · Chrome on macOS · from x.com
The live check on yoursite.com's Setup page
うまくいったか確認する
このページを開いたまま、ブラウザでサイトを開いてください。2 秒ごとに確認します。ブラウザのデベロッパーツールのネットワークタブには、ページごとに /api/event へのリクエストが表示され、202 が返ります。
まだ待機中ですか? 手元のマシンからの訪問は data-allow-localhost がある場合にのみ数えられ(localhost でのテスト)、広告ブロッカーがスクリプトを止めることもあります(自分のドメインから配信する)。ほかの原因は何も表示されないにまとめています。
ステップ 3:決済を接続
やること
販売に使っている決済サービスを選びます。Tally に必要なことだけができるキーを作成して、貼り付けます。
| 決済サービス | 貼り付けるもの |
|---|---|
| Stripe | 決済を読み取ることしかできない制限付きキー。 |
| Paddle | Paddle Billing:読み取り権限の API キー。 |
| Lemon Squeezy | Tally 専用に作成した API キー。 |
| Polar | 読み取りスコープの組織アクセストークン。 |
| WooCommerce | ストアのアドレスと REST API キー。 |
| Squarespace | Squarespace での接続、またはサイトごとの API キー。 |
| その他 | 決済を記録できる API キーで、サーバーから決済を 1 件ずつ送信します。 |
キーに付ける権限と作成場所は、各決済サービスのページに記載しています。
表示される内容
Tally は実際の呼び出しでキーを確認し、足りない権限があればその名前を示します。続いて専用の Webhook を追加して新しい決済を発生と同時に受け取れるようにし、過去 365 日分を取り込みます。取り込みの進み具合も表示されます。
うまくいったか確認する
Integrations ページに、決済サービスが接続済みとして、読み取った決済の件数と最後の決済の到着時刻とともに表示されます。過去の決済は、取り込まれるにつれて Sales に表示されます。
取り込みで過去の履歴がそろいます。これから発生する売上を、その売上を生んだ訪問に紐づけるには、チェックアウトで訪問者 ID を渡します。コードは各決済サービスのページにあります。
- Stripe Checkoutサーバーで Checkout Session を作成するときに、訪問者 ID を渡します。
- Stripe Payment Linksスニペットが
buy.stripe.comのリンクに自動でタグを付けます。 - PaddlePaddle.js でチェックアウトを開く箇所で、
customDataに訪問者 ID を入れます。 - Lemon Squeezy購入リンクに、カスタムデータとして訪問者 ID を付けます。
- Polarメタデータに、またはチェックアウトリンクの
reference_idとして訪問者 ID を入れます。 - WooCommerce注文受付ページにスニペットがあれば、ほかには何も要りません。
- SquarespaceCode Injection に、スニペットと注文状況ページ用の数行を入れます。
ステップ 4:最初のレシートとカバー率を見る
やること
Sales を開いて決済を選びます。続いて Coverage and fixes を開きます。
表示される内容
各決済を開くとレシートが表示されます。購入者の初回訪問、売上が帰属する訪問、決済をそのブラウザに紐づけたもの、そして決済で、それぞれに決済サービスで照会できる ID が付いています。何も売上を紐づけなかった場合は、その理由がレシートに示されます。
$49.00
How this payment was tied to a visitor
- First visitgoogle.com · Nov 2
- Credited visitx.com · Nov 5
- Linked by checkout metadata
metadata.tally_visitor_id - PaymentStripe · Nov 5
Checkout metadata · High confidence
カバー率は、訪問者に紐づいた売上の割合です。紐づいていないものには種類ごとに修正が示され、追加するコードも付いています。
82% of the last 30 days' sales are linked to a visitor.
うまくいったか確認する
サイトを訪れたことのあるブラウザでテスト購入をします(テストモードのキーではテスト決済が見えます)。1 分ほどで、レシートに Linked by checkout metadata(またはお使いのチェックアウトに応じた方法)と確度 High が表示されます。
縦線を 4 本、5 本目を斜めに。これで 5 つ数えた印の完成です。
- ゴールと identify登録などの行動を数え、メールアドレスで顧客を照合します。
- プライバシーモードと同意各モードが保持するものと、同意優先モードがバナーに従う仕組み。
- 自分のドメインから配信するスクリプトを自分のドメインから配信します。
- REST API同じ数値を自分のコードから読み取ります。
足りない情報や、実際の画面と違う点はありませんか? どのページかを添えて support@tallybyoutpost.com までお知らせください。