El título puede parecer un poco vago, pero eso se debe a que actualmente tengo varios problemas para integrar Google Optimize en nuestro proyecto React/Next.js. Voy a tratar de explicar mis problemas y acciones lo más detalladamente posible. Sin embargo, avísame si algo no está claro.
<Html lang="en" className="async-hide"> <Head> {/* Google Optimize Ant-Flicker Snippet https://support.google.com/optimize/answer/9692472?ref_topic=6197443 */} <style dangerouslySetInnerHTML={{ __html: `.async-hide { opacity: 0 !important}`, }} /> <script dangerouslySetInnerHTML={{ __html: ` (function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer',4000, {'OPT-OPTIMIZE_ID':true}); `, }} /> <script src="https://www.googleoptimize.com/optimize.js?id=OPT-OPTIMIZE_ID"></script> {/* Google Tag Manager */} <script async src="https://www.googletagmanager.com/gtm.js?id=GTM-TAGMANAGER_ID"></script> <script dangerouslySetInnerHTML={{ __html: ` (function(w,l){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'}); })(window,'dataLayer'); `, }} ></script> ... [rest of code]Es un problema bastante común que está experimentando aquí. Google Optimize y otras soluciones de prueba A/B que cambian el contenido del sitio web a través de Javascript en el cliente crean un efecto de parpadeo, ya que los scripts deben descargarse antes de que pueda cambiar algo.
Para responder tu pregunta:
A medida que trabaja con next.js, surgen algunos problemas especiales. Next.js usa un servidor (o una fase de representación estática) en el servidor, así como una fase de hidratación en el lado del cliente. Cuando coloca Google Optimize (y se carga) antes de que comience la hidratación, generará el experimento correcto, pero se sobrescribirá tan pronto como se active la hidratación.
¿Cómo podría integrarlo correctamente con Tagmanger? En el componente más externo, por ejemplo, <App/> , podría usar un gancho useEffect() que lanza un evento de tagmanager para activar la inserción del experimento de optimización.
!¡Por favor tenga cuidado! a través de esto, obtendrá un efecto de parpadeo o ralentizará su sitio, ya que debe esperar hasta que todo esté hidratado, lo que puede demorar algunos segundos en dispositivos lentos y luego volverá a procesar su contenido.
Este es un problema común con Jamstack Pages, que se puede resolver mediante la integración de la API de experimentación directamente en el código, que sin duda es más complejo.
La carga sincronizada ralentizará su sitio ya que bloquea la representación hasta que se cargue el JS y el contenido, la carga asíncrona hará que el sitio parpadee. Esas son las dos opciones cuando se trabaja con pruebas A/B basadas en etiquetas: debe elegir el mal menor.