Astro
Add Logspot analytics to an Astro site with automatic pageviews and custom events.
Astro ships mostly static HTML, so the script tag is the simplest, fastest setup. Add the @logspot/web SDK only where you have interactive islands that need typed tracking.
Option A — Script Tag (Recommended)
Add the script to a shared layout's <head> so it loads on every page:
---
// src/layouts/Layout.astro
---
<html lang="en">
<head>
<slot name="head" />
<script
src="https://cdn.logspot.io/lg.js"
data-logspot-pk="YOUR_PUBLIC_KEY"
async
></script>
</head>
<body>
<slot />
</body>
</html>Find your public key in Project settings. Pageviews are captured automatically, including across View Transitions client-side navigations.
Put the tag directly in the layout (not inside an Astro
<script>processed by the bundler) so it loads as a plain external script on every page.
Option B — SDK (@logspot/web)
For typed tracking inside a framework island (React, Svelte, Vue, Solid):
npm install @logspot/web// a client-side island, e.g. src/components/Analytics.tsx
import Logspot from '@logspot/web';
Logspot.init({
publicKey: 'YOUR_PUBLIC_KEY',
enableAutoPageviews: true,
});Render it with a client directive so it runs in the browser: <Analytics client:load />.
Track Events
From any client-side script or island:
<button class="lgspt-get-started">Get started</button>
<!-- fires a "Get Started" event on click -->Or programmatically once the script has loaded (window.Logspot is available):
<script>
window.Logspot &&
window.Logspot.track({ event: 'CtaClicked', metadata: { source: 'hero' } });
</script>Identify Users
Logspot.identify('john@doe.com', { plan: 'pro' });Consent (Optional)
Logspot.setConsent({ analytics: true });See How Tracking & Identity Works for the consent model.
Verify It's Working
Build and preview your site, click around, and watch pageviews and events land in the Logspot dashboard within seconds.