Passer au contenu principal

​
Implémentation avec SvelteKit

Intégrez Kameleoon Web Experimentation avec une protection anti-flicker et exécutez le script engine.js après l’hydratation SvelteKit. Cette configuration garantit des performances optimales, une stabilité visuelle et la compatibilité avec le cycle de vie de rendu de SvelteKit.

​
Accéder à l’intégration SvelteKit prête pour la production

Accédez au dépôt prêt pour la production ici : https://github.com/Kameleoon/setup-engine-sveltekit Avant de commencer, remplacez la valeur sitecode dans src/lib/integrations/Kameleoon/sitecode.ts.

​
Domaine du script

Le domaine de votre script Kameleoon peut différer entre les projets. Selon la date de création de votre projet, vos scripts peuvent résider sur kameleoon.eu ou kameleoon.io. Utilisez toujours le domaine affiché pour votre projet dans l’application Kameleoon.

​
Vue d’ensemble

  1. Préchargez le moteur Kameleoon : Assurez-vous que le navigateur télécharge et met en cache le moteur tôt.
  2. Appliquez le CSS anti-flicker : Masquez le contenu jusqu’à ce que le moteur soit prêt afin d’éviter les décalages de mise en page.
  3. Exécutez le moteur après l’hydratation : Exécutez le script après l’hydratation SvelteKit pour éviter les désynchronisations.

​
Composants

L’intégration utilise deux composants pour assurer un chargement fluide et empêcher le clignotement pendant l’hydratation.

​
1. Composant serveur

Le composant :
  • Injecte le CSS anti-flicker pendant le SSR pour empêcher les flashs d’interface.
  • Précharge le fichier engine.js afin que le téléchargement commence dès que possible.
<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>
Voir KameleoonHead.svelte sur GitHub.

​
2. Composant client

Le composant :
  • Supprime les styles anti-flicker après l’hydratation.
  • Charge dynamiquement le script engine.js de Kameleoon.
  • Garantit que le script se charge sans bloquer le rendu.
<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>
Voir KameleoonHydrationReady.svelte sur GitHub.
Le timeout anti-flicker par défaut est de 750 ms. Ajustez kameleoonLoadingTimeout si nécessaire.

​
Utilisation dans RootLayout

Combinez les deux composants dans votre 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 />
Voir layout.svelte sur GitHub.

​
Points clés

  • Protéger contre le clignotement en SSR.
  • Utiliser une exécution de script consciente de l’hydratation.
  • Charger le moteur de manière asynchrone.
  • Utiliser un timeout de secours pour la fiabilité.
  • Éviter les scripts bloquants.
  • Prendre en charge les layouts SvelteKit, le SSR et le routage côté client.
Avec cette configuration, votre application SvelteKit charge Kameleoon efficacement et évite les problèmes liés à l’hydratation.