Segmentación de audiencias

Última actualización el 24 mar 202615 min de lectura

Índice de contenidos

• En resumen
• Condiciones de segmentación de audiencia
• Segmentación de audiencia con JavaScript (para expertos)

En resumen

Con audience targeting determinas qué grupo objetivo participa en tu experimento. Por ejemplo, puedes dirigirte solo a usuarios que llegan a tu web a través de una fuente específica, o seleccionar usuarios de mobile, tablet o desktop. Las opciones son muy versátiles.

Creas tu audience targeting en el Segment Builder. Puedes usar JavaScript para targeting más complejo. Aquí encontrarás varias plantillas de JavaScript para diferentes casos de uso, que puedes utilizar para implementar el targeting que desees.

Step-by-Step TutorialAudience TargetingStart tutorial

Constructor de Segmentos

Con el Segment Builder en Audience Targeting, determinas qué grupos de usuarios participan en tu experimento. Si no realizas ninguna configuración, todos los visitantes que cumplan las condiciones de Page Targeting participarán automáticamente.

En la pestaña «Audience targeting», usa «Condition +» para añadir nuevas condiciones según las cuales se ejecutará tu experimento. Selecciona una condición de la lista. Puedes combinar varias condiciones entre sí, ya sea con AND u OR.

Si ya tienes segmentos guardados, puedes adoptarlos como audience targeting con un clic a través de «Saved segment +».

Guarda tu audience targeting mediante «Save Audience Targeting» para que quede activo para el experimento. Puedes editar el audience targeting en cualquier momento.

Guardar segmentos (opcional)

Una vez que has creado tu audiencia, puedes guardarla opcionalmente como un segmento y reutilizarla más adelante en otros experimentos. Esto te permite definir tu audiencia una vez y luego seleccionarla como segmento una y otra vez.

Para guardar un audience targeting definido como segmento, abre el menú desplegable junto a «Save audience targeting». Luego selecciona «Save targeting segment» para guardar el targeting como segmento.

Condiciones de segmentación de audiencia

En la segmentación de audiencia, tienes varios métodos a tu disposición para reproducir tu experimento y crear segmentos. En esta lista encontrarás una descripción general de todos los métodos de segmentación. También puedes combinarlos entre sí, ya sea con AND u OR.

Método	Descripción (incl. ejemplo)
Browser	Muestra un experimento solo para usuarios de determinados navegadores para probar efectos específicos del navegador o diferencias de visualización. Ejemplo: Los usuarios con el navegador Safari participan en el experimento.
Browser Language	Reproduce experimentos según el idioma del navegador configurado para mostrar variantes en el idioma correspondiente. Ejemplo: Los usuarios con el idioma del navegador en alemán verán la versión en alemán.
Cookie	Segmenta experimentos según las cookies existentes para reproducir variantes en función de los estados del usuario. Ejemplo: Los usuarios con una cookie de carrito de compra ven un experimento con ofertas de carrito de compra específicas.
Device	Limita un experimento a determinados tipos de dispositivos para probar variantes optimizadas por dispositivo. Ejemplo: Los usuarios en dispositivos móviles participan en el experimento.
Platform	Ejecuta un experimento solo en determinadas plataformas/sistemas operativos para tener en cuenta las diferencias específicas de la plataforma. Ejemplo: Los usuarios en Android participan en el experimento.
Geolocation	Segmenta experimentos por ubicación para probar variantes regionales o contenido localizado. Ejemplo: Los usuarios de Alemania participan en el experimento.
IP	Incluye o excluye determinadas IP en un experimento, por ejemplo para control de calidad o para excluir el acceso interno de los datos. Ejemplo: Los usuarios con la IP 123.123.123.123 quedan excluidos del experimento.
Local Storage	Ejecuta un experimento solo si está disponible un determinado valor de local storage para usar estados de usuario recurrentes. Ejemplo: Los usuarios con el valor de localStorage experiment=true participan en el experimento.
Session Storage,	Segmenta un experimento usando un valor de session storage que solo se aplica a la sesión actual. Ejemplo: Los usuarios con el valor de sessionStorage experiment=true participan en el experimento.
URL Query Parameter	Ejecuta un experimento solo para usuarios con determinados parámetros de URL para probar el tráfico de campañas de forma específica. Ejemplo: Los usuarios con ?campaign=blackfriday participan en el experimento.
URL referrer	Muestra un experimento en función del referrer para probar a los usuarios de forma diferente según la fuente de tráfico. Ejemplo: Los usuarios que provienen de google.com participan en el experimento.
JavaScript	Usa JavaScript para una segmentación de audiencia más compleja o si ninguno de los otros métodos es posible. La segmentación está activa si el return statement devuelve true. Ejemplo: Los usuarios participan en el experimento si está disponible una entrada específica del data layer (Más ejemplos de aplicación de JavaScript).

