Install Muro on Astro
Add Muro to an Astro site by dropping the snippet into your root layout. View transitions are tracked automatically.
Astro renders mostly static HTML with optional client-side interactivity. The Muro snippet goes into your site-wide layout, and that's it.
Steps
Open your shared layout file (commonly src/layouts/Layout.astro or src/layouts/BaseLayout.astro) and add the snippet inside <head>:
---
// src/layouts/Layout.astro
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>{Astro.props.title}</title>
<script async src="https://api.muroanalytics.com/muro.js" data-project-id="YOUR_PROJECT_ID"></script>
</head>
<body>
<slot />
</body>
</html>Replace YOUR_PROJECT_ID with your project's ID from Settings → Project → Tracking script.
Every page that uses this layout now loads Muro automatically.
View transitions
If you use Astro's View Transitions feature (<ViewTransitions />), Muro tracks navigations correctly. Astro uses the History API under the hood, and Muro listens to history.pushState and popstate.
No extra code is needed.
Verify
- Run
npm run devand open the site. - In Muro, set the time range to Live.
- Reload the site in another tab.
- Your visit appears within 30 seconds.
For production, run npm run build && npm run preview to test the static output, or just deploy.
Tracking custom events
window.muro.track() is available in any client-side script. For example, in an Astro component:
<button id="signup-cta">Sign up</button>
<script>
document.querySelector('#signup-cta')?.addEventListener('click', () => {
window.muro.track('signup');
});
</script>See Track custom events.