Implementierung mit Nuxt

Integrieren Sie Nuxt 4 in Kameleoon Web Experimentation. Dieser Leitfaden behandelt die Schritte zum Vorabladen der Kameleoon-Engine mit Anti-Flicker-Schutz und zum Ausfuehren des engine.js-Skripts nach der Client-Hydratation. Diese Einrichtung sorgt fuer optimale Leistung, visuelle Stabilitaet und Kompatibilitaet mit dem Nuxt-Rendering-Lebenszyklus. Greifen Sie auf Referenzimplementierungen zu fuer:

Zugriff auf die produktionsbereite Nuxt-4-Integration

Das produktionsbereite Repository finden Sie hier: https://github.com/Kameleoon/setup-engine-nuxt-4 Bevor Sie beginnen, ersetzen Sie den Sitecode-Wert in integrations/Kameleoon/sitecode.ts.

Abhaengig vom Erstellungszeitpunkt Ihres Kameleoon-Projekts koennen Ihre Skripte auf kameleoon.eu oder kameleoon.io liegen. Verwenden Sie immer die in Ihren Projekteinstellungen in der Kameleoon App angezeigte Domain.

Ueberblick

Arbeitsablauf

Phase	Beschreibung	Komponente
SSR-Rendering	Preload-Link und Anti-Flicker-CSS einfuegen	`KameleoonHead.vue`
Client-Hydratation	Vue hydratisiert das DOM	—
Nach Hydratation	Kameleoon-Engine asynchron laden	`KameleoonScriptLoader.client.vue`
Fallback-Safe-Exit	Anti-Flicker-CSS entfernen, wenn das Skript fehlschlaegt oder verzoegert	`KameleoonScriptLoader.client.vue`

Schnelle Einrichtung

Fuegen Sie den Ordner integrations/Kameleoon Ihrem Nuxt-Projekt hinzu.
Importieren und registrieren Sie beide Integrationskomponenten in Ihrem Layout (wir empfehlen layouts/default.vue). Siehe: Verwendung in default.vue.

Komponenten

Die Integration verwendet zwei Vue-Komponenten, die in verschiedenen Phasen der Nuxt-Rendering-Pipeline ausgefuehrt werden:

Komponente	Ausfuehrungskontext	Zweck
`KameleoonHead.vue`	Serverseitig (SSR)	Fuegt die Preload-Direktive und das Anti-Flicker-CSS vor der Hydratation ein
`KameleoonScriptLoader.client.vue`	Clientseitig (nach Hydratation)	Laedt das Engine-Skript und verwaltet das Anti-Flicker-Timeout

Dieser Ansatz bietet schnelles Rendering, stabiles UI-Verhalten und volle Kompatibilitaet mit der Nuxt-Hydratation.

1. `KameleoonHead.vue`

KameleoonHead.vue laeuft nur waehrend des serverseitigen Renderings. Es bereitet die Seite auf ein flackerfreies Erlebnis vor, indem es:

Anti-Flicker-CSS waehrend des SSR einfuegt.
Die Kameleoon-Engine (engine.js) vorab laedt, damit der Browser sie frueh abruft.

<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>

Siehe KameleoonHead.vue auf GitHub.

2. `KameleoonScriptLoader.client.vue`

KameleoonScriptLoader.client.vue wird auf dem Client nach der Hydratation ausgefuehrt. Die Komponente:

Entfernt das Anti-Flicker-Stylesheet, wenn die Seite bereit ist.
Laedt das engine.js-Skript dynamisch.
Verwaltet Timing und Fallback-Verhalten fuer langsames Skript-Laden.

<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>

Siehe KameleoonScriptLoader.client.vue auf GitHub.

Der standardmaessige Anti-Flicker-Timeout betraegt 750 ms. Passen Sie kameleoonLoadingTimeout nach Bedarf an.

Verwendung in `default.vue`

Verwenden Sie das folgende Beispiel, um Komponenten in Ihrem Layout zu kombinieren:

<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>

Siehe default.vue auf GitHub.

Wichtige Erkenntnisse

Hydratations-Inkonsistenz-Warnungen verhindern.
Eine flackerfreie Erfahrung vor der Kameleoon-Initialisierung sicherstellen.
Das Skript nur einmal laden, auch waehrend SPA-Navigation.
Kompatibilitaet mit Layouts, Seiten, dynamischen Routen und bedingtem Rendering wahren.

Mit dieser Konfiguration laedt und fuehrt Ihre Nuxt-Anwendung Kameleoon zuverlaessig aus, ohne die Render-Stabilitaet zu beeintraechtigen.

​Implementierung mit Nuxt

​Zugriff auf die produktionsbereite Nuxt-4-Integration

​Ueberblick

​Arbeitsablauf

​Schnelle Einrichtung

​Komponenten

​1. KameleoonHead.vue

​2. KameleoonScriptLoader.client.vue

​Verwendung in default.vue

​Wichtige Erkenntnisse

Implementierung mit Nuxt

Zugriff auf die produktionsbereite Nuxt-4-Integration

Ueberblick

Arbeitsablauf

Schnelle Einrichtung

Komponenten

1. `KameleoonHead.vue`

2. `KameleoonScriptLoader.client.vue`

Verwendung in `default.vue`

Wichtige Erkenntnisse