Segmentación de audiencia con JavaScript (para expertos)

Para una segmentación de audiencia más compleja o si tu segmentación no se puede implementar con los otros métodos en el Segment Builder, puedes usar JavaScript. La segmentación está activa si tu return statement devuelve true.

A continuación encontrarás varios ejemplos de aplicación.

Ejemplos de aplicación de JavaScript

important

Aviso: También puedes implementar fácilmente algunos de estos ejemplos de aplicación usando los otros métodos de segmentación en el Segment Builder.

Visitantes y comportamiento

Idioma y región

Solo dirígete a usuarios que tengan configurado un idioma predeterminado definido en su navegador. Aquí puedes encontrar todos los códigos de idioma ISO admitidos.

Ejemplo de código - Idioma inglés

return navigator.language.startsWith('en');
``` Only target users who are in a specific country. Here you can find all supported [ISO County Codes](/iso-country-codes/). 

Ejemplo de código - Idioma inglés y región EE. UU. 

```javascript showLineNumbers
return navigator.language.startsWith('en-US');

Visitantes nuevos / recurrentes

Dirígete solo a usuarios que hayan visitado tu sitio antes o que hayan participado en un test anterior. Alternativamente, también puedes dirigirte a usuarios que aún no hayan estado en tu sitio o a participantes de test.

Para poder reconocer a los usuarios que ya han visitado tu sitio web, es necesario crear primero un experimento independiente que se utilice exclusivamente para marcar a estos usuarios. En tu experimento real, puedes entonces incluir específicamente solo a aquellos usuarios que han visto o no han visto el experimento anterior.

Inserta el fragmento de código correspondiente en la segmentación de audiencia de tu experimento e introduce el ID del experimento del experimento independiente en el campo 'YOUR_EXPERIMENT_ID'.

Ejemplo de código - redirigir a un participante de test de un experimento específico - variante vista

const EXPERIMENT_ID = 'YOUR_EXPERIMENT_ID';

const storageValue = localStorage.getItem(`varify-experiment-${EXPERIMENT_ID}`);
return JSON.parse(storageValue)?.variationId === Number(EXPERIMENT_ID);

Ejemplo de código - Dirigirse solo a usuarios nuevos

const EXPERIMENT_ID = 'YOUR_EXPERIMENT_ID';

return !localStorage.getItem(`varify-experiment-${EXPERIMENT_ID}`);

Hora o día de la visita

Dirígete solo a los usuarios que estén en tu sitio a partir de una hora determinada o, por ejemplo, en un día concreto de la semana. Por ejemplo, puedes usar el siguiente ejemplo si quieres que tu experimento comience en un día y a una hora determinados.

Ejemplo de código - Programar el inicio del test

const currentDate = new Date();
const specificDate = new Date('2024-01-01T10:00:00'); // ISO format for 10:00 on 01.01.2024

return currentDate > specificDate;

Segmentación por eventos

Sondeo y JavaScript asíncrono

Comprueba propiedades asíncronas usando promesas. En el ejemplo aquí, estamos esperando un elemento que aún no existe en la página. Una vez que el elemento existe, se aplica la segmentación.

Ejemplo de código - Segmentar solo cuando un elemento está en la página

return new Promise(resolve => {
    window.varify.helpers.waitFor('.class', () => resolve(true))
})

Ejemplo de código - Manejo de sondeo con Promises

