back

Project profile: Bringing Google
Analytics to the desktop

by Nicolas Lierman

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

 

 

Analytic Reporting Suite dashboard

Figure 1. Analytics Reporting Suite

From concept to product

Like most cool ideas, the Analytics Reporting Suite was never intended to be a go-to-market product. In fact, Adobe AIR didn't even exist when the idea was born, so I never expected the Analytics Reporting Suite to evolve into the product it has become. At the time, I was working at an interactive agency that 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 many profiles with the Google Analytics web interface felt cumbersome, and I wanted to see if I could boost the productivity of the analytics department.

After doing some research, I immediately learned my goal wasn't going to be easy because 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 about how Google Analytics worked, and soon I had a fully featured ActionScript data API.

After I completed the data API, I started figuring out how I was going to present that data to the user. Should I make it available through a web or desktop client? Which technologies should I use to visualize and manage all that data?

This proved to be a tough 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 and Flex wrapper, using MDM Zinc, to add desktop capabilities and break out of the browser. Although this approach got the job done, I encountered several problems that prevented me from pursuing this project.

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

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 into this project. Everything felt right. I fell in love with Adobe AIR, I was really intrigued by web analytics, and it was great fun to work on a product like this.

The agency I worked for wasn't able to support me fully on this venture, and I was neglecting my other work 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 and Flex production companies in Belgium. We made a deal, and from then on I was working on the Analytics Reporting Suite full-time.

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

Adobe AIR is a great technology, and Google Analytics is a great service. It seems like a perfect marriage, and I want to attract as many people as possible to both platforms. The Analytics Reporting Suite could be another reason for customers to choose Google Analytics as their measurement platform of choice, and 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.

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

To extend the Google Analytics platform, it needed to be re-created 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 have been working with Google Analytics for years should be able to use the desktop version without having to learn a new interface. This is why I made only 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 quickly switch between different reports, but it doesn't break the original flow of the web-based user interface.

Tab user interface

Figure 2. Tabs enabling users to switch quickly between reports

For those who are not familiar with Google Analytics, it has more than 100 base reports, and if you start drilling down into the data or if you start making segmentations, the possibilities are nearly endless. Given the fact that Google regularly adds new report types and changes data models, it is imperative that the desktop version be extremely 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.

Flowchart of how a dynamic report is generated

Figure 3. Reports in the Analytics Reporting Suite generated dynamically

Technical challenges

Most reports share a set of data visualization components such as line charts, data grids, or 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 users click a certain page of your site. The component is fairly complex, but with AIR it's about a day's work. Using web technologies on the desktop makes it 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.

Site Overlay example

Figure 4. My blog inside the Site Overlay component

Most people expect that this requires 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 it in JavaScript, I decided not to because I feel more comfortable in ActionScript. Being able to choose the technology you feel most comfortable with is part of the beauty of Adobe 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 reference 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).

Map Overlay component example

Figure 5. Here is the Map Overlay component in action.

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 visitors from Paris");
     
    //set the zoomlevel using a Flex slider
    _dom.setZoom(HSlider.value); 
    <html>
    

Inside the AIR application you use ActionScript to invoke the JavaScript methods directly. This is very straightforward and really easy stuff — you've got to love Adobe 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 interested in hearing your thoughts and ideas about how I can make this an even better, more functional product.

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

I may even have some good news for people who have been wanting to create custom implementations themselves. After careful consideration, I decided that the Google Analytics ActionScript 3.0 data API will be released as open source in the future. 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 an 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, as well as the Adobe AIR Developer Derby winners and the applications showcase.

To get started building Flex applications 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 applications with Flex Builder on Adobe LiveDocs or explore popular Adobe AIR APIs by working with the AIR Quick Starts.


Upcoming Flex Events

    360 | Flex Conference
     Indy, Indianapolis, IN
     May 18 - 20, 2009