Ahrefs Web Analytics
Ahrefs Web Analytics is a privacy-first, cookie-less web analytics service from Ahrefs that tracks page views and custom events without sharing visitor data with third parties.
Nuxt Config Setup
Add this to your nuxt.config.ts to load Ahrefs Web Analytics globally. Alternatively you can use the useScriptAhrefsAnalytics composable for more control.
export default defineNuxtConfig({
scripts: {
registry: {
ahrefsAnalytics: {
trigger: 'onNuxtReady',
}
}
}
})This config automatically enables first-party mode (bundle + proxy). See below to customise.
useScriptAhrefsAnalytics()
The useScriptAhrefsAnalytics composable lets you have fine-grain control over when and how Ahrefs Web Analytics is loaded on your site.
const { proxy } = useScriptAhrefsAnalytics()Please follow the Registry Scripts guide to learn more about advanced usage.
First-Party Mode: Privacy Focused Proxy
No extra config needed. The script is bundled from your domain (faster loads, no extra DNS lookup) and runtime requests are reverse-proxied through your server with automatic anonymisation (user IPs stay hidden from Ahrefs Web Analytics, works with ad blockers). Learn more.
export default defineNuxtConfig({
scripts: {
// ✅ First-party mode: bundled + proxied
registry: {
ahrefsAnalytics: {
trigger: 'onNuxtReady',
},
},
},
})Example
Using Ahrefs Web Analytics in a component with the proxy to send events .
<script setup lang="ts">
const { proxy } = useScriptAhrefsAnalytics()
// noop in development, ssr
// just works in production, client
function handleAction() {
// use proxy methods here
}
</script>
<template>
<div>
<button @click="handleAction">
Send Event
</button>
</div>
</template>The composable comes with the following defaults:
- Trigger: Client Script will load when Nuxt is hydrating.
You can access the AhrefsAnalytics object as a proxy directly or await the $script promise to access the object. It's recommended to use the proxy for any void functions.
const { proxy } = useScriptAhrefsAnalytics({
key: 'your-project-key',
})
function trackSignup() {
proxy.AhrefsAnalytics.sendEvent('signup', {
props: { plan: 'pro' },
})
}
const { onLoaded } = useScriptAhrefsAnalytics({
key: 'your-project-key',
})
onLoaded(({ AhrefsAnalytics }) => {
AhrefsAnalytics.sendEvent('signup', {
props: { plan: 'pro' },
})
})
SPA navigation
Ahrefs Analytics tracks single-page-app navigations natively: the loaded analytics.js patches history.pushState and listens for popstate, firing a fresh page-view whenever the URL changes. Nuxt route changes need no extra configuration.
keystring required Your Ahrefs Web Analytics project key. Set as the `data-key` attribute on the loaded `analytics.js` script tag.
Example
Loading Ahrefs Web Analytics through app.vue when Nuxt is ready.
<script setup lang="ts">
useScriptAhrefsAnalytics({
key: 'your-project-key',
scriptOptions: {
trigger: 'onNuxtReady'
}
})
</script>