Um avaliador é um código de JavaScript personalizado que é executado na página e retorna um valor baseado em dados existentes na página. Você pode criar avaliadores para usar em:
- Condições personalizadas de direcionamento: por exemplo, se a idade de um usuário existir na sua camada de dados, um avaliador pode retornar essa informação para que você possa direcionar experiências com base na idade do usuário.
- Valores de variáveis em modelos: por exemplo, se o nome de um usuário existir na página, um avaliador pode retornar o nome e usá-lo em um modelo. Isso permite a você renderizar o nome em uma variação e criar uma experiência de usuário mais personalizada.
- Valores em tempo real em regras de filtragem personalizadas: por exemplo, um avaliador pode retornar a diferença entre o valor atual do carrinho e o limite mínimo para frete grátis e solicitar produtos com um preço maior que o seu valor.
O código é executado quando a experiência que usa o avaliador é carregada em uma página. Geralmente, isso ocorre durante o carregamento da página, exceto se um atraso de ação for aplicado usando disparadores. Os avaliadores têm um tempo limite de 4 segundos, e retornam como falso se esse tempo for atingido antes de um resultado ser retornado.
Criando um avaliador para sites
- Acesse Assets (Recursos)› Evaluators (Avaliadores) e clique em Add New (Adicionar Novo).
- Insira um nome e anotações (opcional).
- Defina o tipo de valor e os valores esperados. Esses campos afetarão como as condições existentes no avaliador se comportarão:
- Value type (tipo de valor): especifique String ou Number (Número). Se selecionar Number, as condições de direcionamento permitirão que você especifique valores de greater than (maior que) ou less than (menor que). Se selecionar String, você só poderá direcionar com base em valores que contenham a string.
- Expected values (valores esperados) (opcional): este campo limita os valores disponíveis ao usar o avaliador como condição de direcionamento. Os valores especificados são incluídos em um menu suspenso. Por exemplo, se seu avaliador verifica se o usuário está logado ou não, você pode definir os valores esperados como True (Verdadeiro) ou False (Falso).
- Use a pré-visualização para conferir a aparência e o comportamento da condição de direcionamento.
- Clique em Next (Próximo) e escreva seu código de JavaScript no editor. Veja a seção de Escrevendo o código do avaliador para mais informações.
- Clique em Save (Salvar). A criação, edição e exclusão de avaliadores pode levar até 5 minutos para entrar em vigor.
Observações:
- Em sites móveis que usam a SDK, use a Referência de APIs para iOS ou a Referência de APIs para Android para incluir avaliadores diretamente no seu aplicativo.
- O fim de vida útil da Mobile SDK (SDK para dispositivos móveis) foi anunciado e está programado para o fim de 2023, dando lugar a uma personalização de aplicativos mais simples e atualizada usando APIs do lado servidor.
Escrevendo o código do avaliador
O código do avaliador é um código de JavaScript que retorna um valor. Ele pode ser um código simples que busca texto de um elemento da página ou um código que pega algum elemento da página, manipula esse elemento e retorna um resultado.
Existem dois tipos de avaliadores:
- Regular evaluator (avaliador comum): é executado imediatamente na página — usado quando não há nada assíncrono no processo de obter um resultado.
- Async evaluator (avaliador assíncrono): depende de outro processo que precisa ser executado na página para fornecer um resultado, como um elemento de DOM que surge depois que a página é carregada.
Para evitar casos em que o avaliador não consiga retornar um valor, ou retorne valor nulo porque alguma coisa ainda não existe na página, recomendamos usar uma promise (promessa) de JavaScript. Isso garante que a avaliação das condições de direcionamento esperem até que o avaliador retorne um valor adequado. A Dynamic Yield permite que você faça isso com a nossa própria versão da biblioteca de q no objeto DYO (DYO.Q).
Observações:
- Se as promises de JavaScript forem suportadas, o DYO.Q as usa e estende seu funcionamento para garantir que o desempenho corresponda à implementação nativa. Isso significa que, se você já implementou o DYO.Q, não há necessidade de alterá-lo. Porém, se você ainda está decidindo com relação à sua implementação, recomendamos usar promises nativas de JavaScript.
- Mesmo que você decida não usar a biblioteca de q, seu código deve incluir uma referência à biblioteca para que o avaliador seja executado de forma assíncrona. A referência pode ser incluída no código como comentário, por exemplo: //DYO.Q
- Não dê nomes parecidos a variáveis diferentes, pois isso pode causar interferência na sessão em execução.
Exemplos de código de avaliadores
DYO.Q(DYO.waitForElementAsync("", 1, 10, 100)).then(function(elements) {
return parseInt(elements[0].textContent);
});
DYO.Q(DYO.waitForElementAsync("",1, 10, 100))
.then(function() {
return "True";
}
);
DYO.Q(DYO.waitForElementAsync("",1, 10, 100))
.then(function(elements) {
return parseFloat(elements[0].textContent.replace(/[^0-9\.]+/g,""));
}, function() {
return 0;
});
Retorna o valor total do carrinho que é extraído do atributo dataLayer, para sites que são integrados ao Google Analytics. Isso considera que o dataLayer está na posição 0. Você também pode adicionar um loop para descobrir a posição do dataLayer se ela não for 0.
//max retries & interval duration can be changed, make sure you are accessing the right position in dataLayer - in this example its the first index in the array
var MAX_RETRIES = 5;
var FALLBACK_VALUE = 0;
var INETRVAL_IN_MS = 100;
DYO.Q.Promise(function(resolve) {
var retryCounter = 0;
var interval = setInterval(function() {
if (typeof dataLayer === 'object' && typeof dataLayer[0] === 'object') {
clearInterval(interval);
resolve(parseFloat(dataLayer[0].cartValue) || FALLBACK_VALUE);
} else {
retryCounter++;
}
if (retryCounter > MAX_RETRIES) {
resolve(FALLBACK_VALUE);
clearInterval(interval);
}
}, INETRVAL_IN_MS);
});
try {
(function() {
var STRATEGY_ID_TO_CHECK = ;
var MAX_PRODUCTS_TO_CHECK = ;
if (!DYO.Q || !DYO.recommendationWidgetData) {
return;
}
var deferred = DYO.Q.defer();
DY.API('callback', function() {
DYO.recommendationWidgetData(STRATEGY_ID_TO_CHECK, {maxProducts: MAX_PRODUCTS_TO_CHECK}, function(err, data) {
if (data && data.slots && data.slots.length) {
deferred.resolve(data.slots.length);
} else {
deferred.resolve(-1);
}
});
});
return deferred.promise;
})();
} catch (e) {}
const THRESHOLD = 50; // Cart threshold
const CART_TOTAL_SELECTOR = '.js-cart-totals__total' // Cart selector per site
DYO.waitForElementAsync(CART_TOTAL_SELECTOR).then((elements) => {
const cartValue = parseFloat(elements[0].textContent.replace(/[^\d.-]/g, ''));
return Math.max(THRESHOLD - cartValue, 0);
});
Por exemplo, use este avaliador para retornar a marca da página.
const DEFAULT_VALUE = '';
const CSS_SELECTOR = '';
DYO.Q(DYO.waitForElementAsync(CSS_SELECTOR, 1, 100, 10))
.then(function(elements) {
var el = elements[0];
return el.textContent;
}, function() {
return DEFAULT_VALUE;
});
var DEFAULT_VALUE = 'Unisex';
var CSS_SELECTOR = '.customer-gender';
DYO.Q(DYO.waitForElementAsync(CSS_SELECTOR, 1, 100, 5))
.then(function(elements) {
var el = elements[0];
return el.textContent;
}, function() {
return DEFAULT_VALUE;
});
Escrevendo avaliadores para variáveis de modelos
Para exibir o valor do avaliador dentro de uma variação (em vez de usá-lo para uma condição de direcionamento), o avaliador pode ser assíncrono, e não é suportado usar a biblioteca de q e uma promise. Seu valor deve ser retornado imediatamente assim que a variação é renderizada. Por exemplo, um avaliador que retorna o idioma da página:
try{
(function(){
if (DY.recommendationContext && DY.recommendationContext.lng){
return DY.recommendationContext.lng;
}else{return 'NA';}
})();
} catch(e) {}
Depurando avaliadores
Execute a seguinte API no console do navegador para verificar o valor que um avaliador retorna. Substitua "EVALUATOR_ID" pela ID do avaliador que estiver depurando (acesse Assets › Evaluators para ver as IDs de todos os seus avaliadores).
DYO.Q(DYO.CoreUtils.safeEval(DYO.oevals[EVALUATOR_ID].code))
.then(function(result) {
console.log("Returned value from evaluator:", result);
});
Direcionamento com base nos valores do avaliador
Assim que o avaliador é criado, ele é exibido sob a condição Custom Evaluator (Avaliador Personalizado), na categoria Where? (Onde?). Uma lista com todos os avaliadores é disponibilizada como parte da criação da condição. Dependendo do conjunto de tipos de valores definido para um avaliador, você pode selecionar o operador e os valores da condição. Saiba mais sobre condições de direcionamento.
Renderizando o valor do avaliador em um modelo
Às vezes é útil renderizar o valor de um avaliador em um modelo. Por exemplo, se o nome do usuário existir na página, e você quiser exibir uma mensagem pessoal com esse nome. Você pode fazer isso alterando o tipo de variável para Evaluator (Avaliador).
Isso substitui a variável pelo valor do avaliador. Você também pode definir um texto de fallback caso o avaliador não retorne nenhum dado.
Note que, para que o valor de um avaliador seja exibido dentro de um modelo, o avaliador não pode ser executado de forma assíncrona. Veja o exemplo de código mencionado anteriormente neste artigo.
Consulte Criando Modelos para saber mais sobre variáveis e modelos.
Filtrando recomendações com base nos valores de avaliadores
Você pode usar avaliadores como valores de regras em filtros personalizados de estratégia para receber recomendações de produtos com base em dados dinâmicos. Por exemplo, você pode definir um avaliador para solicitar produtos recomendados que correspondam às informações de um usuário que estejam disponíveis na sessão, como gênero ou localização.
Para usar um avaliador, selecione Use real-time value (Usar valor em tempo real) nas configurações da regra. Todos os avaliadores relevantes são exibidos em um menu suspenso.
Para mais informações sobre regras de estratégias, consulte Regras de Filtro Personalizadas para Recommendations.
Copiando valores entre sites
Você pode copiar qualquer avaliador para outro site na mesma conta da Dynamic Yield. Passe o mouse sobre o avaliador, clique no botão Copy (Copiar) e selecione o destino.
Visualizando experiências afetadas por cada avaliador
Na lista de avaliadores, você pode ver quantas experiências e estratégias estão usando cada avaliador como condição de direcionamento ou regra de filtragem personalizada na coluna Used by (Usado por). Clique no número para abrir os detalhes e ver todas as experiências ou estratégias que estão usando o avaliador. É importante conferir isso antes de editar ou excluir um avaliador, para saber exatamente como a alteração afetará seu site.