Usercentrics

La Consent Management Platform (CMP) de Usercentrics proporciona toda la información requerida y actualizada sobre la privacidad de los datos. Con la integración de Usercentrics, Kameleoon se conecta automáticamente a Usercentrics, lee la política de consentimiento y la aplica al mostrar experimentos y personalizaciones en su sitio web. La integración ofrece las siguientes ventajas:

Gestiona automáticamente el consentimiento del usuario a través del CMP de Usercentrics sin necesidad de configuración adicional.
Garantiza una gestión coherente del consentimiento para un cumplimiento fluido.
Tranquiliza a los usuarios al saber que Kameleoon trata sus datos de forma conforme.

Añadir Kameleoon como Data Processing Service en Usercentrics

Para añadir Kameleoon como Data Processing Service, complete los siguientes pasos:

En la interfaz de administración de Usercentrics, haga clic en Service Settings.
Haga clic en Add DPS via Database > Kameleoon.

Seleccione su categoría en el menú desplegable Category.

Kameleoon proporciona los siguientes IDs de Template:

Kameleoon AB Testing & Personalization / Template ID: H1yDxp7JN
Kameleoon Only AB Testing Module / Template ID: 9FYjH37-J
Kameleoon Only Personalization Module / Template ID: 2lh8-reEz

Configurar IAB TCF en Usercentrics

Para habilitar IAB TCF 2.3 en Usercentrics y Kameleoon, complete los siguientes pasos:

Configure Kameleoon como vendor (ID: 820) en Usercentrics.
En la interfaz de administración de Usercentrics, vaya a Service Settings.
Establezca la versión del CMP en Version 2.

Haga clic en Configuration.
Habilite Transparency & Consent Framework 2.3 (TCF).

Habilite la integración de IAB TCF en Kameleoon.

Integración personalizada del consentimiento legal de Kameleoon

Si no puede habilitar TCF 2.3 en Usercentrics, puede utilizar una configuración con script personalizado.

No bloquee Kameleoon cuando el estado del consentimiento sea desconocido (en la primera visita de un visitante). Bloquear Kameleoon con un estado de consentimiento desconocido hace que la configuración con script personalizado sea ineficaz.

El script personalizado muestra a los usuarios las campañas cuando el estado del consentimiento es desconocido, sin realizar seguimiento. También puede mostrar cambios de A/B testing en las páginas de entrada de su proyecto.

En Kameleoon, defina su política de gestión de consentimientos y elija Consent required.
Integre las siguientes funciones de Kameleoon:
- enableLegalConsent
- disableLegalConsent

Para obtener más información sobre el consentimiento legal en Kameleoon, consulte la referencia de la API de consentimiento legal. Para obtener más información sobre los estados y modos de consentimiento, consulte la documentación de gestión del consentimiento.

Puede añadir un script personalizado directamente en una página, en Google Tag Manager o en el Global custom script dentro de la aplicación de Kameleoon. Para utilizar un script personalizado en el Global custom script, siga estos pasos:

Vaya al menú Projects.
Haga clic en Configuration en la tarjeta de su sitio o aplicación móvil.

Despliegue la sección General.
Copie y pegue uno de los siguientes bloques de código, según la Template de Kameleoon que haya elegido.

Web CMP v2
Web CMP v3

Ejemplo de script personalizado si A/B testing y Personalización están en el mismo servicio

Kameleoon AB Testing&Personalization / Template ID: H1yDxp7JN

function setConsentStatus(type, status, action) {
        if (status) {
            window.kameleoonQueue.push(function() {
                Kameleoon.API.Core.enableLegalConsent(type);
                console.log('enableLegalConsent ' + type)
            });
        } else if (!status) {
            window.kameleoonQueue.push(function() {
                Kameleoon.API.Core.disableLegalConsent(type);
                console.log('disableLegalConsent ' + type)
            });
        }
    }

    function initKameleoonLegalConsent(type) {
        window.kameleoonQueue = window.kameleoonQueue || [];
        window.kameleoonQueue.push(function() {
            Kameleoon.API.Core.runWhenConditionTrue(() => typeof UC_UI !== 'undefined' 
            && UC_UI.isInitialized() === true
            && window.localStorage.getItem('uc_user_interaction') === 'true', () => {
                const abtesting = UC_UI.getServicesBaseInfo().filter((service) => service && service.id === 'H1yDxp7JN');
                if (abtesting.length > 0) {
                    setConsentStatus('BOTH', abtesting[0].consent.status);
                }
            }, 200);
        });
    }
    initKameleoonLegalConsent();

