Recently I added QR codes to the Senate House Library catalogue hoping to improve user experience for smartphone users. In true “dogfooding” style I have made a lot of use of it myself, but I need to see more data. One thing was missing was any analytics tracking for smartphone users recording these codes and following them into the mobile catalogue.
Tracking QR code use
I realised I could do this by adding parameters to the QR code URLs that would be picked up by Google Analytics: Analytics Help – How do I tag my links?
I tweaked the Javascript generating my markup to insert the required parameters utm_source, utm_medium, and utm_campaign:
- Campaign Source (utm_source): webpac
- Campaign Medium (utm_medium): qr
- Campaign Name (utm_campaign): mobile
Values used can be whatever you want, I’ve tried to keep them short but meaningful. You can then track visitors under Traffic Sources – Sources – Campaigns in Google Analytics.
Adding complexity
Being able to track use of this service is very helpful, but providing more information in the QR code increases the complexity of the code and makes it more “dense” and “busy”. Though I’ve had no problems with this on my phone this could cause problems for older smartphones with lower-resolution cameras. My quick solution is just to bump up the size a bit as this makes the QR code easier for the smartphone to read.
For comparison including a longer URL takes you from this:
http://m.ulrls.lon.ac.uk/record=b2941947~S24
To this:
http://m.ulrls.lon.ac.uk/record=b2941947~S24?utm_source=webpac&utm_medium=qr&utm_campaign=mobile
As these QR codes are meant for a mobile phone camera to direct a Web browser to a page, I thought the URL itself need not be “cool”, bookmarkable, or even very human readable. One option is to shorten the URL as it is generated and encode that. Here is the result of shortening with our own shortening service. (Your library does have its own URL shortening service, right?)
That is much nicer! Better than the original link to the mobile catalogue, even.
How to do it
Actually achieving this result in the Millennium ‘classic catalog’ / WebPAC is more difficult. To do the extra step of shortening the URL you will probably need to use the API from your shortening service to first shorten the URL, then you can generate your QR code image. On the WebPAC you’re going to need to do this in Javascript.
In the WebPAC I knew I will run into problems with insecure scripts because our shortener doesn’t have an SSL certificate yet, so this will be just an example. I was able to do it using jQuery and this jQuery plugin jquery-urlshortener.js by James Robert combined with bit.ly as a shortener.
First add jQuery and jquery-urlshortener.js to your INSERTTAG_INHEAD wwwoption. I put a local copy of jQuery on our server for testing:
<script language="JavaScript" type="text/javascript" src="/screens/qrcode.js"></script><script type='text/javascript' src='/screens/jquery.js'></script><script type='text/javascript' src='/screens/jquery.urlshortener.js'></script>
Add your bit.ly API key and username to jquery-urlshortener.js.
Update the qrcode.js to request a short URL from bit.ly using jQuery and use that to generate a QR code using the Google Chart API:
function linkto_catalog_qr() {
var qrairpacstub = "http://m.ulrls.lon.ac.uk/record=";
var qrrecordlink = document.getElementById("recordnum").getAttribute("href");
var str = qrrecordlink.indexOf("=");
var qrrecordid = qrrecordlink.substr(str + 1);
var longurl = '' + qrairpacstub + qrrecordid + '?utm_source=webpac%26utm_medium=qr%26utm_campaign=mobile';
$.shortenUrl(longurl, function (short_url) {
document.getElementById('qrcode').innerHTML = '<img src="http://chart.apis.google.com/chart?cht=qr&chs=130x130&chl=' + short_url + '" alt="QR code for this record" title="QR code for this record" /><br><a href="http://www.senatehouselibrary.ac.uk/library/helpandsupport/qrcodes.shtml">What's this?</a>';
});
}
This works as a proof of concept and is enabled on our test / staging port, for example:
I am not so keen on sending thousands of requests to bit.ly every day and would prefer to use our own shortening service so I’m not making this live just yet.
