How to eliminate ad blocker interference with Mixpanel JavaScript SDK

[enague]

Ad blockers can disrupt the data analytics of websites and applications that rely on client-side trackers like the Mixpanel JavaScript SDK. This interference can impact businesses' ability to understand user behaviors accurately. In this article, we'll show you how to solve this problem in less than five minutes by creating a proxy server between your app's tracking code and Mixpanel's API. This proxy will ensure that ad blockers don't interfere with your data.

1. Understanding the Problem

To begin, let's understand why ad blockers disrupt the tracking data:

Ad blockers maintain a list of URLs associated with advertising, tracking, or pop-up services.
When a user with an ad blocker installed accesses a webpage, the ad blocker checks if any requested URLs match those on its blacklist.

If a match is found, the ad blocker blocks the request, preventing data from reaching its destination. This interference can be a significant problem, especially with more than 40% of global users employing some form of ad-blocking extension.

2. Create a Proxy Server

The solution to this problem involves setting up a proxy server between your application's tracking code and Mixpanel's API. This proxy will act as an intermediary, ensuring smooth communication without triggering ad blockers. We have created a simple-to-use proxy server template for you.

Follow these steps:

1. Visit the GitHub repository here: https://github.com/mixpanel/tracking-proxy. This config redirects any calls made to your proxy server to Mixpanel.
2. Choose from one-click deployment options for various cloud providers, or follow the manual deployment instructions.
3. Review the source code to ensure it meets your security and customization requirements.

The proxy server is based on Nginx, a widely used open-source web server. It will seamlessly route traffic to Mixpanel's API while bypassing ad blockers.

Please note that this proxy server resolves requests to api.mixpanel.com, which points to Mixpanel's primary data centers in the United States. If you are using Mixpanel's EU Data Residency, you will need to change the nginx.config from api.mixpanel.com to api-eu.mixpanel.com.

3. Configuring the Proxy Server

Now, let's configure the Mixpanel SDK to route its requests through the newly created proxy server. This is a simple process:

1. Locate the Mixpanel SDK initialization in your application's source code (where mixpanel.init() is called). Refer to this guide if you are unsure where that is.
2. In the initialization options (typically the second argument), add a key-value pair:
   • Key: API_host
   • Value: The URL of your proxy server.

Additionally, if you included the Mixpanel library in your app using an HTML snippet. Define the MIXPANEL_CUSTOM_LIB_URL global variable before the HTML snippet.

4. Testing the Solution

With the proxy server and configuration in place, you can test your application even with ad blockers enabled. Your tracking data should flow seamlessly to Mixpanel without interference.

1. Save your changes and restart your server.
2. Open your application in a browser with ad blockers enabled.
3. Use the developer console to interact with your app and observe that events are sent successfully. Alternatively, you can also view those events in your project’s Events tab.

In conclusion, by implementing a proxy server and configuring Mixpanel to use it, you can effectively eliminate ad blocker interference with your analytics data. This ensures that you can make data-driven decisions with confidence and improve the quality of your client-side tracking data. Furthermore, If you wish to load test your proxy, see mp-proxy-load-test for a load testing script with artillery to see how this can work in production.