Additional Requirements

To explore Analytics Reporting Suite check out the latest version:

Analytics Reporting Suite

Google Analytics is a web service to help businesses figure out where their visitors come from and how they interact with their sites. Analytics Reporting Suite is an Adobe AIR application that brings Google Analytics to the desktop (see Figure 1). In this article, I'll talk about my experiences on porting the Google Analytics web version to an Adobe AIR application and also tell you something about our plans for the suite's future.

From concept to product

Like most cool ideas, the Analytics Reporting Suite was never really intended to be a go-to-market product at first. In fact, Adobe AIR didn't even exist back then, so I never expected the Analytics Reporting Suite to evolve into the product it has become. At that time I was working at an interactive agency. They had a fairly large portfolio of clients using Google Analytics as their measurement platform and somehow I got involved in the whole analytics process. Managing a lot of profiles with the Google Analytics web interface felt quite cumbersome and I wanted to see if there was anything I could do to boost the productivity of the analytics department.

After doing some research, I immediately learned that this wasn't going to be very easy as Google Analytics is one of the few Google services that doesn't offer a public data API. Not willing to give up, I started developing my own ActionScript data API for Google Analytics by manually documenting the web interface and examining each and every HTTP request. Over time, I learned more and more on how Google Analytics worked and soon I had a fully featured ActionScript data API.

After I completed the data API, I started looking on how I was going to present that data to the user. Was this going to be a web or a desktop client? Which technologies would I use to visualize and manage all that data?

This proofed to be a very though challenge. Adobe Flex was an obvious choice for the user interface, and the charting components provided a strong base to do the data visualization, but it soon became clear that a browser based web application wasn't powerful enough for all the things I wanted to do.

For the first alpha version I used a Flash/Flex wrapper, using MDM Zinc, to add desktop capabilities and break out of the browser. Although this approach got the job done, I encountered a number of problems that prevented me from pursuing this project any further:

  • When using a Flash wrapper you end up with an EXE/DMG file which is a serious setback when you intent to distribute a desktop application compared to a web application.
  • There was no true cross-platform support. Although you can publish cross-platform apps, there’s a huge difference in the code base between Windows and Mac.
  • It was very hard to create a good development workflow, you had to recompile the Flex application each time and debugging was a pain.
  • PDF and HTML support were poor, and creating an advanced component like the Site Overlay (explained below, in the section "Some of the technical challenges") was just not possible.

Just when I thought I had hit a roadblock, Adobe announced AIR, a cross-operating system runtime that would bridge the gap between the web and the desktop. I was very excited about the news; more importantly, AIR bridged the gaps of traditional desktop wrappers:

  • Easy distribution: Even now, when people ask me what the I believe to be the coolest feature of AIR, my answer is: "Its distribution model." The seamless installation with the install badge is just great and really enhances the user experience.
  • Cross-platform support: Adobe AIR is truly cross-platform both from a runtime and a development perspective. For me it's not enough to be able to run an application on different systems. What I love about Adobe AIR is that any team member can use the tools they like on the operating system they prefer.
  • Flex Builder support: I've been doing Flash development for years and after moving to Flex it really hurts to go back doing Flash once in while. Flex Builder is built on the highly customizable Eclipse editor. It has code completion, code refactoring, an integrated debugger, and a memory profiler.
  • Supports multiple technologies: Some things work better in HTML and some things will never even be possible with Flex. If you're building truly engaging application relying on just one technology can be a serious handicap. The way Adobe AIR integrates HTML and Flash content is just awesome. Adobe AIR seamlessly integrates JavaScript and ActionScript which let’s you mix up Flex and HTML content really easy.

Adobe AIR really revived the project and proved to be the perfect tool for the job.

It has to be functional

After the first alpha and feedback from a limited number of alpha testers, I decided to put all my effort in this project. Everything felt right; I fell in love with Adobe AIR, I'm really intrigued by web analytics and it's great fun working on a product like this.

The agency I worked for wasn't able to fully support me on this venture and I was neglecting my work already in favor of this project so we decided to part. Shortly after I left the agency I joined Boulevart, one of the fastest growing Flash/Flex production companies in Belgium. We made a deal, and from then on I was working on the Analytics Reporting Suite full time. Yes!

