Saltar al contenido principal
En la aplicación Kameleoon existen múltiples puntos de entrada donde puede añadir código JavaScript personalizado que se ejecute en su sitio web. Este artículo proporciona recomendaciones específicas para cada punto de entrada disponible. Tenga en cuenta que todos los scripts de Kameleoon se ejecutan una vez por cada carga de página. Antes de implementar scripts personalizados, considere utilizar la Kameleoon Command Queue para optimizar la ejecución.

​
Kameleoon Command Queue

La forma más eficiente de interactuar con la API de Kameleoon —ya sea para convertir objetivos, establecer datos personalizados o desencadenar eventos— es aprovechar los disparadores existentes en su Tag Manager (por ejemplo, Google Tag Manager) junto con la Kameleoon Command Queue. Este debería ser su enfoque principal al añadir JavaScript a Kameleoon. En lugar de escribir extensos códigos JavaScript directamente en Kameleoon, puede lograr los mismos resultados con tan solo dos líneas de código dentro de su Tag Manager.

​
Ejemplos

- Convertir un objetivo de ingresos En su Tag Manager, cree un disparador en la página de confirmación para capturar los ingresos y añada el siguiente código: 
// Replace kameleoonGoalID and {{revenue}} with your actual values
window.kameleoonQueue = window.kameleoonQueue || [];
window.kameleoonQueue.push(['Goals.processConversion', kameleoonGoalID, {{revenue}}])
Para más orientación sobre cómo crear una conversión de objetivo desde GTM, consulte esta documentación. -Establecer un valor de dato personalizado cuando el visitante inicia sesión En lugar de escribir JS personalizado en Kameleoon, establezca el valor directamente a través de su Tag Manager: 
// Replace "customDataName" and "customDataValue" with your actual values
window.kameleoonQueue = window.kameleoonQueue || [];
window.kameleoonQueue.push(['Data.setCustomData', "customDataName", "customDataValue"]);
- Desencadenar un evento cuando se añade un producto al carrito Úselo para segmentar a los visitantes en función de acciones específicas: 
// Replace "customEventName" with your actual event name
window.kameleoonQueue = window.kameleoonQueue || [];
window.kameleoonQueue.push(['Events.trigger', "customEventName"]);
Si no es posible utilizar kameleoonQueue, consulte las recomendaciones específicas para cada script disponible que se detallan a continuación.

​
Script Global y scripts de variación

​
Optimizar la ejecución de JavaScript con la Activation API

Utilice la Activation API de Kameleoon para aplicar las variaciones en el momento adecuado. Este enfoque ayuda a prevenir problemas de rendimiento y garantiza una experiencia fluida para los visitantes. A continuación se muestran algunas funciones esenciales de la Activation API que pueden utilizarse para mejorar la experiencia del visitante:
  • runWhenConditionTrue: Ejecuta el código cuando se cumple una condición específica. De forma predeterminada, se ejecuta cada 200 milisegundos. Sin embargo, tenga cuidado con las condiciones que nunca puedan resolverse, ya que esto puede provocar bucles innecesarios. Tenga en cuenta que el bucle seguirá ejecutándose hasta que la función devuelva explícitamente true. Devolver false o undefined no detendrá el bucle ni desencadenará el callback.
❌ Uso incorrecto (riesgo de bucle infinito): El siguiente ejemplo nunca devolverá true en ninguna página que no sea la de producto, lo que provocará que el bucle se ejecute indefinidamente: 
Kameleoon.API.Core.runWhenConditionTrue(() => {
    return window.dataLayer && window.dataLayer.find(layer => layer.pageType === "product");
}, () => {
    // Product page logic here
});
✅ Enfoque recomendado: devuelva siempre true para salir del bucle y, a continuación, gestione la lógica dentro del callback: 
let pageTypeLayer;
Kameleoon.API.Core.runWhenConditionTrue(() => {
    pageTypeLayer = window.dataLayer && window.dataLayer.find(layer => layer.pageType);
    return pageTypeLayer; 
}, () => {
    if (pageTypeLayer?.pageType === "product") {
        // Product page logic here
    }
});
Es preferible obtener información a partir de la URL o de las cookies/localStorage en lugar de depender de runWhenConditionTrue para esperar al dataLayer u otros objetos de carga tardía, como cuando se intenta obtener información sobre el tipo de página. Este enfoque garantiza una ejecución más rápida y un mejor rendimiento.
  • runWhenElementPresent: Este método garantiza que su código se ejecute solo cuando un elemento concreto está presente en el DOM, evitando retrasos innecesarios causados por elementos que se cargan de forma dinámica.

