Botão flutuante Shopify

Veja como inserir um botão flutuante para a Jornada de Entrega no seu e-commerce

O objetivo dessa implementação é oferecer um botão flutuante para acesso rápido e fácil à Jornada de Entrega como no exemplo abaixo.

O CTA flutuante pode ser customizável em termos de cores, posição e texto. Além de ser agnóstico a plataforma ou cliente. Nessa página você vai encontrar instruções sobre configuração deste script pelo Google Tag Manager (GTM), além de aprender como realizar customizações.

1) O primeiro ponto a considerar é que seu e-commerce já deve ter o GTM instalado e você deve ter um acesso ao painel de edições e publicações em https://tagmanager.google.com/

2) Acesse sua conta de GTM e clique em "Tags" no menu lateral e então em "Nova"

3) Dê o nome de Aftersale Delivery Botão Flutuante

4) Clique no lápis para editar a parte de Configurações da tag

5) Selecione a opção "HTML personalizado"

6) Insira o código abaixo trocando o valor "nome-do-ecommerce" pelo nome configurado na URL do seu Jornada de Entregas.

Exemplo: sidewalk.delivery.after.sale

Ficará: "sidewalk"

<script>
window.TRACKING_CLIENT = "nome-do-ecommerce";

window.TRACKING_BACKGROUND = '#000';
window.TRACKING_FOREGROUND = '#FFF';
window.TRACKING_POSITION = 'bottom right';
window.TRACKING_TEXT = 'Rastrear Pedido';
</script>

<script src="https://embeds.blob.core.windows.net/float-delivery-cta/bundle.min.js"></script>

Repita as configurações abaixo colocando "Uma vez por evento"

 

7) Em acionamento, loga abaixo, crie um novo e repita as configurações como na imagem abaixo:

Se preciso copie o texto para facilitar: thank_you|thank-you|order

 

8) Salve a Tag criada

9) Envie as alterações realizadas clicando em "Enviar". De um nome para a versão, uma descrição e cliquem em "Publicar"

10) Pronto, seu botão flutuante deve estar presente nas telas logadas de pedido e na confirmação de compra.