02 · インストール

Next.js アプリにスニペットを追加する

タグはルートレイアウトに 1 回入れるだけです。クライアントサイドのページ遷移は、何も設定しなくてもページビューになります。

01設置場所

ルートレイアウトの app/layout.tsx の <head> 内に置きます。

App RouterPages Router

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <script defer data-site="k3xq2mfa7twp" src="https://t.tallybyoutpost.com/script.js"></script>
      </head>
      <body>{children}</body>
    </html>
  );
}

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <script defer data-site="k3xq2mfa7twp" src="https://t.tallybyoutpost.com/script.js"></script>
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

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

03訪問者 ID を Stripe に渡す

Checkout Session を作成するルートハンドラーで _tally_vid Cookie を読み取り、セッションのメタデータに入れます。

Next.js

// app/api/checkout/route.ts
import { cookies } from 'next/headers';
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function POST() {
  const visitorId = (await cookies()).get('_tally_vid')?.value;
  const metadata: Record<string, string> = visitorId ? { 'tally_visitor_id': visitorId } : {};
  const session = await stripe.checkout.sessions.create({
    mode: 'subscription',
    line_items: [{ price: 'price_123', quantity: 1 }],
    success_url: 'https://example.com/thanks?session_id={CHECKOUT_SESSION_ID}',
    metadata,
    // Renewals read the subscription's metadata. In payment mode, leave this line out.
    subscription_data: { metadata },
  });
  return Response.json({ url: session.url });
}

Node、Python、Ruby、PHP での同じコードと、完了 URL も重要な理由は Stripe Checkout にあります。

04自分のドメインから配信する

next.config.js のリライトで、スクリプトとそのイベントを自分のドメインから配信でき、ほとんどの広告ブロッカーを避けられます：自分のドメインから配信する。

05見えないもの

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