All integrations

Nuxt

Works on Nuxt 3 and 4. Register the script once in nuxt.config.ts, or with useHead in app.vue.

Steps

  1. Open nuxt.config.ts.
  2. Add the app.head.script entry below. Replace SITE_ID with your Site ID.
  3. Redeploy. If you prefer a component, use the useHead variant in app.vue instead.

The snippet

Replace SITE_ID with the ID from your Glyphex site settings.

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { src: "https://glyphex.io/t/SITE_ID.js", defer: true },
      ],
    },
  },
});

Alternative: useHead in app.vue

<script setup lang="ts">
useHead({
  script: [{ src: "https://glyphex.io/t/SITE_ID.js", defer: true }],
});
</script>

Nuxt's client-side routing is tracked automatically. You do not need a route listener.

Verify it works

Open your live site in a new tab, then open Realtime in your Glyphex dashboard. Your visit should show up within a few seconds. You can also open your site's Getting started page and click Check installation, which fetches your URL and looks for the tag.

Cookies and consent

Glyphex sets no cookies and stores nothing on the visitor's device, so it needs no cookie banner.

Track custom events

Call window.analytics.track from any handler:

<script setup lang="ts">
function onSignup() {
  window.analytics?.track("signup_click", { plan: "pro" });
}
</script>

<template>
  <button @click="onSignup">Sign up</button>
</template>

Events can also be sent with window.analytics.track(name, props) or the declarative data-glyphex-event and data-glyphex-event-<prop> attributes.

Troubleshooting

  • No data? Check that the Site ID matches exactly and the page was republished or the cache cleared.
  • Ad blockers can block analytics scripts. Disable yours to test.
  • Content Security Policy: allow https://glyphex.io in both script-src and connect-src.
  • Check DevTools > Network for a request to glyphex.io/t/. A 404 means the Site ID is wrong.

Custom events

Installation