Pular para o conteúdo principal

Segmentação de Público

Última atualização em 24 de mar. de 202615 min de leitura

Resumo​

Com a segmentação de público, determinas qual o grupo-alvo que participa na tua experiência. Por exemplo, podes segmentar apenas utilizadores que chegam ao teu website através de uma fonte específica ou selecionar utilizadores de mobile, tablet ou desktop. As opções são bastante versáteis.

Crias a tua segmentação de público no Segment Builder. Podes usar JavaScript para segmentações mais complexas. Aqui encontras vários templates de JavaScript para diferentes casos de uso, que podes utilizar para implementar a segmentação pretendida.

Criador de Segmentos​

Com o Segment Builder no Audience Targeting, tu determinas quais grupos de utilizadores participam na tua experiência. Se não fizeres nenhuma configuração, todos os visitantes que cumpram as condições do Page Targeting participarão automaticamente.

No separador „Audience targeting“, usa „Condition +“ para adicionar novas condições segundo as quais a tua experiência será exibida. Seleciona uma condição da lista. Podes combinar várias condições entre si - com AND ou com OR.

Se já tiveres segmentos guardados, podes adotá-los como audience targeting com um clique através de „Saved segment +“.

Guarda o teu audience targeting através de „Save Audience Targeting“ para que fique ativo para a experiência. Podes editar o audience targeting em qualquer momento.

Aba „Audience-Targeting“ com a lista „Condition“ aberta, oferecendo Browser, Browser language, Cookie e Device

Salvando segmentos (opcional)

Depois de criar sua audiência, você pode opcionalmente salvá-la como um segmento e reutilizá-la mais tarde em outros experimentos. Isso permite que você defina sua audiência uma vez e depois a selecione como segmento repetidamente.

Para salvar um audience targeting definido como um segmento, abra o dropdown ao lado de „Save audience targeting“. Depois selecione „Save targeting segment“ para salvar o targeting como um segmento.

Audience targeting com a condição „Device – Visitor Is using Phone“ e o dropdown „Save targeting segment“ ao lado do botão de salvar

Condições de segmentação de público​

Na segmentação de público, tens vários métodos à tua disposição para exibir o teu experimento e criar segmentos. Nesta lista encontrarás uma visão geral de todos os métodos de segmentação. Também podes combiná-los entre si - com AND ou OR.

MétodoDescrição (incl. exemplo)
BrowserMostra um experimento apenas para utilizadores de determinados browsers para testar efeitos ou diferenças de exibição específicos do browser.
Exemplo: Utilizadores com o browser Safari participam no experimento.
Browser LanguageExibe experimentos com base no idioma do browser configurado para mostrar variantes no idioma adequado.
Exemplo: Utilizadores com o idioma do browser em alemão verão a versão alemã.
CookieSegmenta experimentos com base em cookies existentes para exibir variantes dependendo dos estados do utilizador.
Exemplo: Utilizadores com um cookie de carrinho de compras veem um experimento com ofertas direcionadas para o carrinho de compras.
DeviceLimita um experimento a determinados tipos de dispositivos para testar variantes otimizadas por dispositivo.
Exemplo: Utilizadores em dispositivos móveis participam no experimento.
PlatformExecuta um experimento apenas em determinadas plataformas/sistemas operativos para considerar diferenças específicas da plataforma.
Exemplo: Utilizadores em Android participam no experimento.
GeolocationSegmenta experimentos por localização para testar variantes regionais ou conteúdo localizado.
Exemplo: Utilizadores da Alemanha estão a participar no experimento.
IPInclui ou exclui determinados IPs de um experimento, por exemplo, para QA ou para excluir acessos internos dos dados.
Exemplo: Utilizadores com o IP 123.123.123.123 são excluídos do experimento.
Local StorageExecuta um experimento apenas se um determinado valor de local storage estiver disponível, para usar estados recorrentes do utilizador.
Exemplo: Utilizadores com o valor localStorage experiment=true participam no experimento.
Session Storage,Segmenta um experimento usando um valor de session storage que se aplica apenas à sessão atual.
Exemplo: Utilizadores com o valor sessionStorage experiment=true participam no experimento.
URL Query ParameterExecuta um experimento apenas para utilizadores com determinados parâmetros de URL para testar o tráfego de campanhas de forma direcionada.
Exemplo: Utilizadores com ?campaign=blackfriday participam no experimento.
URL referrerMostra um experimento dependendo do referrer para testar utilizadores de forma diferente consoante a origem do tráfego.
Exemplo: Utilizadores que vêm de google.com participam no experimento.
JavaScriptUsa JavaScript para segmentação de público mais complexa ou se nenhum dos outros métodos for possível.
A segmentação está ativa se a instrução return devolver true.
Exemplo: Os utilizadores participam no experimento se uma entrada específica do data layer estiver disponível (Mais exemplos de aplicação de JavaScript).