Esto inicia la consulta durante 2 segundos, tal como sería el caso si se devolviera false (sin promesas).

return new Promise((resolve, reject) => {
    resolve(false)
});

No inicia una consulta, o finaliza un bucle de consulta existente y omite este experimento

return new Promise((resolve, reject) => {
    reject()
});

Entrada de la capa de datos

Para segmentar solo a usuarios que tengan un determinado parámetro o un determinado valor en la capa de datos, puedes navegar por la capa de datos. En el siguiente ejemplo, solo se segmenta a los usuarios que previamente han visto un producto específico con ID 1111 o ID 2222.

Ejemplo de código - Data Layer Targeting

return dataLayer?.some(item => item?.ecommerce?.checkout?.products?.[0]?.id==='1111' || item?.ecommerce?.checkout?.products?.[0]?.id==='2222');

Segmentación técnica y por dispositivo

Navegador

Segmenta únicamente a los usuarios que utilizan un navegador específico.

Ejemplo de código - Google Chrome

return /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

Segmentación por dispositivo (desktop, tablet, mobile)

Por ejemplo, con el siguiente código puedes segmentar únicamente a los usuarios de mobile.

Ejemplo de código - Segmentación: Solo dispositivos móviles

return window.innerWidth < 768;

Ejemplo de código - Segmentación: Solo dispositivos tablet

return window.innerWidth > 768 && window.innerWidth < 1024;

Ejemplo de código - Segmentación: Solo dispositivos de escritorio

return window.innerWidth > 1023;

Plataforma / SO

Segmenta solo a usuarios que utilicen un sistema operativo específico.

Ejemplo de código - Android

return /Android/i.test(navigator.userAgent);

Gestión de campañas y experimentos

Campaña publicitaria

Segmenta solo a los usuarios que llegan a tu sitio desde una campaña publicitaria específica.

Ejemplo de código - UTM Source = ad_campaign

const AD_CAMPAIGN = 'YOUR_AD_CAMPAIGN_HERE';

return new URL(window.location).searchParams.get('utm_source') === AD_CAMPAIGN;

Mostrar el experimento o campaign booster solo una vez

Si quieres evitar que los usuarios vuelvan a ver un experimento o un campaign booster después de haberlo visto ya, puedes implementarlo fácilmente con la ayuda de la segmentación de audiencia (audience targeting).

Para ello, utilizamos session storage para una única reproducción por sesión, o local storage para una única reproducción en varias sesiones. La primera vez que se reproduce el experimento, se crea una entrada correspondiente en el almacenamiento y, en el siguiente intento, comprobamos si esa entrada ya existe. Si es así, el experimento no se vuelve a mostrar.

Session Storage - una reproducción única por sesión

Añade este código al JavaScript de tu variante usando el editor. Lo mejor es cambiar el ID de experimento 1234 en "experiment-seen-1234" por el ID de experimento de tu experimento.

window.varify.helpers.onDomLoaded(() => {
  sessionStorage.setItem('experiment-seen-1234', 'true');
});

Luego añade este código a la segmentación de audiencia del experimento. Esto comprueba si la entrada de session storage ya existe y ejecuta o bloquea el experimento en consecuencia.

// Check if 'experiment-seen-1234' is not in session storage
return sessionStorage.getItem('experiment-seen-4374') === null;

Si la entrada experiment-seen-1234 con el valor true existe en el session storage, el experimento ya no se reproduce.

Local Storage - Reproducción única a lo largo de varias sesiones

Añade este código al JavaScript de tu variante mediante el editor. Lo mejor es cambiar el ID de experimento 1234 en "experiment-seen-1234" por el ID de experimento de tu experimento.

window.varify.helpers.onDomLoaded(() => {
  localStorage.setItem('experiment-seen-1234', 'true');
});

Luego añade este código a la segmentación de audiencia del experimento. Esto comprueba si la entrada de Local Storage ya existe y ejecuta o bloquea el experimento en consecuencia.

// Check if 'experiment-seen-1234' is not in local storage
return localStorage.getItem('experiment-seen-4374') === null;

Si la entrada experiment-seen-1234 con el valor true existe en el session storage, el experimento ya no se reproduce.

