Ajouter notre script

Choisissez la méthode adaptée à votre site. L’installation figée avec SRI est disponible uniquement pour les équipes où cside l’a activée.

Option 1 : Outil CLI (recommande pour les sites statiques)

Le CLI fonctionne avec tout framework qui genere des fichiers HTML statiques, notamment :

• Astro (mode statique)
• Next.js (export statique)
• Gatsby
• Nuxt (mode statique)
• SvelteKit (adaptateur statique)
• Eleventy (11ty)
• Hugo
• VitePress / VuePress
• Docusaurus

Tout autre framework qui genere des fichiers HTML statiques fonctionnera egalement. Le CLI detecte automatiquement les dossiers de sortie .next et dist, ou vous pouvez specifier un repertoire personnalise avec --dir.

Installer le CLI

npm install @cside.dev/cli

Ou executez directement sans installer :

npx @cside.dev/cli@latest

Ajouter a votre processus de build

Ajoutez le CLI a votre script de build dans package.json :

{
  "scripts": {
    "build": "your-build-command && npx @cside.dev/cli@latest"
  }
}

Ce que fait le CLI

Lorsque vous executez le CLI, il automatiquement :

1. Supprime toute balise script cside existante, de sorte qu’une nouvelle execution apres chaque build n’ajoute jamais de doublon
2. Injecte le script cside comme premier script dans tous les fichiers HTML, en ignorant node_modules et vendor
3. Ajoute referrerpolicy="origin" a la balise script pour la verification de licence

Options courantes

# Traiter un repertoire specifique
npx @cside.dev/cli --dir ./out

# Injecter un hote de script associe a l'equipe (recommande)
npx @cside.dev/cli@latest --team-id [your-team-id]

Consultez le guide d’integration CLI pour toutes les options.

Option 2 : Installation manuelle du script

Utilisez cette methode pour les applications SSR ou si vous avez besoin de plus de controle sur l’integration.

Le script manuel s’execute dans le moteur JavaScript du navigateur, le rendant compatible avec tout framework ou plateforme, quel que soit votre stack technique.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://[your-team-id].csidetm.com/client.js" referrerpolicy="origin"></script>
    ...
  </head>
  <body>
  ...
  </body>
</html>

# With NPM
npm install @cside.dev/next

# With Yarn
yarn add @cside.dev/next

# With PNPM
pnpm add @cside.dev/next

// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CSideScript } from '@cside.dev/next';

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <CSideScript teamId="[your-team-id]" /> {/* <- Here */}
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

// layout.tsx
import { CSideScript } from '@cside.dev/next';

export default function Layout({ children }) {
  return (
    <>
      <CSideScript teamId="[your-team-id]" /> {/* <- Here */}
      {children}
    </>
  );
}

<!-- cside script -->
<script src="https://[your-team-id].csidetm.com/client.js" referrerpolicy="origin"></script>
<!-- the rest of your head code/scripts -->

Option 3 : Script epingle avec Subresource Integrity (SRI)

Si des scripts epingles sont disponibles pour votre equipe, vous pouvez installer une version fixe du script cside avec un hash Subresource Integrity (SRI), afin que le navigateur verifie les octets exacts du script avant de l’executer. Le nom de fichier est le hash SHA-256 du script complet, y compris la configuration de votre equipe. Publier une nouvelle configuration ou version du script genere une nouvelle URL ; les URLs epinglees existantes continuent de fonctionner.

Ouvrez Setup > Security dans le tableau de bord et copiez la balise script complete sous Latest published version. Placez-la de maniere synchrone pres du debut du <head>, avant les autres scripts, en conservant l’URL et la valeur d’integrite de la meme publication :

<script
  src="https://[your-team-id].csidetm.com/[sha256].js"
  integrity="sha384-[base64-digest]"
  crossorigin="anonymous"
  referrerpolicy="origin"
></script>

La version affichee est toujours la derniere publiee. Elle n’indique pas quelle version est installee sur votre site. Si le script est encore en preparation, revenez sur cette page et selectionnez Refresh ; cela verifie la publication et ne reconstruit pas le script. Les changements de configuration peuvent prendre du temps avant d’apparaitre dans une nouvelle publication.

Un script epingle conserve son code et sa configuration d’origine. Pour recevoir une nouvelle configuration ou des corrections du script, remplacez la balise complete par la plus recente. Activer ou desactiver Developer Mode necessite egalement de remplacer ou de retirer un script deja epingle, et les anciennes URLs epinglees continuent de fonctionner meme si l’installation epinglee est ensuite desactivee pour votre equipe.

Si une publication ne se charge pas, utilisez Retry.

Prochaines etapes

Une fois que vous avez ajoute cside a votre site web , vous verrez le trafic de vos scripts en temps reel sur le tableau de bord.

Verifier que cela fonctionne : Ouvrez le tableau de bord et ouvrez Health dans la barre laterale gauche. Le trafic des scripts apparait quelques secondes apres la premiere visite. Il n’y a aucune etape d’activation. Vos domaines sont listes sur la page Home de l’equipe et dans Team Settings > Domains.

Vous preferez laisser l’IA faire ? Utilisez un assistant de codage IA pour detecter automatiquement votre framework et ajouter cside a votre projet.