Palavras-chave populares

Categorias

Total Resultados

Nenhum registro encontrado

Segmentação de público-alvo

Curto e agradável

Com a segmentação de público-alvo, você define qual grupo-alvo deve fazer parte do seu experimento. Por exemplo, você pode segmentar apenas os usuários que visitam seu site a partir de uma fonte específica. Você também pode segmentar apenas o tráfego de celulares, tablets ou desktops, por exemplo. Os casos de uso são quase ilimitados.

A segmentação de público-alvo pode ser realizada com a ajuda do JavaScript. Também fornecemos modelos correspondentes para os casos de uso individuais aqui, que você pode usar para implementar sua segmentação preferida.

Se quiser iniciar um experimento sem segmentação de público-alvo, você pode deixar o valor padrão (return true;) no campo

Tutorial passo a passo
Segmentação de público-alvo

Exemplos de aplicativos

Visitantes e comportamento

Idioma e região

Observação importante:
Você gostaria de vincular dois exemplos de aplicativos diferentes, mas não tem certeza de como proceder? Não hesite em entrar em contato conosco: https://varify.io/kontakt/

Destina-se apenas a usuários que definiram um idioma padrão em seu navegador. Aqui você pode encontrar todos os idiomas suportados Códigos de idioma ISO.

Exemplo de código - Idioma: inglês

				
					return navigator.language.startsWith('en');

Segmente apenas usuários que estejam em um país específico. Aqui você pode encontrar todas as opções suportadas Códigos ISO do condado.

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

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

Visitantes novos/retornados

Segmente apenas usuários que já visitaram seu site ou que já participaram de um teste. Como alternativa, você também pode segmentar usuários que ainda não visitaram seu site ou não participaram de um teste.

Exemplo de código - Retargeting de participante de teste de um 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);

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

				
					const EXPERIMENT_ID = 'YOUR_EXPERIMENT_ID';

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

Hora ou dia da visita

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

Exemplo de código - Programação de início de 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 eventos

Polling e JavaScript assíncrono

Verifique se há propriedades assíncronas usando Promises. No exemplo aqui, estamos esperando por um elemento que ainda não existe na página. Assim que o elemento existir, o direcionamento será aplicado.

Exemplo de código - Direcionar somente quando um elemento estiver na página

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

Exemplo de código - Manipulação de sondagem com promessas

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

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

Não inicia uma consulta ou termina um loop de consulta existente e ignora esse experimento

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

Segmentação técnica e por dispositivo

Navegador

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

Exemplo de código - Google Chrome

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

Segmentação por dispositivo final (desktop, tablet, celular)

Por exemplo, você pode usar o seguinte código para segmentar apenas usuários móveis.

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

				
					return window.innerWidth < 768;

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

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

Exemplo de código - Direcionamento: somente dispositivos de desktop

				
					return window.innerWidth > 1023;

Segmente apenas os usuários que usam um sistema operacional específico.

Exemplo de código - Android

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

Endereço IP (beta)

Você só deseja reproduzir ou bloquear um experimento se os visitantes cumprirem um determinado Endereço IP utilizar.

Troca IP_ADRESS basta substituí-lo pelo endereço IP para o qual você deseja direcionar o experimento. Aqui você pode descobrir seu endereço IP.

Exibir experimento se for usado um endereço IP

				
					const IP_ADDRESS = '12.345.67.891'; //change ip adress for targeting

async function checkUserIp(matchIp) {
  return fetch('https://api.ipify.org?format=json')
      .then(response => response.json())
      .then(data => data.ip == matchIp)
      .catch(error => false);
}

return new Promise((resolve) => {
  checkUserIp(IP_ADDRESS).then(isMatch => {
    resolve(isMatch)
  });
})

Exibir experimento se um endereço IP não for usado

				
					const IP_ADDRESS = '12.345.67.891'; //change ip adress to exclude for targeting

async function checkUserIp(matchIp) {
  return fetch('https://api.ipify.org?format=json')
      .then(response => response.json())
      .then(data => data.ip !== matchIp)
      .catch(error => false);
}

return new Promise((resolve) => {
  checkUserIp(IP_ADDRESS).then(isMatch => {
    resolve(isMatch)
  });
})

Gerenciamento de campanhas e experimentos

Campanha publicitária

Direcione apenas os usuários que chegam ao seu site a partir de uma campanha publicitária específica.

Exemplo de código - Fonte UTM = ad_campaign

				
					const AD_CAMPAIGN = 'YOUR_AD_CAMPAIGN_HERE';

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

Mostrar experimento ou reforço de campanha apenas uma vez

Se quiser impedir que os usuários vejam um experimento ou um impulsionador de campanha novamente depois de já o terem visto, você poderá implementar isso facilmente com a ajuda da segmentação por público-alvo.