​
Consideraciones clave

  • Utiliza Mutation Observers de forma predeterminada (recomendado por su rendimiento).
  • Si los Mutation Observers están deshabilitados en su sitio, puede especificar un intervalo de polling como tercer argumento de este método.
  • Si el elemento se inserta dinámicamente en el DOM, establezca isDynamicElement en true como cuarto argumento de este método:
Use el código siguiente con moderación y solo cuando sea absolutamente necesario. Limite su uso al menor número de casos posible y evite aplicarlo a varios elementos simultáneamente para mantener un rendimiento óptimo de la página.Tenga en cuenta la posibilidad de generar un bucle infinito si el código fuente de la página modifica el elemento cada vez que se actualiza.
Kameleoon.API.Core.runWhenElementPresent('#myDynamicElement', ([elem]) => {
	// Logic once the element loaded
}, null, true); // isDynamicElement is set to true

​
Acote el ámbito de su código a páginas específicas

Para optimizar el rendimiento, asegúrese de que su código se ejecute solo en las páginas relevantes. Esto es especialmente importante al usar métodos basados en bucles como runWhenConditionTrue y runWhenElementPresent, ya que ejecutar estos métodos en todo el sitio puede provocar ejecuciones innecesarias e impactar en el rendimiento. Por ejemplo, si está esperando información de ingresos en el dataLayer, envuelva su código en una condición que compruebe si la URL corresponde a la página de confirmación. Este enfoque garantiza que el código solo se ejecute en la página de confirmación, en lugar de activarse en todo el sitio. Ejemplo: Apuntar a una página de confirmación específica antes de ejecutar un bucle 
if (document.location.href.includes('/confirmation')) {
    let revenueLayer;
    Kameleoon.API.Core.runWhenConditionTrue(() => {
        revenueLayer = window.dataLayer && window.dataLayer.find(layer => layer.revenue);
        return revenueLayer;
    }, () => {
        Kameleoon.API.Goals.processConversion(goalId, revenueLayer.revenue);
    });
}
De forma similar, si está esperando a que un elemento se cargue en la página, asegúrese de que se espera que el elemento se muestre en algún momento y ejecute el script solo en la página correspondiente. 
if (document.location.href.includes('/subscription')) {
    Kameleoon.API.Core.runWhenElementPresent("#form", () => {
        // Add the rest of your logic here
    });
}

​
3. Prefiera CSS para los cambios visuales en lugar de utilizar JavaScript, especialmente cuando trabaje con variaciones en los scripts

Usar CSS en lugar de JavaScript proporciona una renderización más rápida y fluida. CSS puede utilizarse para ocultar o modificar elementos, intercambiar bloques y cambiar estilos o textos.

​
Gestión de aplicaciones de página única (SPAs)

Si un experimento se ejecuta en una aplicación de página única (SPA) o en una página que se actualiza dinámicamente, se requieren pasos de implementación específicos. A diferencia de los sitios web tradicionales, las SPAs no recargan páginas enteras, por lo que Kameleoon necesita identificar cuándo se producen las actualizaciones de contenido. Consulte la guía sobre la configuración de un experimento en una aplicación de página única para conocer las mejores prácticas.

​
Segmentos / Disparadores

La primera mejor práctica es basar la segmentación en datos que estén disponibles inmediatamente cuando se carga la página. Esto incluye información como la URL de la página, el tipo de navegador, el tipo de dispositivo y cualquier dato almacenado en cookies o local storage. Si su segmentación requiere datos que no son accesibles de forma inmediata, siga estas directrices para garantizar una ejecución eficiente y evitar retrasos innecesarios.

​
1. Condición JavaScript personalizada

Esta condición le permite utilizar JavaScript personalizado para segmentar a los visitantes. Hay dos opciones principales disponibles: ####- a. Comprobación inmediata de la condición Este script se ejecuta cada 75 milisegundos antes de que el DOM esté completamente cargado, y después cada 250 milisegundos. De forma predeterminada, devuelve undefined, lo que provoca que el script siga ejecutándose en bucle hasta que devuelva explícitamente true (para incluir al visitante) o false (para excluirlo). Asegúrese siempre de que su condición acabe resolviéndose en true o false para evitar bucles innecesarios. Aquí tiene un ejemplo optimizado: 
if (window.dataLayer && window.dataLayer.some(layer => layer.pageType == "homepage")) return true; 

