Para implementar Kameleoon en su sitio web, añada una etiqueta de instalación JavaScript al código fuente HTML de sus páginas.
Implemente Kameleoon en el código fuente HTML
Para Web Experimentation, añada siempre la etiqueta de Kameleoon en la sección <head> de su código fuente HTML. Colocar la etiqueta en la sección <body>, especialmente al final de la página, aumenta el riesgo de flickering. Añada la etiqueta lo más arriba posible en la sección <head>, idealmente inmediatamente después de la apertura de la etiqueta <head>. Esta posición permite al navegador cargar el archivo de aplicación de Kameleoon antes que otros recursos. El CSS u otros scripts colocados antes de la etiqueta de Kameleoon aumentan el riesgo de flickering.
Si utiliza el modo híbrido (tanto un SDK como la etiqueta de instalación JavaScript), puede colocar la etiqueta más adelante en el body, por ejemplo justo antes del cierre </body>. El flicker no se produce cuando se utiliza un SDK web.
Si su sitio web utiliza varios subdominios, incluya el código adicional para unificar los datos de sesión entre subdominios en el script de implementación. Kameleoon necesita este código para utilizar los datos de sesión en todos los subdominios para una segmentación conductual avanzada. Añadir cualquier script o recurso a su sitio web incrementa la carga. Kameleoon prioriza el rendimiento y optimiza su código para obtener los mejores resultados posibles.
Etiqueta asíncrona con anti-flicker
Este método carga el script de Kameleoon de forma asíncrona e incluye código anti-flickering. Kameleoon utiliza una “regla CSS bloqueante” para ocultar el contenido de la página y la elimina en cuanto se carga el código de la aplicación (normalmente en menos de 50 ms) o cuando expira el timeout especificado (predeterminado 750 ms). Esta salvaguarda garantiza que Kameleoon nunca provoque que su sitio se bloquee o permanezca en blanco indefinidamente.
Ajuste el timeout mediante la variable JavaScript kameleoonLoadingTimeout en el snippet de instalación.
Si se produce un timeout y el código de Kameleoon termina cargándose, puede configurar los siguientes pasos en los ajustes avanzados de confirmación de su proyecto. Tiene dos opciones:
- Deshabilitar Kameleoon por completo para ese visitante.
- Ejecutar el código de Kameleoon con normalidad (lo que puede provocar flickering).
<script>
// Duration in milliseconds to wait while the Kameleoon application file is loaded
var kameleoonLoadingTimeout = 750;
window.kameleoonQueue = window.kameleoonQueue || [];
window.kameleoonStartLoadTime = Date.now();
if (! document.getElementById("kameleoonLoadingStyleSheet") && ! window.kameleoonDisplayPageTimeOut) {
var kameleoonS = document.getElementsByTagName("script")[0];
var kameleoonCc = "html::after { content: ''; position: fixed; inset: 0; background: #fff; z-index: 2147483647; }";
var kameleoonStn = document.createElement("style");
kameleoonStn.type = "text/css";
kameleoonStn.id = "kameleoonLoadingStyleSheet";
if (kameleoonStn.styleSheet) {
kameleoonStn.styleSheet.cssText = kameleoonCc;
} else {
kameleoonStn.appendChild(document.createTextNode(kameleoonCc));
}
kameleoonS.parentNode.insertBefore(kameleoonStn, kameleoonS);
window.kameleoonDisplayPage = function(fromEngine) {
if (!fromEngine) {
window.kameleoonTimeout = true;
}
if (kameleoonStn.parentNode) {
kameleoonStn.parentNode.removeChild(kameleoonStn);
}
};
window.kameleoonDisplayPageTimeOut = window.setTimeout(window.kameleoonDisplayPage, kameleoonLoadingTimeout);
}
</script>
<script type="text/javascript" src="//SITE_CODE.kameleoon.io/engine.js" fetchpriority="high" async></script>
SITE_CODE por el site code de su proyecto.
Los dominios de los scripts de Kameleoon varían según el proyecto. Los proyectos usan kameleoon.eu o kameleoon.io según su fecha de creación. Utilice el dominio que se muestra en la aplicación Kameleoon para su proyecto.
El contador del timeout comienza cuando el navegador ejecuta el código, no cuando empieza a descargar engine.js. Establecer un timeout demasiado bajo (por ejemplo, 100 ms) puede no dar tiempo suficiente al navegador para descargar y ejecutar el archivo, especialmente en conexiones lentas o cuando hay otros scripts en cola.
Coloque la etiqueta de instalación de Kameleoon dentro de la etiqueta <head> o al principio de la etiqueta <body>. Colocarla más adelante en el <body> puede provocar que la página se cargue, desaparezca y vuelva a aparecer, ya que el código anti-flickering necesita ejecutarse dentro del <head> para funcionar correctamente.
Etiqueta síncrona
Este método carga el script de Kameleoon de forma síncrona para evitar el flickering. No obstante, este enfoque bloquea la carga de la página hasta que el navegador descarga y ejecuta el código de Kameleoon, lo que puede afectar al rendimiento.
<script>window.kameleoonQueue = window.kameleoonQueue || [];</script>
<script type="text/javascript" src="//SITE_CODE.kameleoon.io/engine.js" fetchpriority="high"></script>
SITE_CODE por el site code de su proyecto.
Los dominios de los scripts de Kameleoon varían según el proyecto. Los proyectos usan kameleoon.eu o kameleoon.io según su fecha de creación. Utilice el dominio que se muestra en la aplicación Kameleoon para su proyecto.
Etiqueta asíncrona sin anti-flicker
Esta etiqueta instala el archivo de aplicación de Kameleoon de forma asíncrona sin prevención anti-flicker. Use esta etiqueta si el flicker no es una preocupación, por ejemplo cuando utilice el modo híbrido.
<script>
window.kameleoonQueue = window.kameleoonQueue || [];
</script>
<script type="text/javascript" src="//SITE_CODE.kameleoon.io/engine.js" fetchpriority="high" async></script>
SITE_CODE por el site code de su proyecto.
Los dominios de los scripts de Kameleoon varían según el proyecto. Los proyectos usan kameleoon.eu o kameleoon.io según su fecha de creación. Utilice el dominio que se muestra en la aplicación Kameleoon para su proyecto.
Implemente Kameleoon en un Tag Manager
Kameleoon admite todos los principales Tag Management Systems (TMS). Para evitar el flickering, instale Kameleoon directamente en el código fuente de su página. El uso de un TMS retrasa la carga, lo que a menudo se traduce en un flicker perceptible, especialmente si el TMS se carga al final de la página HTML.
Kameleoon no ofrece soporte técnico para problemas de flickering causados por implementaciones con TMS. Los entornos de TMS no permiten la carga síncrona de JavaScript externo.
Para implementaciones con TMS, utilice la etiqueta JavaScript asíncrona.
window.kameleoonStartLoadTime = new Date().getTime();
var scriptNode = document.createElement("script");
scriptNode.src = "//SITE_CODE.kameleoon.io/engine.js"; //replace the SITE_CODE variable by your Kameleoon project Sitecode.
scriptNode.type = "text/javascript";
scriptNode.async = true;
scriptNode.setAttribute("data-tagmanager", true);
document.head.appendChild(scriptNode);
Los dominios de los scripts de Kameleoon varían según el proyecto. Los proyectos usan kameleoon.eu o kameleoon.io según su fecha de creación. Utilice el dominio que se muestra en la aplicación Kameleoon para su proyecto.
Algunos TMS ofrecen soporte del lado del servidor, lo que permite instalar Kameleoon sin causar problemas. Esta configuración equivale a incrustar el código de instalación directamente en su HTML.
Elija el disparador correcto
Al implementar Kameleoon mediante un TMS, utilice un disparador específico para garantizar que el script se ejecute lo antes posible. Elija el disparador que se active primero en cada página para su TMS concreto.
No configure su TMS para almacenar en caché ni combinar el script de Kameleoon. El archivo de aplicación contiene datos de configuración dinámicos necesarios para ejecutar experimentos y personalizaciones. Almacenar este archivo en caché impide que los experimentos se inicien o se ejecuten correctamente.Evite utilizar tecnología de prevención anti-flicker dentro de un TMS, ya que no está diseñada para funcionar correctamente en ese entorno.
