FireTraffic

July 11, 2017

Project source code can be found here

I’ve been a user of GitHub Pages for a long time. It’s a really great service. You get a free website, with perfect uptime, and you’re even able to use a custom domain. It’s perfect for developers who want to have their own personal space of the Internet. There is a downside though. Because you’re not able to get root access to the web server (that’s unrealistic), you’re not able to implement a load of features that you may want to.

One such feature you will lack is the ability to log visitor traffic. Want to see if recruiters are coming to your website? Want to see if your friends who said they’d visit actually do? You won’t be able to. Or maybe……...maybe you can.

I wrote FireTraffic as a means of tracking when people visit my website. Admittedly it may be the smallest amount of code I’ve ever written to a GitHub repo, but there is a lot of power to it and you can configure it however you like. Setup is very simple, and will be explained below.

Part 1: Setup Firebase

Go to Firebase.com. Firebase is an awesome set of tools that you can use in your projects. It provides a variety of features including authentication, a non-relational database, and more. Once you’ve created an account (It’s a Google subsidiary so a Google account will do), click the “Add Firebase to your web app” button. This will show you a couple bits of information including your api key, database URL, project ID, and more. If you are configuring FireTraffic for your website you are going to want to copy all of this information and paste it into the firebase.js file.

Your next task is counter intuitive, dangerous, and should not be done in ANY other projects. I will explain why we do this in the final section. Go to your “Database” tab and go to your DB rules. In here set the “.write” parameter to equal (==) null. Again, I will explain why later.

Part 2: Setup your Website

After your Firebase is all setup you need to configure your website. This is very easy, simply paste the following HTML near the beginning of each page you want to track.

<script src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js'></script>
<script src='https://www.gstatic.com/firebasejs/4.1.3/firebase.js'></script>
<script src='/js/firebase.js'></script>
<script src='/js/FireTraffic-DB.js'></script>

(Remember to change the path to your JavaScript files).

How Does it Work?

FireTraffic works by having the client (the user's browser) contact our Firebase database every time they visit the website. Through this, we can see when people are browsing every page. Information will be stored in Firebase based on the pathname of the page, so for example, you will see the date, time, ip, city, and country of every visitor who visited your home page. The majority of information uses the API for ip-api.com.

When Does it Not Work?

So for how cool this is, when won’t it work? There are a couple instances in which this won’t help you. The first is when the user is using NoScript, a plugin that disables JavaScript in the browser. Due to the fact that this whole application relies on JavaScript, it makes sense that this is basically required. The second issue is that you won’t be able to track when bots access your website and don’t render the JavaScript (this is almost a feature). The majority of bots will just scrape HTML rather than render JavaScript, and as a result they won’t be logged.

The other concern is that you need to be willing to get dossed at a moments notice. That was why I told you you have to allow write access by anyone. Because anyone on the internet can come to your website, and you’re trying to log everybody coming in, theoretically if a massive group of people started trolling your site, you’d get a massive influx of data. That’s probably the greatest downside.

That being said, I think the rewards greatly outweigh the negatives. With this installed on your website you can monitor the traffic without traditional services such as Google Analytics!