How to Bypass Ad Blockers for Vercel Analytics in Nuxt
This article goes over how to bypass ad-blockers for Vercel Analytics in a Nuxt application.

Search for a command to run...
This article goes over how to bypass ad-blockers for Vercel Analytics in a Nuxt application.

No comments yet. Be the first to comment.
This article goes over how to register custom Vue directives globally in a Nuxt 3 application.

This post goes over how to get started with Nuxt Content to create a minimal blog, and how to work with remote markdown files.

A Simple Introduction to the JavaScript Fetch API

Understanding HTTP Requests in JavaScript

Vercel Analytics offers a seamless & privacy-friendly way to track page views and performance for apps hosted on the platform. However, many ad blockers and VPN providers recognize and block requests to known analytics endpoints, such as /_vercel/insights/script.js, which could result in missing valuable data from users.
By proxying your analytics through a unique, project-specific endpoint rather than the default one, these blocklists can be avoided. Nuxt allows you to create custom endpoints directly within your application with its powerful server middleware feature powered by Nitro. You can use this feature to proxy Vercel Analytics requests through a unique path, effectively disguising them from most blockers.
First, set up a server middleware in your Nuxt project that intercepts requests to a custom path (e.g., /my-analytics/) and forwards them to the real Vercel Analytics endpoint.
Create a file at server/middleware/analytics-proxy.ts (Nuxt will auto-register it as a server middleware):
// server/middleware/analytics-proxy.ts
import { defineEventHandler, proxyRequest } from "h3";
export default defineEventHandler(async (event) => {
// Only handle requests starting with your custom analytics path
if (event.node.req.url?.startsWith("/my-analytics/")) {
// Replace your custom prefix with the real Vercel Analytics endpoint
if (event.node.req.url?.startsWith("/my-analytics/")) {
const targetPath = event.node.req.url.replace(
"/my-analytics",
"/_vercel/insights"
);
return proxyRequest(event, `https://yourdomain.com${targetPath}`);
}
});
This middleware listens for requests to /my-analytics/ and proxies them to the actual analytics endpoint.
Next, update your app to load the analytics script from your new path. In your main layout or a Nuxt plugin, use the useHead composable:
// app.vue
useHead({
script: [
{
src: "/my-analytics/script.js",
async: true,
"data-endpoint": "/my-analytics"
}
]
});
This ensures your app loads the analytics script from the custom path, which is then transparently proxied to Vercel.
Since the script is loaded using useHead, the @vercel/analytics package is no longer needed.
You can visit the network tab from your browser’s developer tools to confirm that requests to /my-analytics/script.js and related endpoints are not being blocked by ad blockers. If they are, you can try changing the custom path to something even less conspicuous.
That's it. Thanks for reading.