My philosophy is simple and I have two main goals for the Analytics Reporting Suite:

  • Create a quality product that is functional. This might seem obvious at first. However, if you take a look at the initial AIR applications that have been released, you'll notice that a lot of them are visually interesting but not very functional and certainly not applications you'll use every day. Who needs another music player or instant messenger? Although it is great to see so many AIR apps out there, I think AIR really needs more functional applications like eBay Desktop to make the platform succeed.
  • It needs to be free, or at least offer a free version. Google Analytics owes its success to the fact that it was the first to offer professional web analytics at no charge. I'd like to reach at least 20% of the Google Analytics users and by offering a free version I hope to get that target by the end of the year.

Adobe AIR is a great technology and Google Analytics is a great service. To me it seems like a perfect marriage and I want to attract as many people as possible to both platforms. Although the Analytics Reporting Suite could be another factor for one to pick Google Analytics as a measurement platform of choice, Google Analytics with its enormous user base could put the runtime’s market penetration on the fast track, and could certainly get more people interested in Adobe AIR. The Analytics Reporting Suite could be another reason for people to go with Google Analytics as their web measurement platform of choice.

Aside from a general strategy the project also has some more specific goals and requirements from a software development perspective.

In order to extend the Google Analytics platform it first must be recreated and ported to the desktop as a solid base to start from. The biggest challenge was to improve the user experience without moving too far away from the original web interface. People who've been working with Google Analytics for years should be able to use the desktop version without having to learn using a new interface. This is why I only made subtle user interface changes in the beta version. A good example is the tab interface (see Figure 2); by opening a new report in a new tab the user can switch fast between different reports, but it doesn't break the original flow of the web-based user interface.

For those who are not familiar with Google Analytics, it has more than a hundred base reports and if you start drilling down into the data or if you start making segmentations the possibilities are nearly endless. Take in the fact that Google regularly adds new report types or changes data models it is imperative that the desktop version needs to be very flexible.

Also, I don't want to be a code monkey, hard-coding each and every report, nor do I want to redistribute a new version of the suite each time Google pushes and updates the web version. That is why every report in the Analytics Reporting Suite is created dynamically. Figure 3 shows a diagram that explains in a simplified manner what is happening behind the scenes.

Some of the technical challenges

Most reports share a set of data visualization components such as line charts, data grids, pie charts to display the data at hand. Flex already provides a solid base for that, but some reports require more custom components.

Take the Site Overlay, for example, a component that visualizes where the users click on a certain page of your site. The component is fairly complex, but with AIR it's just about a day's work. By using web technologies on the desktop, it makes it really easy to interact with online content.

The Site Overlay loads a live version of your site into the component and displays interactive content on top of the links. With AIR loading your site into an application is the easy part; the challenge is to locate those links and display information on top of them. Figure 4 shows an example of my blog inside the Site Overlay component.

Most people expect that this would require quite some JavaScript code, but they may be surprised to learn that there's not a single line of JavaScript involved here. Although I could have done in it in JavaScript I decided not to, because I feel a lot more comfortable in ActionScript. Being able to choose the technology you feel most comfortable with is part of the beauty of AIR.

Here's the code snippet that gets you all the link information from an HTML page in ActionScript 3.0:

