Seatext library

Cómo verificar que el script de SeaText se cargue después de un rediseño o migración

Después de un rediseño o migración, confirme que el fragmento de SeaText esté presente en el HTML, se cargue sin errores en la consola, realice su solicitud de red, escriba en localStorage y renderice...

Cómo verificar que el script de SeaText se cargue después de un rediseño o migración

Lista de verificación rápida

Abra el sitio en un navegador, inicie las Herramientas para desarrolladores (F12) y siga estos cinco pasos en orden. Cada paso detecta un modo de fallo diferente para que no dependa de una sola señal.

  1. Confirme que el fragmento existe en el HTML entregado. Vea el código fuente de la página (no el panel Elementos) y busque seatext o su ID de proyecto. Si la etiqueta falta, la canalización de despliegue la eliminó.
  2. Compruebe la pestaña Consola en busca de errores. Busque mensajes en rojo que hagan referencia a seatext, SEATEXTCODEINTEGRATION o scripts bloqueados. Las violaciones de la Política de Seguridad de Contenido (CSP) y los errores de origen cruzado aparecen aquí primero.
  3. Verifique que la solicitud de red se complete. Cambie a la pestaña Red, filtre por "JS" o "Script", recargue y confirme una respuesta 200 para el cargador de SeaText. Un error 404 o 403 significa que la ruta de la CDN o el ID del proyecto cambiaron.
  4. Inspeccione localStorage para ver el ID de SeaText. En la pestaña Aplicación (o Almacenamiento), expanda Almacenamiento local, seleccione su origen y busque una clave que contenga seatext. Su ausencia significa que el script nunca se ejecutó o que localStorage está bloqueado.
  5. Valide el comportamiento visible. Active una traducción, una variante de personalización o un evento de detección de bots y confirme que el DOM se actualiza. Utilice el modo de vista previa del panel de SeaText o añada ?seatext_preview=1 para forzar una variante.

Por qué es importante la verificación posterior a la migración

Un rediseño a menudo reescribe los puntos de inyección de head o body, cambia de HTML renderizado en el servidor a un framework SPA, o añade una nueva Política de Seguridad de Contenido. Cualquiera de esos cambios puede eliminar silenciosamente la etiqueta de script asíncrono, bloquear el dominio de la CDN o impedir el acceso a localStorage. Debido a que SeaText reescribe titulares, ofertas y traducciones en tiempo de ejecución, un script faltante revierte cada página al idioma base y a la oferta base, perdiendo el aumento de conversión y la evidencia de reembolso de bots que proporciona la plataforma.

Looking to implement this for your website?
Abrir la Guía de instalación de SeaText →

Requisitos previos antes de comenzar

  • Acceso al entorno de pruebas (staging) que refleja la canalización de compilación de producción.
  • Familiaridad con las Herramientas para desarrolladores del navegador (pestañas Consola, Red, Aplicación).
  • ID del proyecto de SeaText y nombre de host de la CDN esperado de la guía de integración.
  • Permiso para editar encabezados CSP o reglas de proxy si el script está bloqueado.
  • Una URL de prueba que ejercite la traducción, la personalización o la detección de bots para que pueda observar el cambio en el DOM.

Verificación paso a paso en el entorno de pruebas

1. Presencia del fragmento en la salida de compilación

Ejecute la compilación de producción localmente (npm run build o equivalente) y abra el archivo index.html generado. Busque el fragmento exacto que proporcionó SeaText. En proyectos de React, Vue o Angular, el fragmento pertenece a public/index.html o a la plantilla raíz del framework. Si su CI/CD utiliza plantillas HTML, confirme que la variable que inyecta el fragmento se resuelva correctamente.

2. Inspección de Consola y Red

Despliegue en el entorno de pruebas, abra la URL y presione F12. Recargue con la pestaña Red abierta. El cargador de SeaText debería aparecer como una solicitud de script con el atributo async. Haga clic en la solicitud; la pestaña Respuesta debe devolver JavaScript, no una página de error HTML. En la Consola, filtre por "seatext": debería haber cero errores. Una violación de CSP se muestra como "Refused to load the script" (Se rechazó la carga del script) con la directiva que lo bloqueó.

3. Confirmación de escritura en localStorage

Después de que se ejecute el script, abra Aplicación → Almacenamiento local → su origen. Debería ver una clave como seatext_visitor_id o similar. Si la clave falta, compruebe si el sitio se ejecuta en un iframe aislado, utiliza una política de cookies restrictiva o sirve páginas desde múltiples subdominios sin almacenamiento compartido.

4. Prueba de humo funcional

Elija una página que utilice traducción o el agente de Google Ads. Añada ?seatext_preview=1 (o utilice el enlace de vista previa del panel) y verifique que los titulares, botones o bloques de productos cambien. Para la detección de bots, visite la página con un agente de usuario de prueba conocido o la herramienta de prueba de SeaText y confirme que el panel registra una sesión.

Comprobaciones de lanzamiento en producción

Repita la misma lista de verificación de cinco pasos inmediatamente después del cambio de DNS. La propagación de la CDN, el almacenamiento en caché perimetral o una variable de entorno omitida pueden hacer que la producción se comporte de manera diferente al entorno de pruebas. Programe una ventana de 15 minutos después del lanzamiento para realizar las comprobaciones mientras el tráfico es bajo. Si utiliza indicadores de funciones (feature flags), habilite SeaText primero para un pequeño porcentaje de usuarios y supervise el panel para ver eventos en vivo.

