Como adicionar o app de resgate no checkout VTEX

Instalação para o Checkout via GTM

Para o cenário de checkout, é preciso fazer a instalação de uma TAG no Google Tag Manager especifico para pagina de Checkout VTEX

Para isso, siga os passos abaixo:

1) Acesse https://tagmanager.google.com

2) Clique em Adicionar uma nova tag

3) No topo da janela que irá abrir, informe um nome para identificar a tag. Por exemplo, Cashback

4) Clique em Configuração da tag

5) Para o Tipo de tag, selecione HTML personalizado. Na caixa de texto que aparecerá com o nome de HTML, inclua o trecho abaixo:

<script>

//Inicio codigo Quickon app resgate de Cashback 

      var scriptElement = document.createElement('script'); 

   scriptElement.src = 'https://app.trocame.com/scripts/checkout6-custom.js?i=' + Math.floor(Math.random() * 65536);

    document.body.appendChild(scriptElement); 

   scriptElement.onload = function() {      
      integrateCashbackCode('ACCOUNTTOKEN', 'CORBOTAO', 'CORLETRABOTAO', RADIUS );
      
    }

//Fim codigo Quickon app resgate de Cashback 
</script>

6) Clique em Acionamento, e clique no ícone "+" para incluir um novo acionador.

7) Dê um título para o acionador(sugerimos checkout)

8) Clique em Configuração do acionador e escolha a opção Exibição de página

9) Clique na caixa de Configuração do acionador novamente, para que apareça a opção "Este acionador é disparador em" e selecione a "Algumas exibições de página".

10) Na primeira caixa, selecione "Page Path", na segunda "contem" e na terceira escreva "checkout". Desta forma, nosso acionador só funcionará nas páginas de checkout.

11) Pronto, clique em "Salvar" e "Salvar" novamente.

12) Após a criação da tag, clique no botão "Enviar" para que essas alterações tenham efeito na loja.

No código acima as palavras ACCOUNTTOKEN, CORBOTAO, CORLETRABOTAO e RADIUS deverão ser substituídas respectivamente pelos  seguintes valores:

ACCOUNTTOKEN - a Quickon enviara o valor correto de accounttoken para ser utilizado.

CORBOTAO - código Hexadecimal da cor que deseja aplicar ao botão de resgate.
CORLETRABOTAO - código Hexadecimal da cor da letra que deseja aplicar ao botão de resgate

RADIUS - valor numérico da propriedade do botão de resgate para configurar bordas arredondadas, onde 0 são cantos retos e 100 cantos arredondados.