Adblockers eat pages called "analytics"

[andrewmclagan]

What version of Next.js are you using?

10.0.7

What version of Node.js are you using?

node:13-alpine

What browser are you using?

Brave (chromium)

What operating system are you using?

MacOS

How are you deploying your application?

next start (Docker)

Describe the Bug

We have a page called pages/analytics.js where the webpack page chunk is being blocked by AdBlockers such as those included with native Brave and Safari. This page has NOTHING to do with adware or bloatware its simply a page for business related analytics in our app.

Expected Behavior

Page chunk passes adblock

To Reproduce

create a page named pages/analytics.js and load in Brave browser or adblockers.

[andrewmclagan]

See attached from Brave dev-tools

[Manc]

Isn't this more of an issue of the ad blocker? I used to use Brave myself for quite a while, but I got frustrated by the way the browser handles stuff just like this. If Next.js were to decide to make certain exceptions for certain filenames, nothing is stopping the people of Brave introducing another broad term or regex blocking something else. A good ad blocker should not work like that in my opinion. Although it is probably not your preferred solution, I think the easiest and safest option would be to rename the page and file a bug with Brave.

[andrewmclagan]

Agreed - closing.

[shuding]

A work around for this is to use Next.js rewrites (https://nextjs.org/docs/api-reference/next.config.js/rewrites) to rename the route. You can create the page as pages/dest.js, and then use rewrites to map /analytics to it:

{
  source: '/analytics',
  destination: '/dest'
}

With that, the resource won't be named as analytics-[hash].js and you can still access it via /analytics.

[ZLevine]

This is still a bigger issue for some of the more popular ad blockers, not just Brave Browser; for example, uBlock Origin will block the aforementioned file as well as any route containing ads.

Let's say someone has a marketing or data science site. They might have an "analytics" or "ads" category and build their URLs out for SEO/organizational purposes as such:

https://example.org/ads/some-blog-post-about-facebook-ads
https://example.org/analytics/some-blog-post-about-data-analytics
https://example.org/services/advertising
https://example.org/dashboard/reports/ads
https://example.org/dashboard/analytics

In all of these cases, the JS will get blocked by the most popular ad blockers.

The proposed workaround above is a bit unwieldy since it requires the user to always create alternate routes first and then rewrite them; this becomes even more unwieldy if the data is coming from a source such as Netlify CMS or Wordpress where someone might create an arbitrary post/page/category using one of these slugs without a corresponding code change.

Perhaps a more permanent fix would be the inverse of the proposed workaround, where we could build an internal map of terms and rename the resources themselves based on that. This way, we could create pattern matches for terms like analytics.* or ads.* and have those resources rewritten using some sort of generated UUID or something instead.

I know much of Next.js relies on the resources being named a certain way and that this isn't an easy or simple ask, just trying to keep the conversation going. :)

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.