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.

Static web hosting with AWS S3 and AWS Route 53

Initially I hosted my website on 000webhostapp.com which is a "free" web hosting provider with a banner (z-index 999) at the bottom, through I was able to remove it with a simple javascript

Third party URL framework

Sometimes it is required to provide 3rd party URL in your application may be for providing some reference or libraries you need in your application, etc. But we it is possible that those third party URL might break and you have no control over it, and it leaves bad impression on the customers visiting your application. So it is required to keep track of any broken URL and update the support team to take required action, may be find a new link and update it in application.

If an application is small it is manageable but as application grows you can scan whole application daily to check if any link is broken, either you have to use web-crawler or you have to maintain all the given URLs in some database.

I propose a framework which will maintain all the given URLs and update the support team as soon as link is broken to take required action.

  1. Actions might include, deleting a webpage, or
  2. Adding new URL for a reference.

A programmer wants everything in his finger tips and can not wait for lazy windows searching, I had a problem for start menu which lags for finding the available applications https://www.howtogeek.com/howto/28111/make-windows-7-start-menu-search-find-your-applications-faster/ how to deploy static web site in s3