Prevent web application analytics being blocked by ad blockers!

I am not a big fan of ads which keeps popping up when I visit any website, to block ads I started using Adblock Plus (ABP), taking ad blocking to the next level, I have mapped all the ad proving websites to 0.0.0.0 in my hosts file (example). But Adblock plus also prevents Google analytics for tracking website traffic and analyzing user information. I always keep track of what's going on in my application and my website, when it came on analyzing traffic on my page I realized Adblock plus is not helping me and even if I disable ABP in my browser, others will not and this will prevent me from tracking users of my page. I was wondering how to trick Adblock plus and find a way around.

One way of doing it is by creating a proxy server if Adblock plus does not block your domain, and allow tracking information to be sent to Google analytics through your server.

  • Create Google analytics account

    First set up Google analytics account and get the script that you have to paste in your page (at the bottom). Follow this article to set up your analytics account with Google.
  • Free server to run analytics

    If you have your own hosting and not looking for free web hosting, you can skip this step. Once you are done with setting up Google analytics, you can create free account in Heroku, it provides Platform as a Service, also handles the infrastructure operations for you. So you don't need to worry about the different components to build up your infrastructure (load balancers, machines, etc.) but can instead very often deploy your whole application with a simple git push. It supports multiple languages like NodeJS, Ruby, Java, PHP, Python, Go, Scala, Clojure. But with free account you will get 550 free hours of 1 worker dyno (server) without credit card details ;) with credit card you will get more 450 hours.
  • Create a proxy service

    This service will ack like a link between your application and Google analytics. Add following JavaScript in your html page:
    								
    
    
    								
    							
    Create a server file server.js (you can name it whatever you like) and copy-paste below code and deploy it in Heroku dyno. Follow these commands to deploy it.
    							
    var express = require("express"), 
    proxy = require("express-http-proxy"), app = express();
    
    app.use(express.static(__dirname)); // serve static files from cwd
    
    function getIpFromReq (req) { // get the client's IP address
    	var bareIP = ":" + ((req.connection.socket && req.connection.socket.remoteAddress)
    		|| req.headers["x-forwarded-for"] || req.connection.remoteAddress || "");
    	return (bareIP.match(/:([^:]+)$/) || [])[1] || "127.0.0.1";
    }
    
    // proxying requests from /analytics to www.google-analytics.com.
    app.use("/analytics", proxy("www.google-analytics.com", {
    	proxyReqPathResolver: function (req) {
    		return req.url + (req.url.indexOf("?") === -1 ? "?" : "&")
    			+ "uip=" + encodeURIComponent(getIpFromReq(req));
    	}
    }));
    
    app.listen(80);
    console.log("Listening on port 80");
    							
    							
  • For Java application, check out this repository to create proxy service, HTML JavaScript will be same, NodeJS part will change.