Tracking usage of QR codes by smartphone users

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:

With Borges / Alberto Manguel.

http://m.ulrls.lon.ac.uk/record=b2941947~S24

To this:

With Borges / Alberto Manguel.

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?)

With Borges / Alberto Manguel.

http://senatehou.se/b2941947

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:

With Borges / Alberto Manguel.

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.

QR codes in the library catalogue

Really quick introduction

QR codes are a type of 2-dimensional barcode that can be used to encode various information. A QR code looks like this:

QR codes have various applications along the lines of mobile tagging: embedding information on something in a way that can be understood by a smartphone. My colleague Adrian blogged about them a few days ago.

You will likely appreciate the explanation that the above is a link to Hackney, that rose-red empire : a confidential report / by Iain Sinclair in our mobile catalogue.

Why we wanted to do this

The reason is to embed some information about the item on the bibliographic record screen that is useful to a smartphone.

We’ve noted many readers making use of smartphones to record shelfmarks of items of interest versus pen and paper. It’s noticeable that more readers are coming to the enquiries desk to show us a record on a smartphone with a query about it. We’re not sure how readers are making the leap from the catalogue terminal to the smartphone though. Aaron Tay makes this observation:

These days, it’s very common for users to show me library catalogue records (call numbers, titles) on their hand phones when I’m at the desk. This seems to be quickly replacing scribbled notes on paper. I’m never worked out the courage to ask them though, how they got the information onto the handphones

Our assumption is a URL would be a useful thing to encode and as it’s for use on a smartphone, a link to our mobile catalogue might be the most appropriate thing. Have the right QR code app installed and you can snap away on the catalogue and end up with a list of items to go and find them (wayfinding in our building is another blog post).

I haven’t actually made this live yet: it will be live tomorrow!

How to do this in the Innovative ‘classic catalog’ / WebPAC

Here’s how. On your WebPAC server put this Javascript in /screens/qrcode.js:

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);
        document.write('<img src="http://chart.apis.google.com/chart?cht=qr&chs=120x120&chl='+qrairpacstub+qrrecordid+'" alt="QR code for this record" title="QR code for this record" />');
        document.write('<br/><a href="http://www.senatehouselibrary.ac.uk/library/helpandsupport/qrcodes.shtml">What's this?</a>');
}

Above, “recordnum” is the ID of a link inserted into the bib_display.html using the WebPAC <!–{recordlink}–> tag. This produces a link like this in the page markup:

<a id="recordnum" href="/record=b3112148~S1"></a>

In your INSERTTAG_INHEAD wwwoption, insert this:

INSERTTAG_INHEAD=<script language="JavaScript" type="text/javascript" src="/screens/qrcode.js"></script>

On your bib_display.html, put this JS where you want the QR code:

<script type="text/javascript">
<!--
linkto_catalog_qr();
-->
</script>

An alternative approach is to put the JavaScript to generate the markup into the WebBridge bib panel. Rather than using WebBridge to create a link, you embed the little chunk of JavaScript that generates the QR code for you. This idea is from Natalie Pollecutt at the Wellcome Library who posted about it on the IUG mailing list.

Wellcome Library haven’t made this live, but you can see it on their test / “staging” port, for example: From ‘cuckoos’ to ‘zombies’ : the changing portrayal of lobotomy in American popular fiction from 1960-2010 / by Amy Chandler.

Result

Hackney, that rose-red empire : a confidential report / by Iain Sinclair.