How do I install TapCub on Nuxt?

Short answer

Add the TapCub script tag once to the document head: through app.head in nuxt.config (Nuxt 3), or in app.html. It tracks the first document and client navigations; call tapcub only in the browser, never in server code.

Find your site key in Web analytics › Configuration › SDK code.

1. Add the script once

In Nuxt 3, add it to nuxt.config:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { src: 'https://static.pathclue.com/client.js', defer: true, 'data-site': 'YOUR_SITE_KEY' },
      ],
    },
  },
})

In a project with an app.html template, put the same tag in its head instead:

<script defer src="https://static.pathclue.com/client.js" data-site="YOUR_SITE_KEY"></script>

The script starts in the browser by itself. Do not create or inject it again from a component; a second insert is ignored.

2. Pageviews and route changes

The first load and later route changes that use browser history are sent automatically. For hash routing, add data-hash="true" to the same tag.

To send pageviews yourself, set data-auto-track="false" on the script and call tapcub.pageview() after each route finishes. Note that this also turns off automatic outbound and download clicks, Web Vitals and 404 events. See install on single-page apps.

3. Events and sign-in

tapcub.track('purchase', { revenue: 19.9 });

Call it from a click handler on the client, not from server middleware or a server plugin: during server rendering there is no tapcub object. Event names are cut at 100 characters; at most 20 properties are kept, keys are cut at 50 characters and string values at 200. Only strings, numbers and booleans are kept as values.

After sign-in, link the visitor to your user ID:

tapcub.login(userId, { plan: 'pro' }, { type: 'login' });

login comes from the identity script, so check that it exists before calling it. More in identify users.

Check it works

Local hostnames such as localhost are skipped by default, which is easy to mistake for a broken install. Test on a deployed preview or the live site, watch the browser network panel for the collect request, then follow check your installation.

Common problems

Not using Nuxt? See install TapCub.