Segmentação de público com JavaScript (para especialistas)​

Para segmentação de público mais complexa ou se a tua segmentação não puder ser implementada com os outros métodos no Segment Builder, podes usar JavaScript. A segmentação está ativa se a tua instrução return devolver true.

Abaixo você encontrará vários exemplos de aplicação.

Targeting de audiência via condição JavaScript: uma função de sondagem (poll) que deve retornar true para visitantes no Segment

Exemplos de aplicação em JavaScript​

important

Aviso: Você também pode implementar facilmente alguns destes exemplos de aplicação usando os outros métodos de targeting no Segment Builder.

Visitantes e comportamento​

Idioma e região​

Direciona apenas para usuários que definiram um idioma padrão específico no navegador. Aqui você pode encontrar todos os códigos de idioma ISO suportados.

Exemplo 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/).

Exemplo de código - Idioma inglês e região EUA

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

Visitantes Novos / Recorrentes​

Direciona apenas para utilizadores que já visitaram o teu site antes ou que estiveram num teste anterior. Alternativamente, também podes direcionar para utilizadores que ainda não estiveram no teu site ou participantes de testes.

Para reconhecer utilizadores que já visitaram o teu website, é necessário primeiro criar uma experiência separada que é utilizada exclusivamente para marcar esses utilizadores. Na tua experiência real, podes então incluir especificamente apenas os utilizadores que viram ou não viram a experiência anterior.

Insere o snippet de código correspondente no segmentação de audiência da tua experiência e insere o ID da experiência da experiência separada no campo 'YOUR_EXPERIMENT_ID'.

Exemplo de código - redirecionar participante de teste de uma experiência específica - variante vista

const EXPERIMENT_ID = 'YOUR_EXPERIMENT_ID';

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

Exemplo de código - Segmentar apenas novos usuários

const EXPERIMENT_ID = 'YOUR_EXPERIMENT_ID';

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

Hora ou dia da visita​

Segmente apenas usuários que estão no seu site a partir de um determinado horário ou, por exemplo, em um determinado dia da semana. Por exemplo, você pode usar o exemplo a seguir se quiser que seu experimento comece em um determinado dia e horário.

Exemplo de código - Agendamento do início do teste

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;

Segmentação por evento​

Polling e JavaScript assíncrono

Verifica propriedades assíncronas usando promises. No exemplo aqui, estamos aguardando um elemento que ainda não existe na página. Assim que o elemento existir, o targeting é aplicado.

Exemplo de código - Targeting apenas quando um elemento está na página

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

Exemplo de código - Lidando com polling com Promises

Isso inicia a consulta por 2 segundos, exatamente como seria o caso se false (sem promises) fosse retornado.

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

Não inicia uma consulta, ou encerra um loop de consulta existente e ignora este experimento

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

Entrada da data layer​

Para segmentar apenas usuários que possuem um determinado parâmetro ou um determinado valor na data layer, você pode navegar pela data layer. No exemplo a seguir, apenas usuários que visualizaram anteriormente um produto específico com ID 1111 ou ID 2222 são segmentados.

Exemplo de código - Segmentação por Data Layer

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

