svg image

Frustrated and bored with QR suppliers? Make your own with QRAPP

Warren

Warren

Developer

Several weeks ago we were completing a project and the client made, what we considered to be, a fairly straightforward request; “can you provide us with a single QR (Quick Reader) code which will direct customers to an appropriate app store and be trackable through Google Analytics?” After doing a little research we found several online services which would generate a ‘universal’ code, and others which would permit tracking of codes through Google Analytics but not together and not for free. So we thought that we should try making our own service during one of our monthly hack days.

 

For anyone who is unaware of what a QR code is, it is a two-dimensional barcode that is readable by smartphones and contains an encoded string. Once scanned, they may be used to display some text to the user, open a url or compose text messages, for example.

 

When planning our service we had to consider some important aspects of how QR codes are created and what limitations are placed on them in this process. For example, the longer the string encoded within the QR code, the more dots required in the image and the trickier it is to scan. So it’s good practice to keep the string, and therefore the url, short. Also, the content of a QR code cannot be changed once generated, so one must make sure their are no errors, such as an incorrectly typed url, before releasing the QR code - especially to print media.

 

The main challenge we had to overcome was with the integration with Google Analytics. Data on the user of a QR code can be tracked by Google ‘Campaigns’, which can extract relevant user information from an incoming external url. But to distinguish between user traffic and determine from where it originated often requires multiple QR codes. Managing numerous codes and their associated campaigns can quickly become a pain; for example when we consider a simple use case of directing a user to a relevant app store. Moreover, we had stipulated the use of a single code in our service and had to consider alternative approaches to code tracking.

 

The solution we came to was to generate a Dynamic QR code and utilise Google Analytics Events. A Dynamic QR code, is simply a QR code that points to a static url, that hosts the actual information we want to give the user. At this static url we can perform some logic which detects the user-agent (the users device) and redirects the user to the relevant app store. At this point we are also able to log event data to the client’s google analytics account.

 

When generating the QR code a client simply enters the various urls to their app on the main device platforms, and their Google analytics tracking code (if they have one) and hey presto a single trackable QR code is created and ready to download. This approach comes with some added advantages, in that the static url is formed of a hash, with a size we can control ensuring the generated QR code has fewer dots making it easier and quicker for phones to scan. A client can also potentially edit their information without having to re-generate the QR code, saving time and money by not having to replace the old code.

 

To complete this service within the timeframe of a day long hack we used the Laravel framework and a couple of PHP libraries for generating the QR code and the user agent detection. We also had some time left over to add some cool additional features allowing the client to customise the QR codes file type (SVG or PNG), size, colour, and fidelity. We then released the service QrApp, which completed our day long hack.

 

Oh, and if you have a need to generate a free QR app then please visit www.qrapp.uk.

qr
17th September 2016
Dash line

More Technical

Who's the driver?
Daniel

Daniel

Developer
Beginner's not-a-guide to Laravel - 4 things that will save you time
Paul

Paul

Developer
Store and share business documents securely
Yong

Yong

Developer