Open GavanWilhite opened 1 year ago
Same issue here. I set up @vercel/analytics
in my Next.js site , but uBlock Origin blocked it, probably because of the word "insights".
It seems like the rewrites
feature can mask/proxy the _vercel/insights/script
url as described here, but the Analytics
component seems to have no option to configure the URL for where it sends the analytics. Can the team add that option?
We're automatically rewriting analytics to the 1st party intake on the same domain. After almost a year they started blocking those requests in some adblockers. We don't support custom rewrites yet. more on that topic hopefully 🔜
Sorry to resurrect this old issue but, @tobiaslins could you please explain a bit more about this?
I was wondering if it was now possible to rewrite/redirect Vercel Analytics endpoints, using Next.js redirects config.
I'm currently using PostHog as an alternative, which supports redirects with Next.js and seems to works well, but I would really prefer to stay on Vercel Analytics if you provide us the redirect alternative.
Look here, I found the perfect solution.
https://dev.to/ccbikai/jie-jue-vercel-analytics-bei-adblock-ping-bi-wen-ti-4mkn
@TotomInc @ts-web @GavanWilhite
I got this working with nextjs, but should work with any framework.
CustomAnalytics.tsx
const isDev = process.env.NEXT_PUBLIC_VERCEL_ENV === 'development'
const beforeSend = (event: string) => {
console.log('add custom beforeSend logic here')
return event
}
const src = isDev
? 'https://va.vercel-scripts.com/v1/script.debug.js'
: '/growth/script.js'
if (typeof window !== 'undefined') {
window.va?.('beforeSend', beforeSend)
}
return (
<>
<Script id="meow" strategy="afterInteractive">
{`window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };`}
</Script>
<Script src={src} data-endpoint="/growth" strategy="lazyOnload" async />
</>
)
}
in next.config.js
async rewrites() {
return [
{
source: '/growth/:match*',
destination: 'https://dappling.network/_vercel/insights/:match*', // this didn't work with just the relative path for some reason any not sure why
},
]
}
Enjoy! LMK if you have any problems getting it working, happy 2 help out !
@RusseII
I've been trying to wrap my head around this issue, searched all over and can't seem to make it work for me.
Can you explain a bit more on how your example works?
Is the CusomAnalytics.tsx supposed to return a usable component? If so where is this component supposed to be injected?
Some analytics solutions/providers do something very similar to your proposed solution like Posthog but my knowledge is very limited to implement it in my own way.
Thanks in advance!
I tried the approach described by both @ccbikai and @RusseII but was still blocked by the client.
Custom analytics component that I import into my root layout.
import Script from "next/script";
const AnalyticsEmbedder = () => {
return (
<>
<Script id="ticker" strategy="afterInteractive">
{`window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };`}
</Script>
<Script
src="/ticker/script.js"
data-endpoint="/ticker"
strategy="lazyOnload"
async
/>
</>
);
};
export default AnalyticsEmbedder;
My next.config.mjs
file.
/** @type {import('next').NextConfig} */
const nextConfig = {
trailingSlash: true,
async rewrites() {
return [
{
source: "/ticker/:path*/",
destination: "https://mortimerhq.com/_vercel/insights/:path*/",
},
];
},
};
export default nextConfig;
This results in a 308 Permanent Redirect from the GET request to https://www.mortimerhq.com/ticker/script.js
. Maybe I've misunderstood, but I thought that rewrites were not meant to expose the destination URL ... am I doing something wrong?
For reference, I'm using trailingSlash: true
after reading this issue but it makes no difference.
So, Vercel Analytics gets blocked by popular adblockers, is there a way to do something similar to Plausible and redirect / reconfigure the name of the script?
https://plausible.io/docs/proxy/guides/nextjs