Segmentação técnica e por dispositivo​

Navegador

Direciona apenas usuários que usam um navegador específico.

Exemplo de código - Google Chrome

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

Direcionamento por dispositivo (desktop, tablet, mobile)​

Por exemplo, com o seguinte código você pode direcionar apenas usuários mobile.

Exemplo de código - Segmentação: Apenas dispositivos móveis

return window.innerWidth < 768;

Exemplo de código - Segmentação: Apenas dispositivos tablet

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

Exemplo de código - Segmentação: Apenas dispositivos desktop

return window.innerWidth > 1023;

Plataforma / SO​

Segmenta apenas utilizadores que usam um sistema operativo específico.

Exemplo de código - Android

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

Gestão de campanhas e experimentos​

Campanha de anúncio​

Direciona apenas para utilizadores que chegam ao teu site a partir de uma campanha de anúncio específica.

Exemplo 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 experimento ou campaign booster apenas uma vez​

Se quiseres evitar que os utilizadores voltem a ver um experimento ou um campaign booster depois de já o terem visto, podes implementar isto facilmente com a ajuda do audience targeting.

Para isso, usamos session storage para uma única exibição por sessão ou local storage para uma única exibição em várias sessões. Na primeira vez que o experimento é exibido, é criada uma entrada correspondente no storage e, na tentativa seguinte, verificamos se essa entrada já existe. Se for o caso, o experimento não é exibido novamente.

Session Storage - exibição única por sessão

Adiciona este código ao JavaScript da tua variante usando o editor. O ideal é alterar o ID do experimento 1234 em "experiment-seen-1234" para o ID do teu experimento.

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

Depois, adicione este código à segmentação de público do experimento. Isso verifica se a entrada do session storage já existe e executa ou bloqueia o experimento de acordo.

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

Se a entrada experiment-seen-1234 com o valor true existir no session storage, o experimento não é mais exibido.

Local Storage - Exibição única em várias sessões

Adicione este código ao JavaScript da sua variante usando o editor. É melhor alterar o ID do experimento 1234 em "experiment-seen-1234" para o ID do seu experimento.

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

Depois, adicione este código à segmentação de público do experimento. Isso verifica se a entrada do Local Storage já existe e executa ou bloqueia o experimento de acordo.

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

Se a entrada experiment-seen-1234 com o valor true existir no session storage, o experimento deixa de ser reproduzido.

Exclusão de tráfego para experimentos​

Se não quiseres que todos os visitantes da página segmentada participem no experimento, podes atribuir apenas uma parte dos visitantes a um experimento utilizando o seguinte código. Por exemplo, queres que apenas 30% dos visitantes da página se tornem participantes do experimento.

Importante: Introduz o Experiment_ID correspondente ao experimento em questão e substitui 1234 (linha 1).

Importante: Se quiseres ajustar a proporção de participantes, altera o número 10 (10%) neste código para a proporção desejada, por exemplo, 30 (30%). (linha 11)

Um visitante é agora atribuído ou excluído do experimento com base na probabilidade definida. Se for atribuído, o valor "true" é guardado no local storage e "false" se for excluído. O Audience Targeting só reproduz o experimento se o valor "true" estiver no Local Storage e o utilizador for, assim, identificado como participante do 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;
}

Podes verificar se funciona como pretendido através da consola de desenvolvedor do browser. Para isso, vai ao teu local storage no separador "Application". Depois de teres iniciado o experimento e estares na página onde o experimento está a decorrer, deverás ver o seguinte no local storage, dependendo se estás no grupo de participantes ou não:

Participantes:

  • Key: experiment-participant Value: true
  • O experimento também deve estar visível: Key: varify-experiment-1234 Value: {"variationId":1234/Original, "timestamp":12456789}
Local storage do DevTools com "experiment-participant: true" e a entrada "varify-experiment-1234" contendo o ID da variação atribuída

Não é um participante:

  • Chave: experiment-participant Valor: false
  • Os valores para o experimento não devem ser encontrados no Local Storage
