Zum Hauptinhalt springen

​
Implementierung mit SvelteKit

Integrieren Sie Kameleoon Web Experimentation mit Anti-Flicker-Schutz und fuehren Sie das engine.js-Skript nach der SvelteKit-Hydratation aus. Diese Einrichtung sorgt fuer optimale Leistung, visuelle Stabilitaet und Kompatibilitaet mit dem Rendering-Lebenszyklus von SvelteKit.

​
Zugriff auf die produktionsbereite SvelteKit-Integration

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

​
Skript-Domain

Die Domain Ihres Kameleoon-Skripts kann sich zwischen Projekten unterscheiden. Je nach Erstellungszeitpunkt Ihres Projekts koennen Ihre Skripte auf kameleoon.eu oder kameleoon.io liegen. Verwenden Sie immer die fuer Ihr Projekt in der Kameleoon App angezeigte Domain.

​
Ueberblick

  1. Laden Sie die Kameleoon-Engine vorab: Stellen Sie sicher, dass der Browser die Engine frueh herunterlaedt und im Cache speichert.
  2. Wenden Sie Anti-Flicker-CSS an: Blenden Sie Inhalte aus, bis die Engine bereit ist, um Layout-Verschiebungen zu verhindern.
  3. Fuehren Sie die Engine nach der Hydratation aus: Fuehren Sie das Skript nach der SvelteKit-Hydratation aus, um Inkonsistenzen zu vermeiden.

​
Komponenten

Die Integration verwendet zwei Komponenten, um reibungsloses Laden zu gewaehrleisten und Flackern waehrend der Hydratation zu verhindern.

​
1. Server-Komponente

Die Komponente:
  • Fuegt Anti-Flicker-CSS waehrend des SSR ein, um UI-Flashes zu verhindern.
  • Laedt die Datei engine.js vorab, damit das Herunterladen so schnell wie moeglich beginnt.
<script lang="ts">
  import { SITECODE_SRC } from './sitecode';
</script>

<svelte:head>
  <link
    rel="preload"
    href={SITECODE_SRC}
    as="script"
    fetchpriority="high"
  />

  <style id="kameleoonLoadingStyleSheet">
    html::after {
      content: '';
      position: fixed;
      inset: 0;
      background: #fff;
      z-index: 2147483647;
    }
  </style>
</svelte:head>
Siehe KameleoonHead.svelte auf GitHub.

​
2. Client-Komponente

Die Komponente:
  • Entfernt die Anti-Flicker-Stile nach der Hydratation.
  • Laedt das Kameleoon-engine.js-Skript dynamisch.
  • Stellt sicher, dass das Skript ohne Rendering-Blockierung geladen wird.
<script lang="ts">
  import { onMount } from 'svelte';
  import { SITECODE_SRC } from './sitecode';

  // custom value
  const kameleoonLoadingTimeout = 500;

  function removeAntiflickerStyles(): void {
    window.kameleoonQueue = window.kameleoonQueue || [];
    window.kameleoonStartLoadTime = Date.now();

    window.kameleoonDisplayPage = (fromEngine?: boolean): void => {
      if (!fromEngine) {
        window.kameleoonTimeout = true;
      }
      document
        .getElementById('kameleoonLoadingStyleSheet')
        ?.remove();
    };

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

  function loadEngine(): void {
    if (document.getElementById('kameleoon-engine')) return;

    const script = document.createElement('script');
    script.src = SITECODE_SRC;
    script.async = true;
    script.id = 'kameleoon-engine';
    document.head.appendChild(script);
  }

  
  // Execute Kameleoon after hydration
  onMount(() => {
    removeAntiflickerStyles();
    loadEngine();
  });
</script>
Siehe KameleoonHydrationReady.svelte auf GitHub.
Der standardmaessige Anti-Flicker-Timeout betraegt 750 ms. Passen Sie kameleoonLoadingTimeout bei Bedarf an.

​
Verwendung in RootLayout

Kombinieren Sie beide Komponenten in Ihrem Layout: 
<script lang="ts">
  import KameleoonHead from '$lib/integrations/Kameleoon/KameleoonHead.svelte';
  import KameleoonHydrationReady from '$lib/integrations/Kameleoon/KameleoonHydrationReady.svelte';
</script>

<!-- SSR head injection -->
<KameleoonHead />

<!-- Optional: other head tags -->
<svelte:head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
</svelte:head>

<!-- Client bootstrap after hydration -->
<KameleoonHydrationReady />

<slot />
Siehe layout.svelte auf GitHub.

​
Wichtige Erkenntnisse

  • Schutz vor Flackern beim SSR.
  • Hydratationsbewusste Skriptausfuehrung verwenden.
  • Die Engine asynchron laden.
  • Einen Fallback-Timeout fuer Zuverlaessigkeit verwenden.
  • Blockierende Skripte vermeiden.
  • SvelteKit-Layouts, SSR und clientseitiges Routing unterstuetzen.
Mit dieser Einrichtung laedt Ihre SvelteKit-Anwendung Kameleoon effizient und vermeidet hydratationsbezogene Probleme.