Zum Hauptinhalt springen

​
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

PhaseBeschreibungKomponente
SSR-RenderingPreload-Link und Anti-Flicker-CSS einfuegenKameleoonHead.vue
Client-HydratationVue hydratisiert das DOM—
Nach HydratationKameleoon-Engine asynchron ladenKameleoonScriptLoader.client.vue
Fallback-Safe-ExitAnti-Flicker-CSS entfernen, wenn das Skript fehlschlaegt oder verzoegertKameleoonScriptLoader.client.vue

​
Schnelle Einrichtung

  1. Fuegen Sie den Ordner integrations/Kameleoon Ihrem Nuxt-Projekt hinzu.
  2. 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:
KomponenteAusfuehrungskontextZweck
KameleoonHead.vueServerseitig (SSR)Fuegt die Preload-Direktive und das Anti-Flicker-CSS vor der Hydratation ein
KameleoonScriptLoader.client.vueClientseitig (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.