Varde on Astro
Add Varde to an Astro site with one integration. The script is added to the head of every page.
Install
npm install astro-varde// astro.config.mjs
import { defineConfig } from 'astro/config';
import varde from 'astro-varde';
export default defineConfig({
integrations: [varde({ site: 'YOUR_SITE_ID', autoEvents: true })],
});Track goals
Use track() in a client-side script. Calls made before the script loads are queued.
<button id="signup">Sign up</button>
<script>
import { track } from 'astro-varde';
document.getElementById('signup')?.addEventListener('click', () => track('signup'));
</script>Options
| Option | What it does |
|---|---|
site | Your site ID. Required. |
autoEvents | Counts outbound links, file downloads, email and phone clicks. |
ignorePages | Paths to skip, for example ['/admin*']. |
hash | Counts #/route changes as pageviews. |
enabled | Set to false to turn tracking off for example enabled: import.meta.env.PROD. |
Without the package
Add the script tag to the head of your main layout instead:
<script defer data-site="YOUR_SITE_ID" src="https://vardeanalytics.com/js/script.js"></script>Check that it works
Open your site in a normal browser window. The add-site screen shows Connected once the first pageview arrives, and the dashboard fills in within a few minutes. If nothing shows up, see the checklist at the bottom of Install on your platform.
Other platforms
WordPressNext.jsNuxtDocusaurusLovableShopifyWebflowFramerSquarespaceWixGhost