Exclusión de tráfico para experimentos

Si no quieres que todos los visitantes de la página objetivo participen en el experimento, puedes asignar solo una parte de los visitantes a un experimento usando el siguiente código. Por ejemplo, quieres que solo el 30% de los visitantes de la página se conviertan en participantes del experimento.

Importante: Introduce el Experiment_ID correspondiente del experimento en cuestión y reemplaza 1234 (línea 1).

Importante: Si quieres ajustar la proporción de participantes, cambia el número 10 (10%) en este código por la proporción deseada, por ejemplo, 30 (30%). (línea 11)

Un visitante ahora se asigna al experimento o se excluye de él según la probabilidad establecida. Si se le asigna, se guarda el valor "true" en el local storage, y "false" si se le excluye. Audience Targeting solo reproduce el experimento si el valor "true" está en el Local Storage y el usuario queda así identificado como participante del experimento.

const EXPERIMENT_ID = 1234;
const STORAGE_KEY_PREFIX = 'varify-experiment-';
const specificStorageKey = STORAGE_KEY_PREFIX + EXPERIMENT_ID;
const PARTICIPANT_KEY = 'experiment-participant';

// Retrieve the existing isInAudience value if it exists
const storedIsInAudience = localStorage.getItem(PARTICIPANT_KEY);

// If the isInAudience value is not set, determine it and store it
if (storedIsInAudience === null) {
    const isInAudience = Math.floor(Math.random() * 100) < 10;
    console.log("99");
    localStorage.setItem(PARTICIPANT_KEY, isInAudience ? 'true' : 'false');
} 

// Check if the specific experiment ID entry exists in localStorage
const isExperimentStored = localStorage.getItem(specificStorageKey) !== null;

if (!isExperimentStored) {
    if (localStorage.getItem(PARTICIPANT_KEY) === 'true') {

        // Set the PARTICIPANT_KEY to true once the specificStorageKey is set
        localStorage.setItem(PARTICIPANT_KEY, 'true');

        // Return true
        console.log("true");
        return true;
    } else {
        // If the participant is not in the audience, return false
        console.log("false");
        return false;
    }
} else {
    // If the specific experiment ID entry exists, return true
    console.log("true");
    return true;
}

Puedes comprobar si funciona como se desea a través de la consola de desarrollador del navegador. Para ello, ve a tu local storage en la pestaña "Application". Una vez que hayas iniciado el experimento y estés en la página donde se está ejecutando, deberías ver lo siguiente en el local storage, según si perteneces o no al grupo de participantes:

Participantes:

• Key: experiment-participant Value: true
• El experimento también debería ser visible: Key: varify-experiment-1234 Value: {"variationId":1234/Original, "timestamp":12456789}

No participante:

• Clave: experiment-participant Valor: false
• Los valores del experimento no deberían encontrarse en Local Storage

Si quieres volver a probar si funciona, por ejemplo para entrar en el grupo de participantes, debes borrar manualmente las entradas en el Local Storage. Para ello, haz clic en el icono con el círculo tachado a la derecha del filtro para borrar todas las entradas en el Local Storage y luego recarga la página.

Exclusión mutua de experimentos (distribución de tráfico configurable)

En algunos casos, es necesario excluir a los participantes asignados a un experimento concreto de otros experimentos. Esto es especialmente relevante cuando se realizan dos o más experimentos en las mismas páginas de un sitio web. Esto sirve para evitar que los resultados se distorsionen por la influencia mutua entre los experimentos.

En el siguiente código encontrarás las dos constantes en la parte superior EXPERIMENTS y ALLOCATIONS.

• EXPERIMENTSIntroduce los IDs de los experimentos en cuestión que deben ser mutuamente excluyentes (por ejemplo: 10201, 12345, 11456). Deben introducirse al menos dos IDs de experimento, el número máximo no tiene límite.
• ALLOCATIONSAquí defines la distribución del tráfico entre los experimentos. Con una entrada de [25, 50, 25] como en el ejemplo bajo EXPERIMENTS, el 25 % de los usuarios vería el experimento 10201, el 50 % vería el experimento 12345 y el 25 % vería el experimento 11456.