Para isso, usamos o armazenamento de sessão para uma única reprodução por sessão ou o armazenamento local para uma única reprodução em várias sessões. Na primeira vez que o experimento é reproduzido, uma entrada correspondente é criada no armazenamento e, em seguida, verificamos se essa entrada já existe na próxima tentativa. Se esse for o caso, o experimento não será exibido novamente.

Armazenamento de sessão - reprodução única por sessão

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

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

Em seguida, adicione este código à segmentação do público-alvo do experimento. Isso verifica se a entrada do armazenamento de sessão 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 armazenamento da sessão, o experimento não será mais reproduzido.

Armazenamento local - Reprodução única em várias sessões

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

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

Em seguida, adicione este código à segmentação do público-alvo do experimento. Isso verifica se a entrada do armazenamento local 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 armazenamento da sessão, o experimento não será mais reproduzido.

Exclusão de tráfego para experimentos

Se nem todos os visitantes da página de destino devem participar do experimento, você pode usar o código a seguir para atribuir apenas alguns dos visitantes a um experimento. Por exemplo, você deseja que apenas 30% dos visitantes do site se tornem participantes do experimento.

Importante: Insira o Experiment_ID correspondente do experimento em questão e substitua 1234 (linha 1).

Importante: Se você quiser ajustar a proporção de participantes, altere o número 10 (10%) nesse código para a proporção desejada, por exemplo, 30 (30%). (linha 11)

Agora, um visitante é atribuído ou excluído do experimento com base na probabilidade definida. Se ele for atribuído, o valor "true" (verdadeiro) será salvo no armazenamento local e "false" (falso) será salvo se ele for excluído. O Audience Targeting só reproduz o experimento se o valor "true" estiver no armazenamento local e o usuário for, portanto, identificado como um 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;
}

Você pode verificar se ele funciona como desejado por meio do console do desenvolvedor do navegador. Para fazer isso, acesse o armazenamento local na guia "Aplicativo". Depois de iniciar o experimento e estar na página em que o experimento está sendo executado, você deverá ver o seguinte no armazenamento local, dependendo de estar ou não no grupo de participantes:

Participantes:

Chave: participante do experimento Valor: verdadeiro
O experimento também deve estar visível: Chave: varificar-experimento-1234 Valor: {"variationId":1234/Original, "timestamp":12456789}

Não participantes:

Chave: participante do experimento Valor: falso
Os valores do experimento não devem ser encontrados no Armazenamento local

Se quiser testar novamente se ele funciona, por exemplo, para entrar no grupo de participantes, você deve excluir manualmente as entradas no Armazenamento local. Para isso, clique no símbolo com o círculo riscado à direita do filtro para excluir todas as entradas no armazenamento local e, em seguida, recarregue a página.

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

Em alguns casos, é necessário excluir de outro experimento os participantes que foram designados para um determinado experimento. Isso é particularmente relevante quando dois experimentos são realizados nas mesmas páginas de um site. O objetivo aqui é evitar que os resultados sejam falsificados pela influência mútua dos experimentos. Portanto, é preciso garantir que os usuários que participam de um dos experimentos não possam visualizar o outro.

Para conseguir isso, determinados códigos podem ser inseridos na segmentação do público-alvo de cada experimento.

Os códigos fornecidos aqui atribuem os usuários a um dos dois experimentos com uma probabilidade de 50% e, ao mesmo tempo, excluem o outro experimento para o usuário. Essa distribuição pode ser personalizada, conforme explicado abaixo.

O código a seguir deveria ser implementado na segmentação de público-alvo em um dos experimentos:

				
					const PARTICIPANT_KEY = 'experiment-participant';
// Retrieve the existing isInAudience value if it exists
const storedIsInAudience = localStorage.getItem(PARTICIPANT_KEY);
console.log('storedIsInAudience:', storedIsInAudience);
if (storedIsInAudience === 'false') {
return true;
} else {
return false;
}

Para o segundo experimento, é necessário inserir o seguinte código:

É importante observar que o ID do experimento de exemplo 1234 na primeira linha do código deve ser substituído pelo ID real do experimento no qual esse código é usado.

Observe também que esse código é definido por padrão para uma distribuição 50:50 de usuários entre os dois experimentos. Se for desejada uma distribuição diferente, isso pode ser feito ajustando o valor 50 na linha 9 do código (const isInAudience = Math.floor(Math.random() * 100) < 50;). Por exemplo, se você alterar 50 para 75, 75% dos usuários serão atribuídos ao experimento atual e apenas 25% ao outro 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) < 50;
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;
}

Segmentação dos participantes da variante original de um experimento em um segundo experimento