Patrones de fallo comunes y soluciones

SíntomaCausa probableSolución
Fragmento ausente en el código fuente de la páginaLa canalización de compilación eliminó el paso de inyecciónAñada una aserción posterior a la compilación que busque el ID del proyecto
La consola muestra error de CSPEl nuevo encabezado CSP carece del dominio CDN de SeaTextAñada script-src https://cdn.seatext.com (o su CDN) a la política
La solicitud de red devuelve 404El ID del proyecto cambió o la ruta de la CDN se actualizóActualice el fragmento al ID de proyecto actual desde el panel
Falta la clave de localStorageAlmacenamiento de terceros bloqueado o iframe de origen cruzadoAsegúrese de que el script se ejecute en un contexto de origen propio; permita el almacenamiento en el iframe allow-scripts allow-same-origin
No aparecen traducciones o variantesScript cargado pero el alcance de IA no configuradoVerifique que la configuración del alcance de IA en el panel coincida con la nueva estructura del sitio

Prueba de regresión automatizada que puede añadir a CI

Añada un paso de navegador sin interfaz (Playwright, Cypress o Puppeteer) que cargue el index.html compilado, espere la solicitud de red de SeaText, afirme que localStorage.getItem('seatext_visitor_id') existe y compruebe que un atributo de datos conocido (por ejemplo, data-seatext-variant) aparezca en un elemento objetivo. Haga que la compilación falle si alguna aserción falla. Esto detecta regresiones antes de que lleguen al entorno de pruebas.

Datos clave

ElementoDetalle
Modo de carga de scriptEtiqueta de script asíncrono con atributo async
Requisito de almacenamientoEscribe un ID de visitante en localStorage; se requiere acceso de origen propio
Nota sobre origen cruzadoMúltiples dominios necesitan CSP compatible y almacenamiento compartido o proxy
Punto de integración SPAInserte el fragmento en index.html o en el archivo de montaje del framework
Señales de verificaciónConsola limpia, Red 200, clave de localStorage presente, variante DOM visible
Activador de vista previaAñada ?seatext_preview=1 o utilice el enlace de vista previa del panel

Limitaciones

Esta lista de verificación cubre solo la carga del lado del cliente. No verifica las rutas de renderizado del lado del servidor, las reescrituras de trabajadores perimetrales (edge-workers) o la personalización a nivel de API que SeaText pueda introducir en futuras versiones. Si su pila mueve el renderizado al borde (edge), añada una comprobación de registro perimetral correspondiente. Los pasos también asumen que usted controla la entrega de HTML; si una plataforma de terceros inyecta el fragmento, coordine su ciclo de lanzamiento.

Preguntas frecuentes

¿Cómo sé qué dominio CDN permitir en CSP?

Abra la pestaña Red en una página que funcione, haga clic en la solicitud del script de SeaText y copie el nombre de host de la URL de solicitud. Ese es el origen exacto que debe incluir en la lista blanca.

¿Puedo verificar el script sin las Herramientas para desarrolladores del navegador?

Sí. Ejecute un monitor sintético (por ejemplo, Datadog, Pingdom o un script de Playwright personalizado) que afirme que la URL del script devuelve 200 y que el cuerpo de la respuesta contiene SEATEXTCODEINTEGRATION.

¿Qué pasa si el sitio utiliza una CSP estricta con nonces?

Genere un nonce en el momento de la renderización y añádalo a la etiqueta de script de SeaText: <script nonce="{{nonce}}" src="..." async></script>. El nonce debe coincidir con el encabezado CSP para esa respuesta.

¿El atributo async retrasa la traducción?

El script se carga de forma asíncrona, pero SeaText reescribe el DOM después de ejecutarse. Para el contenido visible sin desplazamiento (above-the-fold), considere añadir fetchpriority="high" a la etiqueta del script o incluir un pequeño bootstrap que inicie el cargador antes.

¿Con qué frecuencia debo volver a ejecutar estas comprobaciones?

Después de cada despliegue que afecte a la plantilla HTML, los encabezados CSP, la estructura del dominio o las políticas de cookies/almacenamiento. Una prueba sintética programada mensualmente es una buena red de seguridad.

¿Dónde encuentro el fragmento actual si cambió?

Inicie sesión en el panel de SeaText, abra Instalación → Integración general y copie el fragmento etiquetado como "SEATEXTCODEINTEGRATION".

Próximos pasos

Añada la prueba de regresión de CI en este sprint. Programe una ventana de verificación de 15 minutos después del lanzamiento para la próxima migración. Mantenga la lista de verificación en su manual de operaciones (runbook) para que cualquier ingeniero pueda ejecutarla sin necesidad de conocimientos tribales.

Lecturas adicionales y fuentes de comparación

Estas fuentes externas proporcionan contexto adicional para evaluar el tema. Su inclusión no constituye un respaldo.

Cómo puede ayudar SeaText

El panel de SeaText muestra el estado de carga del script en tiempo real, el renderizado de variantes y los eventos de detección de bots por dominio. Después de la migración, abra la Vista en vivo para confirmar que el tráfico se está procesando. Si el script no se carga, el panel marca el dominio con un estado rojo y muestra el error exacto de CSP o de red. También puede generar un nuevo fragmento con el ID de proyecto y el nonce de CSP correctos desde la página de Instalación.

Recommended Solution

Ready to Take the Next Step?

See how our verified tools and services help you put this guide into practice.