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

# Auto-hebergement du fichier d'application avec Fastly CDN

> Auto-hebergez le fichier d'application Kameleoon sur Fastly CDN pour reduire la latence DNS et le surcout de la poignee SSL par rapport a l'utilisation du CDN Kameleoon par defaut.

<Info>
  `kameleoon.js` est déprécié et a été remplacé par `engine.js` dans tous les snippets d'implémentation Kameleoon. `kameleoon.js` ne sera plus pris en charge après le **1er juin 2026**. Après cette date, toutes les campagnes sur des sites web référençant encore `kameleoon.js` cesseront de fonctionner. Mettez à jour votre snippet d'implémentation en conséquence.
</Info>

## Configuration Fastly

Connectez-vous à votre compte Fastly et créez un hôte d'origine et deux en-têtes de contenu comme suit :

### Créer l'hôte d'origine

1. Accédez à l'onglet `Service configuration` et cliquez sur l'entrée de gauche `Origins > Hosts`. Cliquez sur `Create host` et créez une nouvelle condition pour cibler votre fichier d'application Kameleoon. Donnez-lui un nom descriptif, tel que **Kameleoon JavaScript Application File**.
2. Dans la case Apply if, fournissez cette condition `req.url ~ "^/kameleoon/engine.js"`
3. Sauvegardez votre nouvelle condition pour l'appliquer à votre nouvel hôte d'origine.
4. Appliquez les paramètres de configuration suivants à votre hôte d'origine, où `YOUR_SITECODE` est remplacé par votre ID de projet Kameleoon (suivez les étapes décrites dans cet [article](/user-manual/faq#how-do-i-find-my-sitecode) pour le récupérer) :

* **Name** : YOUR\_SITECODE.kameleoon.io
* **Address** : YOUR\_SITECODE.kameleoon.io
* **Certificate hostname** : YOUR\_SITECODE.kameleoon.io

<Frame>
  ![Configuration de l'hote d'origine](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/fastly-origin-host.png)
</Frame>

<Note>
  Note : Le domaine de vos scripts Kameleoon peut varier d'un projet à l'autre. Vos projets peuvent être hébergés soit sur `kameleoon.eu`, soit sur `kameleoon.io` selon leur date de création. Veillez à utiliser le domaine affiché dans votre projet dans l'application Kameleoon.
</Note>

### Créer les en-têtes

Vous devez créer des en-têtes pour spécifier comment vous souhaitez que le contenu soit servi aux utilisateurs depuis votre site web :

1. Cliquez sur l'entrée de gauche `Content > Headers`. Cliquez sur `Create a header`.
2. Attachez la même condition que celle que vous avez créée pour l'hôte afin de cibler le nouveau fichier d'application JavaScript Kameleoon sur votre site.
3. Donnez à votre en-tête un nom (par exemple, YOUR\_SITECODE.direct.kameleoon.io host) et assurez-vous qu'il est configuré comme suit, où `YOUR_SITECODE` est remplacé par votre ID de projet Kameleoon.

* **Type / Action** : Request - Set
* **Destination** : http.Host
* **Source** : "YOUR\_SITECODE.direct.kameleoon.io"

4. Cliquez sur Create pour sauvegarder votre en-tête.

<Frame>
  \[![Configuration de l'en-tete 1](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/fastly-header-1.png)
</Frame>

Avant d'activer votre nouvelle configuration, vous devez créer un deuxième en-tête pour modifier la base de la requête

1. Cliquez sur `Create a header`
2. Attachez la même condition que celle que vous avez créée pour l'hôte afin de cibler le nouveau fichier d'application JavaScript Kameleoon sur votre site.
3. Donnez à votre en-tête un nom (par exemple, YOUR\_SITECODE.direct.kameleoon.io base) et assurez-vous qu'il est configuré comme suit, où `YOUR_SITECODE` est remplacé par votre ID de projet Kameleoon.

* **Type / Action** : Request - Regex
* **Destination** : url
* **Source** : req.url
* **Regex** : ^/kameleoon/engine.js
* **Substitution** : /engine.js?uncompressed=true

4. Cliquez sur Create pour sauvegarder votre en-tête.

<Frame>
  \[![Configuration de l'en-tete 2](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/fastly-header-2.png)
</Frame>

### Sélectionner le format de compression

Pour activer la compression, commencez par sélectionner un format de compression en suivant les étapes ci-dessous :

1. Cliquez sur l'entrée de gauche `Content`.
2. Faites défiler jusqu'à la section Compression. Les commandes de compression apparaissent.
3. Sélectionnez `Use Brotli compression when available` pour utiliser par défaut la compression Brotli pour les navigateurs qui la prennent en charge.

<Frame>
  \[![Configuration de la compression](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/fastly-compression.png)
</Frame>

<Note>
  N'oubliez pas d'activer votre nouvelle configuration Fastly pour qu'elle prenne effet avant de mettre à jour votre code source.
</Note>

## Ajoutez le snippet Kameleoon dans votre code source

<Note>
  Consultez cet [article](../implementation-and-deployment/standard-implementation) pour comprendre comment implémenter Kameleoon sur votre site web.
</Note>

L'étape finale consiste à remplacer l'URL JavaScript par défaut de l'application Kameleoon dans le tag d'installation par votre URL Fastly. Par exemple, si vous utilisez la méthode d'implémentation Fichier JavaScript ([Chargement asynchrone avec anti-flicker](../implementation-and-deployment/standard-implementation#tag-asynchrone-sans-anti-flicker)), le fichier d'application Kameleoon est par défaut hébergé sur `//SITE_CODE.kameleoon.io/engine.js`. Il vous suffit de modifier cette URL dans le tag d'installation, en la remplaçant par votre propre URL Fastly.