Como adicionar um checklist de onboarding com o Google Tag Manager sem programador
Um checklist de onboarding com o Google Tag Manager: quatro tarefas, uma barra de progresso e cada item a um clique do ecrã certo, configurado no editor do Clew, sem trabalho de front-end.
- Tempo
- ● 15 minutos
- Preço
- Teste grátis de 14 dias, sem cartão
- Quem faz
- Quem pode publicar no GTM
Exemplo: um checklist de onboarding com o Google Tag Manager
Um SaaS B2B envia plan para a camada de dados. Quem está no teste vê em /app o “Configure a sua conta”: ligue uma fonte de dados, crie um dashboard, convide um colega e marque o onboarding. Uma segunda tag do GTM passa o plano para o Clew:
<script>window.TutorKit = window.TutorKit || { q: [], identify: function (p) { this.q.push(['identify', p]); } };
TutorKit.identify({ plan: '{{DLV - plan}}' });</script>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 adicionar o checklist de onboarding 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 checklist de onboarding 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
Escreva os itens do checklist no Clew
No Clew abra Fluxos → + Novo fluxo e escolha Checklist de onboarding. Preencha Título da checklist e adicione de 3 a 5 Tarefas da checklist: um título que seja uma ação, uma linha de explicação e, em URL do link, a página onde a tarefa é feita. Não precisa de seletores.
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 Checklist de onboarding Onde mostrar (URL da página) Secção por prefixo /appQuando mostrar Logo ao carregar a página Segmentação de público Propriedade plané igual atrialFrequê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: checklist de onboarding 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.
Passe as propriedades do utilizador com uma segunda tag
Se a sua camada de dados tem valores como plan, crie uma Data Layer Variable e uma segunda tag Custom HTML que chame Clew.identify() com ela (veja o exemplo). Dispare no evento que traz o valor, depois da tag do Clew.
Um gestor de etiquetas não sabe quem é o utilizador
Para segmentar por plano ou papel via gestor de etiquetas, a app já precisa de enviar esses valores para a camada de dados. Se não envia, use uma regra sobre um cookie que a app define ou mostre o checklist em páginas que só utilizadores novos veem.
Uma lista por vez
Enquanto um checklist está aberto, o widget não começa outro tour na navegação. Use-o na fase de configuração e deixe o utilizador fechar; os tours de outras páginas começam depois.
Perguntas e respostas
E se a camada de dados não tiver o plano?
Mostre o checklist sem a regra em páginas que só utilizadores em teste abrem, ou use um cookie que a app já define.
O GTM atrasa o checklist de onboarding?
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.
O GTM consegue ler o plano do utilizador?
Só se o site enviar o plano para a camada de dados. Aí uma Data Layer Variable passa o valor para Clew.identify() numa tag Custom HTML.
O checklist de onboarding é grátis?
Faz parte do Pro. Toda conta nova tem 14 dias de teste com checklists e regras de público, sem cartão. Quando o teste acaba, os checklists publicados continuam a aparecer.
Os itens são marcados automaticamente?
Um item é marcado quando o utilizador clica nele (o link abre noutro separador). A marcação automática por eventos da app ainda não está disponível.
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 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 guia interativo do produto com o Google Tag Manager sem programador
- Como criar um aviso de paywall com o Google Tag Manager sem programador
Checklist de onboarding em outras plataformas
- LovableComo adicionar um checklist de onboarding numa app do Lovable sem programador
- Bolt.newComo adicionar um checklist de onboarding numa app do Bolt.new sem programador
- v0Como adicionar um checklist de onboarding numa app do v0 sem programador
- ReplitComo adicionar um checklist de onboarding numa app do Replit sem programador
- CursorComo adicionar um checklist de onboarding numa app feita no Cursor sem programador
- Claude CodeComo adicionar um checklist de onboarding com o Claude Code sem programador