Inserta el siguiente código en cada uno de los experimentos que deban ser mutuamente excluyentes. Asegúrate de introducir la constante EXPERIMENTS antes de iniciar el test y de que se inserte exactamente el mismo código en cada experimento.

const EXPERIMENTS = [205, 206, 207, 208]; // Participating experiments in this cluster
const ALLOCATIONS = [25, 25, 25, 25]; // Has to sum up to 100 and be the same length as EXPERIMENTS
const PARTICIPANT_KEY = 'experiment-participant-1'; // should be unique per experiment-cluster
const STORAGE = window.localStorage; // or window.sessionStorage

const storedIsInAudience = STORAGE.getItem(PARTICIPANT_KEY);
if (storedIsInAudience === null) {
  let randomNumber = Math.floor(Math.random() * 100);
  const selectedExperiment = EXPERIMENTS.find((_, index) => {
    const allocation = ALLOCATIONS[index];
    if (randomNumber < allocation) {
      return true;
    }
    randomNumber -= allocation;
    return false;
  });

  STORAGE.setItem(PARTICIPANT_KEY, selectedExperiment);
}

const specificStorageKey = `varify-experiment-${experimentId}`;
const isExperimentStored = STORAGE.getItem(specificStorageKey) !== null;
if (isExperimentStored) {
  console.log('true');
  return true;
}
if (STORAGE.getItem(PARTICIPANT_KEY) === experimentId.toString()) {
  console.log('true');
  return true;
}
console.log('false');
return false;

Segmentar a los participantes de la variante original de un experimento en un segundo experimento

important

Aviso importante:
¿Quieres usar dos ejemplos de casos de uso diferentes juntos, pero no estás seguro de cómo hacerlo? No dudes en contactarnos: https://varify.io/contact/

Para garantizar que un segundo experimento solo se muestre a los usuarios que previamente han visto la versión original de un primer experimento, esto se puede controlar con precisión en la segmentación de audiencia (audience targeting) mediante el siguiente código. A los usuarios que ya hayan visto la variante del primer experimento no se les mostrará el segundo experimento.

Importante: el ID del experimento "1234" en la línea 1 debe reemplazarse por el ID del experimento correspondiente al primer experimento, para el cual solo los participantes de la variante original deben ver el segundo experimento.

const EXPERIMENT_ID = 1234;
const STORAGE_KEY_PREFIX = 'varify-experiment-';
const specificStorageKey = STORAGE_KEY_PREFIX + EXPERIMENT_ID;

// Retrieve the value for specificStorageKey
const storedValue = localStorage.getItem(specificStorageKey);

if (storedValue) {
    // Parse the stored JSON string
    const storedData = JSON.parse(storedValue);

    // Check if variationId is null
    if (storedData.variationId === null) {
        //console.log('True - variationId is null');
        return true;
    }
}

// Default return if condition is not met
//console.log('False - variationId is not null or specificStorageKey does not exist');
return false;

También cabe mencionar que, ajustando el código, los participantes de la variante original también pueden excluirse e incluirse los participantes de la variante. El siguiente punto te muestra cómo hacerlo.

Experimentos multipágina: segmentación de una variante específica: participantes de un experimento en un segundo experimento

La mejor manera de configurar Experimentos multipágina es la siguiente.

1. crea un experimento por sitio web en el que se vaya a producir un cambio en la variante.

2. define cuál es el experimento primario. El experimento primario es el experimento en cuya página tus visitantes deben convertirse en participantes de la prueba.

3. añade el siguiente código en Audience Targeting en todos los experimentos del Experimento multipágina excepto en el Experimento primario.

4. cambia el Experiment_ID por el ID de tu experimento principal

5. cambia el targetVariationId por el ID de variación de tu experimento principal.

6. para todos los experimentos excepto el experimento principal, establece la distribución de tráfico al 100% de la variante

const EXPERIMENT_ID = 13013; // Change this to the experiment ID you're interested in
const STORAGE_KEY_PREFIX = 'varify-experiment-';
const specificStorageKey = STORAGE_KEY_PREFIX + EXPERIMENT_ID;
const targetVariationId = 17347; // The specific variation ID to check for

