Intégrations · Plateformes de site

Next.js : le layout racine, les changements de route et le paiement.

Une balise dans app/layout.tsx couvre toutes les routes, et la navigation côté client compte en pages vues. Un route handler qui crée des sessions Stripe Checkout transmet l’identifiant du visiteur en deux lignes, et un middleware signale les robots d’IA.

Commencer gratuitement

14 jours gratuits, sans carte bancaire.

01Ce que Tally mesure

  • Chaque route de l’app depuis le layout racine, les navigations côté client étant comptées comme pages vues.
  • Le temps actif et la profondeur de défilement par page, les objectifs et les clics sur les liens vers d’autres sites.
  • Les robots d’IA, quand quelques lignes dans votre middleware les signalent : la page Crawlers donne le snippet Next.js.

02D’où viennent les revenus

  • Paiement depuis un route handlerLisez le cookie _tally_vid avec await cookies() et transmettez-le en tally_visitor_id dans les métadonnées de la session et dans subscription_data.metadata. La page Coverage donne le handler.
  • Page de confirmationSur un site sans cookie, ajoutez « ?session_id={CHECKOUT_SESSION_ID} » à l’URL de confirmation : la page qui l’affiche lie la vente à la visite.

03Ce qu’il ne peut pas lire

  • Les requêtes rendues côté serveur qui ne chargent jamais la page dans un navigateur, comme les préchargements, ne sont pas comptées comme visites.
  • Les achats intégrés via une boutique d’applications ne sont pas lus ; les autres paiements que prennent vos route handlers peuvent être envoyés à la Payments API.
  • Sans les lignes du middleware, les robots qui n’exécutent pas le script ne sont pas vus.

04Ajouter le snippet

Où le placer : Dans app/layout.tsx, le layout racine : à l’intérieur de son <head>.

<head>
  <script defer data-site="k3xq2mfa7twp" src="https://t.tallybyoutpost.com/script.js"></script>
</head>

Voici la balise d’un site d’exemple. La vôtre, avec l’identifiant de votre site, se trouve à l’étape du snippet quand vous ajoutez un site, et sur sa page Setup.

  1. Collez la balise dans le head de app/layout.tsx, comme le montre l’étape du snippet.
  2. Déployez et ouvrez le site : la vérification en direct affiche la première visite.
  3. Dans le route handler qui crée les sessions Checkout, ajoutez l’identifiant du visiteur aux métadonnées.
  4. Si vous le souhaitez, ajoutez le signalement des robots à votre middleware, depuis la page Crawlers.

05Questions fréquentes

  • La navigation côté client dans l’App Router est-elle comptée ?

    Oui. La balise écoute les changements de route dans le navigateur : passer d’une page à l’autre sans rechargement compte comme une page vue.

  • D’où vient l’identifiant du visiteur côté serveur ?

    Du cookie propriétaire _tally_vid, que la balise dépose en mode avec cookie, ou en mode « consentement d’abord » une fois le consentement donné. Un route handler le lit avec await cookies().

  • Puis-je signaler les robots d’IA depuis Next.js ?

    Oui. La page Crawlers donne un snippet de middleware qui signale à Tally les requêtes des robots connus, puisque la plupart n’exécutent jamais le script de la page.