Install on Astro
One component in your shared layout counts every page, in both classic navigation and View Transitions.
Before you paste anything
Every snippet below shows YOUR-SITE-ID
. Replace it with your own site id, which is on the Tracking Code page of the site in your account.
If you do not have an account yet, creating one and adding your domain takes about a minute.
Add the tracker component
- Create src/components/VeritaMetricsTracker.astro with the code below.
- Import it in the layout every page uses, and render it before the closing </body> tag.
- Run the dev server and load any page.
---
// src/components/VeritaMetricsTracker.astro
const { siteId, trackingDomain } = {
siteId: 'YOUR-SITE-ID',
trackingDomain: 'www.veritametrics.com',
};
// Server-side URL for the noscript fallback.
const pageUrlForNoscript = encodeURIComponent(Astro.url.href);
const referrerForNoscript = encodeURIComponent(Astro.request.headers.get('referer') || '');
---
<script define:vars={{ siteId, trackingDomain }}>
(function () {
// Ensure this only runs in the browser
if (typeof window === 'undefined') return; // 1. Initialize the Async Command Queue (Matomo/Plausible-style)
// This ensures window.verita() is available immediately.
window.verita =
window.verita ||
function () {
(window.verita.q = window.verita.q || []).push(arguments);
};
window.verita.l = new Date().getTime(); // 2. Generate the PageLoadId for this tracker instance
// 3. Load the enhanced event tracker script
// It will process the command queue once loaded.
const script = document.createElement('script');
script.src = `https://${trackingDomain}/api/tracker.js?siteId=${siteId}`;
script.async = true;
script.defer = true;
script.dataset.siteId = siteId;
script.dataset.trackingDomain = trackingDomain;
document.head.appendChild(script); // 4. Send the initial pageview using the *queue*
// The tracker.js file will process this once it loads.
window.verita('trackPageView');
})(); // 5. Support Astro View Transitions for SPA-style navigation
// The new tracker.js also handles SPA logic, but this is a
// reliable, framework-specific hook.
document.addEventListener('astro:page-load', () => {
window.verita('trackPageView');
});
</script>
<noscript>
<img
src={`https://${trackingDomain}/api/track-pageview?siteId=${siteId}&url=${pageUrlForNoscript}&ref=${referrerForNoscript}`}
alt=""
width="1"
height="1"
style="display:none"
aria-hidden="true"
/>
</noscript>Check that the data is arriving
- Open your site in a browser and load any page.
- In VeritaMetrics, open the site and click Tracking Code in the sidebar. The status turns active and your visit appears in the recent-pageviews list within a few seconds.
If nothing arrives, open your browser devtools on the Network tab and reload. You should see a request to /api/tracker.js that returns 200, then a request to /api/v1/c when you move or scroll.
The astro:page-load listener is not redundant
With View Transitions the browser keeps the document between navigations, so a module script runs once and never again. The listener at the end of the snippet is what counts the second page and every page after it. Deleting it leaves a site that records one pageview per visitor no matter how far they read.
Guides for other platforms
The same install, on a different stack.
Explore the documentation
Jump to another guide.