Local Storage do DevTools com „experiment-participant: false“ como única entrada

Se quiseres testar novamente se funciona, por exemplo para entrar no grupo de participantes, tens de apagar manualmente as entradas no Local Storage. Para isso, clica no ícone com o círculo cortado à direita do filtro para apagar todas as entradas no Local Storage e depois recarrega a página.

Exclusão mútua de experimentos (distribuição de tráfego configurável)​

Em alguns casos, é necessário excluir participantes que estão atribuídos a uma determinada experiência de outras experiências. Isto é particularmente relevante quando duas ou mais experiências são realizadas nas mesmas páginas de um website. O objetivo é evitar que os resultados sejam distorcidos pela influência mútua entre as experiências.

No código seguinte encontrarás as duas constantes no topo EXPERIMENTS e ALLOCATIONS.

  • EXPERIMENTSInsere os IDs das experiências em questão que devem ser mutuamente exclusivas (por exemplo: 10201, 12345, 11456). Devem ser inseridos pelo menos dois IDs de experiências, o número máximo é ilimitado.
  • ALLOCATIONSAqui defines a distribuição de tráfego entre as experiências. Com uma entrada de [25, 50, 25] como no exemplo em EXPERIMENTS, 25 % dos utilizadores veriam a experiência 10201, 50 % veriam a experiência 12345 e 25 % veriam a experiência 11456.

Insere o seguinte código em cada uma das experiências que devem ser mutuamente exclusivas. Certifica-te de que insere a constante EXPERIMENTS antes de iniciar o teste e de que exatamente o mesmo código é inserido para cada experiência.

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 os participantes da variante original de uma experiência numa segunda experiência​

important

Aviso importante:
Queres usar dois exemplos de casos de uso diferentes em conjunto, mas não tens a certeza de como o fazer? Não hesites em contactar-nos: https://varify.io/contact/

Para garantir que uma segunda experiência só é mostrada aos utilizadores que já viram anteriormente a versão original de uma primeira experiência, isto pode ser controlado com precisão na segmentação de audiência (audience targeting) usando o seguinte código. Os utilizadores que já viram a variante da primeira experiência não verão a segunda experiência.

Importante: O ID de experiência "1234" na linha 1 deve ser substituído pelo ID de experiência correspondente da primeira experiência, para a qual apenas os participantes da variante original devem ver a segunda experiência.

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;

Deve também ser mencionado que, ao ajustar o código, os participantes da variante original também podem ser excluídos e os participantes da variante incluídos. O próximo ponto mostra-te como fazer isso.

Experimentos Multi-Página - Segmentação de uma variante específica - Participantes de um experimento num segundo experimento​

A melhor forma de configurar Experimentos Multi-Página é a seguinte.

  1. cria um experimento por website no qual deve ocorrer uma alteração na variante.

  2. define qual é o experimento primário. O experimento primário é o experimento na página em que os teus visitantes se devem tornar participantes do teste.

  3. adiciona o seguinte código ao Audience Targeting em todos os experimentos do Experimento Multi-Página, exceto no Experimento Primário.

  4. altere o Experiment_ID para o ID do seu experimento principal

  5. altere o targetVariationId para o ID da variação do seu experimento principal.

  6. para todos os experimentos exceto o experimento principal, defina a distribuição de tráfego para 100% da 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;
}

Fonte de tráfego e conteúdo​

URL do referenciador​

Segmenta apenas os utilizadores que visitaram o teu website inicial a partir de um referenciador (source) específico.

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

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

return document.referrer === REFERRER_URL;

Fonte de tráfego​

Segmenta apenas os utilizadores que provêm de uma fonte de tráfego específica, como newsletters.

Exemplo 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;

Verifique se os seus utilizadores têm uma entrada de cookie e defina apenas esses utilizadores como participantes do teste.

Exemplo de código - o cookie está definido

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;

Segmentação por Session & Local Storage​

Verifique se os seus utilizadores têm uma entrada correspondente no Session ou Local Storage e defina apenas esses utilizadores como participantes do teste.

