Como criar um guia interativo do produto com o Google Tag Manager sem programador
Uma ajuda que mostra em vez de explicar com o Google Tag Manager: um checklist de temas práticos, cada um abre a página certa e guia o utilizador com tooltips.
- Tempo
- ● 30 minutos
- Preço
- Teste grátis de 14 dias, sem cartão
- Quem faz
- Quem pode publicar no GTM
Exemplo: um guia interativo com o Google Tag Manager
Um SaaS de automação de marketing recebe toda semana as mesmas dúvidas sobre integrações. Um checklist “Como faço…?” abre no botão de ajuda (data-tour="help"); temas como “Ligar um CRM” abrem /app/integrations?tutorial=connect-crm e o tour começa ali.
Este formato faz parte do plano Pro. Toda conta nova começa com 14 dias de teste grátis com todos os formatos e regras de público, sem cartão. Quando o teste acaba, nada é apagado e o que foi publicado continua a aparecer; tours e tooltips continuam gratuitos no plano Free.
Como criar o guia interativo com o Google Tag Manager, passo a passo
- Passo 01
Copie o seu snippet do Clew
Crie uma conta gratuita (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: substitua COLE_AQUI_A_SUA_CHAVE pela chave do site em Admin > Visão geral --> <script src="https://tryclew.io/widget/COLE_AQUI_A_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 guarde. Carregue em todas as páginas: em qual página o guia interativo do produto aparece é decidido no Clew, não no GTM.
Passo 3 · ilustração esquemática - Passo 04
Preview, depois Submit e Publish
Verifique 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
Crie os tours e depois o checklist do guia
Primeiro crie um tour Tooltips passo a passo por tema com Editar no seu site e Escolher elemento e anote o Slug (usado nos links) de cada um. Depois crie um Checklist de onboarding: um item por tema e, em URL do link, o endereço da página mais
?tutorial=e o slug do tour.
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 Checklist Formato Checklist de onboarding Onde mostrar (URL da página) Secção por prefixo /appQuando mostrar Ao clicar num elemento: [data-tour="help"]Segmentação de público Sem regras: toda nós que abre a página Frequência Em cada visita Tour do produto Formato Tooltips passo a passo Onde mostrar (URL da página) Secção por prefixo /app/integrationsQuando mostrar Logo ao carregar a página Segmentação de público Sem regras: toda nós que abre a página Frequência Uma vez por visitante 
Passo 6 · ilustração esquemática - Passo 07
Publique e verifique no site real
Mude Estado para Publicado e guarde. Abra a página numa janela anónima: o Clew lembra quem já viu um item de “uma vez”, por isso o seu navegador de sempre pode saltar. Visualizações, conclusões e abandonos aparecem nas estatísticas.
Passo 7 · ilustração esquemática
Armadilhas: guia interativo do produto 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 sem necessidade.
Não perca os parâmetros da URL
Alguns sites redirecionam e descartam parâmetros (por exemplo, ao forçar a barra final). Abra cada link de tema uma vez: se ?tutorial= desaparecer da barra de endereço, use a URL final no link.
O botão de ajuda precisa de um seletor estável
Ao clicar num elemento escuta cliques no seletor que indicar. Use um id ou atributo data-tour no botão de ajuda, não uma classe que uma mudança de estilo pode renomear.
Perguntas e respostas
O suporte pode mandar o link de um tour no chat?
Sim: qualquer link com ?tutorial=<slug> para uma página com o widget inicia esse tour.
O GTM atrasa o guia interativo do produto?
O widget carrega um instante depois do contêiner. Só um item Logo ao carregar a página na primeiríssima visualização pode aparecer uma fração de segundo depois do que numa instalação direta.
Quanto custa?
Tours são grátis; o checklist do guia faz parte do Pro. Toda conta nova tem 14 dias de teste com os dois, sem cartão.
O mesmo tour pode aparecer sozinho para utilizadores novos?
Sim. Um tour aberto com ?tutorial= ignora as regras dele, por isso esse mesmo tour pode ter a própria regra de URL e Uma vez por visitante para quem chega pela primeira vez.
O que mais é possível 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 utilizadores com o Google Tag Manager sem programador
- Como adicionar um tooltip em seu site com o Google Tag Manager sem programador
- Como criar um aviso de paywall com o Google Tag Manager sem programador