Ejemplo de script personalizado si A/B testing y Personalización están en servicios distintos

Kameleoon Only AB Testing Module = Template ID: 9FYjH37-J
Kameleoon Only Personalization Module = Template ID: 2lh8-reEz

function setConsentStatus(type, status, action) {
        if (status) {
            window.kameleoonQueue.push(function() {
                Kameleoon.API.Core.enableLegalConsent(type);
                console.log('enableLegalConsent ' + type)
            });
        } else if (!status) {
            window.kameleoonQueue.push(function() {
                Kameleoon.API.Core.disableLegalConsent(type);
                console.log('disableLegalConsent ' + type)
            });
        }
    }

    function initKameleoonLegalConsent(type) {
        window.kameleoonQueue = window.kameleoonQueue || [];
        window.kameleoonQueue.push(function() {
            Kameleoon.API.Core.runWhenConditionTrue(() => typeof UC_UI !== 'undefined' 
            && UC_UI.isInitialized() === true
            && window.localStorage.getItem('uc_user_interaction') === 'true', () => {
                const abtesting = UC_UI.getServicesBaseInfo().filter((service) => service && service.id === '9FYjH37-J');
                if (abtesting.length > 0) {
                    setConsentStatus('AB_TESTING', abtesting[0].consent.status);
                }
                const perso = UC_UI.getServicesBaseInfo().filter((service) => service && service.id === '2lh8-reEz');
                if (perso.length > 0) {
                    setConsentStatus('PERSONALIZATION',perso[0].consent.status);
                }
            }, 200);
        });
    }
    initKameleoonLegalConsent();

Both (H1yDxp7JN) – Global script
Both (H1yDxp7JN) – kameleoonQueue
A/B testing + Personalization – Global script
A/B testing + Personalization – kameleoonQueue

const UcConsent = () => {
    const serviceID = 'H1yDxp7JN';

    function setConsentStatus(type, status) {
        if (status === true) {
            Kameleoon.API.Core.enableLegalConsent(type);
        } else if (status === false) {
            Kameleoon.API.Core.disableLegalConsent(type);
        }
    }

    function checkConsentStatus() {
        if (window.__ucCmp?.getConsentDetails === undefined) return;
        window.__ucCmp.getConsentDetails().then((details) => {
            const consent = details.services?.[serviceID]?.consent?.given;
            if (consent === undefined) return;
            setConsentStatus('BOTH', consent);
        });
    }

    const checkConsentInteraction = (event) => {
        if (window.__ucCmp?.isConsentRequired === undefined) return;
        window.__ucCmp.isConsentRequired().then((isRequired) => {
            if (isRequired) return;
            const consentStatus = event?.detail?.consent?.status;
            if (consentStatus === 'ALL_ACCEPTED') {
                setConsentStatus('BOTH', true);
            } else if (consentStatus === 'ALL_DENIED') {
                setConsentStatus('BOTH', false);
            } else {
                checkConsentStatus();
            }
        });
    };

    checkConsentInteraction();

    Kameleoon.API.Utils.addEventListener(window, 'UC_CONSENT', checkConsentInteraction);
};

UcConsent();

const UcConsent = () => {
    const serviceID = 'H1yDxp7JN';

    function setConsentStatus(type, status) {
        if (status === true) {
            Kameleoon.API.Core.enableLegalConsent(type);
        } else if (status === false) {
            Kameleoon.API.Core.disableLegalConsent(type);
        }
    }

    function checkConsentStatus() {
        if (window.__ucCmp?.getConsentDetails === undefined) return;
        window.__ucCmp.getConsentDetails().then((details) => {
            const consent = details.services?.[serviceID]?.consent?.given;
            if (consent === undefined) return;
            setConsentStatus('BOTH', consent);
        });
    }

    const checkConsentInteraction = (event) => {
        if (window.__ucCmp?.isConsentRequired === undefined) return;
        window.__ucCmp.isConsentRequired().then((isRequired) => {
            if (isRequired) return;
            const consentStatus = event?.detail?.consent?.status;
            if (consentStatus === 'ALL_ACCEPTED') {
                setConsentStatus('BOTH', true);
            } else if (consentStatus === 'ALL_DENIED') {
                setConsentStatus('BOTH', false);
            } else {
                checkConsentStatus();
            }
        });
    };

    checkConsentInteraction();

    Kameleoon.API.Utils.addEventListener(window, 'UC_CONSENT', checkConsentInteraction);
};

