Artigos sobre: PLAYER E VÍDEO
Este artigo também está disponível em:

Como usar Teste A/B para turbinar seu Vídeo de Vendas

Como usar Teste A/B para turbinar seu Vídeo de Vendas



Neste artigo, vamos aprender:
O que é o teste A/B e como ele funciona;
Configurando o seu teste A/B;
Como medir as vendas do seu teste A/B.


1. O que é o teste A/B e como ele funciona




Com a funcionalidade Teste A/B você consegue testar a performance de 2 ou mais VSLs!

Quando você cria o teste A/B, é gerado um único código embed para todos os vídeos que quer testar. Os VSLs serão mostrados, na sua página, de forma alternada, e o teste A/B vai gerar métricas individuais! Assim, você poderá acompanhar o play rate, o engajamento e os cliques no botão de cada VSL, e por fim analisar qual está tendo melhor resultado.


2. Configurando o seu teste




Clique na aba lateral “Teste A/B", depois em "Novo teste" e selecione os vídeos que você quer testar!




Por padrão, o tráfego será enviado igualmente para cada vídeo, mas você pode optar por alterar o percentual do tráfego. Logo depois, é só clicar em "Criar teste A/B":




Feito isso, copie o código do teste e cole no seu construtor de páginas! Você vai ter somente 1 código para os vídeos, independente da quantidade deles.




Pronto! Agora é só acompanhar os números do teste A/B.
Nós vamos te entregar as métricas de play rate, engajamento e cliques no botão!
Para definir o vencedor do teste, basta que você edite o tráfego e coloque 100% dele para o vídeo escolhido!





3. Como medir as vendas do seu teste A/B



Caso queira trackear especificamente as vendas, há 2 formas:

3.1 Usando o botão de ação do VTurb




Para o trackeamento das vendas, você vai precisar passar um parâmetro adiante para o seu checkout que rastreie de qual VSL veio a venda.
Esse parâmetro precisa ser compatível com a sua plataforma de checkout.

Para fins de exemplo, vamos supor que você vai usar o parâmetro utm_content.

Se você estiver usando os botões de ação do VTurb nos seus vídeos, então basta você inserir o parâmetro correspondente no botão de cada vídeo.

Por exemplo, no vídeo A você pode colocar o link meucheckout.com?utm_content=VSLA, enquanto no vídeo B você colocaria o link meucheckout.com?utm_content=VSLB.

🚨 Nota: Ao fazer isso, caso você possua algum parâmetro de utm_content na URL do navegador (que veio dos anúncios), ele será substituído pelo parâmetro que você inseriu no botão. Os demais parâmetros presentes na URL são passados adiante normalmente.


3.2 Usando botões html ou criados com seu construtor de páginas




Agora, caso você tenha botões html ou outros elementos escondidos na sua página, então você irá precisar recorrer ao script abaixo.

Ele serve para que você possa colocar o delay exato nos seus botões e elementos de acordo com qual VSL do teste A/B está sendo exibido… e, no caso dos botões, ainda passar para o checkout o parâmetro de trackeamento que você deseja para cada VSL!

As instruções para usar o script são:

Adicione a classe “esconder” nos elementos em que você deseja adicionar essa funcionalidade.

Copie o código abaixo e cole ele junto com o script do seu player.

Defina o tempo do vídeo em que os elementos devem aparecer

Se desejar, você pode substituir o parâmetro utm_content por um de sua preferência (e compatível com a sua plataforma de checkout, claro)


Se o seu teste A/B for com 2 vídeos, use o script abaixo:


<style>
  .esconder {
    display: none;
  }
</style>

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
    /* NÃO É PRECISO ALTERAR O TEMPO ABAIXO */
    var SECONDS_TO_DISPLAY = 12;
    var CLASS_TO_DISPLAY = ".esconder";

    var attempts = 0;
    var elsHiddenList = [];
    var elsDisplayed = false;
    var elsHidden = document.querySelectorAll(CLASS_TO_DISPLAY);
    var alreadyDisplayedKey = `alreadyElsDisplayed${SECONDS_TO_DISPLAY}`;
    try {
      alreadyElsDisplayed = localStorage.getItem(alreadyDisplayedKey);
    } catch(e) {
      console.warn('Failed to read data from localStorage: ', e);
    }

    setTimeout(function () {
      elsHiddenList = Array.prototype.slice.call(elsHidden);
    }, 0);

    var showHiddenElements = function () {
      console.log(smartplayer.instances);
      elsDisplayed = true;
      elsHiddenList.forEach((e) => (e.style.display = "block"));
      try {
        localStorage.setItem(alreadyDisplayedKey, true);
      } catch (e) {
        console.warn('Failed to save data in localStorage: ', e);
      }
    };

    var startWatchVideoProgress = function () {
      if (
        typeof smartplayer === "undefined" ||
        !(smartplayer.instances && smartplayer.instances.length)
      ) {
        if (attempts >= 10) return;
        attempts += 1;
        return setTimeout(function () {
          startWatchVideoProgress();
        }, 1000);
      }

      smartplayer.instances[0].on("timeupdate", () => {
        if (
          smartplayer.instances[0].analytics.player.options.id ==
          /* COLOCAR ENTRE AS '' O ID DO SEU PLAYER A E NO VALOR 10, COLOQUE O 
                   TEMPO QUE AS SEÇÕES DEVEM APARECER*/
          "62f7b142a90dbc000a0e8f45"
        ) {
          SECONDS_TO_DISPLAY = 10;
        }

        if (
          smartplayer.instances[0].analytics.player.options.id ==
          /* COLOCAR ENTRE AS '' O ID DO SEU PLAYER B E NO VALOR 20, COLOQUE O 
                   TEMPO QUE AS SEÇÕES DEVEM APARECER*/
          "6286b08c06aa090009247143"
        ) {
          SECONDS_TO_DISPLAY = 20;
        }

         /* CASO TENHA MAIS VÍDEOS PARA COLOCAR DELAY COLAR NA LINHA ABAIXO*/


        if (elsDisplayed || smartplayer.instances[0].smartAutoPlay) return;
        if (smartplayer.instances[0].video.currentTime < SECONDS_TO_DISPLAY)
          return;
        showHiddenElements();
      });
    };

    if (alreadyElsDisplayed === "true") {
      setTimeout(function () {
        showHiddenElements();
      }, 100);
    } else {
      startWatchVideoProgress();
    }
  });
</script>


Caso o seu teste A/B tenha mais de 2 vídeos, será necessário colocar esse código abaixo com as informações do seu vídeo dentro do script anterior:

if ( smartplayer.instances[0].analytics.player.options.id == "ID_DO_VÍDEO" ) {
    SECONDS_TO_DISPLAY = "TEMPO_DE_DELAY_EM_SEGUNDOS";
}


Basta localizar a parte que está com o comentário /* CASO TENHA MAIS VÍDEOS PARA COLOCAR DELAY COLAR NA LINHA ABAIXO*/ e colocar o código na linha seguinte, depois é só configurar o delay e estará tudo funcionando!




Saiba mais em:
Como configurar script de delay + Parâmetros do teste A/B

Atualizado em: 30/11/2023

Este artigo foi útil?

Compartilhe seu feedback

Cancelar

Obrigado!