Kameleoon.API.Core - Kameleoon Documentation

Este módulo contiene funciones para implementar variaciones de pruebas A/B en el frontend sin parpadeo. También incluye métodos de inicialización del motor, entre ellos los destinados al cumplimiento de las leyes de privacidad y a la recogida del consentimiento legal.

enableLegalConsent

Llame al método enableLegalConsent() después de obtener el consentimiento legal del visitante para activar Kameleoon. Este método activa el modo de funcionamiento normal de Kameleoon. Para más información, consulte el artículo Gestión del consentimiento.

var agreedButton = Kameleoon.API.Utils.querySelectorAll("#agreed")[0];

Kameleoon.API.Utils.addEventListener(agreedButton, "mousedown", function (event) {
  Kameleoon.API.Core.enableLegalConsent();
});

Argumentos

Nombre	Tipo	Descripción
module	String	Nombre del módulo que se va a activar: `PRODUCT_RECOMMENDATION`, `AB_TESTING`, `PERSONALIZATION` o `BOTH`. Por ejemplo, `PRODUCT_RECOMMENDATION` ejecuta el punto de entrada exclusivamente con las funciones de recomendación de productos. `AB_TESTING` activa las pruebas A/B y la recomendación de productos (a menos que la opción personalizada para diferenciar el consentimiento esté activa). `BOTH` activa todas las funciones. Si se omite, el método activa por defecto el consentimiento legal para todos los módulos (`BOTH`).

También hay disponible una opción personalizada que permite gestionar por separado el consentimiento para Product Recommendation. Cuando esta opción está activa, llame explícitamente a enableLegalConsent("PRODUCT_RECOMMENDATION") para activar el módulo. Contacte con el Customer Success Manager para habilitar esta funcionalidad.

disableLegalConsent

Llame al método disableLegalConsent() cuando un visitante rechace el uso de Kameleoon. Este método desactiva el modo de funcionamiento normal. Para más información, consulte el artículo Gestión del consentimiento.

var disableButton = Kameleoon.API.Utils.querySelectorAll("#disable")[0];

Kameleoon.API.Utils.addEventListener(disableButton, "mousedown", function (event) {
  Kameleoon.API.Core.disableLegalConsent();
});

Argumentos

Nombre	Tipo	Descripción
module	String	Nombre del módulo que se va a deshabilitar: “AB_TESTING”, “PERSONALIZATION” o “BOTH”. Si se omite, el método desactiva el consentimiento legal para todos los módulos (`BOTH`).

También hay disponible una opción personalizada que permite gestionar por separado el consentimiento para Product Recommendation. Cuando esta opción está activa, llame explícitamente a disableLegalConsent("PRODUCT_RECOMMENDATION") para deshabilitar el módulo. Contacte con el Customer Success Manager para habilitar esta funcionalidad.

enableSinglePageSupport

El método enableSinglePageSupport() recarga el motor de Kameleoon cuando cambia la URL activa, con independencia de las cargas de página del navegador. Use este método para Single Page Applications (SPA) con varias URL y una única carga inicial. Kameleoon trata cada cambio de URL como una nueva página, lo que habilita la segmentación por URL y un seguimiento preciso de métricas como las páginas vistas.

if (location.href.indexOf("mySPAWebsitePart") != -1) {
  Kameleoon.API.Core.enableSinglePageSupport();
}

Kameleoon también elimina automáticamente de la página todos los elementos añadidos que usen ID HTML que empiecen por «kameleoonElement» o «kameleoonStyleSheet» cuando la SPA se recarga.

enableDynamicRefresh

El método enableDynamicRefresh() detecta cambios en los elementos y reaplica las modificaciones del Graphic Editor. Este método admite SPAs que modifican el DOM dinámicamente sin cambios de URL ni recargas de página, evitando que las actualizaciones dinámicas eliminen los experimentos. Consulte enableSinglePageSupport() para otros tipos de SPA.

if (location.href.indexOf("cart") != -1) {
    Kameleoon.API.Core.enableDynamicRefresh();
}

