Para criação do pop-up indicamos as seguintes ferramentas abaixo:
Gleam.io: https://gleam.io/
Hello Bar: https://www.hellobar.com/
Sumo: https://sumo.com/
A instalação no site é feita por meio de um código gerado na própria ferramenta que deve ser adicionado pelo Google Tag Manager seguindo o passo a passo desse artigo.
Para esta documentação usaremos a ferramenta https://www.hellobar.com/ citada acima, mas todas tem um processo muito similar.
Após realizar login inserindo a URL da sua loja e uma conta google, você será direcionado para o painel de criação de pop-us da ferramenta. Vá até a opção Create New Popup.
Clique na imagem para ampliar.
Na próxima tela seremos apresentados a diversos tipos de popup que a ferramenta permite criar, como captação de e-mails, captação de telefones para chamadas, formulários, etc...
No nosso exemplo usaremos a opção de popup informativo. Para avançar clique em next no canto inferior esquerdo
Clique na imagem para ampliar.
Escolha as dimensões do seu popup a tela. Os desenhos oferecidos a ferramenta são bem autoexplicativos referente ao tamanho do popup. Além de oferecer a sua loja como backgourd para facilitar, no topo da tela ainda podemos alterar os dispositivos para termos um exemplos de como ficaria este popup em versão mobile. Neste nosso exemplo usaremos a opção de modal.
Clique na imagem para ampliar.
Ao clicar em next novamente no canto inferior esquerdo da tela, seremos apresentados as configurações de layout do popup. sendo eles:
Template:
Nesta opção você poderá escolher entre alguns templates prontos oferecidos pela ferramenta. Ao clicar em change template ainda é possível que a ferramenta auto detecte as cores usada na sua loja e criar um poup personalizado.
Clique na imagem para ampliar.
Modal Styling e No Thanks Styling:
Nesta opção podemos alterar as cores do modal escolhido. Já na opção No thanks Styling você mantem desmarcado para que a ferramenta não insira um agradecimento por escrito no seu popup.
Image:
Aqui podemos inserir uma imagem apartir do seu computador para usarmos no modal.
Clique na imagem para ampliar.
Após todas as configurações realizadas, devemos prosseguir através do botã superior direito Save and Pause e depois em Publish Now. Você será direcionado a uma página com um script. Este script é bem importante. Salve-o.
Clique na imagem para ampliar.
No seu GTM, vá na opção TAGS e crie uma nova tag.
Clique na imagem para ampliar.
Na configuração da tag escolha a opção HTML Personalizado e cole o script fornecido pela ferramenta. Na parte do acionador, você irá escolher onde quer que o seu poup seja exibido. No nosso exemplo usaremos o acionador All Pages, mas você pode criar um acionador específico para exibir apenas nas páginas de produto.
Clique na imagem para ampliar.
Agora basta salvar e publicar no seu GTM a tag que acabamos de criar.
Clique na imagem para ampliar.