Minimal Analytics are getting blocked by Ad Blockers + Firefox Private Mode

[CharbelNemnom]

Thank you @jahilldev,

I have created the Analytic Endpoint, but still, the Firefox Private Mode browser is not working.

Here is my website: https://charbelnemnom.com

You access it via Firefox Private Mode and then open the web developer tool, then click on Network.
Yes, you will see a Warning message on the page, but you can disregard it.

Refresh the page and then you can see POST: blog.charbelnemnom.com/collect is blocked.

If we look at the Headers, we can see the following:

Status: 302
Found: VersionHTTP/3
Transferred: 885 B (0 B size)
Referrer Policy: strict-origin-when-cross-origin
Request Priority: Lowest

If I access it from a normal browser, I can see real-time data so the endpoint that I created is working.

I checked https://dariusz.wieckiewicz.org/ with Firefox Private Mode, and he was able to bypass the Ad blocking mode:

Status: 204
No Content: VersionHTTP/2
Transferred: 652 B (0 B size)
Referrer Policy: strict-origin-when-cross-origin
Request Priority: Lowest

More details here: https://dariusz.wieckiewicz.org/en/minimal-google-analytics-4-snippet/#minimal-analytics-4---masking-hiding-requests

However, I am not using https://www.netlify.com/, (https://docs.netlify.com/routing/redirects/redirect-options/#query-parameters), so I cannot configure this 200 status code,

I am redirecting with 302 status with Cloudflare Workers.

https://blog.charbelnemnom.com/collect ==> https://www.google-analytics.com/g/collect

Any help is highly appreciated.

Many Thanks!!!

[jahilldev]

Hey @CharbelNemnom,

So comparing the two pages you've listed above, the two primary differences I see are response code (as you've indicated), and more importantly, the existence of a Location header in your implementation.

I believe the primary issue here, is that given Firefox can "see" the destination server via some mechanism, it's categorising the request as tracking, e.g google-analytics.com.

I'm wondering whether you could look into Cloudflare "Reverse Proxies", or perhaps some other mechanism they provide which could mask the origin of the response, perhaps returning a 2xx of some kind?

You fundamentally want your endpoint to behave as if it's generating the response / handling the request itself, rather than (appearing, at least) like it's simply forwarding it on.

Aside from that, I don't have a whole lot else to add.

My suggestion would be; If Cloudflare can't provide the solution you need, find someone that does.

Hope that's marginally helpful!

Thanks

[CharbelNemnom]

Thank You @jahilldev for the feedback!

I will dig deeper and see if I can do this with Cloudflare or find another solution.

I will keep you updated.

Thanks!

[jahilldev]

@CharbelNemnom Sounds good! 👍

[CharbelNemnom]

Hello @jahilldev,

Quick question please, shall we put a comma at the end after analyticsEndpoint, like this: '/my/analytics/endpoint/can/be/called/anything',

Here the code that you shared with me without comma:

window.minimalAnalytics = {
  trackingId: 'G-XXXXX', // <-- replace with your GA4 property ID
  autoTrack: true,
  analyticsEndpoint: '/my/analytics/endpoint/can/be/called/anything'
};

Thank You!

[jahilldev]

Hey @CharbelNemnom,

The comma is totally down to you, it won't have any impact on the execution of the code.

By convention, some linting tools add it in for you, or complain when you don't.

I freestyled the code in my message, so it was one less key stroke!

Bottom line, up to you and your teams conventions 👍

[jahilldev]

Hey @CharbelNemnom,

I'm going to close this for now, as it seems like you're all set.

Feel free to post here if you have any further questions, or help with @minimal-analytics 👍

Thanks!