// Retrieve the value for specificStorageKey
const storedValue = localStorage.getItem(specificStorageKey);

if (storedValue) {
    // Parse the stored JSON string
    const storedData = JSON.parse(storedValue);

    // Check if the current user has the specific variation ID
    if (storedData.variationId === targetVariationId) {
        console.log('User has the specific variation ID');
        return true;
    } else {
        console.log('User does not have the specific variation ID');
        return false;
    }
} else {
    console.log('No data found for this experiment ID');
    return false;
}

Fuente de tráfico y contenido

URL de referencia

Dirige la segmentación solo a usuarios que visitaron tu sitio web inicial desde un referente (fuente) específico.

Ejemplo de código - Referrer = https://www.google.com/

const REFERRER_URL = 'https://www.google.com/'

return document.referrer === REFERRER_URL;

Fuente de tráfico

Dirige la segmentación solo a usuarios que provienen de una fuente de tráfico específica, como newsletters.

Ejemplo de código - Newsletter

const QUERY_PARAM_KEY = 'source'
const QUERY_PARAM_VALUE = 'newsletter'

const params = new URLSearchParams(window.location.search);
return params.get(QUERY_PARAM_KEY) === QUERY_PARAM_VALUE;

Segmentación por cookies

Comprueba si tus usuarios tienen una entrada de cookie y define solo a estos usuarios como participantes del test.

Ejemplo de código - la cookie está configurada

const COOKIE_KEY = 'YOUR_COOKIE_KEY_HERE';
const COOKIE_VALUE = 'YOUR_COOKIE_VALUE_HERE';

const cookies = document.cookie.split(/\s*;\s*/)
  .map(cookie => cookie.split('='));

return Object.fromEntries(cookies)[COOKIE_KEY] === COOKIE_VALUE;

Segmentación por Session & Local Storage

Comprueba si tus usuarios tienen una entrada correspondiente en el Session o Local Storage y define solo a estos usuarios como participantes del test.

Ejemplo de código - Se establece el valor de Session Storage

const STORAGE_KEY = 'YOUR_SESSION_STORAGE_KEY';
const STORAGE_VALUE = 'YOUR_SESSION_STORAGE_VALUE';

return sessionStorage.getItem(STORAGE_KEY) === STORAGE_VALUE;

Ejemplo de código - Se establece el valor de Local Storage

const STORAGE_KEY = 'YOUR_LOCAL_STORAGE_KEY';
const STORAGE_VALUE = 'YOUR_LOCAL_STORAGE_VALUE';

return localStorage.getItem(STORAGE_KEY) === STORAGE_VALUE;

Parámetros de consulta

Dirígete solo a los usuarios que visitan tu sitio web usando un parámetro de consulta específico. Puedes usar este caso de uso, por ejemplo, para probar tu variante. En este ejemplo, la variante se invoca con el parámetro de consulta de URL ?varify-testing=true.

Ejemplo de código - ?varify-testing=true

const QUERY_PARAM_KEY = 'varify-testing'
const QUERY_PARAM_VALUE = 'true'

const params = new URLSearchParams(window.location.search);
return params.get(QUERY_PARAM_KEY) === QUERY_PARAM_VALUE;

Variable JavaScript con valor específico

Puedes usar el siguiente código en Audience Targeting para especificar que un experimento solo se reproduzca si una variable JavaScript tiene un valor determinado.

Importante: Reemplaza "myVariable" con el nombre de variable correspondiente y "myValue" con el valor de variable correspondiente. (Ten en cuenta también si el valor es un string, integer, Boolean, etc. y ajusta la comprobación si es necesario).

return window.myVariable === 'myValue';

Selector de clase CSS

¿Quieres reproducir o bloquear un experimento solo si un elemento con una clase CSS específica está presente en la página? Los siguientes ejemplos de código te ayudarán.

Sustituye CSS_CLASS_NAME simplemente por el nombre de clase correspondiente al que quieras dirigir el experimento.

Mostrar experimento si existe la clase CSS

