Manual de Integração Mytrics

Rastreamento de conversões web, injeção de scripts e telemetria de receita automatizada

Voltar à Home

INTRODUÇÃO

RASTREAMENTO

POLÍTICAS

VER TAMBÉM

Identificação de Usuário Core Web Vitals Erros Conversões & Funis Revenue API API de Rastreamento
Introdução

Visão Geral do Mytrics

O **Mytrics** é um ecossistema completo de web analytics de alta velocidade projetado para oferecer métricas em tempo real sem prejudicar o carregamento do seu site e garantindo 100% de privacidade (compatível com a LGPD e GDPR).

O sistema é dividido em três frentes de fácil integração para desenvolvedores:

Telemetria de Tráfego

Script assíncrono ultra-leve. Captura pageviews, origens, sessões e conversões 100% cookieless.

Ingestão de Receitas

Webhooks server-to-server com Stripe, Kiwify, Hotmart, Eduzz. MRR, ARR, Churn em tempo real.

Funcionamento

Como Funciona o Rastreamento

Diferente de ferramentas antigas que salvam dados invasivos nos dispositivos dos usuários, a arquitetura do Mytrics funciona de maneira limpa:

  • 1. Identificação Cookieless: O visitante é mapeado de forma pseudo-anônima a nível de servidor, com hash criptográfico que rotaciona diariamente. Sem cookies de terceiros ou rastreamento cruzado.
  • 2. Captura de Metadados: URL, referrer, tipo de dispositivo (Desktop/Mobile), idioma do navegador e geolocalização (cidade/país) são coletados de forma segura.
  • 3. Ingestão Assíncrona Resiliente: O script transmite a telemetria usando a API Fetch com keepalive: true, garantindo o envio do evento mesmo se a aba for fechada rapidamente.
  • 4. Identificação Manual Opcional: Após o login, chame window.mytrics.identify(userId, metadata) para associar a sessão anônima ao seu usuário real.
Instalação Rápida

Script de Rastreamento de Tráfego

Copie o script assíncrono abaixo e cole-o dentro da tag <head> do seu site:

html
<!-- Script de Rastreamento Mytrics (Assíncrono & Leve) -->
<script 
  "color:#ff7b72">async 
  src="https:">//analytics.mytrics.com.br/i.js" 
  data-site-id="SEU_SITE_ID"
></script>
Substitua o Identificador
Substitua SEU_SITE_ID pelo identificador exclusivo do seu site, disponível na aba Configurações do painel.

Para guias detalhadas por stack (Next.js, WordPress, Vite, etc), veja a página dedicada:

Ver Instalação Detalhada
Conversões

Rastrear Conversões e Eventos Customizados

Para capturar cliques em botões, envios de formulário, começos de checkout ou qualquer ação de marketing, use a função global window.mytrics.track:

javascript
"color:#6a737d">// 1. Disparar evento de conversão simples (ex: clique no WhatsApp)
window.mytrics.track('clique_whatsapp');

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

"color:#6a737d">// 3. Identificar usuário logado (associa userId a sessão anônima)
window.mytrics.identify('user_42', {
  email: 'maria@exemplo.com',
  plano: 'pro'
});
Metadados Dinâmicos
Você pode enviar propriedades ilimitadas no segundo parâmetro. Exemplo: { valor: 99.90, cupom: "LAUNCH30" }

Para identificar um usuário logado e atribuir conversões a ele, use mytrics.identify():

Ver Identificação de Usuário
Bypass Ad-blockers

Bypass de Bloqueadores de Anúncios (Proxy First-Party)

Para imunizar o seu site contra ad-blockers (que bloqueiam scripts externos conhecidos), você pode mascarar o tráfego fazendo-o passar pelo seu próprio domínio. O navegador nunca vê analytics.mytrics.com.br — só vê seusite.com/analytics/.

Use o endereço relativo no HTML:

html
<!-- Rastreamento First-Party Invisível (Bypass Ad-blockers) -->
<script 
  "color:#ff7b72">async 
  src="/analytics/i.js" 
  data-site-id="SEU_SITE_ID"
></script>

Configuração de proxy por stack:

Opção A: Next.js (next.config.js)
javascript
"color:#6a737d">// next.config.js
"color:#ff7b72">const nextConfig = {
  "color:#ff7b72">async rewrites() {
    "color:#ff7b72">return [
      {
        source: '/analytics/i.js',
        destination: 'https://analytics.mytrics.com.br/i.js',
      },
      {
        source: '/analytics/api/:path*',
        destination: 'https://analytics.mytrics.com.br/api/:path*',
      },
    ];
  },
};

