Cómo verificar que el script de SeaText se cargue correctamente en una aplicación de una sola página (SPA)

Respuesta directa

Para verificar SeaText en una aplicación de una sola página (SPA), llama a SeaText.reinit() o SeaText.update() cuando cambie la ruta. Confirma también que la etiqueta del script de SeaText aparezca solo en el HTML inicial. No debe inyectarse de nuevo al navegar.

Este es el núcleo de una configuración correcta en una SPA. Si la etiqueta del script está presente una vez y el hook de ruta llama al método después de cada cambio de ruta, SeaText podrá seguir funcionando a medida que los usuarios se desplazan por tu aplicación.

Por qué la integración en SPA difiere de los sitios tradicionales

Los sitios de varias páginas cargan un nuevo documento HTML en cada clic. El navegador encuentra el script de SeaText nuevamente y lo ejecuta desde cero. Las SPA se cargan una vez e intercambian el contenido en el navegador. Nunca solicitan una segunda copia de ese documento HTML.

SeaText utiliza un atributo async en su etiqueta de script. Eso significa que el script se carga sin bloquear la renderización de la página. SeaText también almacena un ID en localStorage. Ese ID ayuda a SeaText a reconocer al mismo visitante a través de las rutas.

Debido a que el script ya se está ejecutando, debes indicarle a SeaText cuándo cambió el contenido visible. Un cambio de ruta del lado del cliente no restablece el entorno de JavaScript. El router elimina la vista anterior y renderiza una nueva. SeaText necesita una señal para inspeccionar esa nueva vista. Esa señal es SeaText.reinit() o SeaText.update().

Si en su lugar añades la etiqueta del script a cada ruta, podrías crear múltiples copias. La copia antigua puede seguir ejecutándose. La nueva copia puede iniciar una sesión nueva. Eso puede restablecer variantes, traducciones o personalizaciones. Mantén la etiqueta del script en el archivo de entrada estático.

Pasos de verificación rápida

1. Localiza el punto de entrada. Encuentra dónde se monta tu SPA. Esto suele ser index.html, main.js, main.tsx o App.vue.
2. Confirma que el snippet esté presente. El snippet de SeaText debe aparecer una vez dentro de la etiqueta body de ese archivo de entrada. No lo coloques en una plantilla de componente que se vuelva a renderizar al cambiar de ruta.
3. Compila y sirve la aplicación. Ejecuta tu comando de desarrollo habitual, como npm start, npm run serve o ng serve.
4. Inspecciona la pestaña Network. Recarga la página. Verifica que la solicitud del script de SeaText devuelva un HTTP 200 y que la respuesta sea JavaScript.
5. Revisa la pestaña Console. Busca errores que mencionen SeaText, seatext o el dominio del script. Una consola limpia significa que el script se analizó y ejecutó correctamente.
6. Activa una función de SeaText. Cambia un idioma o muestra una variante. Confirma que la función aparece en la ruta actual.
7. Navega a otra ruta. Usa el router de tu aplicación para cambiar de vista. Abre la pestaña Network nuevamente. El script de SeaText no debería solicitarse por segunda vez.

Estos pasos verifican la carga inicial. Todavía no prueban que SeaText se reinicialice después de la navegación.

Verificación de cambios de ruta

Una carga inicial limpia es solo la mitad de la prueba. También debes demostrar que SeaText reacciona cuando cambia la ruta. Utiliza un listener de ruta o un hook del router para llamar a SeaText.reinit() después de que se renderice la nueva ruta.

Aquí tienes un patrón genérico. El nombre del evento dependerá de tu router. La parte importante es la llamada al método de SeaText.

window.addEventListener('navigation', function () {
  if (window.SeaText && typeof window.SeaText.reinit === 'function') {
    window.SeaText.reinit();
  }
});

Reemplaza navigation con el evento que expone tu router. Si tu integración utiliza update(), reemplaza el nombre del método.

Resultados esperados para cada paso

Utiliza estas comprobaciones después de añadir el listener:

• Abre la aplicación. Esperado: el script de SeaText se carga una vez en la pestaña Network.
• Navega a una nueva ruta. Esperado: tu listener se dispara y llama a SeaText.reinit() o SeaText.update() una vez.
• Observa la pestaña Network nuevamente. Esperado: ninguna nueva solicitud para el archivo de script de SeaText.
• Revisa la consola. Esperado: sin errores de SeaText.
• Activa una función de SeaText. Esperado: la función se aplica en la nueva ruta.

Si el script se recarga, mueve el snippet de vuelta al archivo de entrada estático. Si la función no se aplica, comprueba que el hook de ruta se ejecute después de que el DOM se actualice.

Hooks de ruta específicos del framework

Cada router tiene un lugar diferente para enganchar los cambios de ruta. El objetivo es el mismo: después de que la nueva ruta se renderice, llama a SeaText.reinit() o SeaText.update().

React Router

Usa useLocation() y useEffect(). Coloca el observador dentro de tu componente Router.

import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';

function SeaTextRouteObserver() {
  const location = useLocation();

  useEffect(() => {
    if (window.SeaText && typeof window.SeaText.reinit === 'function') {
      window.SeaText.reinit();
    }
  }, [location]);

  return null;
}

Esperado: cuando cambia el pathname, el efecto se ejecuta y SeaText se reinicializa en la nueva página.

Next.js App Router

Usa usePathname() en un componente de cliente. Renderiza ese componente en tu layout raíz para que permanezca montado.

'use client';
import { usePathname } from 'next/navigation';
import { useEffect } from 'react';