Para garantir que um segundo experimento seja mostrado somente aos usuários que já viram a versão original de um primeiro experimento, isso pode ser controlado com precisão na segmentação de público-alvo usando o seguinte código. Os usuários que já viram a variante do primeiro experimento não verão o segundo experimento.

Importante: o ID do experimento "1234" na linha 1 deve ser substituído pelo ID do experimento correspondente do primeiro experimento, para o qual somente os participantes da variante original devem ver o 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;

Deve-se mencionar também que, ao adaptar o código, os participantes da variante original também podem ser excluídos e os participantes da variante incluídos.

Fonte de tráfego e conteúdo

URL de referência

Segmente apenas os usuários que acessaram seu site inicial a partir de um referenciador (fonte) 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

Segmente apenas usuários provenientes de uma fonte de tráfego específica, por exemplo, boletins informativos.

Exemplo de código - Boletim informativo

				
					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;

Direcionamento de cookies

Verifique se os seus usuários têm uma entrada de cookie e defina apenas esses usuários 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;

Direcionamento de sessão e armazenamento local

Verifique se os seus usuários têm uma entrada correspondente na sessão ou no armazenamento local e defina apenas esses usuários como participantes do teste.

Exemplo de código - O valor do armazenamento de sessão está definido

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

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

Exemplo de código - O valor do armazenamento local está definido

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

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

Parâmetros de consulta

Direcione apenas os usuários que acessam seu site por meio de um parâmetro de consulta específico. Você pode usar esse caso de uso para testar sua variante, por exemplo. 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 no Audience Targeting para especificar que um experimento só será 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 cadeia de caracteres, um número inteiro, um booleano etc. e ajuste a verificação, se necessário).

				
					return window.myVariable === 'myValue';

Seletor de classe CSS

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

Troca CSS_CLASS_NAME simplesmente pelo nome da classe correspondente à qual você deseja 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 exibir experimento se houver uma classe CSS

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

Combinar exemplos de aplicativos entre si

Você pode combinar facilmente diferentes cenários de aplicativos entre si. Para fazer isso, primeiro salve os valores de retorno dos exemplos de aplicativos em suas próprias variáveis. Em seguida, é possível vincular essas variáveis em um valor de retorno geral com um operador lógico (AND, OR), o que garante que a segmentação do público-alvo mostre ou bloqueie o experimento.

A questão aqui é se as condições de direcionamento de público-alvo dos casos de uso vinculados devem ser atendidas simultaneamente (AND) ou se é suficiente que apenas uma condição seja atendida (OR). Você encontrará exemplos disso abaixo.

Todas as condições devem ser atendidas (AND)

Um caso de uso clássico para esse exemplo seria a execução de um experimento somente para usuários móveis. No entanto, você também deseja realizar o controle de qualidade por meio do armazenamento de sessão.

O experimento só deve ser reproduzido se o armazenamento da sessão de controle de qualidade existir E a largura da tela corresponde 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 aplicativo para QA com armazenamento de sessão, o retorno cria uma variável (let isValueMatched =)
O mesmo ocorre com o retorno do código de segmentação de público-alvo móvel (let mobileWidth =)
Você mesmo pode definir os nomes das variáveis, mas eles devem ser diferentes
Uma nova linha com "return" foi adicionada, na qual as duas variáveis com um UND estão ligados -> &&

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

Uma condição deve ser atendida (OU)

Às vezes, porém, você também deseja combinar cenários de segmentação de público-alvo em que nem todas as condições precisam ser atendidas. Nesse caso, as variáveis são vinculadas com um operador OR.

Um exemplo seria se você quisesse reproduzir um experimento somente para visitantes de uma determinada campanha ou referenciador. Para fazer isso, os dois cenários devem ser vinculados 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;

Do retorno do cenário da campanha, uma variável (let specificCampaign =) criado
Do retorno do cenário do referenciador, a variável (let specificReferrer =) criado
Uma nova consulta de retorno foi criada a partir de ambas as variáveis com um OU Operador || criado

Se pelo menos uma das duas variáveis contiver o valor verdadeiro, o experimento será executado.

Explicação técnica

Qualquer JavaScript pode ser definido no campo Audience Targeting, que é executado para determinar se o direcionamento se aplica. Desde que o valor de retorno falso o JavaScript é verificado novamente após cada execução. 100ms executado até que 2000ms são atingidos. Depois disso, ele é cancelado e o usuário não é incluído na segmentação de público-alvo. Ele pode ser verificado quanto a propriedades assíncronas inserindo um Promessa retornos.

Se um experimento for executado sem segmentação de público-alvo, você deverá deixar o valor padrão (return true;), conforme mostrado na captura de tela.