Objetivos de Eventos Personalizados

Pro Plano

Os objetivos de eventos personalizados permitem rastrear qualquer ação disparando eventos JavaScript. Perfeito para formulários, reproduções de vídeo e interações complexas.

Quando usar eventos personalizados

Melhor para rastrear:

• Envios de formulários (AJAX)
• Interações de vídeo (reprodução, conclusão)
• Navegação de aplicativo de página única
• Ações de adicionar ao carrinho
• Uso de recursos em aplicativos da web
• Qualquer ação desencadeada por JavaScript

Como funcionam os eventos personalizados

1. Você adiciona código JavaScript ao seu site
2. O código é acionado quando a ação ocorre
3. Zenovay recebe o evento
4. O objetivo é registrado

Implementação básica

Rastreando um evento

// Evento simples
zenovay('goal', 'event_name');

// Evento com valor
zenovay('goal', 'purchase', { value: 99.99 });

// Evento com valor e moeda
zenovay('goal', 'purchase', {
  value: 99.99,
  currency: 'USD'
});

Uma chamada de objetivo registra value e currency. Qualquer outra chave que você passar é enviada com a carga de evento subjacente, mas o objetivo em si é reportado apenas pelo seu nome e valor.

Criar o objetivo

1. Abra o painel de controle do seu site e selecione a aba Journeys
2. Abra a subaba Objetivos e clique em Adicionar objetivo
3. Escolha Evento personalizado
4. Insira o nome do evento (por exemplo, purchase) para que corresponda ao nome que você dispara no código
5. Opcionalmente, ative o rastreamento de valor e defina um valor padrão
6. Salvar

Os objetivos de eventos personalizados também são criados automaticamente pela primeira vez que Zenovay recebe um nome de evento que não viu antes, você pode disparar eventos primeiro e eles aparecerão na lista de objetivos.

Nomeação de eventos

Melhores práticas

Bons nomes	Maus nomes
signup_complete	goal1
purchase	click
video_50_percent	event
add_to_cart	123

Convenções de nomenclatura

Escolha um padrão consistente:

• snake_case: form_submit
• camelCase: formSubmit
• kebab-case: form-submit

Categorias com prefixos

Organize eventos com prefixos:

// Eventos de e-commerce
zenovay('goal', 'ecom_add_to_cart');
zenovay('goal', 'ecom_checkout_start');
zenovay('goal', 'ecom_purchase');

// Eventos de engajamento
zenovay('goal', 'engage_video_play');
zenovay('goal', 'engage_scroll_50');

Implementações comuns

Envio de formulário

document.querySelector('form').addEventListener('submit', function(e) {
  zenovay('goal', 'contact_form');
});

// Ou para formulários AJAX
function onFormSuccess() {
  zenovay('goal', 'contact_form');
}

Interações de vídeo

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

video.addEventListener('play', function() {
  zenovay('goal', 'video_play');
});

video.addEventListener('ended', function() {
  zenovay('goal', 'video_complete');
});

// Rastrear progresso de 50%
video.addEventListener('timeupdate', function() {
  if (video.currentTime / video.duration > 0.5) {
    zenovay('goal', 'video_50_percent');
  }
});

Ações de e-commerce

// Adicionar ao carrinho
function addToCart(product) {
  // Sua lógica de carrinho...

  zenovay('goal', 'add_to_cart', {
    value: product.price
  });
}

// Compra completa
function onPurchaseComplete(order) {
  zenovay('goal', 'purchase', {
    value: order.total,
    currency: 'USD'
  });
}

Registro / Inscrição

async function handleSignup(formData) {
  try {
    const response = await api.signup(formData);

    if (response.success) {
      zenovay('goal', 'signup_complete', {
        value: 50 // Valor estimado do cliente potencial
      });
    }
  } catch (error) {
    // Tratar erro
  }
}

Passando valores

Valor estático

Definido nas configurações do objetivo:

• Ativar rastreamento de valor
• Inserir um valor padrão (por exemplo, 50)
• Cada conclusão conta para esse valor

Valor dinâmico

Passar do seu código:

// Valor do pedido
zenovay('goal', 'purchase', {
  value: orderTotal
});

