Configurar o Flowsery Analytics num projeto Astro

Este guia explica como adicionar o rastreamento do Flowsery Analytics ao seu site Astro.

Inserir o snippet de rastreamento no seu layout

A melhor abordagem para carregar scripts em todas as páginas de uma aplicação Astro é através de um componente de layout partilhado.

Abra (ou crie) o seu ficheiro de layout principal -- normalmente em src/layouts/Layout.astro.
Coloque a tag de script do Flowsery Analytics dentro do <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>

Substitua flid_****** pelo Website ID mostrado nas definições do Flowsery Analytics.

Confirme que todas as páginas do seu projeto utilizam 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: Gestão de head integrada do Astro

Também pode incorporar o script diretamente em qualquer página .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 tudo está a funcionar

Depois de implementar um dos métodos acima:

Faça build e publique o seu site Astro
Navegue até ao seu URL em produção
Abra o seu painel do Flowsery Analytics e procure por pageviews recebidos
Os primeiros dados podem demorar alguns minutos a aparecer

Para opções adicionais como rastreamento em localhost, endpoints de API personalizados ou configuração entre domínios, consulte a referência de configuração do script.

O Flowsery Analytics ignora tráfego de localhost por padrão para que não inflacione os seus números durante o desenvolvimento.