Digital Enterprise Unit. White Paper. Web Analytics Measurement for Responsive Websites

Transcription

1 Digital Eterprise Uit White Paper Web Aalytics Measuremet for Resposive Websites

2 About the Authors Vishal Machewad Vishal Machewad has over 13 years of experiece i sales ad marketig, havig worked as a fuctioal cosultat ad Subject Matter Expert (SME) i marketig, customer experiece, digital ad iteractive marketig, web aalytics, social media ad advaced aalytics. He curretly heads the marketig services CoE at TCS ad provides thought leadership i the Marketig Maagemet domai.. He has led ad maaged marketig solutios ad delivery across diverse idustry segmets i the US ad i Idia. Machewad hold a MBA i Marketig Maagemet ad a Bachelor's degree i Egieerig from Pue Uiversity i Idia. Seha Agarwal Seha Agarwal is a web aalytics cosultat with over six ad half years of IT idustry experiece. She has worked with leadig web aalytics tools such as Adobe Site Catalyst, Adobe Isight ad Google Aalytics as well as i the Search Egie Optimizatio domai. She has worked maily i the Retail, Telecom ad Travel ad Hospitality idustry segmets.

3 Abstract Resposive Web Desig (RWD) is a approach i which a site is desiged to provide a optimal viewig experiece across a wide rage of devices, from desktop computer moitors to mobile phoes. It eables desig ad developmet to respod to the user behavior ad eviromet, based o scree size, platform ad orietatio, ad icludes easy readig ad avigatio with miimum resizig, paig or scrollig. RWD is icreasigly gaiig attetio due to the icrease i the types of devices used for website browsig mobile devices such as smart phoes ad tablets ad large scree devices such as smart TVs. Whether it is buildig a ew website based o RWD priciples, or trasformig a existig website to a resposive oe, RWD is importat factor. Resposive website goals, KPIs ad targets should be crafted based o the user jourey ad the cotet the website offers for differet devices. Web aalytics ca also serve as a platform to uderstad ad aalyze the performace of a resposive website across devices ad scree sizes.

4 Cotets Itroductio 5 Web Aalytics 6 Mold your web aalytics strategy for resposive web sites to gai better isights 6 Measurig Performace of Resposive Websites usig Web Aalytics 8 Web aalytics implemetatio - Best practices for RWD websites 9 Coclusio 10

5 Itroductio Resposive web desig (RWD) is a website desig approach to create websites that support multiple devices with a sigle layout based o the device type. A RWD website adapts its layout as per the scree size of the device providig a optimum viewig experiece to the website user across a wide rage of devices icludig desktops, laptops, tablets, ad so o. Browsig usig smartphoes ad other mobile devices has icreased expoetially i the last few years ad is ifluecig the way websites are built today. Website owers wat to give their users a similar user experiece across a wide rage of devices. Resposive Web Desig (RWD) is predicted to be the solutio to the future of web desig. A resposive website (built usig RWD priciples) is capable of providig a optimal viewig ad user experiece across a wide rage of devices of differet scree sizes. Though RWD still has some implemetatio challeges, it helps elimiate the eed for several versios of the website for multiple scree sizes. A RWD website differs from a mobile website, i that a RWD website has oly oe layout ad it adapts to chagig scree sizes irrespective of desktop, laptop, tablet or ay other mobile device while a mobile website is desiged specifically for a mobile scree size. Figure 1 provides a visual represetatio of Resposive Web Desig. Figure 1: Cocept of a Resposive Web Desig Types of Resposive Desig There are three types of RWD layouts that differ slightly but offer a great user experiece. Basic Fluid layout Cotet adjusts to differet scree sizes but the text ad image sizes remai the same Adaptive layout Predefied sizes are used, so wheever scree sizes chage these pre-defied sizes take effect Resposive layout The most popular layout today, this is a hybrid of the basic fluid layout ad the adaptive layout. There are predefied break poits, i betwee which cotet expads or cotracts. 5

6 Web Aalytics Web aalytics is the aalysis of user activity data i order to uderstad user joureys o the website. Traditioally, separate web sites were desiged for desktops ad mobile devices ad hece, web aalytics implemetatio techiques also differed accordigly. RWD suits both desktop as well as mobile website. Now, with the icreasig popularity of RWD, it is prudet to thik about the role of web aalytics for websites built usig RWD ad to desig web aalytics strategies accordigly. Otherwise, the aalysis may lead to icorrect decisio makig ad wrog positioig of key sellig poits critical for a busiess. Sice the user jourey may vary from device to device based o scree size, we suggest adaptig the web aalytics measuremet model to resposive desig. However, Why should the web aalytics measuremet strategy be modified for a resposive website? What are the beefits of such a strategy? What should be doe to implemet it? The framework i Figure 2 helps us aswer the above three questios. Figure 2: Web Aalytics framework for Resposive websites Mold your web aalytics strategy for resposive web sites to gai better isights It is importat to aalyze the mixture of data from differet devices ad scree sizes to uderstad website performace ad customer behavior across device types, to obtai busiess isights. Data captured for a desktop may ot be applicable for a tablet. Similarly, data from a tablet may ot be fully applicable for all mobile devices. The website cotet placemet for oe device may ot be optimal for aother device, thus alterig the user joureys across differet devices. The coversio rate of visitors from two differet devices may differ because the call to actio may be placed differetly requirig the user to scroll to the bottom of the page to geerate the lead. 6

7 I the website example i Figure 3, assume that the busiess' key performace idicator (KPI) is the effectiveess of the 'Customer Support' lik at the top of the desktop versio of the website. This KPI may ot hold true i the case of the mobile versio of the same website, as most of the importat cotet (ad ot the lik) is pushed to the top of the page. This is the case for most devices with smaller screes, ad is doe to avoid page scrollig. Similarly the coversio rate for users that etered the coversio fuel through the lik 'Corporate Idividuals' of the desktop versio will be differet for the mobile versio. This example helps us uderstad the eed to desig the web aalytics strategy. RWD is useful i deliverig a better user experiece for mobile devices as also for devices with big screes. Figure 3: Desktop ad mobile versio of a website 7

8 Measurig Performace of Resposive Websites usig Web Aalytics Web aalytics helps measure the performace of websites that are RWD eabled. It idetifies the elemets of the website that perform best o mobile, desktop ad big scree devices. For example, let us assume a product receives a large umber of views o a tablet as compared to a smartphoe. Web aalytics will tell you that oe of the reasos for this is the placemet of the product cotet i each device. Web aalytics reports ca provide data about user actios across devices ad ca segmet the busiess KPIs for differet devices. Furthermore, web aalytics tools ca be used to measure the performace of various marketig chaels, segmeted by popular browser platforms or popular mobile devices. They ca also geerate reports ad display segmeted data as show i Figure 4. Figure 4: Measurig marketig chael performace across platforms 8

9 Figure 5 shows a dashboard that ca be built usig a web aalytics tool like Google Aalytics, Adobe SiteCatalyst or ay other web aalytic tool. With the help of a dashboard, it is easy to view ad aalyze the performace of your RWD site at a glace. The dashboard shows a breakdow of visit metrics with scree resolutio ad mobile device type. This could be replaced with the desired busiess metrics like coversio rate. Reports that preset user statistics such as Fuel Visualizatio ad Visitor Flow by segmet ad by mobile device type help to uderstad differet user joureys o multiple devices ad measure website performace. The reports ca be compared to uderstad the effectiveess of a website HTML elemet o two differet scree sizes. Figure 5: Aalytics Dashboard for a Resposive Website Web aalytics implemetatio - Best practices for RWD websites ocapturig oly the device type is ot the recommeded optio as there may be multiple scree sizes for the same device; capturig the scree size is more accurate for segmetatio ad aalysis of website traffic. While the scree size is available as a out-of-the-box report i most web aalytics tools, we recommed that this be captured as a additioal feature as there are discrepacies whe the scree size is captured automatically by the tool, ad whe it is captured usig a custom variable. If required, create separate profiles for each device. O Adobe Site Catalyst this ca be achieved through segmetatio techique alog with a custom variable. Defie KPIs based o customer joureys for each device. It is a good practice to aalyze customer behavior across differet devices/ scree sizes. 9

