Implementación con Nuxt

Integre Nuxt 4 con Kameleoon Web Experimentation. Esta guía cubre los pasos para precargar el motor de Kameleoon con protección anti-flicker y ejecutar el script engine.js después de la hidratación del cliente. Esta configuración garantiza un rendimiento óptimo, estabilidad visual y compatibilidad con el ciclo de vida de renderizado de Nuxt. Acceda a implementaciones de referencia para:

Acceda a la integración Nuxt 4 lista para producción

Encuentre el repositorio listo para producción aquí: https://github.com/Kameleoon/setup-engine-nuxt-4 Antes de empezar, sustituya el valor del sitecode en integrations/Kameleoon/sitecode.ts.

En función de cuándo haya creado su proyecto de Kameleoon, sus scripts pueden residir en kameleoon.eu o en kameleoon.io. Utilice siempre el dominio de los ajustes de su proyecto en la aplicación Kameleoon.

Visión general

Flujo de trabajo

Fase	Descripción	Componente
Renderizado SSR	Inyectar el enlace de preload y el CSS anti-flicker	`KameleoonHead.vue`
Hidratación del cliente	Vue hidrata el DOM	—
Post-hidratación	Cargar el motor de Kameleoon de forma asíncrona	`KameleoonScriptLoader.client.vue`
Salida segura de respaldo	Eliminar el CSS anti-flicker si el script falla o se atasca	`KameleoonScriptLoader.client.vue`

Configuración rápida

Añada la carpeta integrations/Kameleoon a su proyecto Nuxt.
Importe y registre ambos componentes de la integración en su layout (recomendamos layouts/default.vue). Consulte: Uso en default.vue.

Componentes

La integración utiliza dos componentes Vue ejecutados en distintas etapas del pipeline de renderizado de Nuxt:

Componente	Contexto de ejecución	Propósito
`KameleoonHead.vue`	Lado servidor (SSR)	Inyecta la directiva de preload y el CSS anti-flicker antes de la hidratación
`KameleoonScriptLoader.client.vue`	Lado cliente (post-hidratación)	Carga el script del motor y gestiona el timeout anti-flicker

Este enfoque proporciona un renderizado rápido, un comportamiento estable de la interfaz y compatibilidad total con la hidratación de Nuxt.

1. `KameleoonHead.vue`

KameleoonHead.vue se ejecuta solo durante el renderizado del lado del servidor. Prepara la página para una experiencia sin flickering:

Inyectando CSS anti-flicker durante el SSR.
Precargando el motor de Kameleoon (engine.js) para que el navegador lo obtenga cuanto antes.

<script setup>
import { SITECODE_SRC } from "../sitecode";
</script>

<template>
    <Head>
        <!-- preload script early -->
        <Link rel="preload" :href="SITECODE_SRC" as="script" fetchpriority="high" />

        <!-- anti-flicker CSS -->
        <Style id="kameleoonLoadingStyleSheet">
            html::after { content: ''; position: fixed; inset: 0; background: #fff; z-index: 2147483647; }
        </Style>
    </Head>
</template>

Consulte KameleoonHead.vue en GitHub.

2. `KameleoonScriptLoader.client.vue`

KameleoonScriptLoader.client.vue se ejecuta en el cliente después de la hidratación. El componente:

Elimina la hoja de estilos anti-flicker cuando la página está lista.
Carga dinámicamente el script engine.js.
Gestiona los tiempos y el comportamiento de respaldo para la carga lenta del script.

<script setup>
defineOptions({ name: "KameleoonScriptLoader" });

import { nextTick, onMounted } from "vue";
import { SITECODE_SRC } from "~/integrations/Kameleoon/sitecode";

onMounted(async () => {
    await nextTick();

    const kameleoonLoadingTimeout = 500;

    window.kameleoonQueue = window.kameleoonQueue || [];
    window.kameleoonStartLoadTime = Date.now();

    window.kameleoonDisplayPage = function (fromEngine) {
        if (!fromEngine) {
            window.kameleoonTimeout = true;
        }
        document.getElementById("kameleoonLoadingStyleSheet")?.remove();
    };

    window.kameleoonDisplayPageTimeOut = setTimeout(window.kameleoonDisplayPage, kameleoonLoadingTimeout);

    const alreadyLoaded = document.querySelector(`script[src*="${SITECODE_SRC}"]`);
    if (!alreadyLoaded) {
        const script = document.createElement("script");
        script.src = SITECODE_SRC;
        script.async = true;
        document.head.appendChild(script);
    }
});
</script>

<template>
    <!-- nothing rendered -->
</template>

Consulte KameleoonScriptLoader.client.vue en GitHub.

El timeout anti-flicker predeterminado es de 750 ms. Ajuste kameleoonLoadingTimeout según sea necesario.

Uso en `default.vue`

Utilice el siguiente ejemplo para combinar componentes en su layout:

<script setup>
import KameleoonHead from "~/integrations/Kameleoon/components/KameleoonHead.vue";
import KameleoonScriptLoader from "~/integrations/Kameleoon/components/KameleoonScriptLoader.client.vue";
</script>

<template>
    <!-- SSR: preload + anti-flicker -->
    <KameleoonHead />

    <!-- Client: load script after hydration -->
    <KameleoonScriptLoader />

    <!-- Layout UI -->
    <div class="min-h-screen bg-background font-inter">
        <Navigation />

        <main class="container mx-auto px-4 py-8">
            <NuxtPage />
        </main>
    </div>
</template>

Consulte default.vue en GitHub.

Conclusiones clave

Evite advertencias de discrepancia en la hidratación.
Garantice una experiencia sin flickering antes de la inicialización de Kameleoon.
Cargue el script solo una vez, también durante la navegación SPA.
Mantenga la compatibilidad con layouts, páginas, rutas dinámicas y renderizado condicional.

Con esta configuración, su aplicación Nuxt carga y ejecuta Kameleoon de manera fiable sin afectar a la estabilidad del renderizado.

Inicio

Experimentación web

Experimentación de funcionalidades

Conceptos clave

Privacidad y conformidad

Herramientas para desarrolladores

Implementación con Nuxt

Implementación con Nuxt

Acceda a la integración Nuxt 4 lista para producción

Visión general

Flujo de trabajo

Configuración rápida

Componentes

1. `KameleoonHead.vue`

2. `KameleoonScriptLoader.client.vue`

Uso en `default.vue`

Conclusiones clave

​Implementación con Nuxt

​Acceda a la integración Nuxt 4 lista para producción

​Visión general

​Flujo de trabajo

​Configuración rápida

​Componentes

​1. KameleoonHead.vue

​2. KameleoonScriptLoader.client.vue

​Uso en default.vue

​Conclusiones clave

Implementación con Nuxt

Acceda a la integración Nuxt 4 lista para producción

Visión general

Flujo de trabajo

Configuración rápida

Componentes

1. `KameleoonHead.vue`

2. `KameleoonScriptLoader.client.vue`

Uso en `default.vue`

Conclusiones clave