Pop-ups, tours e checklists com o Google Tag Manager
Se o seu site já tem Google Tag Manager, alguém do marketing adiciona pop-ups, tours de produto e checklists sem nenhum deploy: instale o Clew uma vez como tag Custom HTML e crie tudo no editor do Clew.
- Tempo
- ● 10 minutos
- Quem faz
- Quem tem permissão de publicar no contêiner do GTM
- Passos
- 8
Passo a passo
- Passo 01
Copie seu código no Clew
Cadastre-se ou entre no Clew e abra Admin → Visão geral. Enquanto o widget não se conecta, aparece o cartão “O widget ainda não deu sinal.” com a sua linha: clique para copiar. Ela é parecida com o código abaixo, mas com a sua chave real.
<!-- 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
Abra o contêiner e crie uma tag
Acesse tagmanager.google.com, abra o contêiner instalado no seu site e clique em Tags → New (na interface em português: Tags → Nova). Confira o nome do contêiner: muitos times têm um para testes e outro para produção.
Passo 2 · ilustração esquemática - Passo 03
Escolha o tipo Custom HTML
Dê um nome à tag no topo, por exemplo
Clew widget. Clique em Tag Configuration e escolha Custom HTML no grupo Custom. Em português, aparece como HTML personalizado.
Passo 3 · ilustração esquemática - Passo 04
Cole a linha
Cole a linha do passo 1 no campo HTML. Deixe Support document.write desmarcado: o Clew não precisa disso.
Passo 4 · ilustração esquemática - Passo 05
Dispare em All Pages
Clique em Triggering, escolha All Pages (tipo Page View) e clique em Save. A tag deve carregar no site inteiro: é o Clew que decide em quais páginas, e para quem, cada tour aparece.
Passo 5 · ilustração esquemática - Passo 06
Confira na visualização
Clique em Preview (Visualizar), digite a URL do site e conecte. No Tag Assistant,
Clew widgetprecisa aparecer em Tags Fired. Se estiver em Tags Not Fired, revise o acionador.
Passo 6 · ilustração esquemática - Passo 07
Envie e publique
De volta ao espaço de trabalho, clique em Submit (Enviar), dê um nome à versão, por exemplo
Adicionar widget do Clew, e clique em Publish (Publicar). Até publicar, nada muda no site no ar.
Passo 7 · ilustração esquemática - Passo 08
Confirme que funciona
Abra qualquer página do site numa janela normal e volte para Admin → Visão geral no Clew. Em até um minuto o cartão fica verde: “O widget está no ar.” Agora é só criar o primeiro tour direto sobre o seu site.
Passo 8 · ilustração esquemática
O que vale saber sobre o GTM
Modo de consentimento
Se o contêiner usa Consent Mode, abra na tag Advanced Settings → Consent Settings e configure como a sua política de privacidade exige. Uma tag que espera consentimento só dispara depois que o visitante aceita.
Vários sites no mesmo contêiner
Cada site no Clew tem a própria chave. Se um contêiner atende vários domínios, crie uma tag por site e, em vez de All Pages, use um acionador Page View com a condição Page Hostname equals o seu domínio.
Ainda não tem GTM?
Instalar o GTM significa colocar o código dele em todas as páginas — o mesmo esforço de adicionar o Clew direto. Prefira o guia para construtores de sites ou o guia para assistentes de IA.
Problemas comuns e perguntas
Custom HTML ou um modelo da galeria?
Custom HTML. Ele executa a linha oficial exatamente como o Clew entrega, e não haverá nada para atualizar depois.
Algo muda no Clew instalado pelo GTM?
Não. O widget carrega um instante depois do próprio contêiner e funciona igual à instalação direta: segmentação, analytics e editor visual.
O painel continua dizendo “O widget ainda não deu sinal.”
Abra uma página do site publicado numa janela normal do navegador e recarregue o painel depois de um minuto. Se nada mudar: confira se a alteração foi publicada, e não só salva; se o marcador foi trocado pela sua chave real; e nas ferramentas de desenvolvedor do navegador, aba Network, procure widget/…js — a resposta deve ser 200. Um 404 indica chave errada.
Meu site tem Content Security Policy
Duas diretivas e nada mais: script-src https://tryclew.io e connect-src https://tryclew.io. O widget não usa eval, nem URL blob:, nem workers, e instala a folha de estilos por CSSOM em vez de como marcação — então style-src 'unsafe-inline' não é necessário no Chrome, Edge, Firefox 101+ ou Safari 16.4+. Navegadores mais antigos recebem um elemento <style> de reserva: se você ainda os suporta e seu style-src não tem 'unsafe-inline', lá os tours aparecem sem estilo. Para copiar e colar: Content-Security-Policy: script-src 'self' https://tryclew.io; connect-src 'self' https://tryclew.io;
Posso fixar a versão do widget e usar <code>integrity=</code>?
Sim. A linha dos guias — /widget/COLE_AQUI_SUA_CHAVE.js — é a contínua: serve sempre o widget atual e, por isso, não pode levar um hash de Subresource Integrity (os bytes mudam). Ao lado dela, cada versão também é servida em um endereço imutável com hash do conteúdo. Consulte https://tryclew.io/api/v1/widget-version?site=SUA_CHAVE e você recebe version, path e integrity; coloque-os na tag: <script src="https://tryclew.io/widget/v/<versao>/SUA_CHAVE.js" integrity="sha384-…" crossorigin="anonymous" async></script>. Uma URL fixada nunca muda, então o navegador recusa o arquivo se um único byte for diferente. Você atualiza a versão quando quiser — consulte o mesmo endpoint no seu script de deploy. Nada mais muda: os tours continuam sendo publicados no editor do Clew sem mexer no site.
Um bloqueador de anúncios come o widget?
Não. Nosso domínio não está em nenhuma das listas grandes — EasyList, EasyPrivacy, AdGuard, uBlock Origin — então os tours, as dicas e as checklists aparecem também para quem usa um bloqueador. O delicado são as estatísticas: o EasyPrivacy bloqueia toda requisição ping de terceiros, por isso o widget envia os eventos como uma requisição comum, que essas listas deixam passar. Para ficar fora do alcance de qualquer lista personalizada, sirva o widget do seu próprio domínio: aponte https://seu-site/clew/* para https://tryclew.io/* no CDN ou no nginx e troque a linha por <script src="/clew/widget/SUA_CHAVE.js" async></script>. O widget passa a consultar a API com o mesmo prefixo e tudo vira first-party.
Funciona em SPA (React, Vue, Next.js)?
Sim. Carregue a linha uma vez, no HTML raiz ou no layout raiz. O widget acompanha sozinho as mudanças de rota no cliente (History API e mudanças de hash), então não adicione por rota nem dispare com um acionador “History Change”: uma segunda cópia é ignorada, mas é trabalho à toa.
E o banner de consentimento de cookies?
O Clew guarda um cookie próprio e registros no localStorage para lembrar quais tours cada visitante concluiu e contar as conclusões. Nenhum dado vai para redes de anúncios. Se ele pode rodar antes do consentimento é decisão da sua política de privacidade (por exemplo, pela LGPD); se a sua ferramenta de consentimento bloquear até o aceite, os tours simplesmente começam depois.
Uso um plugin de cache ou otimização
Limpe o cache depois de instalar; senão os visitantes continuam recebendo páginas antigas sem a linha. Se o plugin atrasa, combina ou adia JavaScript (WP Rocket, LiteSpeed Cache, Autoptimize, Cloudflare Rocket Loader), exclua tryclew.io/widget dessas otimizações.
O site vai ficar mais lento?
Não. A linha tem async: o navegador baixa o widget em paralelo e o executa sem travar a página. O widget não tem dependências.
Meu app pode avisar o Clew de que um passo do onboarding foi concluído?
Pode, e é uma linha só. Um item do checklist pode ter uma regra que o marca sem o visitante clicar em nada: uma página que ele acessa, um clique num elemento que você indica com um seletor CSS, ou um evento disparado pelo seu próprio código — Clew.complete('invited'), em que invited é a chave que você digitou ao lado do item no editor. Chame no momento em que a tarefa foi mesmo concluída, por exemplo depois de a sua API confirmar o convite. É seguro chamar a qualquer hora e devolve false quando não há nenhum checklist com essa chave na página. O nome antigo TutorKit continua funcionando.
Outras formas de instalar
Assistentes de IA para programar
Um prompt para Claude Code, Cursor, Lovable, Bolt.new, v0 e Replit que coloca a linha no arquivo raiz certo.
Abrir guia →Sem códigoConstrutores de sites e CMS
WordPress, Webflow, Shopify, Wix, Squarespace, Framer, Tilda ou HTML: onde fica o campo de código do head e o que clicar.
Abrir guia →