Google Analytics and OpenLaszlo

If you haven’t used Google Analytics before, I can highly recommend you take a look. It’s a free service that allows you to get detailed traffic and usage information for your website. You don’t need to be paying for (or earning money from) Google via its advertising business, although Analytics does integrate with those services too. Your web site will most likely already have a log analysis solution (e.g. Webalizer) that outputs a pretty summary of visitors/hits/etc. of the traffic on your site. Analytics gives you a lot more information, although its easy to get at.

The really exciting thing for RIAs however, is that you can integrate them with Google Analytics, which your existing traffic analysis solution probably doesn’t do. You see, most traffic analysis tools work by keeping track fo the most commonly-requested URIs on a site. That’s fine for a traditional HTML-based site like a blog. With a RIA (such as an OpenLaszlo, Flash, AJAX, Flex, etc. application) the only things that would show up on your traffic stats would be the request for the app (e.g. SWF) itself, and the web services that it calls. Those web service calls may give you some clue as to users’ behavior, but you won’t see any user action that doesn’t involve an HTTP request. For example, if you have a tabslider component, you may want to know how often a particular tab is opened, but if the opening of that tab element doesn’t result in a request, the logs won’t be much use.

Here's how Google Analytics deals with this problem: Every HTML page on your site (including the wrapper page for an OpenLaszlo application) embeds a small piece of JavaScript (hosted by Google). That's how Google keeps track of your visitors in general. It also provides a browser JavaScript function you can call that takes an arbitrary string and logs that to your Analyitcs account. You can create whatever name you want. It'll show up in the Content Overview section of the report, along with other HTML pages that were accessed:

As far as the LZX code is concerned, it's actually quite simple. You will need to call a Google browser JavaScript method called pageTracker._trackPageView() whenever you want to register a user action from within your OpenLaszlo application. Since _trackPageView is a browser JavaScript method, you need to use the LzBrowser.loadJS() method to call it. (That's for OpenLaszlo 4.1 and below; it's lz.Browser in OpenLaszlo 4.2):

<canvas proxied="false">
    <tabslider width="400" height="300">
        <tabelement>First Tab
            <handler name="onopenstart">
                LzBrowser.loadJS("pageTracker._trackPageview('/opentab1')");
            </handler>
            <text fontsize="16">
                Thank you for looking at the first tab.
            </text>
        </tabelement>
        <tabelement>Second Tab
            <handler name="onopenstart">
                LzBrowser.loadJS("pageTracker._trackPageview('/opentab2')");
            </handler>
            <text fontsize="16">
                Thank you for looking at the second tab.
            </text>
        </tabelement>
        <tabelement>Third Tab
            <handler name="onopenstart">
                LzBrowser.loadJS("pageTracker._trackPageview('/opentab3')");
            </handler>
            <text fontsize="16">
                Thank you for looking at the third tab.
            </text>
        </tabelement>
    </tabslider>
</canvas>

Remember that you will have needed to embed the Google JavaScript include in your HTML wrapper page in order to access this method first.

MobileDataNow

MobileDataNow is a neat product offered from FireTrust that allows individuals to stay connected to important data when they’re on-the-go, via email, SMS or IM. It uses a really slick OpenLaszlo application for the administrative interface.

Here’s how it works: You install MobileDataNow and configure (using the OpenLaszlo-based admin interface) it to point to one or more of your data sources (which can be databases or SOAP web services). You configure user access permissions and define some queries and views of data. Then, when you want to perform a particular query, you use your cellphone to send an SMS (text message) to your MobileDataNow server. You can even pass query parameters via the message. The returned data arrives in your cellphone, formatted how you want it.

The idea is that you prepare the data reports you access regularly using the OpenLaszlo admin interface, and then you’re able to get at that data via SMS (or email or even IM).

MobileDataNow Screenshot

From an RIA development perspective, it has some neat features: There’s a simple but very handy context-sensitive help. You define your database queries using a WYSIWYG query editor that recognizes the database table structure and prompts you as you build the query (it also shows the generated SQL in real-time). And of course there’s lots of drag-and-drop shortcuts.

There is a free version – if you only have one user, then there is no charge. If you just want to see the admin app, there is a hosted demo.

Migrating LZX Code to OpenLaszlo 4.1

I was recently porting some LZX code in OpenLaszlo Training materials from 4.0.12 to 4.1, and stumbled upon a few issues, which I thought I’d post here as a reference.

Don’t use <method event=””> Syntax

The <handler name=””>syntax was introduced to replace the <method event=””> syntax some time ago. With 4.1, I found that the compiler/debugger could get confused if you continued to use the old syntax in some cases. Sometimes the error messages were not useful. In short, replace:
<method event="onevent"> ... </method>

… with:
<handler name="onevent"> ... </handler>

Delegate Method Arguments

Any method you call with a delegate must now have a defined argument. This is in preparation for future compatibility with SWF9. Check these out colabioclipanama2019. In short, if you write:
<script> new LzDelegate(canvas, "myMethod", ds, "ondata"); </script>

<method name="myMethod"> ... </method>

… you should define your method as shown below:

<method name="myMethod" args="arg"> ... </method>

The New “lz” Namespace

In OpenLaszlo 4.0.x, there was a global object that contained references to classes, colors and global tokens. In OpenLaszlo 4.1, there is now an lz object that replaces this for class definitions. Here’s salbreux-pesage an example for you to better understanding.It creates a virtual namespace. So if you need to procedurally instantiate an OpenLaszlo window, instead of writing:

new window(canvas, {width:300, height:300});

… you now write:

new lz.window(canvas, {width:300, height:300});

If you need to paramaterize the name of a class, you used to write:

var classname = "window"; new global[classname](canvas, {width:300, height:300});

… instead, now you would write:

var classname = "window"; new lz[classname](canvas, {width:300, height:300});

Those are the main issues I ran into. Otherwise code written for OpenLaszlo 4.0.12 seems to run fine on 4.1.