Thursday, January 24, 2013

Analytics and Single Page Apps


Web Analytics is a great way to figure out where your users and customers are landing and from which pages they leave your site. You can also track which pages your users spend most of their time on. This knowledge helps in crafting a great experience for your users. This also helps in converting users to customers. What happens though when your site is a Single Page App? Single Page Apps are websites that do not refresh the browser to get information back and forth between the server and the client. The users only hit one page and then the page is dynamically updated to show your users information or to gather information from them.  The whole idea of a Single Page App is to recreate the experience of a desktop app in the world. More info on single page apps: http://en.wikipedia.org/wiki/Single-page_application. So if you don’t have different pages that your users are landing on or leaving from then how do you know where you are being most effective and where you need to improve your site? The current state of Web Analytics is heavily based on unique and distinct pages What tools do you have to give you analytical information for single page apps? There are several services online that offer different approaches to Single Page App Analytics but the two most commonly used are Google Analytics and Crazy Eggs.

Google Analytics
Google Analytics relies on unique urls to give you information. But there is an “In-Page Analytics” section which gives you very granular data per url. A really neat feature of this section is that the analytics actually get overlaid a current version of your site. You can then navigate your site with click analytics. Your page is now displayed with extra information. It shows you the percentage of clicks from the site that went to each link. It lets you see which portions of the page got clicked on the most. In-Page analytics lets you breakdown the click data to a very granular point and you can see the clicks from only referral visits or from direct visits to the site. It is a very powerful tool that lets you work with Single Page Apps.

Crazy Egg
Crazy Egg is another tool that helps with Single Page App analytics. It offers many different analyses of your page. One of the features is very similar to Google Analytics’ “In-Page Analytics’” in that it tracks the clicks on your page. It is different in that it not only keeps track at the link level but at the pixel level as well. It provides a report of your page with an overlay that shows every place that was clicked on. The clicks are also differentiated by the referring sites. Crazy Egg also offers a Heat Map of your page that shows where the mouse moves over the most. It even has a Scroll heat Map that shows what parts of your app were scrolled to the most.

Event Tracking (GA.js)
Google also offers a more “Do It Yourself” type approach for Single Page Apps. The Google Analytics javascript library has an event-tracking feature, which lets you track events on a page yourself. These events can be anything from file downloads, embedded AJAX elements, to flash video and components. For example you could track how many times the video on your page was paused or played. If you have interactive flash content you can keep tabs on what your users are clicking. This approach does require you to get your hands dirty and write some code in order to take advantage of analytics.



SEO
Since you don’t have different pages your SEO also takes a hit. Single Page Apps rely a lot on javascript, and web crawlers don’t all have support for javascript executing. This makes it hard to target specific searches and climb the Google results ladder.  There have been a few attempts to fix this problem. One of the proposed solutions is called HashBang(#!). The website would use the same URL scheme as a normal site but the domain name ends in a “#!” to indicate that it’s a different section inside of the one page app. HTML5 is also trying to solve this issue by letting browsers change the address bar without sending a request to the actual server.


References

No comments:

Post a Comment