Install Muro on Astro
Add the Muro script to your Astro root layout. Navigation with Astro's view transitions is tracked automatically.
In Astro, the Muro script goes in the <head> of the layout every page uses. Static pages, server-rendered pages and view-transition navigations are all tracked.
Steps
Copy your snippet
In Muro, go to Settings → Project → Tracking script and click Copy script:
<script async src="https://api.muroanalytics.com/muro.js" data-project-id="YOUR_PROJECT_ID"></script>Paste it into your root layout
Open your shared layout, usually src/layouts/Layout.astro or src/layouts/BaseLayout.astro, and paste the snippet inside <head>:
---
// src/layouts/Layout.astro
const { title } = Astro.props;
---
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>{title}</title>
<script async src="https://api.muroanalytics.com/muro.js" data-project-id="YOUR_PROJECT_ID"></script>
</head>
<body>
<slot />
</body>
</html>Paste the tag exactly as it is. Don't add is:inline, and don't move it into a frontmatter import or a bundled <script> block. The async attribute keeps it a browser-only script that never runs during server rendering.
Every page that uses this layout now loads Muro. If some pages use a different layout, add the snippet there too.
Build and deploy
Run npm run build and deploy as usual.
Verify it works
- Open your deployed site.
- Open DevTools, go to the Network tab, filter by
collectand reload. You should see aPOSTtocdn.muroanalytics.com/collectwith status202. - Or, in Muro, set the time picker to Live. Your visit appears within about 30 seconds.
Good to know
- View transitions work. Astro's client router navigates with
history.pushState, which Muro listens to, so each navigation is a pageview. No extra code needed. - Custom events. Call
window.muro?.track(...)from a client-side<script>in a component. See Track custom events. - Keep localhost out. Muro counts
npm run devvisits too. See Keep staging and localhost out of your data.