How to create a simple QR generator in html/js with opening statistics tracking
This post will show you how we created a simple QR generator with statistics using Google QR API and a couple of HTML files. Here’s the schema:
The QR Generator .html
First, we have the “qr_generator” it's a simple file with a form to write the destination URL as well as information and parameters that we want to have statistics about.
In our case, we want to add a parameter indicating the id of our customer and a free identifier that I called medium_post so all people using this QR will generate a statistic saying it’s from the post.
And the most important, the URL. We need to write it down exactly as we want it to be when the user reaches the Final Website, with its UTM or other custom parameters, in order to make actual trackers work.
As those previous parameters are “burned into the QR” double and triple check it and make sure everything works. As it will be probably will be placed in physical support, think about what can happen if you have a mistake or if someone uses it in 2 years.
How the algorithm work
We have multiple levels and steps and each one with its functionality, we play with encoding and redirect in order to deliver the desired parameters in each place. It remembers me of the Russian dolls.
Well, first we need to send the user to the redirector. We do so by simply directing the request to that URL https://your.domain/redirect.html.
Then, as we need to have the final url and the parameters we add them in the url parameters. We did it like this: https://your.domain/redirect.html?url=https://my.final.url?with=params&identifyier=medium_post.
And finally use the Google API to retrieve the code.
The real algorithm (Russian dolls approach)
If you try to do this and use the Google API to get the code you will struggle with parameters and URL encoding, that's because we need to go through 3 steps of requests with its subsequent problems.
So the real algorithm, using the Russian dolls approach (don’t blame me plz) consists of starting from the final URL and start building from here the other requests. So, I’ll use the example I used in the QR.
The Redirector .html
This file is the one-in-the-middle its job is to:
- Take the parameters from the url
- Send the statistic with them
- Redirect to the url recieved also in the parameters
Redirector algorithm
The complete form to create the QR
It will actually create QRs but it will not redirect you to the proper page.
