Instalação do Mytrics

Como adicionar o script de rastreamento no seu site em 5 minutos — HTML, React, Next.js.

Voltar à Home
Instalação

Script de Rastreamento

O Mytrics injeta um script assíncrono de ~2.4KB. Adicione a tag abaixo dentro do seu HTML — preferencialmente antes do fechamento de <code>&lt;/head&gt;</code>:

html
<!-- Script de Tracking Mytrics (assíncrono e ultra-leve) -->
<script
  "color:#ff7b72">async
  src="https:">//analytics.mytrics.com.br/i.js"
  data-site-id="SEU_SITE_ID"
></script>
Substitua o identificador
O <code>SEU_SITE_ID</code> é gerado quando você cria um site no painel. Encontre em <strong>Configurações do Site → Instalação</strong>.
Next.js

Instalando no Next.js (App Router)

Use o componente nativo <code>Script</code> do Next para carregamento otimizado:

tsx
"color:#ff7b72">import Script "color:#ff7b72">from 'next/script';

"color:#ff7b72">export default "color:#ff7b72">function RootLayout({ children }) {
  "color:#ff7b72">return (
    <html lang="pt-BR">
      <body>
        {children}
        <Script
          src="https:">//analytics.mytrics.com.br/i.js"
          data-site-id="SEU_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

A propriedade <code>strategy="afterInteractive"</code> garante que o script carregue sem bloquear a renderização da página.

React

Instalando no React (Vite / CRA)

Crie o elemento script dinamicamente dentro de um <code>useEffect</code>:

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

"color:#ff7b72">export default "color:#ff7b72">function MyApp() {
  useEffect(() => {
    "color:#ff7b72">const s = document.createElement('script');
    s.src = 'https://analytics.mytrics.com.br/i.js';
    s."color:#ff7b72">async = true;
    s.setAttribute('data-site-id', 'SEU_SITE_ID');
    document.body.appendChild(s);
  }, []);

  "color:#ff7b72">return <div>...</div>;
}

Em SPAs (React Router, Next.js client-side nav), dispare um pageview manual após cada mudança de rota. Veja a página de Eventos para detalhes.

HTML / CMS

WordPress, Shopify, Wix e HTML estático

Cole o script básico dentro do <code>&lt;head&gt;</code> do seu site (ou no campo de "código personalizado" do CMS). Em WordPress, plugins como "Insert Headers and Footers" facilitam.

Bypass de ad-blockers
Se muitos dos seus usuários usam ad-blockers, configure um proxy first-party para mascarar analytics.mytrics.com.br como seusite.com/analytics/. Veja a seção de Bypass na documentação principal.
Verificar

Verificando a instalação

Após instalar, recarregue o site no navegador. O status no painel do Mytrics muda para Conectado em até 30 segundos. Se não mudar, verifique:

  • O <code>data-site-id</code> está correto (case-sensitive)
  • O site não está atrás de um ad-blocker local
  • A aba DevTools → Network mostra requests para /api/pageview