Issue with adblocker

[itsJoKr]

The uBlock origin adblocker by default will prevent downloading of ./assets/packages/mixpanel_flutter/assets/mixpanel.js which in turn will make the app not start.

Is there any workaround for this?

[SNce]

I'm facing the same issue. seems like the cause for this issue as well.

[rain2o]

I'm running into the same issue. Unfortunately, it's not simply a case of nothing being tracked due to the script being blocked, but as you said it causes the entire app to fail to start with errors like flutter is undefined or something along those lines.

I tried to treat Mixpanel as nullable using null checks everywhere to avoid the entire app failing, which did not work.

A potential solution could be to allow us to specify a unique name for the asset so that we can name the script something random that will not likely be blocked. It's also vital that the code within this module never assumes Mixpanel is present, as it seems that's part of the issue here.

My workaround

I have found a workaround that seems to work for me for now, if anyone else is interested.
Disclaimer: My app's domain is managed in Cloudflare, and I'm using Cloudflare Workers for this workaround. You can use other services to proxy the file as well if not using Cloudflare.

I've created a Cloudflare Worker which simply fetches the mixpanel.js asset:

addEventListener("fetch", (event) => {
  event.respondWith(
     fetch("https://{YOUR_APP_URL}/assets/packages/mixpanel_flutter/assets/mixpanel.js")
  );
});

Then added that to a Worker Route on my website in Cloudflare. Something like https://{YOUR_APP_URL}/asset/randomname.js.

Then in my index.html file, I added this instead of the mixpanel.js script:

<script src="./assets/randomname.js"></script>

So far it seems to be bypassing the adblocker plugin. This is a common practice some analytics tools use to bypass ad blockers in order to get more accurate analytics.

If it helps anyone trying to do this, I followed the steps in this article to figure out how to do this.

[davidmigloz]

uBlock blocks the loading of mixpanel.js which makes the Mixpanel Flutter SDK to throw a PlatformException:

My current workaround is to have a wrapper around the Mixpanel SDK with two implementations:

• One that proxies the call to the Mixpanel SDK
• One no-op implementation that does nothing

Then I wrap my Mixpanel.init() call in a try catch. If no exception is thrown I use the first implementation, otherwise, I use the no-op implementation.

In that way the web app does not crash anymore and remains functional, and at the same time, I respect the user choice of blocking Mixpanel.

[manoletre]

@rain2o's workaround didn't work for me. So after a couple hours of suffering, here is came up with:

1. Copy the contents from the /assets/packages/mixpanel_flutter/assets/mixpanel.js file and add them as a <script> tag inside the index.html file. This is a bit suboptimal, as it might change in the future and break - but it is the only solution that I figured.

2. Follow the instructions of tracking via proxy and setup a proxy server.
   Setting up a proxy server sounds a bit scary, but it only took me a couple minutes by using the one-click-deploy with google cloud.

3. I then replaced the mixpanel links (//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js) in the <script> tag I copied in step 1 with <PROXY-SERVER-DOMAIN>/lib.min.js

Mixpanel is still blocked by the server, but at least the whole page does not break.

@ Mixpanel Team: it would be great if using a proxy using dart would be possible. This could help solve this issue and avoid the blockers from messing up the stats :)