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

Adicionar o Zenovay Analytics ao Astro

O Zenovay Analytics oferece aos desenvolvedores Astro uma forma leve e com foco em privacidade para entender como os visitantes interagem com seus sites. Seja para um blog estático, um site de documentação ou uma página de marketing orientada a conteúdo com Astro, o Zenovay se instala com uma única tag de script e começa a coletar visualizações de página, referenciadores, dados do dispositivo e insights geográficos em tempo real. Ao contrário de soluções pesadas de analytics que prejudicam sua pontuação no Lighthouse, o rastreador Zenovay carrega de forma assíncrona em menos de 1 KB e nunca define cookies por padrão, mantendo seu site rápido e amigável ao GDPR. Este guia orienta você pela instalação, rastreamento de eventos personalizados, suporte a View Transitions e modo sem cookies para que você vá de zero a cobertura completa de analytics em cerca de dois minutos.

Configuração rápida (2 minutos)

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

Passo 1: Obtenha seu código de rastreamento

Acesse o painel do Zenovay e copie seu código de rastreamento em Settings → Tracking Code.

Passo 2: Adicionar ao layout

Abra seu arquivo de layout Astro principal 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 cada página que usar 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 em segundos.

Obtenha seu código de rastreamento no Painel do Zenovay. Substitua YOUR_TRACKING_CODE pelo seu código real.

Eventos personalizados

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

Script inline 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 de framework

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

src/components/DownloadButton.tsx (ilha React)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 as 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 a 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), então funciona com qualquer método de navegação do lado do cliente, incluindo View Transitions.

Modo sem cookies

Para rastreamento respeitoso à 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 no servidor da sub-rede de IP do visitante, do agente de usuário e de um salt rotacionado diariamente para contar visitantes únicos sem armazenar nada no dispositivo do cliente.

Identificar usuários

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

Identificar um usuárioJavaScript
// Após o login ou em páginas autenticadas
if (window.zenovay) {
window.zenovay('identify', 'user_123', {
  email: '[email protected]',
  plan: 'pro',
});
}

Rastrear metas e receita

Rastreamento de metas e receitaJavaScript
// Rastrear uma meta de conversão
if (window.zenovay) {
window.zenovay('goal', 'newsletter_signup', { source: 'footer' });
}

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

Suporte a TypeScript

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

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

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

Content Collections (Analytics de blog)

Se você estiver usando as Content Collections do Astro para um blog, cada post é rastreado automaticamente, desde que seja renderizado via seu layout. Você pode adicionar metadados específicos do post aos 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 e o título da página automaticamente, de modo que cada post do blog aparece como uma página separada no seu painel de analytics.

Próximos passos

Seu site Astro está agora sendo rastreado pelo Zenovay! Veja seus dados de analytics no painel.

Continue aprendendo:

Esta página foi útil?