02 · Installieren

Das Snippet zu einer Next.js-App hinzufügen

Das Tag kommt einmal ins Root-Layout. Clientseitige Navigationen sind von selbst Seitenaufrufe, ohne dass du etwas verdrahten musst.

01Wo es hinkommt

In app/layout.tsx, dem Root-Layout: in seinem <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>
  );
}

02Prüfen, ob es geklappt hat

03Die Besucher-ID an Stripe übergeben

Lies im Route Handler, der Checkout Sessions erstellt, das Cookie _tally_vid und schreib es in die Metadaten der Session:

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 });
}

Stripe Checkout zeigt dasselbe in Node, Python, Ruby und PHP und erklärt, warum auch die Erfolgs-URL zählt.

04Über deine eigene Domain ausliefern

Ein Rewrite in next.config.js liefert das Skript und seine Events über deine eigene Domain aus, was die meisten Werbeblocker fernhält: Über deine eigene Domain ausliefern.

05Was es nicht sieht

Fehlt etwas, oder sieht es bei dir anders aus? Schreib an support@tallybyoutpost.com und nenne die Seite.