getConfiguration

El método getConfiguration() devuelve una referencia al objeto Configuration, que contiene los valores constantes globales de la configuración de Kameleoon del sitio.

var configuration = Kameleoon.API.Core.getConfiguration();

if (configuration.siteCode == "abcde12345") {
  document.cookie = "MyMainSite=true;";
} else if (configuration.siteCode == "12345abcdef") {
  document.cookie = "MySubSite=true;";
}

Valor de retorno

Nombre	Tipo	Descripción
configuration	Object	Objeto Configuration.

load

El método load() inicializa el motor de Kameleoon. Aunque la inicialización suele producirse automáticamente al cargar el archivo de la aplicación, es posible que sea necesario realizar llamadas manuales. Para recargar Kameleoon tras cada cambio de URL en una aplicación de página única, use enableSinglePageSupport() en lugar de vigilar la URL usted mismo.

Kameleoon.API.Core.load();

Kameleoon también elimina automáticamente de la página todos los elementos añadidos que usen ID HTML que empiecen por «kameleoonElement» o «kameleoonStyleSheet» cuando la SPA se recarga.

processRedirect

El método processRedirect() redirige el navegador a otra URL, normalmente para experimentos A/B de tipo split. Use este método en lugar de window.location.href = redirectionURL; para garantizar un seguimiento preciso en segundo plano.

var experiment = Kameleoon.API.Experiments.getByName("RedirectExperiment");

if (experiment.associatedVariation.id == 123456) {
  Kameleoon.API.Core.processRedirect("https://www.mywebsite.com?variation=A");
}

Si la URL de redirección está en un dominio distinto de la URL base y la instalación de Kameleoon no incluye los datos de sesión unificados, el motor añade un parámetro kameleoonRedirect-{experimentID} a la URL de destino para garantizar un seguimiento preciso.

Argumentos

Nombre	Tipo	Descripción
redirectionURL	String	URL de redirección. Este campo es obligatorio.

runWhenConditionTrue

El método runWhenConditionTrue() ejecuta la función callback cuando la función conditionFunction devuelve true. El método utiliza un mecanismo de polling, lo que puede causar parpadeos. Use runWhenElementPresent() en su lugar para obtener un mejor rendimiento. Consulte la descripción de runWhenElementPresent() para más detalles.

Kameleoon.API.Core.runWhenConditionTrue(function () {
  return typeof jQuery != "undefined";
}, function () {
  jQuery("#bloc-2345").text("Mon nouveau texte");
}, 200);

Argumentos

Nombre	Tipo	Descripción
conditionFunction	Function	Función JavaScript que devuelve true o false. Este campo es obligatorio.
callback	Function	Función JavaScript que se ejecuta cuando conditionFunction devuelve true. Este campo es obligatorio.
pollingInterval	Number	El motor ejecuta conditionFunction periódicamente con este intervalo. Cuando `runWhenElementPresent()` no esté disponible, un pollingInterval menor reduce el parpadeo pero aumenta el uso de CPU. Si se omite, el método utiliza 200 milisegundos por defecto.

runWhenElementPresent

El método runWhenElementPresent() ejecuta la función de devolución de llamada cuando un elemento concreto aparece en el DOM. Este método utiliza observadores de mutaciones para aplicar la tecnología antiparpadeo. Identifique los elementos clave de una variación y llame a runWhenElementPresent() con el elemento como primer argumento y el código de implementación como devolución de llamada. Al llamar al método, las modificaciones se ejecutan en cuanto aparece el elemento, antes de que el navegador inicie un ciclo de actualización de la pantalla. Para actuar sobre varios elementos, llame a runWhenElementPresent() por separado para cada elemento en lugar de apuntar únicamente al elemento final esperado. Una sola llamada puede provocar parpadeos si se produce un ciclo de refresco entre la aparición de los distintos elementos.

// Con gestión de mutation observers.
Kameleoon.API.Core.runWhenElementPresent("#bloc-2345", function (elements) {
 elements[0].innerText = "My new Text";
});

