Install Tidemark on Nuxt

Declare the script once in nuxt.config.ts, and Nuxt adds it to every page.

Your site's Settings → Tracking tab shows this same code with your domain and script already filled in, under Install on → Nuxt. 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 nuxt.config.ts and add the script to app.head:

export default defineNuxtConfig({
  app: {
    head: {
      script: [{ src: 'https://YOUR-TIDEMARK/js/YOUR-SCRIPT.js', defer: true, 'data-domain': 'example.com' }],
    },
  },
});

Replace example.com with the domain you added in Tidemark.

Pageviews are recorded on load and on every route change, so you don't need extra code for client-side navigation.

Record your own events#

Call window.plausible('Signup') to record a custom event, with optional properties: window.plausible('Signup', { props: { plan: 'pro' } }). Call it in the browser, in response to something the visitor does, such as a click or a form submit, rather than during server rendering. The script is deferred, so it may not have loaded yet while the page is still hydrating. 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.