Frameworks

Nuxt

Nuxt analytics with Stickybeak starts by adding its script to your rendered pages; this guide shows you where it belongs and how to track page views, goals and purchase revenue. It is a lighter alternative to Google Analytics for Nuxt, with live visitors, goals and revenue attribution in one script.

Paths shown are Nuxt 4; for Nuxt 3, drop the app/ prefix.

#Add the script

#Add the script in nuxt.config

The $production block only applies to production builds, so nuxt dev stays out of your numbers.

export default defineNuxtConfig({
  $production: {
    app: {
      head: {
        script: [
          {
            src: "https://app.usestickybeak.com/_cfw/s.js",
            defer: true,
            "data-site": "YOUR_SITE_ID",
            "data-domain": "example.com",
          },
        ],
      },
    },
  },
});

Nuxt writes this tag into the HTML of every page, including nuxt generate output and apps with ssr: false.

#Or set it at runtime with useHead

For server rendering, read the ID from runtime config instead:

Declare runtimeConfig.public.stickybeakSiteId, then in app/app.vue pass the same script attributes to useHead() when the value exists.

Set NUXT_PUBLIC_STICKYBEAK_SITE_ID at runtime, or at build time for nuxt generate. Use one method.

#Check it's working

Test the deployed site, then verify your install.

#Track goals

Add data-goal to rendered links or buttons. For other events, use the typed queued helper below. See Custom goals.

<NuxtLink to="/signup" data-goal="start_signup" data-goal-plan="pro">Start free trial</NuxtLink>

type GoalProps = Record<string, string | number | boolean>;
type Stickybeak = ((goal: string, props?: GoalProps) => void) & { q?: unknown[][] };

declare global {
  interface Window {
    stickybeak?: Stickybeak;
  }
}

export function track(goal: string, props?: GoalProps): void {
  if (typeof window === "undefined") return; // on the server: nothing to do
  if (!window.stickybeak) {
    // Hold calls made before the script loads; it sends them when it arrives.
    const queue: Stickybeak = (...args) => {
      (queue.q ??= []).push(args);
    };
    window.stickybeak = queue;
  }
  window.stickybeak(goal, props);
}

<script setup lang="ts">
async function upgrade() {
  track("upgrade_click", { plan: "pro" });
  await navigateTo("/checkout?plan=pro");
}
</script>

<template>
  <button type="button" @click="upgrade">Upgrade to Pro</button>
</template>

#Track purchases

After confirming an order in the browser, send:

window.stickybeak?.("purchase", { revenue: 49, currency: "USD", order_id: "ORDER_ID" });

Use real values; see Revenue.

#Page changes

Nuxt counts new paths from links, navigateTo(), back and forward. Replace, query-only and hash-only changes do not. See Single-page apps.

#If it isn't working

Check the production site ID and domain, then see Troubleshooting.