window.kameleoonQueue = window.kameleoonQueue || [];
window.kameleoonQueue.push(UcConsent);

function setConsentStatus(type, status) {
  if (status === true) {
    Kameleoon.API.Core.enableLegalConsent(type);
  } else if (status === false) {
    Kameleoon.API.Core.disableLegalConsent(type);
  }
}

function initKameleoonLegalConsent() {
  Kameleoon.API.Core.runWhenConditionTrue(
    () => typeof window.UC_UI !== 'undefined' && window.UC_UI.isInitialized() === true,
    () => {
      window.UC_UI.getServicesBaseInfo()
        .then((services) => {
          const abtestingService = services.find((service) => service?.id === '9FYjH37-J');
          if (abtestingService?.consent && typeof abtestingService.consent.status === 'boolean') {
            setConsentStatus('AB_TESTING', abtestingService.consent.status);
          }

          const persoService = services.find((service) => service?.id === '2lh8-reEz');
          if (persoService?.consent && typeof persoService.consent.status === 'boolean') {
            setConsentStatus('PERSONALIZATION', persoService.consent.status);
          }
        })
        .catch(console.error);
    },
    200
  );
}

initKameleoonLegalConsent();

window.kameleoonQueue = window.kameleoonQueue || [];
window.kameleoonQueue.push(() => {

  function setConsentStatus(type, status) {
    if (status === true) {
      Kameleoon.API.Core.enableLegalConsent(type);
    } else if (status === false) {
      Kameleoon.API.Core.disableLegalConsent(type);
    }
  }

  function initKameleoonLegalConsent() {
    Kameleoon.API.Core.runWhenConditionTrue(
      () => typeof window.UC_UI !== 'undefined' && window.UC_UI.isInitialized() === true,
      () => {
        window.UC_UI.getServicesBaseInfo()
          .then((services) => {
            const abtestingService = services.find((service) => service?.id === '9FYjH37-J');
            if (abtestingService?.consent && typeof abtestingService.consent.status === 'boolean') {
              setConsentStatus('AB_TESTING', abtestingService.consent.status);
            }

            const persoService = services.find((service) => service?.id === '2lh8-reEz');
            if (persoService?.consent && typeof persoService.consent.status === 'boolean') {
              setConsentStatus('PERSONALIZATION', persoService.consent.status);
            }
          })
          .catch(console.error);
      },
      200
    );
  }

  initKameleoonLegalConsent();
});

Si tiene alguna pregunta, no dude en ponerse en contacto con su Customer Success Manager de Kameleoon.

Ejecute solo un experimento de consentimiento por sitio.

Para ejecutar un test A/B en el banner de consentimiento de Usercentrics, primero cree un objetivo:

Haga clic en Configure > Goals > New goal.
En Website Selection, elija el sitio web que definió cuando creó su cuenta.
Seleccione Custom Goal en Type.
- Usercentrics admite varios eventos personalizados para objetivos personalizados. Para ver la lista completa de eventos disponibles, consulte los eventos de UI disponibles en la documentación de Usercentrics.
Haga clic en Next.
Introduzca un nombre para su objetivo en el campo Name your goal.
En el campo Describe your goal, introduzca Kameleoon.API.Goals.processConversion seguido del ID único.
- Puede encontrar el ID en el pop-in New goal al final del texto de la función.

Después de crear el objetivo, cree un experimento:

Abra el panel de experimentos.
Haga clic en New Experiment. Se abrirá un pop-in preguntando qué tipo de experimento quiere crear.
Haga clic en In the code editor > JS/CSS.
Introduzca el Name, Website y URL of the page where you want to launch your experiment.
Haga clic en Validate. Se abrirá el editor de código.

