Inicio rápido en 5 minutos

Agrega esto como el primer script en tu <head>:

<script src="https://[your-team-id].csidetm.com/client.js" referrerpolicy="origin"></script>

npm install @cside.dev/next

App Router (layout.tsx):

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

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

Pages Router (_document.tsx):

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

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

Agrega esto a tu script de compilación en package.json:

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

El CLI no acepta argumentos posicionales; pasa el ID de tu equipo con --team-id. Inyecta el script de monitoreo de cside en tus archivos HTML y funciona con Astro, Gatsby, Hugo, Eleventy, Docusaurus y cualquier framework que genere HTML estático.

npm install @cside.dev/vite

// vite.config.ts
import cside from '@cside.dev/vite';

export default defineConfig({
  plugins: [cside({ teamId: '[your-team-id]' })],
});

1. En Google Tag Manager, ve a Etiquetas > Nueva, haz clic en Configuracion de la etiqueta y selecciona HTML personalizado
2. Pega el siguiente fragmento en el campo HTML (reemplaza [your-team-id] con el ID de equipo que aparece en Team Settings > General)
3. En Activacion, selecciona All Pages
4. Guarda la etiqueta y publica tu contenedor GTM

<script type="text/javascript" src="https://[your-team-id].csidetm.com/client.js" referrerpolicy="origin"></script>

Si usas Claude Code, Cursor u otro asistente de programacion con IA, puede agregar cside por ti. Consulta el prompt completo en la pagina del asistente IA, o pega esto en tu terminal:

Add cside client-side security monitoring to this project. Install the
right package for the framework (@cside.dev/next for Next.js,
@cside.dev/vite for Vite, @cside.dev/cli for static sites) or add
<script src="https://[your-team-id].csidetm.com/client.js" referrerpolicy="origin"></script>
as the first script in the <head> for any other setup. Then check if the
project has a Content Security Policy (in HTTP headers, meta tags,
helmet.js, next.config.js, or hosting config). If the CSP has explicit
script-src or connect-src directives listing specific domains, add
*.csidetm.com to both. If the CSP uses broad rules like
"default-src https:", no changes are needed.