Como adicionar um tooltip em seu site com o Google Tag Manager sem programador
Uma dica contextual com o Google Tag Manager: uma frase ao lado do elemento em que os visitantes hesitam, colocada com um clique no editor visual e mostrada exatamente quando ajuda.
- Tempo
- ● 10 minutos
- Preço
- Plano Free
- Quem faz
- Quem pode publicar no GTM
Exemplo: um tooltip com o Google Tag Manager
Na página de configurações de um SaaS, a aba de chaves de API gera chamados no suporte. O tooltip explica “A chave só aparece uma vez: guarde no seu gerenciador de senhas” toda vez que alguém clica na aba com data-tour="api-keys".
Grátis no plano Free do Clew, sem cartão e sem prazo: um site e até 3 tours ou tooltips publicados. Regras de público e testes A/B vêm com o Pro.
Como adicionar o tooltip com o Google Tag Manager, passo a passo
- Passo 01
Copie o seu snippet do Clew
Crie uma conta grátis (ou entre), adicione o seu site e abra Visão geral no admin. Clique na linha do cartão O widget ainda não deu sinal. para copiar: ela já vem com a chave real do seu site no lugar do marcador.
<!-- Clew: troque COLE_AQUI_SUA_CHAVE pela chave do site em Admin > Visão geral --> <script src="https://tryclew.io/widget/COLE_AQUI_SUA_CHAVE.js" async></script>
Passo 1 · ilustração esquemática - Passo 02
Crie uma tag Custom HTML no GTM
Em tagmanager.google.com abra o seu contêiner, Tags → New → Tag Configuration → Custom HTML, e cole a linha do Clew. Dê à tag o nome
Clew widget.
Passo 2 · ilustração esquemática - Passo 03
Dispare em All Pages
Em Triggering escolha All Pages e salve. Carregue em todas as páginas: em qual página o tooltip aparece é decidido no Clew, não no GTM.
Passo 3 · ilustração esquemática - Passo 04
Preview, depois Submit e Publish
Confira no Preview que
Clew widgetestá em Tags Fired e depois Submit → Publish. Nada chega ao site real antes de publicar.
Passo 4 · ilustração esquemática - Passo 05
Prenda o tooltip ao elemento
No Clew abra Fluxos → + Novo fluxo, mantenha Tooltips passo a passo e clique em Editar no seu site. Na sua página clique em Escolher elemento, clique no campo ou botão e escreva um título curto e uma frase. Ajuste Posição se a posição automática cobrir algo importante.
Passo 5 · ilustração esquemática - Passo 06
Escolha onde, quando e para quem aparece
No mesmo editor, preencha Onde mostrar (URL da página), Quando mostrar, Segmentação de público e Frequência. Estas são as configurações do exemplo acima:
Configuração Valor Formato Tooltips passo a passo Onde mostrar (URL da página) Seção por prefixo /settingsQuando mostrar Ao clicar num elemento: [data-tour="api-keys"]Segmentação de público Sem regras: todo mundo que abre a página Frequência A cada visita 
Passo 6 · ilustração esquemática - Passo 07
Publique e confira no site real
Mude Status para Publicado e salve. Abra a página numa janela anônima: o Clew lembra quem já viu um item de “uma vez”, então o seu navegador de sempre pode pular. Visualizações, conclusões e abandonos aparecem nas estatísticas.
Passo 7 · ilustração esquemática
Armadilhas: tooltip com o Google Tag Manager
Não use um acionador History Change
O widget acompanha sozinho a navegação de apps de página única. Um segundo acionador em History Change só carrega o script de novo à toa.
O modo de consentimento pode atrasar
Se o contêiner usa Consent Mode e a tag espera consentimento, o tooltip só aparece depois que o visitante aceita. Decida conforme a sua política de privacidade.
Prefira ids e atributos data
Se Escolher elemento sugerir uma cadeia longa de classes, escolha o elemento pai mais próximo com id ou peça um atributo data-tour: um seletor estável mantém a dica viva depois das atualizações do tema.
Perguntas e respostas
Por que toda vez?
Porque é ajuda, não anúncio: com Ao clicar num elemento e A cada visita, só aparece quando o usuário abre aquela aba.
O GTM atrasa o tooltip?
O widget carrega um instante depois do contêiner. Só um item Assim que a página carregar na primeiríssima visualização pode aparecer uma fração de segundo depois do que numa instalação direta.
O tooltip é grátis?
Sim, no plano Free: até 3 tours e tooltips publicados num site.
Dá para abrir a dica só no clique?
Sim. Escolha Ao clicar num elemento, informe o seletor do ícone ou link que abre a dica e coloque A cada visita.
O que mais dá para adicionar com o Google Tag Manager
- Como colocar um pop-up em seu site com o Google Tag Manager sem programador
- Como criar um tour do produto com o Google Tag Manager sem programador
- Como adicionar um checklist de onboarding com o Google Tag Manager sem programador
- Como configurar o onboarding de usuários com o Google Tag Manager sem programador
- Como criar um guia interativo do produto com o Google Tag Manager sem programador
- Como criar um aviso de paywall com o Google Tag Manager sem programador