Vercel (previously zeit.now) is a great platform to host personal websites/blogs, and this is where this blog is also hosted on ; )
Vercel offers Serverless Functions for free with generous usage. You can use Serverless Functions to handle user authentication, form submission, database queries, custom slack commands, and more.
Serverless Functions Usage
We can use serverless functions in currently supported languages like Node.js, Go, Python and Ruby. These small pieces of code are placed under
/api directory of the project.
HTTP Headers used by vercel
Vercel by-default uses some Request Headers which are sent to each deployment for each request, and can be used to process the request before sending back a response.
Basic Analytics 📉
Most of the times we use 3rd-party analytics services such as Google, for getting site analytics, but because of ad-blockers and extensions such as Privacy badger, we hardly get this info. Also this provides users to not track all over the internet just because they visited our website, protecting some of their privacy.
By this you may collect the number of actual visits your website gets (with clients having js enabled), and also use it with data analytics to understand which page/article got most visits, at what time and which part of the globe, yay !
So for basic analytics we are going to use
Serverless Functions and
HTTP Headers as you might have guessed.
Part 1: Getting info
For each request sent vercel sends some HTTP header listed here: https://vercel.com/docs/edge-network/headers#request-headers
When logged an actual request in dev environment we can see what all headers are present here:
From all of these headers, user specific headers which can be used are:
(same as x-real-ip) ex. 184.108.40.206
dnt is do-not-track header :p
ex. 1 or null.
User-Agent Header shows the device and browser info ex.
Mozilla/5.0 (Linux; U; Android 10; en-us; Redmi Note 7 Pro Build/QKQ1.190915.002) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/71.0.3578.141 Mobile Safari/537.36 XiaoMi/MiuiBrowser/12.4.1-g
Accept-Language Header show info about user’s preferred languages. ex.
so these headers provide a pretty basic info about the user …! We can further use services such as IP Geolocation to get more location info for the IP.
Part 2: Processing info and Storing it
For processing the data, we are going to use Node.js with a single serverless function, and store the received data in MongoDB.
For this create a folder named
/api in root of your project folder and add file name
analytics.js inside ‘api’ folder, so that the folder structure looks like :
. ├── api │ └── analytics.js ├── package.json └── vercel.json
Below is the basic code that we are going to use.
The above code “parses user info headers” from any
POST request and ignores it’s data.
This does not affect page load times and keeps,
working in background !
So we just need to include a simple
js script at end of
so that it sends a blank POST request to
https://<your domain>/api/analytics, hosted on vercel.
For this code to work we also need a
package.json file and add dependencies to it.
You can checkout the
final code template here: https://github.com/adityatelange/vercel-basic-analytics
We also need to setup the environment variables mentioned in the code, so that mongoDB is connected without any hassle.
Read about how to add those here: Vercel Docs | Environment Variables
Env variables are:
Great !!! 🎉
After we have added all these, we are all set up and we can push the website to vercel and let it collect basic user analytics. :P
This is how your stored data in MongoDB might look like: