Beantin

James Royal-Lawson

Popular posts

Stop using QR codes!

This autumn the use of QR codes in advertising in Stockholm has exploded. There are more codes visible now than ever before. Unfortunately the majority of them are poorly implemented.

If the QR code doesn’t add to the user experience, don’t use them!

In this blog post I’ve collected together a number of recent examples of QR codes in the wild here in Stockholm, Sweden.

Almost every single code took me to a standard desktop website (or campaign site). Most of them led to a page that was not designed or adjusted for handheld devices.

If a fishy bites, hold on!

QR codes are not going to be scanned by a large number of people – irrespective of the hype, most people don’t know what the hell they are, don’t know how to scan them, or don’t care about scanning them.

When you get someone who does know what they are, and does bother to scan them – you want to make sure you hold on to them! This means what happens once they’ve scanned the code needs to help them take the next step in a relevant context.

Build for the context

By and large this means always think mobile when you are using QR codes. This is the context your target audience are in when they scan. Anything other than mobile-ready content or service will make their interaction more difficult. This will reduce their happiness, reduce the chance of meeting your goals, and potentially damage your brand.

QR Codes in the wild

Nokia N9

Nokia N9 advert with QR code

The code leads to the full desktop website. No handheld or responsive version available.

FV Seleqt

FV Seleqt Sugar Snaps with QR code

Scan this product packaging and you are taken to a desktop site showcasing their products.

Krusovice

Krusovich sign at an event with QR code

Leads to a page that has been designed for mobiles. The page contains a form, but there is still room for optimised it to make completion as easy and as successful as possible from a touch-screen device.

Biltema

Biltema catalogue with QR codes

Two tiny codes, very close together. One for the Android app and one for the iPhone app. They do both scan, but you have cover up one of the codes to ensure you scan the correct one.

Scan

Scan advert with QR code

I didn’t manage to get this code to scan. It was very badly positioned (right at the bottom of the advert) meaning I had to get down on my knees to try to scan it. The code was also relatively small and contained a lot of data.

Norskfisk

Norskfisk advert with QR code

Scan the code and you end up at a recipe, on a desktop web site. No mobile version.

SEB

SEB advert with QR code

Code to apply for a loan.

Stockholm Film Festival

Stockholm Film Festival programme with QR code

This year’s film festival site is really quite good, but shame they used a code that pointed straight to the desktop site. No mobile site is available, but there is an iPhone app.

Skanska

Skanska advert with QR code

This code was featured on an advert on the Stockholm metro leads to a desktop website.

Pantamera

Pantamera adverts with QR code

One of the few better implementations included in this blog post. The codes lead to YouTube videos, which serves a mobile version of it’s site (or can even open directly in the YouTube app on many mobiles).

Flickr

You can find all of these QR codes (and more) in this set on my Flickr stream.


James Royal-Lawson+ is a digital strategist and web manager based in Stockholm Sweden.

Best practice: Updating videos on YouTube

It’s not actually possible to upload new versions and “update” a video clip on YouTube. As someone who helps managers a number of websites for various clients, it’s not unusual for me to receive an email that says “Can you remove from our YouTube account. We’ve got a new version to replace it”.

The problem is that your original video has become a social content. When you posted it, it became alive. People starting viewing it, commenting on it, liking it, sharing it, embedding it.

Deleting the video ends its life. You break links, you remove comments, you will even lose some “video juice” as YouTube uses number of video (and channel) views as part of its ranking algorithm – you other videos could appear lower down in search results as a result of deleting.

What should you do?

Deleting content always has an impact, so most of the time you want to avoid it. Especially so in cases like YouTube where you have no control over where deleted pages redirect to.

Best practice tips

Here are my best practice tips for updating a video:

  • Upload your update video as a new video
  • Tag it the same way as the original, paying some attention to improving the tags at the same time.
  • Use a similar description as the original, again taking the chance to improve it during the process
  • Add it as a video comment to the original
  • Add an annotation to the old video with a message saying it’s no longer up to date and give a link to the new version
  • Promote the new version in all the ways you would normally promote a new video

Why is that best practice?

