Encontrando e Verificando Seletores CSS
Um guia prático para encontrar, validar e usar seletores CSS em suas regras de interação, mesmo que você não seja um desenvolvedor.
Muitas das regras mais poderosas do Intentyon, como Cliques em Elementos, Visualização de Seção ou Interação com Formulário, dependem de Seletores CSS para saberem qual elemento da sua página devem observar.
Um Seletor CSS é simplesmente um "endereço" que aponta para um elemento específico no código HTML da sua página. Acertar nesse endereço é crucial para que o rastreamento funcione.
A Melhor Prática: Usar um ID
A maneira mais robusta e à prova de falhas de identificar um elemento é através de um ID. Um ID deve ser único em toda a página.
Recomendação: Se você tem acesso ao código HTML do seu site ou usa um construtor de páginas (como Elementor, Webflow, etc.), adicione um ID claro e simples ao seu elemento mais importante.
- Exemplo: No seu botão de "Comprar Agora", adicione um ID chamado
botao-comprar-agora. - Como usar no Intentyon: No campo "Seletor CSS", você usaria
#botao-comprar-agora. O#(cerquilha) indica que se trata de um ID.
Usar IDs evita que o rastreamento quebre caso você mude o estilo ou a posição do elemento.
Como Encontrar um Seletor Usando o Navegador
Se você não pode adicionar um ID, a ferramenta "Inspecionar Elemento" do seu navegador é sua melhor amiga.
1. Abra o "Inspecionar"
No seu site, clique com o botão direito do mouse exatamente sobre o elemento que você quer rastrear (um botão, um formulário, uma seção) e selecione a opção "Inspecionar".
2. Encontre o Elemento no HTML
Uma janela com o código HTML da sua página será aberta, com a linha correspondente ao elemento que você clicou já destacada.
3. Copie o Seletor
Com a linha de código destacada, clique com o botão direito do mouse sobre ela. No menu que aparecer, vá em Copiar > Copiar seletor.
4. Cole no Intentyon
O seletor copiado (algo como div.pricing-section > a.button) pode ser colado diretamente no campo "Seletor CSS" dentro do editor de regras do Intentyon.
Verificando o Seletor no Intentyon
Depois de inserir um seletor, é fundamental garantir que ele está correto. Para isso, criamos a ferramenta de verificação.
- Página de Verificação: Certifique-se de que a URL no campo "Página de Verificação" é a página exata onde o elemento se encontra.
- Clique em "Verificar": Nosso sistema iniciará um processo de duas etapas:
- Tentativa Automática: Primeiro, tentaremos acessar a URL e analisar o HTML em busca do seu seletor. Para sites públicos e simples, isso pode funcionar instantaneamente.
- Verificação Manual (Fallback): Se a tentativa automática falhar (por exemplo, se a página for protegida por login ou for muito dinâmica), o sistema pedirá sua ajuda. Acesse a página de verificação no seu navegador e interaja com o elemento (clique, visualize, etc.). Nosso script detectará essa interação e confirmará a verificação.
Status da Verificação
- ✅ Verificado: Sucesso! O seletor foi encontrado e a regra funcionará.
- ⚠️ Falhou: O seletor não foi encontrado. Verifique se o seletor ou a URL estão corretos e tente novamente.
- ✨ Verificar: Este é o estado inicial, aguardando sua ação.
Atenção: É altamente recomendável que você verifique todos os seus seletores antes de salvar um evento. Salvar um evento com seletores não verificados ou incorretos resultará em uma regra que não rastreia o comportamento desejado.