02 · Installation

Ajouter le snippet à une application Next.js

La balise va dans le layout racine, une seule fois. Les navigations côté client sont des pages vues d’elles-mêmes, sans rien à brancher.

01Où la placer

Dans app/layout.tsx, le layout racine : à l’intérieur de son <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>
  );
}

02Vérifier que ça marche

03Transmettre l’identifiant du visiteur à Stripe

Dans le route handler qui crée les sessions Checkout, lisez le cookie _tally_vid et placez-le dans les métadonnées de la 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 });
}

La page Stripe Checkout donne la même chose en Node, Python, Ruby et PHP, et explique pourquoi l’URL de confirmation compte aussi.

04Le servir depuis votre domaine

Une réécriture (rewrite) dans next.config.js sert le script et ses événements depuis votre propre domaine, ce qui écarte la plupart des bloqueurs de publicité : Le servir depuis votre domaine.

05Ce qui n’est pas vu

Il manque quelque chose, ou ce n’est pas ce que vous voyez ? Écrivez à support@tallybyoutpost.com en précisant la page.