// Con múltiples selectores CSS. Se ejecuta si está presente cualquiera de los elementos.
Kameleoon.API.Core.runWhenElementPresent("#bloc-567, .cta-button, #bloc-789", function (elements) {
 elements[0].innerText = "More new text";
});

// Sin gestión de mutation observers, Kameleoon hace polling cada 200 ms para comprobar si el elemento está en la página.
Kameleoon.API.Core.runWhenElementPresent("#MyPopup.showed", function (elements) {
 Kameleoon.API.Events.trigger("popup displayed");
}, 200);

// Con gestión de mutation observers y soporte para Single Page App, Kameleoon aplica las modificaciones cada vez que se añaden nuevos elementos al DOM o cuando hay un refresco dinámico de la Single Page App que elimina modificaciones anteriores.
Kameleoon.API.Core.runWhenElementPresent(".product-button", function (elements) {
 elements.forEach(element => {
  element.innerText = "Add To Cart";
 });
}, null, true);

Proporcionar este valor desactiva los Mutation Observers y el anti-parpadeo, y se vuelve al polling tradicional. Use este argumento solo en casos específicos, como consultas de selectores complejas con un alto impacto en CPU.

Argumentos

Nombre	Tipo	Descripción
selector	String	Selector CSS del elemento. Para especificar varios selectores CSS, proporcione una sola cadena separada por comas. El callback se ejecuta cuando exista uno o más elementos. Este campo es obligatorio.
callback	Function	Función JavaScript que se ejecuta cuando el elemento aparece en el DOM. Este campo es obligatorio.
pollingInterval	Number	Proporcionar este valor desactiva los Mutation Observers y hace que el motor vuelva al polling tradicional, lo que puede causar parpadeos. Este campo es opcional.
isDynamicElement	Boolean	Cuando está activo, Kameleoon hace seguimiento del selector si no se encuentra de inmediato al cargar la página y ejecuta el callback a medida que aparecen los elementos. El callback se vuelve a disparar para cada nuevo elemento que coincida con el selector. Esta opción admite menús dinámicos, scroll infinito y pop-ups. Este campo es opcional.

runWhenShadowRootElementPresent

El método runWhenShadowRootElementPresent() ejecuta la función callback cuando aparece un elemento específico dentro de un shadow DOM con mode: open.

const wrapper = document.querySelector(".shadow-wrapper");
const shadow = wrapper.attachShadow({ mode: "open" });
const span = document.createElement("span");
span.classList.add("selector-inside-wrapper");
span.textContent = "I'm in the shadow DOM";
shadow.appendChild(span);

Kameleoon.API.Core.runWhenShadowRootElementPresent('.shadow-wrapper', '.selector-inside-wrapper', (elements) => {
    elements[0].innerText = "New text" 
});

Argumentos

Nombre	Tipo	Descripción
parentSelector	String	Selector CSS del elemento padre. Este campo es obligatorio.
shadowRootElementSelector	String	Selector CSS dentro del shadow DOM. Este campo es obligatorio.
callback	Function	Función JavaScript que se ejecuta cuando el elemento aparece en el shadow DOM. Este campo es obligatorio.
isDynamicElement	Boolean	Cuando está activo, Kameleoon hace seguimiento del selector si no se encuentra de inmediato y ejecuta el callback a medida que aparecen los elementos. El callback se vuelve a disparar para cada nuevo elemento que coincida con el selector. Esta opción admite menús dinámicos, scroll infinito y pop-ups.

APIs

​enableLegalConsent

​disableLegalConsent

​enableSinglePageSupport

​enableDynamicRefresh

​getConfiguration

​load

​processRedirect

​runWhenConditionTrue

​runWhenElementPresent

​runWhenShadowRootElementPresent

enableLegalConsent

disableLegalConsent

enableSinglePageSupport

enableDynamicRefresh

getConfiguration

load

processRedirect

runWhenConditionTrue

runWhenElementPresent

runWhenShadowRootElementPresent