by Doug

28/05/2013

Internet Marketing, Web Development

Build your site to be measured – built in CRO preparations

Users first!

Whilst data > opinion ConversionWorks is still opinionated! Our opinions stem from anecdotal and empirical evidence – a world of experience; the good, the bad and the ugly of CRO.

We are firmly of the opinion that website measurement does not affect user experience. Designing for the needs of the user comes first – no question about that.

Prepare to gather data

We’re also of the opinion that the task of building a website is inextricably linked to the measurement of the website. Engineers have a major responsibility to ensure that features are implemented in a measurable manner so that performance can be ascertained and improved.

What exactly does ‘implemented in a measurable manner’ mean though? I’ll give you three examples based on experience.

Disclaimer: I’ve been on both sides of the fence as one who has built and tested websites – I talk from experience having made and learned from these examples. These examples will mention Google Analytics as the web analytics platform but the techniques are transferable to other platforms if required.

So, to the examples. I’ll talk about:

  • Form fields and submissions
  • Virtual pages
  • Clicks

Forms fields and submissions

Implementing a form in HTML is easy, right? Well, yes the mechanics of the basic form markup are actually straightforward but there are some more subtle nuances that are easily and commonly missed. Take the example form field markup shown below:

Nothing technically wrong there…unless….what if you wanted to measure the form performance in some detail?

  • Capture form field focus events
  • Capture certain (not all!) form field values
  • Track validation errors

With the markup above, the form field focus event can be tracked (technically) but the name of the field is basically meaningless. You can traverse the DOM to find the label but that is a fragile technique – one change to the markup structure and you’re sunk.

What if you wanted to capture part of a post (ZIP) code in the form? Can you tell what this field is for?

What if you captured the value of ALL fields in the form? BAD! That is lazy thinking and will result in full post codes and email addresses being tracked in your web analytics data. That’s PII (Personally Identifiable Information) and is not allowed in Google Analytics. Do this and your account will most likely be deleted….at best.
How can you tell if the field was the subject of a validation error? More detailed DOM inspection is required…not good.

Let’s try this again:

The simple additions in bold answer the points above very nicely. Simple use of an ID and a validation error section. Ridiculously simple and subtle but it makes such a difference to the measurability of the form. See below how the addition of type=”email” makes the email field quite clear to see and not track the value of:

Virtual pages

If the form we mentioned above submits using AJAX – fine. If that’s what your users want, give it to them but make sure you track the submission using a virtual pageview after the form has been submitted. Don’t be lazy. Don’t do either of these things:

  • Not track the submission
  • Track the same page URI

Both of these poor choices result in a key interaction between your site and your (potential) customer being missed. Not good.

The same goes for light box content or other dynamic/AJAX content. If the user clicks on the page and new content appears, this must be a meaningful interaction and merits firing an event or virtual pageview – the latter being my preference in the case of showing page style content:

_gaq.push(['_trackPageview', '/myform/submitted']);

Obviously change the value in the second parameter…

Clicks

This one seems even more trivial than virtual pages or forms but it’s very easy to get a confused and high maintenance solution. Google cover the subject of outbound clicks on their support site:

https://support.google.com/analytics/answer/1136920?hl=en-GB

Do you want to add the onclick code to all your links? What about dealing with internal links? You may have more than one link going to the same page. If clicking the link constitutes a key interaction between the user and the site, you probably want to measure the click but do you want to decorate every link? Do you want to rely on copy writers properly managing links in markup?

No.

So, use classes and IDs to decorate links with appropriate meta data. Use unobtrusive javascript to attach click event handlers to the links with certain classes or ID values (use pattern matching to capture multiple IDs) and employ the setTimeout method as described by Google in the same way as outbound clicks are handled.

Summary

Building good markup is the right thing to do. Very much like fundamental SEO techniques, the best result for SEO and web analytics stems from building good markup first and foremost. This does not compromise user experience and in many cases the extra thought will result in a better product that is easier to maintain and one that performs better anyway.

The biggest issues that are found when undertaking a CRO or measurement project are generally caused by poor markup that is hard to measure. Yes, it can be measured but the solution is brittle and results in a more-expensive-to-maintain product. Not a win. Lazy development of markup is the cause. Commonly heard excuses are that developers are too rushed or the CMS doesn’t support the required method.

Poppycock and balderdash. Utter rot.

No, lazy thought and ignorance are the cause. Invest in good markup and the resultant product will pay you back many times.

Comments

Leave a comment

Your email address will not be published. Required fields are marked *