1. Visão Geral
Este guia descreve como configurar uma tag no Google Tag Manager (GTM) para que o campo Pessoa Jurídica seja ativado automaticamente na etapa de dados pessoais do checkout Olist Ecommerce, impedindo que o usuário reverta para Pessoa Física.
Escopo:
Ação | Detalhe técnico |
Polling de 100ms | Loop com setInterval aguarda o elemento #is-cnpj aparecer no DOM (até 5 segundos) |
Ativa o checkbox | Chama checkbox.click() — compatível com o framework reativo do checkout, que responde expandindo os campos de CNPJ, Razão Social e IE |
Oculta o toggle | Aplica display:none no container pai do checkbox (div.tw-flex.tw-items-center.tw-px-1), impedindo que o usuário reverta para PF. O estado checked permanece preservado. |
Timeout seguro | Se o elemento não for encontrado em 50 tentativas (5s), o loop encerra sem gerar erros na página |
2. Pré-requisitos
Acesso de edição ao container GTM da loja
Acesso ao checkout da loja para validação pós-publicação
3. Passo a Passo
3.1 Criar a Tag no GTM
Acesse o container GTM da loja e clique em Tags > Nova.
Clique em Configuração da tag e selecione HTML personalizado.
Cole o script abaixo no campo HTML (incluindo as tags <script> e </script>):
<script>
(function () {
var CHECKBOX_SELECTOR = '#is-cnpj';
var MAX_CHECKS = 50;
var INTERVAL_MS = 100;
var checksCount = 0;
var intervalId;
function activateCnpj() {
checksCount++;
var checkbox = document.querySelector(CHECKBOX_SELECTOR);
if (checkbox) {
clearInterval(intervalId);
if (!checkbox.checked) {
checkbox.click();
}
var container = checkbox.parentElement;
if (container) {
container.style.display = 'none';
}
return;
}
if (checksCount >= MAX_CHECKS) {
clearInterval(intervalId);
}
}
intervalId = setInterval(activateCnpj, INTERVAL_MS);
})();
</script>
O checkout Olist Ecommerce renderiza o DOM de forma assíncrona. O loop de 100ms garante que o script aguarde o elemento #is-cnpj aparecer antes de agir, sem depender de timers fixos.
3.2 Configurar o Acionador
Na seção Acionamento da tag, clique em + para adicionar um novo acionador.
Selecione o tipo Evento personalizado.
No campo Nome do evento, insira exatamente: viewed personal data page
Em Acionador disparado em, selecione Todos os eventos personalizados.
Salve o acionador.
3.3 Nomear e Salvar a Tag
Dê um nome descritivo à tag. Sugestão: Olist checkout - cadastro de cliente PJ.
Clique em Salvar.
3.4 Validar no GTM Preview
Clique em Visualizar no canto superior direito do GTM para abrir o modo Preview.
Navegue até a etapa de dados pessoais do checkout da loja.
No painel Preview, localize o evento viewed personal data page na coluna de eventos.
Clique no evento e verifique que a tag aparece na aba Tags Ativadas.
Confirme no navegador que o formulário abriu em modo PJ (campos Razão Social, CNPJ e Inscrição Estadual visíveis) e que o toggle Pessoa jurídica está oculto.
3.5 Publicar o Container
Após validação no Preview, clique em Enviar no canto superior direito.
Adicione uma descrição de versão (ex.: Força PJ como padrão no checkout).
Clique em Publicar.