module.exports = nextConfig;
Opção B: Vercel (vercel.json)
json
// vercel.json (Cole na raiz do projeto do seu site)
{
  "rewrites": [
    {
      "source": "/analytics/i.js",
      "destination": "https://analytics.mytrics.com.br/i.js"
    },
    {
      "source": "/analytics/api/:path*",
      "destination": "https://analytics.mytrics.com.br/api/:path*"
    }
  ]
}
Opção C: Cloudflare Workers (WordPress, PHP, Shopify, VPS)
javascript
"color:#6a737d">// Cloudflare Worker (Bypass universal para qualquer stack, CMS ou WordPress!)
"color:#ff7b72">export default {
  "color:#ff7b72">async fetch(request) {
    "color:#ff7b72">const url = "color:#ff7b72">new URL(request.url);
    
    "color:#6a737d">// 1. Roteamento do Script de Tracking
    "color:#ff7b72">if (url.pathname === '/analytics/i.js') {
      "color:#ff7b72">return fetch('https://analytics.mytrics.com.br/i.js');
    }
    
    "color:#6a737d">// 2. Roteamento de Telemetria
    "color:#ff7b72">if (url.pathname.startsWith('/analytics/api/')) {
      "color:#ff7b72">const targetUrl = 'https://analytics.mytrics.com.br' + url.pathname.replace('/analytics', '');
      "color:#ff7b72">return fetch(targetUrl, {
        method: request.method,
        headers: request.headers,
        body: request.body
      });
    }
    
    "color:#ff7b72">return fetch(request);
  }
};
Status

Verificar Conexão do Site

Após instalar o script, faça um acesso no seu site no navegador. O status do site no seu painel Mytrics mudará automaticamente para Conectado (Ativo) assim que nossa API receber o primeiro pageview.

Conformidade

Privacidade por Design & LGPD

O Mytrics protege seus usuários finais e simplifica sua conformidade regulatória:

  • Cookieless: Sem cookies persistentes. Identificação por hash criptográfico que rotaciona diariamente (rolling salt por dia).
  • Anonimização de IP: Pageviews e eventos nunca gravam o IP bruto completo. Apenas metadados derivados (cidade, país, ASN).
  • Modos de privacidade configuráveis: Use window.mytrics.privacy("minimal") em sites LGPD-strict. Sem auto-capture, sem web vitals — só pageviews e track() manual.
  • Soberania de dados: Todos os logs e registros financeiros ficam no seu banco MongoDB próprio. Sem terceiros.
FAQ

Suporte Técnico

Precisa de assistência técnica dedicada ou suporte para mapear webhooks avançados?

E-mail de Suporte

Encaminhe trechos de código e logs para:
suporte@mytrics.com.br

Tempo de Resposta

SLA para desenvolvedores integrados: até 12 horas úteis.

IA Helper

Super Prompt para Integração via IA

Copie o prompt estruturado abaixo, preencha sua stack na última linha e envie pro seu assistente de IA (ChatGPT, Claude ou Gemini) pra receber o código de integração 100% pronto:

text
Você é um desenvolvedor sênior de software especialista em integrações web de alta performance.
Preciso que escreva o código completo de integração do Mytrics no meu projeto para rastreamento de tráfego (frontend) e envio de receita (backend).

---
1. ESPECIFICAÇÕES DO SCRIPT DE RASTREAMENTO (FRONTEND)
- Script de Analytics assíncrono:
  <script "color:#ff7b72">async src="https:">//analytics.mytrics.com.br/i.js" data-site-id="[SEU_SITE_ID]"></script>
- API Global exposta no browser: window.mytrics.track(eventName, metadata)
- window.mytrics.identify(userId, metadata) — para associar usuário logado à sessão
- window.mytrics.privacy(mode) — aceita "minimal" | "standard" | "full"
- eventName (string): Nome da conversão (ex: 'leads', 'clique_whatsapp')
- metadata (object, opcional): Propriedades em formato JSON plano (ex: { valor: 99.9, cupom: 'IA20' })

---
2. ESPECIFICAÇÕES DA API DE RECEITA (BACKEND)
- Endpoint de Ingestão: POST https:"color:#6a737d">//analytics.mytrics.com.br/api/v1/revenue/events
- Autenticação: Header "Authorization: Bearer [SUA_API_KEY_MYTRICS]"
- Regras críticas:
  1. O valor "amount" deve ser enviado SEMPRE em centavos (inteiro). Ex: R$ 19,90 -> 1990.
  2. O campo "occurred_at" deve ser uma string ISO 8601 UTC.
  3. O campo "event_id" é a chave de idempotência — use o ID exclusivo do gateway para evitar eventos duplicados.
  4. Mapear o payload conforme os tipos aceitos: "payment.succeeded", "payment.failed", "subscription.created", "subscription.cancelled", "refund.created".

---
3. MINHA STACK TECNOLÓGICA E REQUISITOS
- Minha Stack de Frontend: [EX: React com Vite / Next.js / WordPress]
- Minha Stack de Backend: [EX: Node.js com Express / Laravel / Python]
- Meu Gateway de Pagamento: [EX: Stripe / Kiwify / Hotmart]

Por favor, escreva:
1. O código de injeção segura no frontend (tratando SPA/roteamento se necessário) e crie um helper robusto para disparar eventos customizados com segurança prevenindo erros se window.mytrics não tiver terminado de carregar.
2. O endpoint de webhook do meu backend para receber notificações do meu gateway de pagamento, mapear os eventos corretamente para o padrão Mytrics e disparar a telemetria financeira para a API de Receita do Mytrics de forma 100% segura usando variáveis de ambiente.