Pro Plano

Objetivos de clique em elementos acionam quando visitantes clicam em elementos específicos da página. Perfeito para rastrear botões CTA, navegação e links externos.

Quando usar objetivos de clique

Melhor para rastrear:

Botões de chamada para ação (CTA)
Cliques em menus de navegação
Links de download
Links externos
Botões de reprodução de vídeo
Qualquer elemento clicável

Criar objetivos de clique

Os objetivos estão localizados no painel de controle de cada site, sob a aba Journeys.

Abrir a aba Journeys
No painel de controle do seu site, abra a aba Journeys e selecione a subaba Objetivos.
Adicionar um objetivo
Clique em Adicionar Objetivo, então escolha Clique em Elemento como o tipo de objetivo.
Nomear o objetivo
Dê um nome claro, como "Botão de inscrição" ou "CTA de preços".
Inserir um seletor CSS
No campo Seletor CSS, insira o seletor que identifica o elemento a rastrear.
Rastrear valor (opcional)
Ative Rastrear valor monetário se desejar associar um valor de receita a cada conclusão.
Criar
Clique em Criar para salvar o objetivo.

Seletores CSS

O que é um seletor CSS?

Um padrão que identifica elementos HTML:

<button id="signup-btn" class="cta primary">
  Inscrever-se
</button>

Seletores para este botão:

#signup-btn (por ID)
.cta (por classe)
button.primary (por tag e classe)

Seletores comuns

Seletor	Corresponde a
`#my-id`	Elemento com id="my-id"
`.my-class`	Elementos com class="my-class"
`button`	Todos os elementos de botão
`a.download`	Links com class="download"
`[data-action]`	Elementos com atributo data-action

Encontrar o seletor correto

Método 1: Inspector do navegador

Clique com o botão direito no elemento
Escolha "Inspecionar"
Encontre o elemento no DevTools
Procure por um id ou classe única

Método 2: Testar no console

Abra o console do navegador (F12)
Digite: document.querySelector('your-selector')
Se o elemento for exibido, o seletor funciona

Melhores práticas de seletores

Usar IDs quando disponíveis

Opção mais confiável:

<button id="cta-signup">Inscrever-se</button>

Seletor: #cta-signup

Usar classes específicas

Se não houver ID, use uma classe descritiva:

<button class="btn btn-primary cta-main">Começar</button>

Seletor: .cta-main

Evitar seletores genéricos

Ruim	Problema
`button`	Corresponde a todos os botões
`.btn`	Muito comum
`a`	Todos os links

Bom	Por quê
`#signup-cta`	ID único
`.cta-signup`	Classe específica
`[data-goal="signup"]`	Construído para este propósito

Adicionar atributos de dados

Solicite aos desenvolvedores que adicionem atributos rastreáveis:

<button data-goal="signup" class="btn">Inscrever-se</button>

Seletor: [data-goal="signup"]

Exemplos comuns

Botões CTA

Objetivo	Seletor
CTA principal	`#hero-cta`
CTA secundário	`.cta-secondary`
CTA de preços	`.pricing-cta`

Navegação

Objetivo	Seletor
Link de preços	`a[href="/pricing"]`
Link de contato	`nav a[href="/contact"]`
Entrar	`.nav-signin`

Downloads

Objetivo	Seletor
Qualquer download	`a[download]`
Downloads de PDF	`a[href$=".pdf"]`
Arquivo específico	`a[href="/files/guide.pdf"]`

Links externos

Objetivo	Seletor
Links externos	`a[target="_blank"]`
Links de afiliados	`a[href*="partner.com"]`
Links sociais	`.social-links a`

Seletores avançados

Seletores de atributos

Padrão	Corresponde a
`[attr]`	Tem atributo
`[attr="value"]`	Correspondência exata
`[attr*="value"]`	Contém
`[attr^="value"]`	Começa com
`[attr$="value"]`	Termina com

Combinadores

Padrão	Corresponde a
`div button`	Botão dentro de div
`div > button`	Botão filho direto
`button:first-child`	Primeiro botão
`button:not(.disabled)`	Não desabilitado

Exemplos

/* Links para sites externos */
a[href^="http"]:not([href*="mysite.com"])

/* Botões enviar não desabilitados */
button[type="submit"]:not(:disabled)

/* Links de download na área de conteúdo */
.content a[href$=".pdf"]

Como os cliques são contados

Um objetivo de clique é concluído uma vez por sessão de visitante. Zenovay registra o primeiro clique correspondente em uma sessão e ignora cliques posteriores no mesmo elemento dentro dessa sessão, então um visitante que clica duas vezes conta como uma conversão. O mesmo visitante retornando em uma nova sessão pode completar o objetivo novamente.

Se você deseja rastrear um clique específico apenas em certas páginas, limite-o no nível do seletor combinando o seletor de clique com um pai que existe apenas nessas páginas, ou use um objetivo de correspondência de URL para conversões baseadas em página.

Elementos dinâmicos

Elementos adicionados após o carregamento da página

O rastreamento de cliques é anexado no nível do documento, portanto funciona para elementos que aparecem após o carregamento inicial da página, incluindo conteúdo renderizado por frameworks de JavaScript.

Testar elementos dinâmicos

Carregue a página
Aguarde o elemento aparecer
Clique no elemento
Verifique se o objetivo é acionado

Solução de problemas

Cliques não estão sendo rastreados

Verificar o seletor:

// No console do navegador
document.querySelector('your-selector')
// Deve retornar o elemento

Verificar a visibilidade do elemento:

O elemento está visível quando clicado?
Está oculto ou coberto por outro elemento?

Elementos incorretos correspondendo

Torne o seletor mais específico:

Adicionar contexto pai
Usar uma classe mais única
Adicionar atributo de dados

Elementos com carregamento atrasado

Se o elemento é carregado após a página:

A maioria dos casos funciona automaticamente
Teste completamente
Considere um objetivo de evento personalizado se os problemas persistirem

Melhores práticas

Planejar seus seletores

Antes de implementar:

Identificar CTAs chave
Garantir identificadores únicos
Documentar seletores
Testar em todas as páginas

Trabalhar com desenvolvedores

Solicite:

IDs únicos em CTAs chave
Atributos de dados para rastreamento
Convenções de nomenclatura consistentes

Testar completamente

Clique no elemento você mesmo
Verifique a visualização em tempo real
Verifique se o objetivo foi registrado
Teste também em mobile

Objetivos de Clique em Elementos