By following the above best practice you don’t lose your total “views” or the position of that video in search results. At the same time you provide useful and relevant information to people who happen to view the old video clip – you give them a link to a newer version. You’ve helped them. You’ve used the ecosystem of the web in a much better way than just deleting the old, out of date, video.

Tested: Java midlet QR code readers

QR Code readers are as easy as pie on smartphones such as the iPhone and Android-based phones. The ZXing barcode app for those platforms does a great job of decoding almost everything you can throw at it. The story isn’t quite as happy for owners of other types of mobiles who have to use J2ME/JavaME applications.

I’ve tested 7 different Java QR Code readers using a number of QR Codes (both on screen and printed) on my SonyEricsson C905. The C905 is a CyberShot telephone with an auto-focus 8MP Carl Zeiss lens. The camera is one of the best I’ve seen on a mobile. That said, scanning QR Codes with Java apps has, by and large, been an awful experience.

i-Nigma logo

i-Nigma – Best in test

Of the 7 free apps I tested i-Nigma was the only one that I can genuinely call useful. When I say useful, I mean it actually decoded every code I threw at it! It makes use of the auto focus, decodes quite quickly & keeps a history of what you’ve decoded. It didn’t made use of the phone’s flash, but it did manage to decode my low-light test code after a few attempts.

It also understood a number of different types of encoded data.

  • Contact details – offering to save the vCard to contacts.
  • Telephone numbers – offering to dial the number.
  • Email addresses – offering to send an email.
  • SMS – offering to send the SMS to the specifed number.

Everything it didn’t understand it displayed as text.

The application also offers a auto-power saving mode and the ability to recode the data back into a QR-code. You can also reasonably easily share the decode info on Facebook or Twitter. It is all in all a nice application to use.

Neoreader

It Auto-focused, and didn’t use the camera’s flash. It decoded as many codes as the test-winning i-Nigma, but what stopped Neoreader from being a joint-winner is that the application isn’t as nice to use, and it considered most things it decoded as a URLs and offered to open them – even if it was a vCard for example. It did though correctly deal with SMSes and telephone numbers.

BarcodeReader (ZXing)

This reader is the most common barcode scanner on Android phones and works really well on that platform. It auto-focuses and uses the built-in flash. There is a noticeable delay though from when you press the button to scan to when it focuses, and then to when it flashes, and then again to when it makes the shutter noise – and then finally, after what seems like a lifetime, it says if it found a code or not. A lot of time it said “no code found”. The way the user interface is designed makes you wonder whether it’s you that’s doing a bad job of taking the photo or the application doing a bad job of dealing with it.

I didn’t mange to decode any of my on-screen test codes, only the printed ones worked. This is probably due to the flash; but as there is no option to disable it, I couldn’t test that theory.

BeeTagg

Auto-focus, bit sluggish at times. Decoded most larger codes, but failed with smaller ones. It showed all types of codes as decoded text, scrolling across the screen – apart from URLs which it gave you the option of opening.

Kaywa Reader

First problem was a really long drop down list with phone models that was really awkward & slow to navigate, the second and ultimate problem was that I received an error when trying to download the software. Total failure.

Scanlife

No auto-focus. Never managed to get an in-focus scan, subsequently I never managed to get it do decode anything. Total failure.

UpCodeJava

Auto-focused but was incredibly slow at processing the picture. Most significantly it didn’t manage to decode any QR Codes at all. Total failure.

The Test Codes

I used 7 codes in my testing (although I have over a period of time tested all of the applications with more QR codes). 6 of them were generated using ZXing’s QR Code generator. 1 of them was my business card pined to the fridge in our kitchen. This code in this environment was used as my low-light test. I also printed out the MeCard contact details code.

Here are the codes, so you can test yourself:

Printed code in Low-light

Picture of a QR code in poor light

MeCard

MeCard QR Code

vEvent

MeCard

URL

MeCard QR Code

Geo-location

MeCard QR Code

SMS

MeCard QR Code

Phone number

MeCard QR Code

How to track per visit referrer with Google Analytics

Prevously I wrote about how traffic sources in Google Analytics perhaps aren’t what you think, mainly due to GA’s attribution of page views, visits & visitors to the latest source. It’s not possible using out-of-the-box Google Analytics for you to see the full referring page for each individual visit.

