Connecter un site Next.js

Connecter un site Next.jsLe parcours complet, en une page : mesurer l’audience, recevoir les demandes, collecter les inscriptions, faire surveiller vos tâches. Comptez une heure la première fois.Chaque étape renvoie vers son guide détaillé — cette page est la carte, pas le territoire.

À noter

Ce dont vous avez besoin avant de commencer : un accès à CONTROL (ou les clés que l’équipe INOVERTIX vous a transmises), et la liste des domaines de votre site (production, préproduction). Toutes les clés publiques sont refusées depuis un domaine non déclaré : c’est ce qui les rend inoffensives une fois lues dans votre page.

Étape 1 — La mesure (INOTRACK)Le traqueurapp/layout.jsx — la balise vaut pour tout le site, navigation SPA comprise : le traqueur intercepte history.pushState et compte chaque changement de route comme une page vue.

jsx

export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body>
        {children}
        <script
          src="https://messagerie.inovertix.com/inotrack.js"
          data-site="INOTRK_PUB_votre_cle_publique"
          data-endpoint="https://messagerie.inovertix.com/api/inotrack"
          defer
        />
      </body>
    </html>
  );
}

En Pages Router, la même balise va dans pages/_document.jsx.Un clic suiviN’importe quel élément portant data-inotrack :

jsx

<button data-inotrack="Ajouter au panier" onClick={addToCart}>Ajouter au panier</button>

Une étape de tunnelDepuis le navigateur, pour les étapes sans donnée sensible :

window.inotrack?.("funnel", "add_to_cart", { product_id: 12, total: 25000 });

Attention

La commande finale passe par votre serveur, pas par le navigateur. Le formulaire de commande transporte un téléphone, une ville, un montant. Une route API Next.js qui relaie l’appel avec la clé secrète garde ces données hors de portée du navigateur — et la clé secrète hors de votre bundle. Le guide complet détaille le proxy et le session_uid, qui est le point le plus souvent raté.

→ INOTRACK — Next.js, l’essentiel · le guide complet · la référence de l’APIÉtape 2 — La relation client (INODESK)Le widgetMême emplacement que le traqueur, dans app/layout.jsx :

jsx

<script
  src="https://messagerie.inovertix.com/inodesk.js"
  data-site="INODSK_PUB_votre_cle_publique"
  data-endpoint="https://messagerie.inovertix.com/api/inodesk"
  defer
/>

Le widget dessine sa bulle, lit la configuration du site (couleurs, logo, onglets, formulaires) et s’adapte. Il ne pose aucun cookie et échoue toujours en silence : quoi qu’il arrive, votre page continue de fonctionner.Un formulaire dans la page

jsx

<div data-inodesk-form="contact" />

Le widget remplit le conteneur dans son propre shadow DOM — aucune règle CSS de votre site ne peut le déformer, et aucune des siennes ne peut fuir chez vous.

À noter

Ne reconstruisez pas le formulaire en React. Sa définition vit dans CONTROL : ajouter un champ là-bas le fait apparaître partout, sans toucher au site. Un formulaire recodé devient une seconde définition, qui diverge au premier champ ajouté.

→ INODESK — Next.js · la référence de l’APIÉtape 3 — La newsletter (INOCAMPAGNE)

jsx

<script
  src="https://messagerie.inovertix.com/inocampagne.js"
  data-marque="INOCMP_PUB_votre_cle_publique"
  data-endpoint="https://messagerie.inovertix.com/api/inocampagne/public"
  defer
/>

Puis, là où le formulaire doit apparaître — pied de page, colonne latérale, milieu d’un article :

jsx

<div data-inocampagne-form />

Vous pouvez en poser plusieurs sur la même page : chacun est rendu indépendamment.

Attention

La mention de consentement vient de CONTROL, pas de votre code. C’est elle qui rend l’opt-in défendable. De même, le double opt-in est un réglage de la marque : votre site ne peut pas demander à s’en passer.

→ INOCAMPAGNE — Next.js · la référence de l’APIÉtape 4 — La surveillance (INOWATCH, facultatif)Si votre application a des tâches planifiées dont la panne coûterait cher — une synchronisation, une facturation, un envoi nocturne — faites-les surveiller.Le principe tient en une phrase : c’est le silence qui alerte. Une tâche morte n’émet aucune erreur, ne remplit aucun journal, ne déclenche aucun webhook. Elle disparaît, et on s’en aperçoit trois semaines plus tard.Pour une tâche Node lancée par cron ou par un ordonnanceur :

bash

node scripts/synchro.mjs && curl -fsS -X POST \
  'https://messagerie.inovertix.com/api/inowatch/beat/synchro-nocturne' \
  -H 'X-Beat-Key: INOWTC_HB_votre_cle' >/dev/null

Attention

&& et non ;. Avec &&, un échec du script devient un silence, et INOWATCH alerte. Avec ;, le battement partirait quand même : une tâche qui échoue chaque nuit passerait pour parfaitement saine.

→ INOWATCH — brancher une tâche · conteneur Docker · la référence de l’APILa recette finaleÀ passer une fois tout branché, dans cet ordre.

Les clés répondent. Trois ping, un par module branché : /api/inotrack/ping?k=…, /api/inodesk/ping?k=…, /api/inocampagne/public/ping?k=… — chacun renvoie {"ok":true,…} avec le bon nom.

Les domaines sont déclarés. Production et préproduction, pour chaque module. Un domaine oublié donne 403 origin_not_allowed, silencieusement côté widget.

La navigation remonte. Ouvrez le site, changez de page deux fois, puis regardez INOTRACK → Analytics : la session doit apparaître en moins d’une minute.

Le tunnel remonte. Déclenchez une étape ; elle doit apparaître dans INOTRACK → Funnel. Un 422 unknown_step signifie que l’étape n’est pas déclarée côté CONTROL.

Le widget s’affiche sur mobile comme sur ordinateur, et l’envoi d’un message de test crée une demande avec une référence.

L’inscription fonctionne : inscrivez une adresse réelle, vérifiez l’email de confirmation, puis cliquez le lien. Le profil doit passer en opt-in.

Aucune clé secrète dans le bundle. Cherchez _SEC_ dans les fichiers servis au navigateur : il ne doit rien ressortir. En Next.js, une variable préfixée NEXT_PUBLIC_ est embarquée dans le bundle — une clé secrète ne porte jamais ce préfixe.

Le battement bat. Si vous avez branché INOWATCH, forcez une exécution et vérifiez que la tâche repasse au vert.