Haga clic en Experiment (encima de Variations en el menú de la izquierda) y, a continuación, haga clic en Test specific code en el menú de la derecha.
Añada el siguiente código:

window.UC_AB_VARIANT = "variant0";
 window.addEventListener('UC_UI_CMP_EVENT', function (data) {
      console.log("TEST: source =>", data.detail.source);
      console.log("TEST: type =>", data.detail.type);
      console.log("TEST: Variant =>", data.detail.abTestVariant);
      //These are our custom events for each basic action
      //in our Consent Management Platform
      if (data.detail.type === "CMP_SHOWN") Kameleoon.API.Goals.processConversion(Your Unique ID);
      if (data.detail.type === "ACCEPT_ALL") Kameleoon.API.Goals.processConversion(Your Unique ID);
      if (data.detail.type === "DENY_ALL") Kameleoon.API.Goals.processConversion(Your Unique ID);
      if (data.detail.type === "SAVE") Kameleoon.API.Goals.processConversion(Your Unique ID);
      if (data.detail.type === "MORE_INFORMATION_LINK") Kameleoon.API.Goals.processConversion(Your Unique ID);
      if (data.detail.type === "IMPRINT_LINK") Kameleoon.API.Goals.processConversion(Your Unique ID);
      if (data.detail.type === "PRIVACY_POLICY_LINK") Kameleoon.API.Goals.processConversion(Your Unique ID);
  });

variant0 es la variante por defecto, vacía. No realiza ningún cambio en la consent management platform. Si su variante por defecto tiene otro nombre, actualice window.UC_AB_VARIANT en consecuencia.
El event listener se activa cada vez que se produce un evento personalizado. Para ver la lista completa de eventos personalizados para A/B testing, consulte los eventos de UI disponibles en la documentación de Usercentrics.
Las tres instrucciones console.log muestran información sobre el evento. Por ejemplo, al hacer seguimiento de ACCEPT_ALL se generan estos logs:

 TEST: source => FIRST_LAYER
 TEST: type => ACCEPT_ALL
 TEST: Variant => variant1

Puede añadir más objetivos al experimento. Para añadir un objetivo, inserte el siguiente código después de la última instrucción if: if (data.detail.type === "Consent Management Platform event here") Kameleoon.API.Goals.processConversion(goalID)

Vuelva a la pestaña Variations.
En Variation 1, añada el siguiente código: window.UC_AB_VARIANT = "variant1";
Si dio otro nombre a su variante, sustituya variant1 en consecuencia.
En la pestaña Finalize, seleccione su distribución de tráfico, segmentación, seguimiento y objetivos.
- Añada el objetivo que ha creado. Puede buscar por el ID único del objetivo. Si la búsqueda no devuelve resultados, pruebe a introducir solo los primeros dígitos del ID del objetivo.
Haga clic en Publish para finalizar la configuración del experimento.

Para ver un tutorial sobre el A/B testing interno de Usercentrics, consulte la guía de A/B testing de Usercentrics.

Integraciones

Añadir Kameleoon como Data Processing Service en Usercentrics

Configurar IAB TCF en Usercentrics

Integración personalizada del consentimiento legal de Kameleoon

Ejemplo de script personalizado si A/B testing y Personalización están en el mismo servicio

Ejemplo de script personalizado si A/B testing y Personalización están en servicios distintos

Ejecutar un test A/B en el banner de consentimiento de Usercentrics

​Añadir Kameleoon como Data Processing Service en Usercentrics

​Configurar IAB TCF en Usercentrics

​Integración personalizada del consentimiento legal de Kameleoon

​Ejemplo de script personalizado si A/B testing y Personalización están en el mismo servicio

​Ejemplo de script personalizado si A/B testing y Personalización están en servicios distintos

​Ejecutar un test A/B en el banner de consentimiento de Usercentrics

Añadir Kameleoon como Data Processing Service en Usercentrics

Configurar IAB TCF en Usercentrics

Integración personalizada del consentimiento legal de Kameleoon

Ejemplo de script personalizado si A/B testing y Personalización están en el mismo servicio

Ejemplo de script personalizado si A/B testing y Personalización están en servicios distintos

Ejecutar un test A/B en el banner de consentimiento de Usercentrics