Exemplo de código - o valor do Session Storage está definido

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

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

Exemplo de código - o valor do Local Storage está definido

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​

Direciona apenas os utilizadores que visitam o teu website usando um parâmetro de consulta específico. Podes usar este caso de uso, por exemplo, para testar a tua variante. Neste exemplo, a variante é chamada com o parâmetro de consulta de URL ?varify-testing=true.

Exemplo 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;

Variável JavaScript com valor específico​

Você pode usar o seguinte código em Audience Targeting para especificar que um experimento só é reproduzido se uma variável JavaScript tiver um determinado valor.

Importante: Substitua "myVariable" pelo nome da variável correspondente e "myValue" pelo valor da variável correspondente. (Observe também se o valor é uma string, inteiro, Boolean etc. e ajuste a verificação se necessário).

return window.myVariable === 'myValue';

Seletor de classe CSS​

Você quer reproduzir ou bloquear um experimento apenas se um elemento com uma classe CSS específica estiver presente na página? Os exemplos de código a seguir vão te ajudar.

Substitua CSS_CLASS_NAME simplesmente pelo nome da classe correspondente à qual pretendes direcionar o experimento.

Mostrar experimento se a classe CSS existir

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

Não mostrar experimento se a classe CSS existir

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

Combinar exemplos de aplicação JavaScript entre si​

Podes combinar facilmente diferentes cenários de aplicação entre si. Para isso, primeiro guardas os valores de retorno dos exemplos de aplicação nas tuas próprias variáveis. Depois podes vincular essas variáveis num valor de retorno geral com um operador lógico (AND, OR), que garante que o audience targeting mostra ou bloqueia o experimento.

A questão aqui é saber se as condições de segmentação de público dos casos de uso vinculados devem ser cumpridas ao mesmo tempo (AND), ou se basta que apenas uma condição seja cumprida (OR). Encontrarás exemplos disto abaixo.

Todas as condições devem ser cumpridas (AND)​

Um caso de uso clássico para este exemplo seria que uma experiência só devesse ser exibida para utilizadores móveis. No entanto, também queres realizar o QA através do session storage.

A experiência só deve ser exibida se o session storage de QA existir E a largura do ecrã corresponder a um dispositivo móvel.

//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;
  • No exemplo de aplicação para QA com session storage, o return cria uma variável (let isValueMatched =)
  • O mesmo para o return do código de segmentação de público móvel (let mobileWidth =)
  • Podes definir os nomes das variáveis tu próprio, mas têm de ser diferentes
  • Foi adicionada uma nova linha com "return", na qual as duas variáveis são ligadas com uma condição E -> &&

O experimento só é exibido se ambas as variáveis tiverem o valor true próprio.

Uma condição deve ser cumprida (OR)​

Às vezes, no entanto, você também quer combinar cenários de segmentação de público onde nem todas as condições precisam ser atendidas. Nesse caso, as variáveis são ligadas com um operador OR.

Um exemplo seria se você quiser exibir um experimento apenas para visitantes de uma determinada campanha ou referenciador. Para isso, os dois cenários devem ser ligados com um 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;
  • A partir do return do cenário de campanha, foi criada uma variável (let specificCampaign =)
  • A partir do return do cenário de referenciador, foi criada a variável (let specificReferrer =)
  • Uma nova consulta return foi criada a partir de ambas as variáveis com um operador OR ||

Se pelo menos uma das duas variáveis contiver o valor true, o experimento é reproduzido.

Explicação técnica​

Qualquer JavaScript pode ser definido no campo Audience Targeting, que será executado para determinar se o targeting se aplica. Enquanto o valor de retorno falsy for executado, o JavaScript é recarregado após cada execução. Executado a cada 100ms até atingir 2000ms. Depois disso, é cancelado e o usuário não se enquadra no audience targeting. É possível verificar propriedades assíncronas usando um retorno Promise.

Se um experimento deve ser reproduzido sem audience targeting, deves manter o valor padrão (return true;) conforme mostrado na captura de tela.