How to track and display profile views on GitHub
As part of recent design changes, GitHub has introduced READMEs for profiles. By creating a repo with your name and adding
README.md file with markdown to it, you can now add a rich description of yourself.
Here is an example of how it looks like:
Unlike the old plain-text bio field, the new feature supports external links and images. This is where it gets interesting.
Tracking profile views
Since Github's markdown can display images from external sources, you can now track and display views of your profile.
To do so, you need to host an image on your server and display it via Markdown syntax:
On the server-side, each image request can be treated as a view of your profile. The rest of the story is simple — you need to store a counter in the database and return an SVG image with the number of views as a response. Of course, there will be some extra requests from bots, but having such statistics is better than nothing.
To prevent IP and User Agent leaking, GitHub caches all images via special proxy. To avoid being cached on Github servers after the first image request, your image must specify cache headers or return non-200 response (e.g., an HTTP 404 page).
Here is the HTTP header that disables caching:
Cache-Control: max-age=0, no-cache, no-store, must-revalidate
This is not something new for repositories since they had this ability for a long time, and GitHub allows this kind of use of images for interactive badges. Unlike profiles, repositories have access to traffic statistics too.
Here is how it can look like when you have access to the new feature:
For a lot of people, allowing external images on their websites sounds like not a big deal. I've been using this technique to track profiles views on various platforms for more than 10 years. I've seen how recruiters constantly refresh my profiles when they need to make a decision :).
Unlike GitHub, most of them don't even bother proxying the image to hide IP, referrer, and browser agent. If you want to allow external images on your site, you must proxy them and hide everything about a person who requested it.
A person with bad intentions can trick a victim into opening your profile that looks completely legit and detect his IP and a browser. You can also set a cookie to track user visits on other websites, but browsers will soon stop doing it.
A single-pixel image can provide you a lot of information. This is how the whole AD industry works when it tracks your visits on various websites.
According to my tests, profile views do not count as repo views, and I hope, in the future, we will be able to see traffic stats in the repository that hosts the README file.
Want a monthly digest of these blog posts?