How NRI Netcom uses Analytics to measure user engagement of responsive web design

The following was originally posted to the Analytics Japan blog.

Google recommends responsive web design as a way of optimizing for smartphones and tablets. Responsive web design is a method of identifying the device based on the screen size and adjusting the design using CSS, while sharing one block of HTML across all devices. The concept has also been discussed on the Webmaster Central Blog so head over there for more details.

This post will look at an example of using Google Analytics on a site enabled for responsive web design.

The case involves a Google Analytics Certified Partner (GACP), NRI Netcom, working on an overseas payment service website for their customer, Seven Bank. NRI Netcom installed Google Analytics for post-optimization data analysis to support Seven Bank's web publishing and marketing. The implementation enabled pages to be served to desktop PCs, smartphones and tablets using responsive web design, all from a single URL.

They used page-level custom variables in Google Analytics to enable NRI Netcom to access reports on each type of page sent out.

For example, page-level custom variables can be set up as follows to identify which CSS version is being displayed: PC, smartphone or tablet.

PC = 960 px or more  

_gaq.push(['_setCustomVar', 1, 'PageVariation', 'fullsize', 3]);

Smartphone = 520 px or less

_gaq.push(['_setCustomVar', 1, 'PageVariation', 'mobile', 3]);

Tablet = 520 px to 960 px 

_gaq.push(['_setCustomVar', 1, 'PageVariation', 'tablet', 3]);

This enables metrics for each screen type to be compared at a glance, as shown below, using Google Analytics Reporting. (The figures on the report are not the actual figures.)

The actual setup was a little more complex. The three screen types (smartphone, tablet and PC) were added, and the display height and width selected for each user tracked. Then, Seven Bank deployed its website in ten languages, as this was to be an overseas payment service.

It was configured to handle three different types of devices, different screen heights and widths, and different languages, as well as to provide instant verification on the Google Analytics Reporting screen.

Several pieces of useful information began to emerge from the Google Analytics data. Firstly, as a result of optimizing for smartphones, there was a clear improvement in engagement and conversions amongst mobile users. Differences between tablet and smartphones were also observed. Engagement metrics such as average time on page and average page views differed widely. Metrics were also found to be clearly different depending on whether the same smartphone/tablet was held horizontally or vertically.

A number of other effects were seen which weren't particularly relevant to conversions. A clearer picture of referral paths for mobiles and their effect on conversions aided understanding of the efficacy of incoming traffic. Whereas organic search won out on pure referral numbers, the number of conversions from users clicking the Seven Bank inquiries link on smartphones to make a call (measured using event tracking) was clearly better at referrals routed through AdWords.

Interesting results were also seen for different languages. It was obvious, for example, that conversions on mobiles were much higher for specific languages.

All of this is actionable data which will continue to help Seven Bank develop marketing strategies and further optimize their mobile site  — read the full case study here (in Japanese).

Posted by Noriyuki Ouchi, Google Analytics Solution Consultant