Clew

Como criar um aviso de paywall com o Google Tag Manager sem programador

Um paywall suave com o Google Tag Manager: quando um usuário do plano grátis chega a uma função paga, um modal explica o upgrade e leva à sua página de preços — segmentado por plano, medido e editável sem deploy.

Tempo
● 20 minutos
Preço
Teste grátis de 14 dias, sem cartão
Quem faz
Quem pode publicar no GTM

Exemplo: um aviso de upgrade com o Google Tag Manager

Um SaaS de relatórios envia plan para a camada de dados. Quando um usuário do plano grátis clica em Exportar (data-tour="export") em /app/reports, um modal diz “Exportar para CSV e PDF é no Pro” com link para /pricing. O app continua decidindo se a exportação roda.

O que o Clew faz e o que não faz. O Clew mostra o aviso de upgrade — um modal com o seu texto e um link para a sua própria página de preços ou de pagamento — para os usuários escolhidos pelas suas regras. Ele não cobra, não gerencia assinaturas e não esconde nem bloqueia conteúdo: o seu app decide quem tem acesso e o seu provedor de pagamentos faz a cobrança.

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 aparecendo; tours e tooltips seguem grátis no plano Free.

Como adicionar o aviso de paywall com o Google Tag Manager, passo a passo

  1. 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>
    Visão geral do admin do Clew com a linha de instalação e a chave do site oculta (aviso de paywall com o Google Tag Manager)
    Passo 1 · ilustração esquemática
  2. 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.

    Tag Custom HTML do Google Tag Manager com o script do Clew colado (aviso de paywall com o Google Tag Manager)
    Passo 2 · ilustração esquemática
  3. Passo 03

    Dispare em All Pages

    Em Triggering escolha All Pages e salve. Carregue em todas as páginas: em qual página o aviso de paywall aparece é decidido no Clew, não no GTM.

    Lista de acionadores do GTM com All Pages selecionado (aviso de paywall com o Google Tag Manager)
    Passo 3 · ilustração esquemática
  4. Passo 04

    Preview, depois Submit e Publish

    Confira no Preview que Clew widget está em Tags Fired e depois Submit → Publish. Nada chega ao site real antes de publicar.

    Diálogo Submit Changes do GTM com o botão Publish (aviso de paywall com o Google Tag Manager)
    Passo 4 · ilustração esquemática
  5. Passo 05

    Escreva o aviso de upgrade

    No Clew abra Fluxos → + Novo fluxo e escolha Janela modal. Um passo: um título com o benefício (“Exportar para CSV é no Pro”), uma frase de valor e, em Texto do link / URL do link, o botão e a URL da sua página de preços ou checkout.

    Modal de aviso de upgrade sobre um app web, com título de benefício e botão-link para a página de preços (aviso de paywall com o Google Tag Manager)
    Passo 5 · ilustração esquemática
  6. 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çãoValor
    FormatoJanela modal
    Onde mostrar (URL da página)Seção por prefixo /app/reports
    Quando mostrarAo clicar num elemento: [data-tour="export"]
    Segmentação de públicoPropriedade plan é igual a free
    FrequênciaA cada visita
    Editor de tours do Clew com formato, regra de URL, gatilho e regra de público (aviso de paywall com o Google Tag Manager)
    Passo 6 · ilustração esquemática
  7. 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.

    Visão geral do admin do Clew com o cartão verde de widget ativo (aviso de paywall com o Google Tag Manager)
    Passo 7 · ilustração esquemática

Armadilhas: aviso de paywall 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.

Passe as propriedades do usuário 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.

Atualize a propriedade depois do upgrade

As propriedades ficam no navegador até o app enviar um valor novo. Chame Clew.identify({ plan: "pro" }) depois de um upgrade bem-sucedido, senão o novo cliente continua vendo o aviso.

A camada de dados precisa trazer o plano

Um gerenciador de tags só consegue passar o que a página já expõe. Se a sua camada de dados não tem o plano, peça isso uma vez ou use um cookie que o app define.

Perguntas e respostas

Como o plano chega ao Clew?

Uma segunda tag Custom HTML chama Clew.identify({ plan: '{{DLV - plan}}' }) com uma Data Layer Variable.

O GTM atrasa o aviso de paywall?

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 GTM consegue ler o plano do usuário?

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 Clew recebe o pagamento?

Não. O botão leva à sua própria página de preços ou checkout; o Clew nunca lida com cartões, assinaturas ou acesso.

O aviso de paywall é grátis?

Ele precisa do formato modal e de uma regra de público, ambos no Pro. O teste de 14 dias inclui os dois, sem cartão.

Uma linha no seu site e, depois, tours, tooltips e checklists sem deploy.

Pegar minha chave grátisComo o Clew funcionaPlano gratuito para sempre, sem cartão

Tours de produto, pop-ups e onboarding na era da IA

7 padrões com número de passos, regras de texto e métricas, o que a IA muda e um checklist antes de publicar. PDF, 2 páginas. O que tem no guia →

O guia está em inglês.