Pular para o conteúdo principal
Zenovaydocs
5 min de leitura

Adicionar o Zenovay Analytics ao Astro

Este guia cobre a adição do Zenovay Analytics a um site Astro: instalação, rastreamento de eventos personalizados, suporte a View Transitions e modo sem cookies. O rastreador carrega de forma assíncrona com menos de 1 KB e não define cookies por padrão.

Configuração rápida (2 minutos)

Adicione o script de rastreamento do Zenovay ao seu layout do Astro e pronto. Sem pacotes npm, sem plugins de build, sem arquivos de configuração.

Passo 1: Obtenha seu código de rastreamento

Entre no seu painel do Zenovay, abra Domains, clique no seu site e copie o snippet do script do cartão Tracking script na página General.

Passo 2: Adicione ao Layout

Abra seu arquivo de layout principal do Astro e adicione a tag de script dentro de <head>:

src/layouts/Layout.astroASTRO
---
// src/layouts/Layout.astro
interface Props {
title: string;
}
const { title } = Astro.props;
---
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{title}</title>
  <script
    defer
    data-tracking-code="YOUR_TRACKING_CODE"
    src="https://api.zenovay.com/z.js"
  ></script>
</head>
<body>
  <slot />
</body>
</html>

Pronto! O Zenovay rastreará automaticamente as visualizações de página em todas as páginas que usam este layout.

Passo 3: Verifique sua instalação

Visite seu site em um navegador e abra o painel do Zenovay. Você deverá ver um visitante em tempo real aparecer em segundos.

Substitua YOUR_TRACKING_CODE pelo código mostrado na página General do seu site em Domains.

Cartão de script de rastreamento mostrando o snippet do script com abas HTML, React, Next.js e First-Party
Copie seu código de rastreamento do cartão Tracking script na página de configurações General do seu site.

Eventos personalizados

Rastreie cliques de botões, envios de formulários e outras interações usando a função global zenovay.

Script embutido em componentes Astro

src/components/SignupButton.astroASTRO
---
// src/components/SignupButton.astro
interface Props {
plan: string;
}
const { plan } = Astro.props;
---
<button id="signup-btn" data-plan={plan}>
Sign Up for {plan}
</button>

<script>
const btn = document.getElementById('signup-btn');
btn?.addEventListener('click', () => {
  if (window.zenovay) {
    window.zenovay('track', 'signup_click', {
      plan: btn.dataset.plan,
    });
  }
});
</script>

Eventos personalizados em componentes framework

Se você usa ilhas React, Vue ou Svelte dentro do Astro, chame window.zenovay diretamente:

src/components/DownloadButton.tsx (React island)TSX
export default function DownloadButton({ file }: { file: string }) {
const handleClick = () => {
  if (window.zenovay) {
    window.zenovay('track', 'file_download', { file });
  }
};

return <button onClick={handleClick}>Download {file}</button>;
}

Navegação SPA com View Transitions

Se você usa Astro View Transitions, o Zenovay detecta automaticamente as mudanças de rota do lado do cliente e registra uma nova visualização de página para cada navegação. Nenhuma configuração extra necessária.

src/layouts/Layout.astro (com View Transitions)ASTRO
---
import { ViewTransitions } from 'astro:transitions';
---
<html lang="en">
<head>
  <ViewTransitions />
  <script
    defer
    data-tracking-code="YOUR_TRACKING_CODE"
    src="https://api.zenovay.com/z.js"
  ></script>
</head>
<body>
  <slot />
</body>
</html>

O Zenovay escuta a History API do navegador (pushState / popstate), portanto funciona com qualquer método de navegação do lado do cliente, incluindo View Transitions.

Modo sem cookies

Para rastreamento amigável à privacidade sem cookies ou localStorage, adicione o atributo data-cookieless:

Rastreamento sem cookiesHTML
<script
defer
data-tracking-code="YOUR_TRACKING_CODE"
data-cookieless="true"
src="https://api.zenovay.com/z.js"
></script>

No modo sem cookies, o Zenovay usa um hash do lado do servidor da sub-rede IP do visitante, user agent e um sal rotativo diário para contar visitantes únicos sem armazenar nada no dispositivo do cliente.

Identificar usuários

Se seu site Astro tem áreas autenticadas, identifique usuários logados:

Identificar um usuárioJavaScript
// After login or on authenticated pages
if (window.zenovay) {
window.zenovay('identify', 'user_123', {
  email: '[email protected]',
  plan: 'pro',
});
}

Rastrear metas e receita

Rastreamento de metas e receitaJavaScript
// Track a conversion goal
if (window.zenovay) {
window.zenovay('goal', 'newsletter_signup', { source: 'footer' });
}

// Track revenue
if (window.zenovay) {
window.zenovay('revenue', 49.99, 'USD');
}

Suporte para TypeScript

Adicione declarações de tipo para que TypeScript reconheça window.zenovay:

src/env.d.tsTypeScript
/// <reference types="astro/client" />

declare global {
interface Window {
  zenovay?: (...args: any[]) => void;
}
}

Coleções de conteúdo (Blog Analytics)

Se você está usando Astro Content Collections para um blog, cada post é rastreado automaticamente desde que renderize através do seu layout. Você pode adicionar metadados específicos do post a eventos:

src/pages/blog/[...slug].astroASTRO
---
import { getCollection } from 'astro:content';
import Layout from '../../layouts/Layout.astro';

export async function getStaticPaths() {
const posts = await getCollection('blog');
return posts.map((post) => ({
  params: { slug: post.slug },
  props: { post },
}));
}

const { post } = Astro.props;
const { Content } = await post.render();
---
<Layout title={post.data.title}>
<article>
  <h1>{post.data.title}</h1>
  <Content />
</article>
</Layout>

O Zenovay captura a URL da página e o título automaticamente, portanto cada post do blog aparece como uma página separada no seu painel de análise.

Próximos passos

Seu site Astro agora está rastreando com o Zenovay! Visualize suas análises no painel.

Continue aprendendo:

Esta página foi útil?