Configurar Flowsery Analytics en un proyecto Astro

Esta guia te muestra como agregar el seguimiento de Flowsery Analytics a tu sitio Astro.

Insertar el fragmento de seguimiento en tu layout

El mejor enfoque para cargar scripts en cada pagina de una aplicacion Astro es a traves de un componente de layout compartido.

Abre (o crea) tu archivo de layout principal -- generalmente en src/layouts/Layout.astro.
Coloca la etiqueta del script de Flowsery Analytics dentro de <head>:

JavaScript

---
// src/layouts/Layout.astro
export interface Props {
  title: string;
}
 
const { title } = Astro.props;
---
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>{title}</title>
    <script
      defer
      data-fl-website-id="flid_******"
     
      src="https://cdn.flowsery.com/main.js"
    ></script>
  </head>
  <body>
    <slot />
  </body>
</html>

Reemplaza flid_****** con el ID de sitio web que aparece en la configuracion de Flowsery Analytics. Reemplaza your_domain.com con el dominio raiz de tu sitio.

Confirma que todas las paginas de tu proyecto usen este layout:

HTML

---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
---
 
<Layout title="Welcome to Astro">
  <main>
    <h1>Welcome to Astro</h1>
  </main>
</Layout>

Alternativa: gestion de head integrada de Astro

Tambien puedes incrustar el script directamente en cualquier pagina .astro:

HTML

---
// Any .astro page
---
 
<html lang="en">
  <head>
    <script defer data-fl-website-id="flid_******" src="https://cdn.flowsery.com/main.js"></script>
  </head>
  <body>
    <!-- Your page content -->
  </body>
</html>

Confirmar que todo funciona

Una vez que hayas desplegado uno de los metodos anteriores:

Compila y publica tu sitio Astro
Navega a tu URL en produccion
Abre tu panel de Flowsery Analytics y busca las visitas entrantes
Los primeros datos pueden tardar un par de minutos en aparecer

Para opciones adicionales como seguimiento en localhost, endpoints API personalizados o configuracion entre dominios, consulta la referencia de configuracion del script.

Flowsery Analytics ignora el trafico de localhost por defecto, por lo que no inflaras tus numeros durante el desarrollo.