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

# SvelteKit での実装

> アンチフリッカー保護付きで Kameleoon を統合し、SvelteKit のハイドレーション後に engine.js スクリプトを実行します。

# SvelteKit での実装

**Kameleoon Web Experimentation** を **アンチフリッカー保護** 付きで統合し、**SvelteKit のハイドレーション後** に `engine.js` スクリプトを実行します。このセットアップにより、最適なパフォーマンス、視覚的安定性、SvelteKit のレンダリングライフサイクルとの互換性を保証します。

### 本番環境向けの SvelteKit 統合にアクセスする

本番環境向けのリポジトリにはこちらからアクセスできます:
[https://github.com/Kameleoon/setup-engine-sveltekit](https://github.com/Kameleoon/setup-engine-sveltekit)

開始する前に、[`src/lib/integrations/Kameleoon/sitecode.ts`](https://github.com/Kameleoon/setup-engine-sveltekit/blob/main/src/lib/integrations/Kameleoon/sitecode.ts) で **sitecode の値を置き換えてください**。

## スクリプトドメイン

Kameleoon スクリプトのドメインはプロジェクトによって異なる場合があります。プロジェクトを作成した時期に応じて、スクリプトは `kameleoon.eu` または `kameleoon.io` に配置されている場合があります。常に Kameleoon App でプロジェクトに表示されているドメインを使用してください。

***

## 概要

1. **Kameleoon エンジンをプリロード**: ブラウザがエンジンを早期にダウンロードしキャッシュするようにします。
2. **アンチフリッカー CSS を適用**: エンジンの準備が整うまでコンテンツを非表示にし、レイアウトシフトを防ぎます。
3. **ハイドレーション後にエンジンを実行**: SvelteKit のハイドレーション後にスクリプトを実行して不整合を回避します。

***

## コンポーネント

統合では、スムーズな読み込みを保証し、ハイドレーション中のちらつきを防ぐために **2つのコンポーネント** を使用します。

***

### 1. サーバーコンポーネント

コンポーネントは:

* SSR 中にアンチフリッカー CSS を注入して UI のちらつきを防ぎます。
* できるだけ早くダウンロードが開始されるよう `engine.js` ファイルをプリロードします。

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

GitHub で [`KameleoonHead.svelte`](https://github.com/Kameleoon/setup-engine-sveltekit/blob/main/src/lib/integrations/Kameleoon/KameleoonHead.svelte) を参照してください。

***

### 2. クライアントコンポーネント

コンポーネントは:

* ハイドレーション後にアンチフリッカースタイルを削除します。
* Kameleoon の `engine.js` スクリプトを動的に読み込みます。
* スクリプトがレンダリングをブロックせずに読み込まれるようにします。

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

GitHub で [`KameleoonHydrationReady.svelte`](https://github.com/Kameleoon/setup-engine-sveltekit/blob/main/src/lib/integrations/Kameleoon/KameleoonHydrationReady.svelte) を参照してください。

<Note>
  デフォルトのアンチフリッカータイムアウトは `750 ms` です。必要に応じて `kameleoonLoadingTimeout` を調整してください。
</Note>

***

## RootLayout での使用

レイアウトで両方のコンポーネントを組み合わせます:

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

GitHub で [`layout.svelte`](https://github.com/Kameleoon/setup-engine-sveltekit/blob/main/src/routes/%2Blayout.svelte) を参照してください。

***

## 重要なポイント

* SSR でのちらつきから保護します。
* ハイドレーションを認識したスクリプト実行を使用します。
* エンジンを非同期で読み込みます。
* 信頼性のためにフォールバックタイムアウトを使用します。
* ブロッキングスクリプトを回避します。
* SvelteKit のレイアウト、SSR、クライアントサイドルーティングをサポートします。

このセットアップにより、SvelteKit アプリケーションは Kameleoon を効率的に読み込み、ハイドレーション関連の問題を回避します。