//Include experiement when CSS class exists on page
const className = 'CSS_CLASS_NAME';
return (document.querySelector('.' + className) !== null);

No mostrar experimento si existe la clase CSS

//Exclude experiement when CSS class exists on page
const className = 'CSS_CLASS_NAME';
return !(document.querySelector('.' + className) !== null);

Combinar ejemplos de aplicación de JavaScript entre sí

Puedes combinar fácilmente diferentes escenarios de aplicación entre sí. Para ello, primero guarda los valores de retorno de los ejemplos de aplicación en tus propias variables. Luego puedes vincular estas variables en un valor de retorno general con un operador lógico (AND, OR), que se encargará de que la segmentación de audiencia muestre o bloquee el experimento.

La pregunta aquí es si las condiciones de segmentación de audiencia de los casos de uso vinculados deben cumplirse al mismo tiempo (AND), o si es suficiente que se cumpla solo una condición (OR). A continuación encontrarás ejemplos de esto.

Todas las condiciones deben cumplirse (AND)

Un caso de uso clásico para este ejemplo sería que un experimento solo deba reproducirse para usuarios móviles. Sin embargo, también quieres realizar el control de calidad (QA) mediante el session storage.

El experimento solo debe reproducirse si existe el session storage de QA Y el ancho de pantalla corresponde a un dispositivo móvil.

//Audience Targeting for QA with Session Storage
const STORAGE_KEY = 'varify-test';
const STORAGE_VALUE = 'true';
let isValueMatched = sessionStorage.getItem(STORAGE_KEY) === STORAGE_VALUE;

//Audience Targeting for mobile users
let mobileWidth = window.innerWidth < 768;

// //Combined with AND operator. Return true if both variables are true.
return isValueMatched && mobileWidth;

• En el ejemplo de aplicación para QA con session storage, el return crea una variable (let isValueMatched =)
• Lo mismo ocurre con el return del código de segmentación de audiencia móvil (let mobileWidth =)
• Puedes definir los nombres de las variables tú mismo, pero deben ser diferentes
• Se ha añadido una nueva línea con "return", en la que se vinculan las dos variables con una condición Y -> &&

El experimento solo se muestra si ambas variables tienen el valor true.

Se debe cumplir una condición (OR)

Sin embargo, a veces también quieres combinar escenarios de segmentación de audiencia donde no se deben cumplir todas las condiciones. En este caso, las variables se enlazan con un operador OR.

Un ejemplo sería si solo quieres mostrar un experimento a los visitantes de una determinada campaña o referrer. Para hacer esto, los dos escenarios deben enlazarse con un OR.

//Audience Targeting for Specific Campaign
const AD_CAMPAIGN = 'YOUR_AD_CAMPAIGN_HERE';
let specificCampaign = new URL(window.location).searchParams.get('utm_source') === AD_CAMPAIGN;

//Audience Targeting for Specific Referrer
const REFERRER_URL = 'https://www.google.com/'
let specificReferrer = document.referrer === REFERRER_URL;

//Combined with OR operator
return specificCampaign || specificCampaign;

• Del return del escenario de campaña, se creó una variable (let specificCampaign =)
• Del return del escenario de referrer, se creó la variable (let specificReferrer =)
• Se creó una nueva consulta return a partir de ambas variables con un operador OR ||

Si al menos una de las dos variables contiene el valor true, el experimento se reproduce.

Explicación técnica

En el campo Audience Targeting se puede definir cualquier JavaScript, que se ejecutará para determinar si el targeting se aplica. Mientras se ejecute el valor de retorno falsy, el JavaScript se vuelve a cargar tras cada ejecución. Se ejecuta cada 100 ms hasta alcanzar los 2000 ms. Después de eso, se cancela y el usuario no entra en el audience targeting. Se puede comprobar propiedades asíncronas utilizando un retorno de Promise.

Si un experimento debe reproducirse sin audience targeting, debes dejar el valor por defecto (return true;) como se muestra en la captura de pantalla.

Aviso: Varify no asume ninguna responsabilidad por la funcionalidad del código y la información.
Es responsabilidad del usuario probar el código exhaustivamente e implementarlo correctamente.