Scripts de terceros
Los scripts de analítica y etiquetas son código de la app, no contenido. Dónde montarlos, qué estrategia de carga elegir y por qué importa la CSP del editor.
Analítica, gestores de etiquetas, widgets de chat, banners de consentimiento: todo eso pertenece a tu app, no al CMS.
La razón es la propiedad. Una etiqueta de script es código ejecutable en cada página; se revisa, versiona y despliega como el resto. Ponerla en un campo editable convierte "cambiar un titular" y "ejecutar JavaScript arbitrario en producción" en el mismo permiso.
Analítica: usa los componentes oficiales
Para Google Analytics y Tag Manager no escribas la etiqueta de script a mano. @next/third-parties trae componentes que cargan el script y el fragmento de inicialización con la estrategia correcta:
// app/[[...path]]/layout.tsx
import { GoogleAnalytics, GoogleTagManager } from "@next/third-parties/google";
const gaId = process.env.NEXT_PUBLIC_GA_ID?.trim();
const gtmId = process.env.NEXT_PUBLIC_GTM_ID?.trim();
// ...dentro de <body>
{gtmId ? <GoogleTagManager gtmId={gtmId} /> : null}
{gaId ? <GoogleAnalytics gaId={gaId} /> : null}Un <Script src="...gtag/js?id=..."> pelado carga la biblioteca pero nunca la configura: falta la llamada inline gtag('config', id). Es justo el tipo de montaje a medias que estos componentes evitan.
Condicionar a la variable de entorno no es cortesía: mantiene la analítica fuera de los despliegues de vista previa y del desarrollo local, para que tus números no sean tus propios clics.
Todo lo demás: next/script
Widgets de chat, burbujas de soporte, incrustaciones sociales y etiquetas puntuales de proveedores no tienen componente oficial. Esos van por next/script:
import Script from "next/script";
<Script src="https://widget.example.com/embed.js" strategy="lazyOnload" />Elegir estrategia
El valor por defecto rara vez es el correcto:
afterInteractive: el predeterminado y el adecuado para analítica y gestores de etiquetas. Carga cuando la página ya es interactiva.lazyOnload: para lo que la primera pantalla no necesita: chats, burbujas de soporte, incrustaciones sociales.beforeInteractive: solo para scripts que deben ejecutarse antes de la hidratación, como una barrera de consentimiento que decide si otros scripts pueden cargar. Bloquea, así que es el último recurso.
Un widget de chat en afterInteractive compite con tu propia hidratación por el hilo principal. Es la forma más común en que un sitio cmssy rápido se vuelve lento: las páginas son estáticas, la carga de terceros no.
La CSP los bloqueará
Esta es la parte que pilla a la gente.
createCmssyProxy aplica una Content Security Policy para que el panel de cmssy pueda enmarcar tu sitio en el editor. Esa política gobierna cada script que carga la página, así que un script de terceros recién añadido puede quedar bloqueado por una cabecera que no escribiste y quizá no sabes que existe.
El síntoma es específico: el script nunca corre, en la pestaña de red no aparece error, y la consola del navegador muestra una violación de CSP nombrando el origen bloqueado. Si una etiqueta "simplemente no dispara" en producción pero funciona en local, mira la consola antes que el gestor de etiquetas.
Cuando añadas un script de un origen nuevo, extiende la política para permitirlo.
Consentimiento
Si condicionas scripts al consentimiento, la barrera también es código de la app y debe ejecutarse primero. Pon la lógica de consentimiento en beforeInteractive y carga después los scripts condicionados.
No condiciones renderizando el banner como un bloque del CMS. Un editor que despublique ese bloque quitaría en silencio el mecanismo, no el rastreo, y el sitio seguiría recogiendo datos sin nada en pantalla que pida permiso.
Qué pertenece al CMS en su lugar
El script no; la configuración sí. Un identificador de medición, una bandera de campaña, un interruptor de función son valores, y los valores se pueden editar sin riesgo. Léelos de la configuración del sitio o de los campos propios de una página y pásalos a un script que sea de tu app.
Así la superficie editable se queda en "qué identificador" y no en "qué código".
Siguientes pasos
- Rutas y páginas: el middleware que fija la CSP.
- SEO: metadatos, que son contenido y no código.
- Branding: valores a nivel de sitio que merece la pena editar.