10 Capture a portrait versus ladscape orietatio (i a resposive layout) aalysis. This will help uderstad how a customer views the page. There are differeces i metrics icludig page view, time, ad umber of pages viewed, depedig o whether the device is held horizotally or vertically. Geerate the hierarchy ad the path/user flow reports for each device Coditioally tag RWD websites. Aalyze the website performace for big screes as well. Compare bouce rates of each page for differet scree sizes. A high bouce rate from a particular scree size is a sig of poor user experiece. Focus strogly o aalyzig the effectiveess of the AdWords campaig for smartphoes as they have a 'click to call' optio. Cosider low-ed mobile devices that caot execute JavaScript. Whe usig Adobe Site Catalyst as your web aalytics tool, correlate breakpoits (defied scree sizes) with the device ame ad update the correlatio periodically. Capture device ID ad user aget i a custom variable ad use these for further aalysis. For example, Site Catalyst commuicates with a library of device profiles, to idetify the mobile device accessig the website. Aalyzig coversio rates, visits, ad leads across device types helps measure the effectiveess of the RWD desig. A report displayig user statistics by scree size ca tell you if more visitors are abadoig the coversio fuel for bigger scree sizes or smaller oes. A web aalytics tool is thus a great way to uderstad both the beefits ad shortcomigs of RWD. Coclusio Resposive Web Desig curretly has a edge over the traditioal web desig framework, as it addresses the challeges related to maitaiig differet versios (desktop ad mobile) of a olie web portal, ad optimizig the cost to meet busiess eeds. From a data measuremet perspective, web aalytics tools provide differet views of the data for a resposive website. Segmetig key reports/metrics with details such as device type, scree resolutio, widow resolutio, browser ad operatig system ofte produce key isights. I additio, busiesses ca determie devices that play a sigificat role i coversios. Adoptio of RWD requires more attetio ad aalysis from the busiess, as the customer ow accesses the website across differet platforms / devices, with a differet user experiece for each device type. Hece the web aalytics strategy should take resposive websites i to cosideratio. It is importat to segregate user joureys across differet devices ad craft the web aalytics strategy accordigly. Web aalytics ca help the busiess uderstad the performace of RWD websites across a wide rage of devices ad scree sizes, uderstad the effectiveess of its website cotet ad measure performace of the same busiess objective across differet platforms. 10

11 About TCS' Digital Eterprise Uit TCS adapts the capabilities of the digital five forces Mobility ad Pervasive Computig, Big Data ad Aalytics, Social Media, Cloud, ad Artificial Itelligece & Robotics to the uique eeds ad opportuities of each idustry. We leverage a combiatio of these techologies to help cliets digitally reimagie their busiess models, products ad services, customer segmets, chaels, busiess processes, ad workplaces to gai sustaied competitive advatage. Our experieced global team icludes strategy experts, busiess aalysts, digital marketers, user experiece desigers, data scietists, ad egieers traied ad certified i the latest techologies. By combiig our techology vedor parterships, our pre-built customizable products ad reusable assets, ad our deep idustry expertise, we offer eterprises everythig they eed for a complete digital trasformatio from strategy ad use cases, to system implemetatio ad maiteace ad everythig i betwee. Cotact For more iformatio about TCS Digital Eterprise Uit, cotact digital.eterprise@tcs.com Subscribe to TCS White Papers TCS.com RSS: Feedburer: About Tata Cosultacy Services (TCS) Tata Cosultacy Services is a IT services, cosultig ad busiess solutios orgaizatio that delivers real results to global busiess, esurig a level of certaity o other firm ca match. TCS offers a cosultig-led, itegrated portfolio of IT ad IT-eabled ifrastructure, egieerig ad assurace services. This is delivered through its uique Global Network Delivery ModelTM, recogized as the bechmark of excellece i software developmet. A part of the Tata Group, Idia s largest idustrial coglomerate, TCS has a global footprit ad is listed o the Natioal Stock Exchage ad Bombay Stock Exchage i Idia. IT Services Busiess Solutios Cosultig All cotet / iformatio preset here is the exclusive property of Tata Cosultacy Services Limited (TCS). The cotet / iformatio cotaied here is correct at the time of publishig. No material from here may be copied, modified, reproduced, republished, uploaded, trasmitted, posted or distributed i ay form without prior writte permissio from TCS. Uauthorized use of the cotet / iformatio appearig here may violate copyright, trademark ad other applicable laws, ad could result i crimial or civil pealties. Copyright 2015 Tata Cosultacy Services Limited TCS Desig Services I M I 02 I 15 For more iformatio, visit us at