Going Responsive with Google Analytics


Published on

The demand for mobile-optimized content on higher ed sites more than doubled in the past two years. Responsive design is a good compromise for getting existing content into the hands of mobile users, but some aspects have a serious effect on your results in Google Analytics. Learn how to optimize your analytics settings to allow for responsive design, and gain valuable insights into user behavior looking at the results from different devices. Not only will it protect the data you're getting on your site now, it will help you make more informed decisions about site architecture, content, and user experience design in the future.

Published in: Business, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Going Responsive with Google Analytics

  1. 1. 1Monday, Jul 29
  2. 2. Google Analytics for Responsive Websites housekeeping notes: -there will be a time for questions at the end , slides will be available, one sheet up front thank you for coming how many of you are hands on with analytics? how many of you are planning for responsive? how many of you have a current site that is responsive? 2Monday, Jul 29
  3. 3. Meet NewCity 3Monday, Jul 29
  4. 4. MEET NEWCITY WE CRAFT HUMAN EXPERIENCE how real people will interact with technology and use that to plan strategy to help them be able to accomplish their goals focus on data and results to make decisions and determine success 4Monday, Jul 29
  5. 5. What is a Responsive Website? Let’s get basics out of the way... 5Monday, Jul 29
  6. 6. Consistent Experience Basically - the exact same website (content, media, code, etc) no matter what device you are on why is it a good idea? 6Monday, Jul 29
  7. 7. Ability to Scale -less work for manager of site (versions, content) click your brand needs to come through wether you have 2” of visual space or 12” or more click you have a suite of components to build a page within the family of design - click you can run off of one CMS and set of code click -good for SEO click x2 7Monday, Jul 29
  8. 8. A B C D A B E E C D F F G G Responsive Design NewCity’s method: Use data to drive decisions. Never assume you know what content people want on a particular device. Start with structured content and go from there click x2 Design for touch at all major breakpoints. Prototype and test. 8Monday, Jul 29
  9. 9. What are Analytics? Let data decide! 9Monday, Jul 29
  10. 10. ...a powerful, easy to use reporting platform that lets you decide what data you want to view and to customize your reports with just a few clicks. Google defines as... Not only can you measure sales and conversions, it gives you fresh insights into how visitors use your site, how they arrived on your site, and how you can keep them coming back. Google Analytics is a powerful, easy to use, reporting platform, that lets you decide what data you want to view and customize your reports, with just a few clicks. Not only can you measure sales and conversions, it gives you fresh insights into how visitors use your site, how they arrived on your site, and how you can keep them coming back. 10Monday, Jul 29
  11. 11. Analytics Data Analytics provides... Data to ask better questions Data to inform the process and revisions Enables you to Make micro-tweaks other disciplines to have actionable items based on real data the better you can define a problem (less of a black box) , the more likelihood you’ll be able to solve 11Monday, Jul 29
  12. 12. Configure Analytics Google is great but have to configure >>>>one sheet handout - lowercase filters >>> variations of the same page. - custom alerts >>> notify us if/when there are sudden changes in traffic. - internal site search tracking >>> better understand what visitors are looking for but not finding on the site. - Set up event tracking >>> any action without a URL change - Set up Conversions >>> info form, purchase, etc - Link their AdWords and Analytics accounts >>> how visitors from paid advertising sources are interacting - Link their Webmaster Tools and Analytics accounts >>> analyze SEO data within Analytics. - Custom Reports >>> reporting on quality of traffic sources/mediums, keywords, quality of traffic by location, quality of traffic by mobile device, etc 12Monday, Jul 29
  13. 13. CONFIGURING ANALYTICS Go-to sources: BOOKS Web Analytics: An Hour a Day by Avinash Kaushik Web Analytics 2.0 by Avinash Kaushik Advanced Web Metrics with Google Analytics by Brian Clifton Google Analytics by Justin Cutroni 13Monday, Jul 29
  14. 14. CONFIGURING ANALYTICS Go-to sources: WEBSITES http://analytics.blogspot.com/ http://www.kaushik.net/avinash/ http://searchenginewatch.com/analytics http://cutroni.com/blog/ http://online-behavior.com/analytics http://www.clickz.com/category/analytics http://www.googleanalyticstest.com http://www.google.com/analytics/learn/ http://www.google.com/analytics/iq.html 14Monday, Jul 29
  15. 15. Review Data -types of data to review on a regular basis- • Locations of visitors to the site • Top visited pages and bounce rates for key pages • Traffic mediums: their comparative quality and trends over time • Top traffic sources • Organic traffic by keyword phrase • Mobile Behavior REVISE THE SITE AND REPEAT 15Monday, Jul 29
  16. 16. Common Mistakes thinking pageviews mean something - or any one single metric... for example, lots of people no conversions not looking at data in context - sometimes a high bounce rate is a good thing... like on a directions page! assuming you know why something (like a conversion) isn’t working 16Monday, Jul 29
  17. 17. Planning for Responsive now that Basics out of the way lucky enough to be able to plan before building a responsive site there is a lot to learn from the existing data (explain picture) 17Monday, Jul 29
  18. 18. “ Plans are nothing; planning is everything.” Dwight D. Eisenhower It's the process of planning that is most important: where you consider opportunities and challenges and ways to meet them. Plans are obsolete the moment they are done. Things change. New information comes to light. 18Monday, Jul 29
  19. 19. Preliminary Analytics Review Determine  what  exists Get  access  to  all  accounts    >>>>  (side  note  about  access  to  everything?) Make  sure  at  a  min  you  have  the  following  profiles    >>>   raw  data  (nothing  applied) all  websites/main  site  external  traffic  only everything  all  combined  mobile  traffic  only,  external  traffic  only 19Monday, Jul 29
  20. 20. Current Mobile Behavior What isn’t working now? Apply your mobile segment Compare to non-mobile traffic Different Bounce Rates/time on page/etc convert/non-convert 20Monday, Jul 29
  21. 21. Frequent Breakpoints -design for responsive layouts based on actual sizes where to find in analytics - under >Audience>Technology>Browser & OS>Screen Res Dimension 21Monday, Jul 29
  22. 22. Common Browsers -what browsers are used by current audiences -what will we support? where to find in analytics - under >Audience>Technology>Browser & OS>Browser>Secondary - Browser Version 22Monday, Jul 29
  23. 23. Configuring Analytics for Responsive Now your shiny new responsive site has launched... what do you do? 23Monday, Jul 29
  24. 24. Setup Baseline Analytics Same  as  before  >>>  Make  sure  at  a  min  you  have  the  following  profiles raw  data  (nothing  applied) all  websites/main  site  external  traffic  only everything  all  combined  mobile  traffic  only,  external  traffic  only Then  set  things  up  by  departments,  schools,  etc    >>>  MAX  50  PROFILES  PER  ACCOUNT  SO  PLAN   CAREFULLY 24Monday, Jul 29
  25. 25. Determine Top Devices Create  profiles  for  top  devices                                                                                      (HOW  DID  WE  COME  TO  THESE?        LOOK  AT   OLD  DATA...  DIFFERENT  FOR  YOU)   1.  Android  phone     2.  Android  tablet                                      (Think  of  what  would  cause  users  to  interact   with  the  site  differently...  like  touch,  size,  res)   3.  iPad         4.  iPhone   5.  non-­‐mobile,  non  touch  (tradiZonal  computers)   6.  Windows  8       7.  Look  closely  and  you’ll  see  others  -­‐    “all  mobile”,  “no  filters”,  “internal”,   etc. 25Monday, Jul 29
  26. 26. Screen Resolution Filters NoZced  previous  screen  there  were...  duplicate  device  profiles used  to  be  much  harder   had  to  do  with  screen  resoluZon don’t  do  it  this  way >>>>side  note  -­‐  you  can  also  do  this  with  custom  advanced  filters,  we  like  profiles  for  more  control,   follow  same  basic  steps  about  to  outline 26Monday, Jul 29
  27. 27. iPad go  into  ADMIN... Apply  filter  by  mobile  model  name  (iPad)  to  include  traffic NoZce  mulZple  filters  applied -­‐we  almost  always  also  filter  out  internal  IPs  and  combine  upper/lowercase  URLs  in  these  profiles...  can   have  internal  traffic  iPad  profile  if  you  think  you  need  it... 27Monday, Jul 29
  28. 28. iPhone Apply  filter  by  mobile  model  name  (iPhone)  to  include  traffic -­‐internal  IPs  and  combine  upper/lowercase  URLs 28Monday, Jul 29
  29. 29. Android Phone >>Starts  to  get  a  licle  trickier<< Apply  filter  by  operaZng  system  (android)    >>>  can  only  do  by  device  if  you’re  trying  to  track  specific  like   Galaxy  S4  or  HTC  One Include  mobile  filter    >>>  enZre  operaZng  system  so  we  only  want  the  mobile  traffic Exclude  tablets  filter    >>>  enZre  operaZng  system  but  we  only  want  phones -­‐internal  IPs  and  combine  upper/lowercase  URLs 29Monday, Jul 29
  30. 30. Android Tablet Apply  filter  by  operaZng  system  (android)    >>>  can  only  do  by  device  if  you’re  trying  to  track  specific  like   Kindle  Fire Include  tablets  filter    >>>  enZre  operaZng  system  but  we  only  want  tablets -­‐internal  IPs  and  combine  upper/lowercase  URLs 30Monday, Jul 29
  31. 31. Windows 8 Windows  8  (touch  traffic  so  we  want  to  look  at  data  separately) Apply  filter  by  operaZng  system  (windows) Apply  filter  by  operaZng  system  version  (8) -­‐internal  IPs  and  combine  upper/lowercase  URL 31Monday, Jul 29
  32. 32. Non-Mobile Non-Touch traffic (Traditional Computers) We  want  non-­‐mobile  traffic    >>>  Apply  mobile  filter  to  EXCLUDE  mobile  traffic We  want  all  non-­‐touch  traffic    >>>    Apply  operaZng  system  filters  to  include  everything  out  there   (Windows,  Mac,  Linux) We  don’t  want  touch  traffic    >>>  Apply  operaZng  system  version  filter  to  exclude  Windows  8 -­‐internal  IPs  and  combine  upper/lowercase  URLs These  pacerns  can  be  followed  for  any  other  devices,  operaZng  systems,  etc  that  are  specific  to  you like  before...  Think  of  what  would  cause  users  to  interact  with  the  site  differently...  like  touch,  size,  res 32Monday, Jul 29
  33. 33. What can we learn? (explain picture) Analytics can tell us lots of things... overwhelming amount of info 33Monday, Jul 29
  34. 34. Learning from Data just remember our goal... fully harness power of analytics breakdown problems into solvable chunks with as much info as possible and... the solution will be different in every case >>> look responsive data this way rather than breaking the entire system to fix solving the problem (micro level) of not working on this specific device, screen, etc 34Monday, Jul 29
  35. 35. Analytics can tell us... - What questions to ask - What should we examine further >>> finding oddities and discrepancies in the data - Conversion rates - Bounce rates -Time on page - New Visitors vs. Returning - >>>remember - it’s exactly the same code/content so when it acts differently what does it lead us to think about? - 35Monday, Jul 29
  36. 36. Analytics can’t tell us... Why things are happening What audiences are trying to do Why the page was abandoned Why the user didn’t convert >>>> for that we need other tools/disciplines “ux hat” (above my paygrade, might have to do yourself) >>>A/B testing SIDE NOTE - Jared Spool resources 36Monday, Jul 29
  37. 37. CrazyEgg Where people click Where people TRY to click Scroll distance 37Monday, Jul 29
  38. 38. Intercept Survey Intercept users real-time as they use the site, insight into what they came looking for, rather or not if they were able to accomplish it. 38Monday, Jul 29
  39. 39. Loop 11 http://www.loop11.com/online-usability-testing-101/?confirmed=true Ask a relatively simple task first Avoid creating task scenarios that give participants hidden clues (info/words give hints) Keep the length of evaluations as short as possible - less than 6 questions is good - results in higher completion rates - looking at most common success pages and most common fail pages - find the problems and the strengths then focus on finding the cause of the problems using the click path analysis and heat maps. - rank the problems by severity - decide how to solve and put the findings into action 39Monday, Jul 29
  40. 40. UX Tools Go-to sources: USER TESTING Usabilila Qualaroo UX Punk Userfly Feedback Army UserTesting.com OpenHallway TryMyUI GoToMeeting, Glance, Skype Usabilla primarily design, testing small things not complex workflows>> Remote, unmoderated; can test flat images and live site; recruit your own users Qualaroo for short feedback surveys UX Punk Online card sorting & navigation menu testing Userfly Records what users are doing on your site; no tasks or assigned workflows just records what’s going on on a page Feedback Army Quick and dirty test UserTesting.com -Remote, unmoderated task testing; recruits users for you OpenHallway Remote, unmoderated task testing >>>>have to have a URL to test, users are prompted out loud to talk about the task as they work on it TryMyUI Remote, unmoderated testing >>> get video of users trying to accomplish tasks 40Monday, Jul 29
  41. 41. UX Tools Go-to sources: PROTOTYPING Invision App Balsmiq Proto.io UXPin Blueprint Invision App Clickable prototype (images only); great for fast, flat testing and demonstration Balsmiq Clickable wireframes Proto.io for tablets & smartphones UXPin - Clickable wireframing tool Blueprint (IOS app)- for mobile 41Monday, Jul 29
  42. 42. UX Tools Go-to sources: OTHERS SurveyMonkey Kissmetrics Card Sort Websort Optimizely Unbounce Visual Website Optimizer Usability Hub SurveyMonkey/Kissmetrics - survey tool Plainframe - Navigation/wireframe testing Card Sort/Websort - Card sort, navigation testing Optimizely/Unbounce - A/B Testing Usability Hub http://fivesecondtest.com/ http://navflow.com/ http://theclicktest.com/ 42Monday, Jul 29
  43. 43. Steps for Success set up analytics and configure properly to look at multiple devices differently review the data find discrepancies and oddities use ux tools to A/B and user test refine site start again Good luck on your data revision journey!! 43Monday, Jul 29
  44. 44. Questions? Credit: ESO/M. Kornmesser slides available: www.insidenewcity.com 44Monday, Jul 29