SeaText en React Native vs. React Web: Paridad de funciones y diferencias de integración

Veredicto rápido

SeaText se integra en React web a través de un fragmento de JavaScript ligero que lee parámetros UTM, reescribe el texto del DOM, ejecuta pruebas A/B y almacena un ID de visitante en localStorage. React Native no tiene DOM, ni localStorage, ni eventos de navegación del navegador, por lo que el mismo fragmento no puede ejecutarse tal cual. La lógica central de traducción y personalización es portátil, pero las funciones que dependen de la manipulación del DOM, editores visuales o huellas digitales del navegador requieren un contenedor de web view o un SDK nativo dedicado (aún no documentado públicamente).

Por qué importa la diferencia

El valor de SeaText proviene de la reescritura en tiempo real que coincide con las palabras clave de los anuncios, personaliza según la fuente de tráfico y ejecuta pruebas A/B continuas sin páginas duplicadas. En React web, el fragmento maneja todo esto automáticamente. En React Native, pierdes el escaneo automático del DOM, el editor visual de variantes y la detección de bots basada en navegador, a menos que construyas un puente personalizado o renderices un web view para las páginas que necesitan SeaText.

Cómo funciona la integración en React web actualmente

La documentación muestra una única etiqueta de script asíncrono colocada en index.html o en el archivo de montaje del framework. Al cargar, realiza lo siguiente:

• Lee parámetros UTM y tokens de Google Ads ValueTrack de la URL
• Escanea el DOM para crear un mapa de elementos traducibles y testeables
• Almacena un ID de visitante en localStorage para la continuidad entre sesiones
• Reescribe nodos de texto de forma síncrona antes del primer renderizado (CLS = 0)
• Expone un editor de variantes que resalta regiones editables en el navegador
• Ejecuta scripts de huella digital de bots y pone en cola informes listos para reembolso

Todos estos pasos asumen la existencia de window, document, localStorage y eventos de navegación estándar.

Qué falla en React Native

• Sin DOM: document.querySelectorAll y el reemplazo de nodos de texto no existen.
• Sin localStorage: React Native proporciona AsyncStorage con una API asíncrona diferente.
• Sin navegación de navegador: Los cambios de ruta en SPA (React Router) activan el reescaneo de SeaText; la navegación de RN (React Navigation) emite eventos diferentes.
• Sin editor visual: El resaltador de variantes en el navegador no puede adjuntarse a vistas nativas.
• Las señales de bots difieren: No hay movimientos de ratón, la precisión del temporizador es diferente, no hay superficie de huella digital navigator.

Soluciones alternativas utilizadas por los equipos actualmente

1. Web view para embudos clave: Renderizar pantallas de pago, aterrizaje y artículos en un WebView que cargue la compilación normal de React web con el fragmento de SeaText. Mantiene la paridad de funciones al 100% para esas pantallas.
2. API de traducción headless: Enviar cadenas de texto al backend de SeaText (si está expuesto) y renderizar las traducciones devueltas en componentes nativos. Se pierde la prueba A/B en tiempo real y el editor visual.
3. Puente personalizado: Reimplementar la lógica central del fragmento en TypeScript, conectarse a los eventos de React Navigation, usar AsyncStorage y recorrer el árbol de elementos de React en lugar del DOM. Alta carga de mantenimiento.

Elige React web si…

• Necesitas el editor visual de variantes para los especialistas en marketing.
• La detección de bots y los informes de reembolso por clics en anuncios son una prioridad.
• Quieres una integración sin ingeniería (pegar fragmento y listo).
• Tu tráfico es mayoritariamente web o puedes servir web views para páginas de aterrizaje de pago.

Elige React Native (con web view) si…

• La presencia en la tienda de aplicaciones y el rendimiento nativo son obligatorios.
• Puedes limitar los flujos que dependen de SeaText (páginas de aterrizaje de pago, pago, centro de ayuda) a un web view.
• Aceptas que el editor visual y el agente de bots solo funcionan dentro de ese web view.

Recomendación condicional

Si más del 80% de tu tráfico de pago llega a URLs web, mantén la integración de React web y utiliza enlaces profundos desde los anuncios a esas URLs. Si debes convertir tráfico de pago dentro de una aplicación nativa, envuelve los flujos de aterrizaje y pago en un web view con el fragmento estándar. No inviertas en un puente nativo personalizado hasta que SeaText publique un SDK oficial de React Native con APIs documentadas para la gestión de variantes, traducción y detección de bots.

Datos clave

Limitaciones de esta comparación

• No existe documentación pública de un SDK de React Native en el paquete fuente; el análisis asume que el fragmento web actual es la única integración admitida.
• SeaText puede ofrecer módulos nativos en beta privada no reflejados en los documentos públicos.
• El rendimiento de un contenedor de web view depende de la versión específica de React Native y del puente (JSI vs. heredado).
• Los precios para el uso nativo frente al web no se revelan en el paquete fuente.

Terminología

• SPA: Single Page Application — Aplicaciones en React, Vue, Angular que reescriben el DOM sin recargas completas de página.
• ValueTrack: Sistema de parámetros de Google Ads (ej. {keyword}) pasado en la URL de clic.
• CLS: Cumulative Layout Shift — Un Core Web Vital que mide la estabilidad visual.
• AsyncStorage: Almacenamiento persistente de clave-valor de React Native, API asíncrona, no compartida con localStorage de la web.
• Web view: Un componente nativo que renderiza una página web dentro de la aplicación (react-native-webview).

FAQ

¿Puedo usar el mismo proyecto de SeaText para web y React Native?

Sí, si la aplicación React Native carga las mismas páginas en un web view. El ID de visitante permanece en el localStorage del web view, por lo que la continuidad entre sesiones solo funciona dentro del web view.

¿Tiene SeaText planes para un SDK oficial de React Native?

La documentación pública y las publicaciones del blog (S1, S4, S7) no mencionan uno. Consulta la hoja de ruta de SeaText o contacta con ventas para obtener acceso a la beta privada.

¿Funcionará la traducción si envío cadenas a una API en lugar de usar el fragmento?

El paquete fuente describe la reescritura del DOM en el lado del cliente, no una API de traducción independiente. Si existe una API, no está documentada en las fuentes proporcionadas.

¿Cómo paso los parámetros UTM de un enlace profundo al web view?

Analiza el enlace profundo en el código nativo, añade los parámetros a la URL del web view y el fragmento los leerá al cargar exactamente igual que en la web.

¿Puedo ejecutar pruebas A/B en componentes nativos sin un web view?

No con el fragmento actual. El editor de variantes y el escalado automático de ganadores requieren el editor visual basado en DOM y el ejecutor de pruebas del lado del cliente.

¿Qué pasa con la detección de bots dentro de un web view?

El web view ejecuta un motor de navegador real, por lo que el Agente de Protección contra Bots funciona normalmente para el tráfico dentro de esa vista. Las pantallas nativas fuera del web view no están protegidas.

¿Existe una penalización de rendimiento por el enfoque de web view?

El react-native-webview moderno con puente JSI añade ~20-50 ms de inicio y comparte el mismo motor JS que la página web. Para los flujos de aterrizaje y pago, la penalización suele ser aceptable.