Use Custom Variables

It is possible to use a custom filter to see the full referrer, but it’s also possible to collect the URL of the referring site by making use of custom variables and a bit of javascript. With the same technique you can also store the search phrase for those visits that came via a search engine result page.

Google analytics search phrases

The technique described below isn’t 100% accurate, (some situations cause the referring URL not to be passed on; such as opening links in new windows in Chrome) but then many aspects of Google Analytics aren’t 100% so I don’t think I’m leading you astray.

Step one: add _setCustomVar lines to your tracking code

Will Critchlow’s post describing how to implement first touch tracking article inspired me into using custom variables to record the referrer URL of each visit as well as any associated keywords.

I re-wrote the _setCustomVar lines in his code to use the new asynchronous format. What this following piece of code does is to send the referring URL and keywords to Google if a referrer exists. If no referrer is present it sends “Direct”, so we can track all direct visits too. the “2” at the end of each setCustomVar tells Google Analytics that it’s a visit level variable.

It also filters out your own domain, so that your data doesn’t get polluted by people following internal links from one page to another.

This “if” statement need to be placed in your code after the _setAccount and before the _trackPageview.

var refurl = document.referrer;

  if (refurl != '')
  {
   if ((refurl.indexOf("://"+document.domain))<0)
   {
     _gaq.push(['_setCustomVar', 1, 'Ref', 
        truncate(refurl.substr(7,refurl.length)), 2]);
     _gaq.push(['_setCustomVar', 2, 'Qry', 
        getkeywords(), 2]);
    }
  }
    else
  {
    _gaq.push(['_setCustomVar',1,'Ref','Direct', 2]);
    _gaq.push(['_setCustomVar',2,'Qry','', 2]);
  }

Step 2: Truncate just in case

As Will mentions in his article, Google Analytics limits the length of the data you can send
(including the variable name) to 64 characters – or rather, it ignores anything bigger. So I borrowed his truncate function. I’ve altered it so that we can use three-character variable names (I thought that single character variable names was a little too cryptic for my use)

function truncate(input) {
  var byteLength = 61;
  return decodeURIComponent(encodeURIComponent(input)
.substr(0,byteLength));
}

Step 3: Setting the query parameter

As there isn’t a standard parameter for the search query across all search engines, I needed to make a function that could deal with the major ones that used something other than “&q=”. I saved a bit of time by looking at a php function for displaying the referring page. It’s obviously no problem to add more conditions to catch other search engines if your site receives traffic from one that isn’t captured correctly.

function getkeywords() {
  var x = document.referrer;
  var keywords = 0;
  if (x.search(/yahoo/) != -1) {
    keywords = gup("p"); 
  }
  else if (x.search(/digg/) != -1) {
    keywords = gup("s"); 
  }
  else {
    keywords = gup("q"); 
  }
  keywords = truncate(keywords.replace(/+/g, " "));
  return keywords; 
}

Step 4: Extracting the keywords

In Will’s original First Touch post, he saved the query string unaltered with no tidying up or further parsing. I adapted the code from this article that parses the URL of the current page so that it parses the contents of document.referrer. At the time of writing, Google Analytics has a bug in it which means custom variables get spaces displayed as %20 in reports.

This is the routine that the getkeywords function above calls once we’ve worked out the query parameter.

function gup(name) {
  name = name.replace(/[[]/,"\[").replace(/[]]/,"\]");
  var regexS = "[\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( document.referrer );
  if( results == null )
    return "";
  else
    return results[1];
}

Sit back and wait

After a few hours you’ll be able to find some results via custom reports (and perhaps “Visitors -> User defined”) but it can take a few days before results show up under the Custom Variables report.

Once they do start to appear, you should see something similar to that in the picture below.

Google Analytics custom variables

Now you are collecting referrer information on a per visit basis, including if the visit is direct – as well as all the associated search queries. It should also be relatively straight forward extend this technique to track other per visit information too, but we’ll save that for another day…

Updated: 2011-01-17

I’ve updated the code above to take into account situations when the refering URL is your own domain.

2 of 2
12
Reload this page with responsive web design DISABLED