Experiment JavaScript & Experiment CSS
Resumo
Com o Experiment JavaScript e o Experiment CSS, podes entregar código JavaScript e CSS em todas as variantes de um experimento, incluindo o original. O código do experimento é sempre executado antes do código das variantes individuais.
Isto é útil sempre que o código tem de ser executado de forma idêntica para todos os visitantes do experimento, por exemplo para carregar um script de tracking em todas as variantes. O código do experimento destina-se a utilizadores experientes com experiência em programação.
Onde encontrar o Experiment JS e o Experiment CSS
Podes encontrar ambas as funções na visão geral de experimentos do teu dashboard:
- Clica no menu de três pontos no canto superior direito do experimento.
- Em Code applied for all variations, seleciona Add Experiment JavaScript ou Add Experiment CSS.
- Introduz o teu código e guarda-o.
O badge junto a cada entrada mostra se já foi adicionado código.
Como funciona o código do experimento
- Entregue a todas as variantes: O código do experimento é aplicado a todas as variantes do experimento e ao original.
- Executado primeiro: O código do experimento é sempre executado antes do código da variante. O código ou os estilos que adicionas numa variante podem, por isso, basear-se no que o código do experimento já configurou.
- Mesmo código, mesmo resultado para todos: Como o código é entregue a todas as variantes, não cria uma diferença entre elas. Usa-o para coisas que devem aplicar-se a todos, e usa o código da variante (ver Add JavaScript e Add CSS) para as alterações que queres testar.
Exemplos de aplicação
Executar um script de tracking em todas as variantes
Um caso de uso típico para o Experiment JavaScript é um script de tracking que deve ser adicionado a todas as variantes. Em vez de copiar o script para cada variante, adiciona-o uma vez como Experiment JavaScript.
// Runs on the original and on all variations
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'experiment_loaded',
});
Partilhar estilos entre todas as variantes
Com Experiment CSS, podes definir estilos que são necessários em todas as variantes, por exemplo para um elemento que adicionas através de JavaScript.
.promo-note {
font-size: 14px;
color: #333;
}
Usar funções auxiliares
As funções auxiliares da Varify também funcionam no Experiment JavaScript. Podes usá-las, por exemplo, para esperar por elementos no DOM ou para impedir que o código seja executado no editor. Podes encontrar todas as funções disponíveis e exemplos no artigo Code Helpers.
window.varify.helpers.waitFor('.product', (element) => {
// Runs as soon as the element is available in the DOM
});
Adicionar JavaScript Reset
No mesmo menu, também encontras Add Reset JavaScript. Remove código que adicionaste, o que é especialmente útil para Single Page Applications. Podes encontrar mais informações no artigo Add JavaScript Reset.