02 · Instalación

Añade el snippet a una app de Next.js

La etiqueta va en el layout raíz, una vez. Las navegaciones del lado del cliente son vistas de página por sí solas, sin nada que configurar.

01Dónde va

En app/layout.tsx, el layout raíz: dentro de su <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>
  );
}

02Comprueba que funciona

03Pasa el ID del visitante a Stripe

En el route handler que crea las Checkout Sessions, lee la cookie _tally_vid y ponla en los metadatos de la sesión:

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 tiene lo mismo en Node, Python, Ruby y PHP, y explica por qué también importa la URL de éxito.

04Servirlo desde tu dominio

Un rewrite en next.config.js sirve el script y sus eventos desde tu propio dominio, lo que esquiva la mayoría de los bloqueadores de anuncios: Servirlo desde tu dominio.

05Lo que no puede ver

¿Falta algo o no coincide con lo que ves? Escribe a support@tallybyoutpost.com y dinos qué página.