Redirect / rename scripts?

[GavanWilhite]

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

[ts-web]

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?

[tobiaslins]

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 🔜

[TotomInc]

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.

[ccbikai]

Look here, I found the perfect solution.

https://dev.to/ccbikai/jie-jue-vercel-analytics-bei-adblock-ping-bi-wen-ti-4mkn

[RusseII]

@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 !

[FedeMontanari]

@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!

[tomtitherington]

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.