> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Implementierung mit SvelteKit

> Integrieren Sie Kameleoon mit Anti-Flicker-Schutz und fuehren Sie das engine.js-Skript nach der SvelteKit-Hydratation aus.

# 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](https://github.com/Kameleoon/setup-engine-sveltekit)

Bevor Sie beginnen, **ersetzen Sie den Sitecode-Wert** in [`src/lib/integrations/Kameleoon/sitecode.ts`](https://github.com/Kameleoon/setup-engine-sveltekit/blob/main/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.

```tsx theme={null}
<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`](https://github.com/Kameleoon/setup-engine-sveltekit/blob/main/src/lib/integrations/Kameleoon/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.

```tsx theme={null}
<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`](https://github.com/Kameleoon/setup-engine-sveltekit/blob/main/src/lib/integrations/Kameleoon/KameleoonHydrationReady.svelte) auf GitHub.

<Note>
  Der standardmaessige Anti-Flicker-Timeout betraegt `750 ms`. Passen Sie `kameleoonLoadingTimeout` bei Bedarf an.
</Note>

***

## Verwendung in RootLayout

Kombinieren Sie beide Komponenten in Ihrem Layout:

```tsx theme={null}
<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`](https://github.com/Kameleoon/setup-engine-sveltekit/blob/main/src/routes/%2Blayout.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.