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

# Self-hosting del archivo de aplicación con Fastly CDN

> Aloje usted mismo el archivo de aplicación de Kameleoon en Fastly CDN para reducir la latencia de DNS y la sobrecarga del handshake SSL en comparación con el uso del CDN predeterminado de Kameleoon.

<Info>
  `kameleoon.js` está obsoleto y ha sido sustituido por `engine.js` en todos los snippets de implementación de Kameleoon. `kameleoon.js` dejará de tener soporte después del **1 de junio de 2026**. A partir de esa fecha, las campañas en sitios web que sigan referenciando `kameleoon.js` dejarán de funcionar. Actualice su snippet de implementación en consecuencia.
</Info>

## Configuración de Fastly

Inicie sesión en su cuenta de Fastly y cree un host de origen y dos headers de contenido como se indica a continuación:

### Crear el host de origen

1. Vaya a la pestaña `Service configuration` y haga clic en la entrada de la izquierda `Origins > Hosts`. Haga clic en `Create host` y cree una nueva condición para apuntar a su archivo de aplicación de Kameleoon. Asígnele un nombre descriptivo, como **Kameleoon JavaScript Application File**.
2. En el cuadro Apply if, proporcione esta condición: `req.url ~ "^/kameleoon/engine.js"`
3. Guarde su nueva condición para aplicarla a su nuevo host de origen.
4. Aplique los siguientes parámetros de configuración a su host de origen, donde `YOUR_SITECODE` se sustituye por su ID de proyecto de Kameleoon (siga los pasos descritos en este [artículo](/user-manual/faq#how-do-i-find-my-sitecode) para obtenerlo):

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

<Frame>
  ![Configuración del host de origen](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/fastly-origin-host.png)
</Frame>

<Note>
  Nota: El dominio de sus scripts de Kameleoon puede variar de un proyecto a otro. Sus proyectos pueden estar alojados en `kameleoon.eu` o en `kameleoon.io` según su fecha de creación. Asegúrese de utilizar el dominio que aparece en su proyecto dentro de la aplicación Kameleoon.
</Note>

### Crear los headers

Debe crear headers para especificar cómo desea que se sirva el contenido a sus usuarios desde su sitio web:

1. Haga clic en la entrada de la izquierda `Content > Headers`. Haga clic en `Create a header`.
2. Asocie la misma condición que creó para el host con el fin de apuntar al nuevo archivo de aplicación JavaScript de Kameleoon en su sitio.
3. Asigne un nombre a su header (por ejemplo, YOUR\_SITECODE.direct.kameleoon.io host) y asegúrese de configurarlo de la siguiente manera, donde `YOUR_SITECODE` se sustituye por su ID de proyecto de Kameleoon.

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

4. Haga clic en Create para guardar su header.

<Frame>
  \[![Configuración del header 1](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/fastly-header-1.png)
</Frame>

Antes de activar su nueva configuración, debe crear un segundo header para modificar la base de la solicitud.

1. Haga clic en `Create a header`.
2. Asocie la misma condición que creó para el host con el fin de apuntar al nuevo archivo de aplicación JavaScript de Kameleoon en su sitio.
3. Asigne un nombre a su header (por ejemplo, YOUR\_SITECODE.direct.kameleoon.io base) y asegúrese de configurarlo de la siguiente manera, donde `YOUR_SITECODE` se sustituye por su ID de proyecto de Kameleoon.

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

4. Haga clic en Create para guardar su header.

<Frame>
  \[![Configuración del header 2](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/fastly-header-2.png)
</Frame>

### Seleccionar el formato de compresión

Para habilitar la compresión, comience por seleccionar un formato de compresión siguiendo los pasos a continuación:

1. Haga clic en la entrada de la izquierda `Content`.
2. Desplácese hasta la zona Compression. Aparecen los controles de compresión.
3. Seleccione `Use Brotli compression when available` para utilizar la compresión Brotli de forma predeterminada en los navegadores que la admitan.

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

<Note>
  Recuerde activar su nueva configuración de Fastly para que surta efecto antes de actualizar su código fuente.
</Note>

## Añada el snippet de Kameleoon en su código fuente

<Note>
  Consulte este [artículo](../implementation-and-deployment/standard-implementation) para entender cómo implementar Kameleoon en su sitio web.
</Note>

El último paso es sustituir la URL JavaScript predeterminada de la aplicación de Kameleoon en la etiqueta de instalación por su URL de Fastly. Por ejemplo, si utiliza el método de implementación [Carga asíncrona con Anti-Flicker](../implementation-and-deployment/standard-implementation#etiqueta-asíncrona-sin-anti-flicker), el archivo de aplicación de Kameleoon se aloja de forma predeterminada en `//SITE_CODE.kameleoon.io/engine.js`. Solo necesita cambiar esta URL en la etiqueta de instalación, sustituyéndola por su propia URL de Fastly.