Saltar al contenido principal
Zenovaydocs
5 min de lectura

Añadir Zenovay Analytics a Astro

Esta guía cubre la adición de Zenovay Analytics a un sitio Astro: instalación, seguimiento de eventos personalizados, soporte para View Transitions y modo sin cookies. El rastreador se carga de forma asíncrona en menos de 1 KB y no establece cookies por defecto.

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, abra Dominios, haga clic en su sitio y copie el fragmento de script de la tarjeta Script de seguimiento en la página General.

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>

¡Eso es todo! 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.

Reemplace YOUR_TRACKING_CODE con el código que se muestra en la página General de su sitio bajo Dominios.

Tarjeta de script de seguimiento mostrando el fragmento de script con pestañas de HTML, React, Next.js y First-Party
Copie su código de seguimiento desde la tarjeta Script de seguimiento en la página de configuración General de su sitio.

Eventos personalizados

Rastree clics de 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 directamente a window.zenovay:

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
// After login or on authenticated pages
if (window.zenovay) {
window.zenovay('identify', 'user_123', {
  email: '[email protected]',
  plan: 'pro',
});
}

Seguimiento de objetivos e ingresos

Seguimiento de objetivos e ingresosJavaScript
// 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');
}

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?