3 min de leitura

Eventos Personalizados

Rastreie eventos personalizados e interações de usuários para entender como os visitantes se envolvem com seu site.

Visão Geral

Eventos personalizados permitem que você rastreie ações específicas do usuário que importam para seu negócio:

Cliques em botões
Envios de formulários
Reprodução de vídeos
Downloads de arquivos
Cliques em links externos
Profundidade de rolagem
Tempo gasto na página

Rastreamento Básico de Eventos

Use a função track() para enviar eventos personalizados:

Rastreamento Básico de EventosJavaScript

// Rastrear um evento simples
zenovay('track', 'button_click');

// Rastrear um evento com propriedades
zenovay('track', 'video_play', {
video_id: 'intro-video',
video_title: 'Getting Started with Zenovay',
video_duration: 120
});

Propriedades de Eventos

Inclua contexto adicional com seus eventos usando propriedades:

Evento com PropriedadesJavaScript

zenovay('track', 'purchase', {
product_id: 'pro-plan',
product_name: 'Pro Plan',
price: 29.99,
currency: 'USD',
category: 'subscription'
});

Padrões Comuns de Eventos

Envios de Formulários

Rastrear Envios de FormuláriosJavaScript

document.getElementById('contact-form').addEventListener('submit', function(e) {
zenovay('track', 'form_submit', {
  form_name: 'contact_form',
  form_type: 'lead_generation'
});
});

Downloads de Arquivos

Rastrear DownloadsJavaScript

document.querySelectorAll('a[href$=".pdf"]').forEach(link => {
link.addEventListener('click', function(e) {
  zenovay('track', 'file_download', {
    file_name: this.href.split('/').pop(),
    file_type: 'pdf',
    file_url: this.href
  });
});
});

Interações com Vídeos

Rastrear Eventos de VídeoJavaScript

const video = document.querySelector('video');

video.addEventListener('play', () => {
zenovay('track', 'video_play', {
  video_title: video.title,
  video_duration: video.duration
});
});

video.addEventListener('ended', () => {
zenovay('track', 'video_complete', {
  video_title: video.title,
  watch_time: video.currentTime
});
});

Integração com React

Para aplicações React, use o objeto global zenovay do script de rastreamento:

Exemplo com ReactJavaScript

function ProductCard({ product }) {
const handleAddToCart = () => {
  // Use o objeto global zenovay do script de rastreamento
  zenovay('track', 'add_to_cart', {
    product_id: product.id,
    product_name: product.name,
    price: product.price
  });
};

return (
  <button onClick={handleAddToCart}>
    Add to Cart
  </button>
);
}

Convenções de Nomenclatura de Eventos

Siga estas convenções para um rastreamento de eventos consistente:

Use letras minúsculas e sublinhados para nomes de eventos: button_click, form_submit, video_play

Nomes de Eventos Recomendados

Tipo de Evento	Nome do Evento	Descrição
Navegação	`page_view`	Página visualizada
Engajamento	`button_click`	Botão clicado
Formulários	`form_submit`	Formulário enviado
Mídia	`video_play`	Vídeo iniciado
Comércio	`add_to_cart`	Item adicionado ao carrinho
Busca	`search_query`	Busca realizada

Diretrizes de Propriedades

Mantenha nomes de propriedades descritivos e consistentes
Use snake_case para nomes de propriedades
Inclua contexto relevante (IDs, nomes, categorias)
Evite informações de identificação pessoal (PII)

Nunca rastreie informações sensíveis como senhas, números de cartão de crédito ou dados pessoais nas propriedades de eventos.

Visualizando Eventos Personalizados

Eventos personalizados aparecem em seu painel de domínios. Abra Domains, clique em seu site e use a aba relevante:

Analytics - veja contagens de eventos junto com visualizações de página e outras métricas comportamentais
Revenue - construa funis de conversão e rastreie conclusões de metas a partir de eventos personalizados

Depuração de Eventos

Use o console do navegador para depurar o rastreamento de eventos:

Modo de DepuraçãoJavaScript

// Ativar modo de depuração
zenovay('debug');

// Rastrear um evento (será registrado no console)
zenovay('track', 'test_event', { debug: true });