Ajouter notre script

Il existe deux facons d’ajouter cside a votre site. Choisissez la methode qui correspond a votre configuration :

Methode	Ideal pour
Outil CLI	Sites statiques (SSG), integration sans code
Script manuel	Applications SSR, configurations personnalisees

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

Pas de script manuel necessaire

Le CLI injecte automatiquement le script cside et prefixe tous vos scripts tiers. Si vous utilisez le CLI, passez directement a l’activation de votre domaine. Pas besoin d’ajouter une balise script manuellement.

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 example.com

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 example.com"
  }
}

Remplacez example.com

Remplacez example.com par votre domaine reel configure dans cside.

Ce que fait le CLI

Lorsque vous executez le CLI, il automatiquement :

Injecte le script cside dans tous les fichiers HTML
Prefixe les URL de scripts tiers avec l’infrastructure edge cside
Ajoute referrerpolicy="origin" aux balises script pour la verification de licence

Options courantes

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

# Exclure des scripts specifiques du prefixage
npx @cside.dev/cli example.com --excluded-scripts "https://example.com/skip.js"

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.

Vous pouvez facilement ajouter notre balise script au <head> du document. Assurez-vous que la balise <script> est le premier element script ajoute a la page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://proxy.csidetm.com/script.js" referrerpolicy="origin"></script>
    ...
  </head>
  <body>
  ...
  </body>
</html>

Si vous utilisez NextJS, vous pouvez utiliser notre package npm @cside.dev/next. Installez-le simplement comme ceci :

Installer notre script

# With NPM
npm install @cside.dev/next

# With Yarn
yarn add @cside.dev/next

# With PNPM
pnpm add @cside.dev/next

Ajouter notre script

Apres l’installation, ajoutez simplement ce qui suit a votre fichier _document dans votre projet NextJS.

// 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 /> {/* <- Here */}
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

ou si vous utilisez l’App Router :

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

export default function Layout({ children }) {
  return (
    <>
      <CSideScript /> {/* <- Here */}
      {children}
    </>
  );
}

Aller sur Webflow

Tout d’abord, allez au Tableau de bord Webflow et naviguez vers le menu a 3 points puis selectionnez “Settings”. Ensuite, naviguez vers “Custom code”.

Ajouter le script de cside

Apres avoir navigue vers la section “Custom code”, ajoutez simplement ce qui suit en haut de votre section “Head Code”.

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

Enregistrer, deployer et se detendre !

Cliquez simplement sur “Save” et c’est fait ! Vous pouvez maintenant voir le trafic de scripts de votre site web etre route via Gatekeeper et surveille en temps reel sur notre tableau de bord.

Prochaines etapes

Une fois que vous avez ajoute cside a votre site web (via CLI ou script manuel), vous verrez le trafic de vos scripts en temps reel sur le tableau de bord.

Activer votre domaine : Allez dans Domaines dans la barre laterale gauche et cliquez sur le bouton d’activation a cote de votre domaine.