Install Tidemark on Astro

Add the script to your base layout, so every page that uses it is tracked.

Your site's Settings → Tracking tab shows this same code with your domain and script already filled in, under Install on → Astro. Each site has its own script file name (a short code such as 3fa91c0b2e.js), so copy the code from there rather than typing it.

Steps#

Open your base layout, for example src/layouts/Layout.astro, and add the tag inside <head>:

<script is:inline defer data-domain="example.com" src="https://YOUR-TIDEMARK/js/YOUR-SCRIPT.js"></script>

Replace example.com with the domain you added in Tidemark. is:inline tells Astro to leave the tag exactly as written instead of processing it.

Every page that uses the layout loads the script. If some pages use another layout, add the tag there too.

Record your own events#

Call window.plausible('Signup') to record a custom event, with optional properties: window.plausible('Signup', { props: { plan: 'pro' } }). Call it from a script on your page, in response to something the visitor does. Create a matching goal in your site's settings to see it under Behaviors.

Check that it works#

Open your site in a private window, then look at your Tidemark dashboard. Visits from localhost are ignored, so test on a real address.

If nothing shows up:

• Make sure the domain in the snippet matches the domain you added in Tidemark.
• Turn off any ad blocker for your own test, and check the browser console for a blocked request.
• Make sure the script address in the snippet is reachable from the visitor's browser.