else if (window.dataLayer && window.dataLayer.some(layer => layer.pageType != "homepage")) return false;
####- b. Ejecución asíncrona de la condición Use este script cuando necesite esperar una respuesta de un servicio web o API externo antes de segmentar al visitante. Una vez recibida la respuesta, invoque setTargeting(true) o setTargeting(false). Vea el código a continuación.
  • Si desea apuntar a un elemento específico, utilice en su lugar la condición nativa “Elemento en la página”.
  • Si desea esperar información en la página, utilice la opción “comprobar condición inmediatamente” anterior.
const userId = localStorage.getItem("user_id"); 
if (!userId) {
   setTargeting(false);
}
// Example API endpoint - replace with your actual endpoint
const apiUrl = `https://api.example.com/check-segment?userId=${userId}`;

fetch(apiUrl, { method: "GET", headers: { "Content-Type": "application/json" } })
  .then(response => response.json())
  .then(data => {
    if (data && data.isInSegment) {
      setTargeting(true);
    } else {
      setTargeting(false);
    }
  })
  .catch(error => {
    setTargeting(false);
  });

​
2. Evento personalizado

El uso de eventos personalizados es una forma eficaz y pasiva de segmentar a los visitantes. En lugar de monitorizar continuamente condiciones, este método escucha un evento personalizado específico que usted defina y activa la segmentación cuando ese evento se produce. Este enfoque resulta especialmente útil en dos escenarios clave:

​
Escenario 1: Cuando la lógica de segmentación es compleja

Es preferible evitar incrustar toda la lógica directamente en una condición JavaScript dentro de la segmentación. En su lugar, puede definir un evento personalizado en el Script Global. Por ejemplo, si desea segmentar a los visitantes en la página del carrito que tengan al menos tres productos en su carrito y un importe total superior a 30 $, desencadenaría un evento en el Script Global una vez se cumplan estas condiciones, en lugar de escribir toda la lógica dentro de la condición de JavaScript del segmento.

​
Escenario 2: Cuando varios segmentos comparten una lógica similar

Si varios segmentos requieren las mismas variaciones o ligeras variaciones de la misma condición, utilizar un evento personalizado evita código redundante y mejora la mantenibilidad. Ejemplo: Necesita segmentar a los visitantes en función de diferentes importes del carrito. En lugar de duplicar la lógica en varios segmentos, defina un único script en el Script Global y desencadene diferentes eventos personalizados para cada segmento: 
if (document.location.href.includes('/cart')) {
    Kameleoon.API.Core.runWhenElementPresent("#cartContainer", ([cartContainer]) => {
        if (cartContainer.length >= 3) {
            const totalAmount = Number(cartContainer.querySelector('#totalAmount').innerText);
          
            if (totalAmount >= 90) 
                Kameleoon.API.Events.trigger("3ArticlesAbove90"); // Segment 1
            else if (totalAmount >= 60) 
                Kameleoon.API.Events.trigger("3ArticlesAbove60"); // Segment 2
            else if (totalAmount >= 30) 
                Kameleoon.API.Events.trigger("3ArticlesAbove30"); // Segment 3
        }
    });
}

​
Datos personalizados

Los datos personalizados, al igual que los eventos personalizados, ayudan a evitar código duplicado al permitirle almacenar y reutilizar valores. Puede definir datos personalizados en el Script Global o en otros scripts, y luego utilizarlos dentro de los segmentos. Sin embargo, los datos personalizados se diferencian de los eventos personalizados en dos aspectos clave:

​
a. Por las opciones de ámbito: “Página”, “Visita” o “Visitante”

A diferencia de los eventos personalizados, que solo se aplican a la página actual, los datos personalizados pueden persistir a lo largo de varias páginas y sesiones:
  • Ámbito de visita: Mantiene el valor durante toda la sesión del visitante.
  • Ámbito de visitante: Almacena el valor hasta 365 días, en función de la política de cookies.
Por ejemplo, si desea mostrar un banner en todas las páginas una vez que un visitante inicia sesión, puede establecer un valor de dato personalizado en “true” con un ámbito de visita. Esto garantiza que el visitante siga estando segmentado con el banner en todas las páginas durante su sesión después de iniciar sesión.

​
b. Por la mejora de los insights de los experimentos

Los datos personalizados pueden servir como filtros y criterios de desglose en la página de resultados de los experimentos. Esto permite obtener insights más profundos y un análisis más eficaz del comportamiento del visitante. Para conocer todas las condiciones de segmentación disponibles en el creador de segmentos, consulte esta documentación.