Saltar al contenido principal
Zenovaydocs
6 min de lectura

Añadir Zenovay Analytics a Astro

Zenovay Analytics ofrece a los desarrolladores de Astro una forma ligera y orientada a la privacidad de comprender cómo los visitantes interactúan con sus sitios. Tanto si está construyendo un blog estático, un sitio de documentación o una página de marketing con contenido enriquecido con Astro, Zenovay se integra con una sola etiqueta de script y comienza a recopilar páginas vistas, referencias, datos del dispositivo y estadísticas geográficas en tiempo real. A diferencia de las pesadas suites de análisis que reducen su puntuación en Lighthouse, el rastreador de Zenovay se carga de forma asíncrona en menos de 1 KB y nunca establece cookies por defecto, manteniendo su sitio rápido y compatible con el RGPD desde el principio. Esta guía le lleva a través de la instalación, el seguimiento de eventos personalizados, el soporte para View Transitions y el modo sin cookies para que pueda pasar de cero a una cobertura de análisis completa en unos dos minutos.

Configuración rápida (2 minutos)

Añada el script de seguimiento de Zenovay a su layout de Astro y habrá terminado. Sin paquetes npm, sin plugins de compilación, sin archivos de configuración.

Paso 1: Obtenga su código de seguimiento

Inicie sesión en su panel de Zenovay y copie su código de seguimiento desde Settings → Tracking Code.

Paso 2: Añadir al layout

Abra su archivo principal de layout de Astro y añada la etiqueta 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>

¡Listo! Zenovay rastreará automáticamente las páginas vistas en cada página que utilice este layout.

Paso 3: Verificar la instalación

Visite su sitio en un navegador y abra el panel de Zenovay. Debería ver un visitante en tiempo real en cuestión de segundos.

Obtenga su código de seguimiento del Panel de Zenovay. Reemplace YOUR_TRACKING_CODE con su código real.

Eventos personalizados

Rastree clics en botones, envíos de formularios y otras interacciones utilizando la función global zenovay.

Script en línea en componentes de 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 en componentes de framework

Si utiliza islas de React, Vue o Svelte dentro de Astro, llame a window.zenovay directamente:

src/components/DownloadButton.tsx (isla de 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>;
}

Navegación en SPA con View Transitions

Si utiliza Astro View Transitions, Zenovay detecta automáticamente los cambios de ruta del lado del cliente y registra una nueva página vista para cada navegación. No se necesita configuración adicional.

src/layouts/Layout.astro (con 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>

Zenovay escucha la History API del navegador (pushState / popstate) por lo que funciona con cualquier método de navegación del lado del cliente, incluidas las View Transitions.

Modo sin cookies

Para un seguimiento respetuoso con la privacidad sin cookies ni localStorage, añada el atributo data-cookieless:

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

En el modo sin cookies, Zenovay utiliza un hash del lado del servidor de la subred IP del visitante, el agente de usuario y una sal rotativa diaria para contar visitantes únicos sin almacenar nada en el dispositivo del cliente.

Identificar usuarios

Si su sitio Astro tiene áreas autenticadas, identifique a los usuarios que han iniciado sesión:

Identificar un usuarioJavaScript
// Después del inicio de sesión o en páginas autenticadas
if (window.zenovay) {
window.zenovay('identify', 'user_123', {
  email: '[email protected]',
  plan: 'pro',
});
}

Seguimiento de objetivos e ingresos

Seguimiento de objetivos e ingresosJavaScript
// Rastrear un objetivo de conversión
if (window.zenovay) {
window.zenovay('goal', 'newsletter_signup', { source: 'footer' });
}

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

Soporte para TypeScript

Añada declaraciones de tipo para que TypeScript reconozca window.zenovay:

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

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

Colecciones de contenido (análisis de blog)

Si utiliza Colecciones de Contenido de Astro para un blog, cada entrada se rastrea automáticamente siempre que se renderice a través de su layout. Puede añadir metadatos específicos de la entrada a los 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>

Zenovay captura automáticamente la URL y el título de la página, por lo que cada entrada del blog aparece como una página separada en su panel de análisis.

Siguientes pasos

¡Su sitio Astro ya está rastreando con Zenovay! Vea sus análisis en el panel de control.

Continúe aprendiendo:

¿Fue útil esta página?