private function parsePage():void { //The links Arraycollection holds all the link information _links = new ArrayCollection(); //htmlView is a refernce to a Flex HTML component in which the site is loaded var doc:Object = htmlView.htmlLoader.window.document; //loop through all the links in the current document for (var n:int = 0; n<doc.links.length; n++){ //find the exact X and Y position of the link var pnt:Point = findLinkPosition(doc.links[n]); //get other information about the link that might be useful var link:String = doc.links[n].href; var path:String = doc.links[n].pathname; var title:String = doc.links[n].innerText; var dim:Point = new Point(doc.links[n].clientHeight, doc.links[n].clientWidth); //add the link information to the Array Collection links.addItem({pos:pnt, dim:dim, link:link, path:path, title:title, id:n}); } } private function findLinkPosition(link:Object):Point { //find the links X and Y coordinates relative to the document if (link.offsetParent){ var px:Number; var py:Number; for (px = 0, py = 0; link.offsetParent; link = link.offsetParent){ px += link.offsetLeft; py += link.offsetTop; } return new Point(px, py); } else { return new Point(link.x, link.y); } }

The Map Overlay component is similar to the Site Overlay component. It displays visitor information on a map and is also a mix of Flex and HTML. Because it's a Google Analytics client, I felt obligated to use Google Maps, but any other map provider would work as well (see Figure 5).

Because Google Maps has some really nice examples of JavaScript integration I didn't bother using ActionScript this time. The component loads an HTML page with the JavaScript methods embedded into a Flex HTML control. The page looks like this:

//htmlview is a reference to a Flex HTML control _dom = htmlView.htmlLoader.window; //center the map _dom.setPosition(48.8, 2.333, 2); //ad a marker _dom.addMarker(49, 3, "7 vistors from Paris"); //set the zoomlevel using a flex slider _dom.setZoom(HSlider.value); <html>

Inside the AIR application you just use ActionScript to invoke the JavaScript methods directly. Very straightforward and really easy stuff. You got to love AIR.

<script src="http://maps.google.com/maps?file=api&v=2&key=?????" type="text/javascript"></script> <script> var map = null; var geo = null; var baseIcon = null; function initialize() { map = new GMap2(document.getElementById("map_canvas")); baseIcon = new GIcon(); baseIcon.iconSize = new GSize(10, 13); baseIcon.iconAnchor = new GPoint(4, 14); baseIcon.infoWindowAnchor = new GPoint(4, 1); } function setPosition(lat, len, zoom) { map.setCenter(new GLatLng(lat, len), zoom); } function addMarker(lat, len, message) { var point = new GLatLng(lat, len); var markicon = new GIcon(baseIcon); markicon.image = "drop.png"; markerOptions = { icon:markicon }; var marker = new GMarker(point, markerOptions); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(message); }); map.addOverlay(marker); } function removeMarkers() { map.clearOverlays(); } function setZoom(level) { map.setZoom(level); } </script> <body onLoad="initialize()" onUnload="GUnload()"> <div id="map_canvas" style="width: 685px; height: 350px"></div> </body> </html>

Roadmap for the future

Together with my team, I'm working hard on the 1.0 release and we are aiming to get the free version finished by mid-April 2008. We have carefully considered all the feedback from our beta users and most of the feature requests will be met. From that point on we'll continue to focus on extending the Google Analytics Platform, and maybe even support some other services.

How the platform will evolve and what other services will be supported is mostly up to you. I'm always very interested in hearing your thoughts and sharing some ideas on how I can make this even a better, more functional, product.

Next to the addition of more general features I'm also looking into some ways on how I can extend the Analytics Reporting Suite to better integrate with the Flash platform. Features like site overlays for Flash based content, session replay for Flex application or automated validation for measurement integration are just a few things I'm thinking about at the moment.

And I may even have some good news for people who've been wanting to create custom implementations themselves. After careful consideration I decided that the Google Analytics ActionScript 3 data API will be open sourced in the longer term. However, I'm still not clear about the timeframe; it all depends on various factors, but the commitment is there.

Where to go from here

If you'd like to track the progress of the Analytics Reporting Suite keep eye on my blog and the product page.

For more information about Adobe AIR, visit the product page.

For more inspiration, check out the sample applications in the Adobe AIR Developer Center for Flex, Flash, and HTML/Ajax and the apps showcase.

To get started building Flex apps on AIR go to the Getting Started section of the Adobe AIR Developer Center for Flex or dig into Developing Adobe AIR applications with Adobe Flex. To dive right in and begin building AIR applications in Flex Builder, follow the simple steps in Developing AIR application with Flex on Adobe LiveDocs or explore popular Adobe AIR APIs by working with the AIR Quick Starts.

Requirements

Prerequisite knowledge

A healthy interest in Adobe AIR development.

User level

All