Astro Installation

Jetrack works perfectly with Astro, supporting both static site generation and server-side rendering (SSR).

Method 1: Base Layout (Recommended)

The cleanest approach is to add the tracking script to your base layout, which applies to all pages.

Create or Edit Your Layout

Create or edit src/layouts/BaseLayout.astro:

---
// src/layouts/BaseLayout.astro
const { title } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{title}</title>
    
    <!-- Jetrack -->
    <script
      async
      defer
      data-website-id="your-unique-id"
      src="https://analytics.brandjet.ai/script.js">
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>

Use in Your Pages

Then apply this layout to your pages:

---
// src/pages/index.astro
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout title="Home">
  <h1>Welcome to my Astro site</h1>
  <p>This page is being tracked by Jetrack!</p>
</BaseLayout>

Method 2: Analytics Component

For more flexibility, create a dedicated analytics component that you can reuse.

Create the Component

Create src/components/Analytics.astro:

---
// src/components/Analytics.astro
---

<script
  is:inline
  async
  defer
  data-website-id="your-unique-id"
  src="https://analytics.brandjet.ai/script.js">
</script>

Note: The is:inline directive ensures Astro doesn't process the script.

Import in Your Layout

---
// src/layouts/BaseLayout.astro
import Analytics from '../components/Analytics.astro';
const { title } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{title}</title>
    
    <Analytics />
  </head>
  <body>
    <slot />
  </body>
</html>

Method 3: Direct in Pages

For specific pages only, add the script directly:

---
// src/pages/index.astro
---

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Page</title>
    
    <script
      async
      defer
      data-website-id="your-unique-id"
      src="https://analytics.brandjet.ai/script.js">
    </script>
  </head>
  <body>
    <h1>Welcome</h1>
  </body>
</html>

Using Environment Variables

For better security and multi-environment support:

Create `.env` File

PUBLIC_BRANDJET_WEBSITE_ID=your-unique-id

Update Your Component

---
// src/components/Analytics.astro
const websiteId = import.meta.env.PUBLIC_BRANDJET_WEBSITE_ID;
---

<script
  is:inline
  async
  defer
  data-website-id={websiteId}
  src="https://analytics.brandjet.ai/script.js">
</script>

SSR & SSG Support

BrandJet works seamlessly with:

Static Site Generation (SSG) - Default Astro mode
Server-Side Rendering (SSR) - With adapters like Vercel, Netlify, Node
Hybrid Rendering - Mix of static and dynamic pages

No configuration changes needed regardless of your rendering mode!

View Transitions

If you're using Astro's View Transitions, BrandJet automatically tracks navigation events:

---
// src/layouts/BaseLayout.astro
import { ViewTransitions } from 'astro:transitions';
---

<html lang="en">
  <head>
    <ViewTransitions />
    <script
      async
      defer
      data-website-id="your-unique-id"
      src="https://analytics.brandjet.ai/script.js">
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>

Testing Your Installation

Start your Astro dev server: npm run dev
Visit http://localhost:4321 in your browser
Enable localhost debugging in your BrandJet dashboard settings
Check your dashboard for real-time visitor data

Troubleshooting

Script Not Loading

Make sure the script is in the <head> section
Verify your data-website-id is correct
Check browser console for any errors

Not Tracking Page Views

Ensure localhost debugging is enabled if testing locally
Clear your browser cache
Check that ad blockers are disabled

TypeScript Errors

If using TypeScript, create src/env.d.ts:

/// <reference types="astro/client" />

interface ImportMetaEnv {
  readonly PUBLIC_BRANDJET_WEBSITE_ID: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Jetrack