export default function SeaTextRouteObserver() {
  const pathname = usePathname();

  useEffect(() => {
    if (window.SeaText && typeof window.SeaText.reinit === 'function') {
      window.SeaText.reinit();
    }
  }, [pathname]);

  return null;
}

Esperado: cada navegación del App Router cambia el pathname y activa el efecto.

Next.js Pages Router

Usa el hook useRouter() y el evento routeChangeComplete. Monta el observador en _app.js o _app.tsx.

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function SeaTextRouteObserver() {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = () => {
      if (window.SeaText && typeof window.SeaText.reinit === 'function') {
        window.SeaText.reinit();
      }
    };

    router.events.on('routeChangeComplete', handleRouteChange);
    return () => router.events.off('routeChangeComplete', handleRouteChange);
  }, [router]);

  return null;
}

Esperado: el manejador se dispara después de cada cambio de ruta completado y llama a SeaText una vez.

Vue Router

Usa el hook afterEach del router en tu archivo de configuración del router.

router.afterEach(() => {
  if (window.SeaText && typeof window.SeaText.reinit === 'function') {
    window.SeaText.reinit();
  }
});

Esperado: después de cada navegación, el hook se ejecuta. La etiqueta del script de SeaText permanece en index.html.

Angular Router

Filtra el evento NavigationEnd en AppComponent o en un servicio raíz.

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

export class AppComponent {
  constructor(private router: Router) {
    this.router.events
      .pipe(filter((event) => event instanceof NavigationEnd))
      .subscribe(() => {
        (window as any).SeaText?.reinit?.();
      });
  }
}

Esperado: SeaText se reinicializa después de cada navegación completada en Angular.

Si tu versión instalada expone update() en lugar de reinit(), reemplaza el nombre del método en estos ejemplos. Consulta con el proveedor si no estás seguro.

Problemas comunes y cómo solucionarlos

• El script se carga pero las funciones no aparecen. Comprueba que localStorage sea accesible. Algunos modos de privacidad o iframes aislados lo bloquean. Confirma también que tu hook de ruta llame a SeaText.reinit() o SeaText.update().
• El script se solicita en cada cambio de ruta. Probablemente el snippet esté dentro de un componente que se vuelve a montar. Muévelo al index.html estático.
• Errores de origen cruzado (CORS) en la consola. Si tu SPA sirve contenido desde múltiples dominios, permite el dominio del script de SeaText en tu Política de Seguridad de Contenido (CSP) y en los encabezados CORS.
• Error 404 en la solicitud del script. La URL del snippet puede estar desactualizada. Copia el snippet más reciente desde tu panel de control de SeaText.
• El reinicio se ejecuta más de una vez. Añade el observador de ruta en un solo lugar. Si lo montas en varios componentes, podrías llamar al método varias veces.

Limitaciones y cuándo no aplica este consejo

Esta guía cubre la carga de scripts del lado del cliente y la reinicialización de rutas. No valida la lógica de reescritura de IA, traducción o pruebas A/B de SeaText. Esas requieren pruebas funcionales separadas.

Los pasos asumen una SPA estándar con un archivo de entrada estático. Si tu SPA utiliza una arquitectura de micro-frontends donde cada fragmento inyecta sus propios scripts, la regla de un solo snippet puede no aplicarse. Consulta al soporte de SeaText para esa topología.

Si tu aplicación utiliza renderizado del lado del servidor (SSR), comprueba que el snippet no esté duplicado en la salida del servidor. Los hooks de ruta siguen perteneciendo al cliente.

Las herramientas de prueba headless necesitan esperar a la ejecución del script. Una simple carga de página puede no ser suficiente. Espera a que el método de SeaText esté disponible antes de verificar los resultados.

FAQ

¿Necesito llamar a SeaText.reinit() en cada cambio de ruta?

Sí, para cambios de ruta del lado del cliente. El cambio de ruta modifica el DOM visible, por lo que SeaText necesita volver a escanear la página. No recargues el script de SeaText durante la navegación. Mantén la etiqueta del script en el HTML inicial y llama a SeaText.reinit() o SeaText.update() desde el hook del router.

¿Cuándo debo usar SeaText.update() en lugar de SeaText.reinit()?

Usa el método que proporcione tu integración. Como patrón general, reinit() se ajusta a un cambio de ruta completo, mientras que update() se ajusta a un cambio de contenido menor en la misma página. Si tu compilación expone solo un método, usa ese. Consulta con el proveedor si no estás seguro.

¿Puedo cargar el script de SeaText dinámicamente mediante JavaScript?

No se recomienda. El snippet está diseñado para una colocación estática en el HTML inicial. La inyección dinámica puede causar condiciones de carrera, carga doble o fallos en la Política de Seguridad de Contenido.

¿Qué pasa si mi SPA utiliza una Política de Seguridad de Contenido (CSP) estricta?

Añade el dominio del script de SeaText a la directiva script-src. Debido a que el script se comunica con los endpoints de SeaText, permite también connect-src. Luego repite las comprobaciones de Network y Console.

¿Cómo verifico esto en una compilación de producción?

Ejecuta npm run build y sirve el resultado. Abre las herramientas de desarrollo (DevTools), revisa las pestañas Network y Console, navega entre rutas y confirma que el script de SeaText no se recargue.

Lecturas adicionales y fuentes de comparación

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

• Pruebas de carga en aplicaciones de una sola página - LoadView
• Probar una aplicación de una sola página - SPA
• Pruebas de carga de una aplicación de una sola página (SPA) - Documentación de LoadForge

Más información

Visita el sitio web para obtener más información.