// Valor calculado
const leadValue = isPremium ? 100 : 25;
zenovay('goal', 'lead', { value: leadValue });

Valor de página

Ler do DOM:

const price = parseFloat(
  document.querySelector('.price').textContent.replace('$', '')
);
zenovay('goal', 'purchase', { value: price });

Campos de valor de objetivo

Uma conclusão de objetivo registra estes campos:

Propriedade	Tipo	Exemplo
value	number	99.99
currency	string	"USD"

Passe value como um número simples (sem símbolo de moeda ou string). currency é um código de moeda ISO e o padrão é USD.

Integrações de frameworks

React

import { useCallback } from 'react';

function SignupForm() {
  const handleSubmit = useCallback((data) => {
    // Lógica de envio...

    window.zenovay('goal', 'signup');
  }, []);

  return <form onSubmit={handleSubmit}>...</form>;
}

Vue

<script>
export default {
  methods: {
    handleSubmit() {
      // Lógica de envio...

      window.zenovay('goal', 'signup');
    }
  }
}
</script>

Next.js

// Rastreamento no lado do cliente em um componente
'use client';

export default function CheckoutButton() {
  function handleSuccess() {
    if (typeof window !== 'undefined') {
      window.zenovay('goal', 'purchase');
    }
  }

  return <button onClick={handleSuccess}>Completar</button>;
}

Aplicativos de página única (SPAs)

Rastreamento de mudança de rota

Para exibições de página virtual:

// React Router
history.listen(() => {
  zenovay('page');
});

// Vue Router
router.afterEach(() => {
  zenovay('page');
});

Objetivo após navegação

// Navegar e depois rastrear
router.push('/success').then(() => {
  zenovay('goal', 'signup_complete');
});

Rastreamento condicional

Rastrear baseado em condições

// Apenas rastrear se as condições forem atendidas
if (user.isNewUser && !user.hasConvertedBefore) {
  zenovay('goal', 'first_conversion');
}

// Variante de teste A/B
if (experimentVariant === 'B') {
  zenovay('goal', 'variant_b_conversion');
}

Debouncing de eventos

Prevenir disparo duplicado:

let hasTracked = false;

function trackOnce(eventName) {
  if (!hasTracked) {
    zenovay('goal', eventName);
    hasTracked = true;
  }
}

Tratamento de erros

Rastreamento seguro

Lidar com casos em que Zenovay não está carregado. O fragmento de rastreamento define uma pequena fila de comandos, então as chamadas feitas antes de o script terminar de carregar ainda são processadas:

function safeTrackGoal(eventName, properties) {
  if (typeof zenovay === 'function') {
    zenovay('goal', eventName, properties);
  } else {
    console.warn('Zenovay not loaded');
  }
}

Testando eventos

Modo de depuração

Ativar registro de console:

zenovay('debug');

// Agora rastrear algo
zenovay('goal', 'test_event');
// Verificar console para saída

Verificar no painel

1. Disparar um evento de teste
2. Abra o painel do seu site e selecione a aba Live View para observar a atividade em tempo real, ou abra Journeys → Objetivos para ver a contagem de conclusão do objetivo
3. Verificar que o objetivo apareça e a contagem aumente
4. Verificar o valor do objetivo

Aba Rede

1. Abra DevTools → Rede
2. Disparar o evento
3. Procurar por uma solicitação para api.zenovay.com
4. Verificar a carga útil

Solução de problemas

Eventos não estão sendo registrados

Verificar se o script foi carregado:

console.log(typeof zenovay); // Deve ser 'function'

Verificar se o nome do evento corresponde:

• Objetivo: signup
• Código: zenovay('goal', 'signup') ✓
• Código: zenovay('goal', 'Signup') ✗

Verificar erros:

• Console do navegador para erros
• Aba Rede para solicitações com falha

Valor não está sendo registrado

Certifique-se de que o valor é um número:

// Errado
zenovay('goal', 'purchase', { value: "$99.99" });

// Correto
zenovay('goal', 'purchase', { value: 99.99 });

Próximas etapas

• Configurar funis de conversão
• Atribuição de objetivo
• Atribuição de receita