Eventos Personalizados

Como rastrear cliques, cadastros, compras e qualquer ação com window.mytrics.track().

Voltar à Home
API

A função window.mytrics.track

Depois que o script Mytrics carrega, a função global <code>window.mytrics.track()</code> fica disponível. Ela aceita o nome do evento e um objeto opcional de metadados:

javascript
"color:#6a737d">// 1. Evento simples (string)
window.mytrics.track('clique_whatsapp');

"color:#6a737d">// 2. Evento rico (com metadados)
window.mytrics.track('finalizou_compra', {
  valor: 249.90,
  plano: 'SaaS Premium',
  cupom: 'LAUNCH30',
  origem: 'campanha_influenciador'
});

"color:#6a737d">// 3. Helper seguro: espera window.mytrics carregar
window.mytricsSafe = (event, metadata) => {
  "color:#ff7b72">if (window.mytrics && "color:#ff7b72">typeof window.mytrics.track === 'function') {
    window.mytrics.track(event, metadata);
  } "color:#ff7b72">else {
    "color:#6a737d">// Script ainda não carregou. Fila ou silenciosamente ignore.
    console.debug('[mytrics] script not loaded yet, ignoring', event);
  }
};

Parâmetros

CAMPOTIPOOBRIG.DESCRIÇÃO
eventNamestringSimNome do evento (snake_case recomendado). Ex: "clique_whatsapp"
metadataobjectNãoPropriedades arbitrárias. JSON plano. Sem PII.
Boas práticas

Boas práticas

Não envie PII

Nunca envie dados sensíveis (CPF, e-mail do usuário, números de cartão) nos metadados. Use identificadores opacos (userId hash) e armazene a referência no seu próprio banco.

Helper seguro

O script pode ainda não ter carregado quando o usuário executa uma ação rápida. Use um helper que verifica a disponibilidade:

tsx
"color:#ff7b72">import { useEffect } "color:#ff7b72">from 'react';

"color:#ff7b72">function CheckoutButton() {
  "color:#ff7b72">const handleClick = () => {
    "color:#6a737d">// Track + ação normal
    window.mytrics?.track('clique_checkout', { plano: 'pro', preco: 99.90 });
    window.location.href = '/checkout';
  };

  "color:#ff7b72">return <button onClick={handleClick}>Comprar</button>;
}

"color:#6a737d">// Para SPAs: dispare um pageview manual após cada navegação
"color:#ff7b72">function RouteChangeTracker() {
  useEffect(() => {
    "color:#ff7b72">const handler = () => {
      window.mytrics?.track('pageview', { path: location.pathname });
    };
    window.addEventListener('popstate', handler);
    "color:#ff7b72">return () => window.removeEventListener('popstate', handler);
  }, []);
  "color:#ff7b72">return null;
}

Respeite o consentimento

Para sites sob LGPD, dispare o tracking somente após o consentimento:

javascript
"color:#6a737d">// Padrão: respeita o consentimento do usuário (LGPD)
"color:#ff7b72">function enableTracking() {
  "color:#ff7b72">if (window.mytrics && "color:#ff7b72">typeof window.mytrics.privacy === 'function') {
    window.mytrics.privacy('standard');  "color:#6a737d">// ou 'full' para máxima fidelidade
  }
}

"color:#6a737d">// Após o usuário aceitar cookies:
document.getElementById('accept-cookies').addEventListener('click', enableTracking);

"color:#6a737d">// Para LGPD-strict:
window.mytrics.privacy('minimal');  "color:#6a737d">// só pageviews e track() manual
Modos de privacidade
Use mytrics.privacy("minimal") para LGPD-strict (só pageviews e track manual). "standard" inclui auto-capture de cliques. "full" inclui Web Vitals.
E-commerce

Eventos padrão de e-commerce

Recomendamos estes nomes de eventos para projetos de e-commerce (eles são reconhecidos automaticamente em dashboards e funis):

javascript
"color:#6a737d">// Padrões comuns de e-commerce
window.mytrics.track('view_item', { id: 'SKU-123', nome: 'Camiseta', preco: 59.90 });
window.mytrics.track('add_to_cart', { id: 'SKU-123', quantidade: 1 });
window.mytrics.track('begin_checkout', { total: 59.90, itens: 1 });
window.mytrics.track('purchase', { id: 'ORDER-789', total: 59.90, cupom: 'FRETE0' });
Erros manuais

Reportar erros manualmente

Para erros try/catch que você quer reportar explicitamente:

javascript
"color:#ff7b72">try {
  "color:#ff7b72">await fetch('/api/checkout', { ... });
} "color:#ff7b72">catch (err) {
  window.mytrics.error(err, { contexto: 'checkout_flow' });
  "color:#6a737d">// mostra mensagem pro usuário
}