Archive for June, 2009

PureMVC Skeleton for ActionScript projects

I had previously done a PureMVC skeleton for Flash websites and applications, meaning that you would use the Flash IDE compiler to compile your project. Lately I have been doing more and more ActionScript projects (compiled using the Flex compiler but not using the Flex framework) because it permits the separation of big FLAs into smaller ones thus facilitating working in team. But I had no template/skeleton to start with until now.

So here it is:

PureMVC ActionScript Project Skeleton

It still uses an external preloader and I added a local Boolean so that the application knows your are testing locally and not on the sever (useful when making server call). One of the major change is the inclusion of the SharedAssetLibrary. Basically this emulate having one FLA with all graphics and MovieClip, but you actually can have multiple FLAs. When you want to add something to the SharedAssetLibrary you first add it to a FLA, set it to Export for ActionScript and then compile it to the swf folder. Then you can add it in the SharedAssetLibrary using the embed statment:

//BackgroundAsset being the name you gave it in the library
 
[Embed(source="../../../swf/Background.swf", symbol="BackgroundAssets")]
public var BackgroundAssets:Class;

Now if you want to use this in any of your views, first import SharedAssetLibrary and than you can use it like this:

var BackgroundAssets:Class = SharedAssetsLibrary.getInstance().getAsset("BackgroundAssets");
var assets:* = new BackgroundAssets();
addChild(Sprite(assets));

I included a FlashDevelop project file in there, but you can just delete it if you use Flash Builder.

Using a skeleton greatly reduce the setup time of a project, so I hope this will help you. I want to look into doing a skeleton for Flex Application, because I don’t like the skeleton that is available on the PureMVC website.

, , , ,

7 Comments


Why I have been talking so much about Google Analytics lately

If you take a look at my 4-5 last post you’ll notice that they are all about Google Analytics, be it Google Analytics for Flash or Google Analytics Data API. There are a couple of good reasons for that.

A new presentation

First, I’m really proud (and scared) to say that I am going to give a presentation at the InsideRIA conference in August in San Jose. The topic will be Google Analytics For Flash so I’m mostly going to reuse my presentation I did for the Montreal Flash User Group but I will adapt it for RIAs and I will add a big part on how to retrieve the data you send to Google back in your RIA using Google Analytics Data API. So I need to shape up on those topics and learn every thing there is to learn so that I can give a presentation with great content.

A new application

Secondly, I have this great idea. I wasn’t going to blog about it at first until it was done but my motivation kinda withered so I hope that by exposing it here and getting feedback I will start working on it again. What I want to do is build a rich internet application that displays Google Analytics Data in a way that makes more sense for Flash website. Flash website differs from HTML website in a lot of ways but web analytics don’t display their data while taking these differences into consideration. If we only take preloading and videos, we could have insightful data visualization that would show how many people saw which section of your video (that could be a heat map representing the timeline of the video) or how many people started the preloading process but didn’t end it. Another area that I would like to tackle is to set a standard on how to use events.

Right now there is no clear guideline on how to use events. It’s really free for all and no one is doing the same thing, so when you go in someone else reports it takes a while to understand what is going on. So I would basically be creating a set of guidelines for Events and then my application would be interpreting them differently than Google Analytics. While I’m there I could also associate events with pageviews. What is disturbing right now is that with events you can know how many people clicked on your button but it is pretty hard to see how many people actually saw the button so it’s hard to tell if your interface is performing well.

Well that my plan, the first step was to be able to connect to Google Analytics Data API using Flash on a webserver which I found out how. Now what I have left to do is create the guidelines for events and the interpret the data from Google Analytics. If you got any feedback on my idea please put it in the comments; it would really motivate me to start working on it.

, , , ,

1 Comment


How to connect to Google Analytics Data API in Flash

In one of my previous post, I explained how to connect to Google Analytics Data API in AIR. The problem with that way of connecting was that it only worked in AIR. In Flash it works locally, but as soon as you put in on your web server it stops working. Not it is cool to build an AIR (desktop) application that pulls data from Google Analytics, but it would also be cool to build a web application that does the same thing. Well I found out how to do just that. It is a bit more complicated because it involves a bit of server side coding, in this case PHP.

How the process works is that first you login to Google Analytics, Google will then send you a token that you must use when asking for data. So we will have two simple PHP files; one to login in and one to ask for data.

The first one looks like this:

<?php
//this file is called get_token.php
$user = $_REQUEST[user];
$pass = $_REQUEST[pass]
 
require_once 'curl.php';
$curl = new Curl;
$response = $curl-&gt;post('https://www.google.com/accounts/ClientLogin', array(accountType => "GOOGLE",  Email =>$user, Passwd => $pass, service => "analytics", source => "zedia-GAStats-0" ));
$tempArray = explode("Auth=", $response);
?>
<root>
	<token><?php echo ($tempArray[1] ); ?></token>
</root>

The second one looks like this:

<?php
//this file is called call_ga.php
require_once 'curl.php';
$url = $_REQUEST["url"];
$token = $_REQUEST["token"];
 
$curl2 = curl_init();
curl_setopt($curl2, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($curl2, CURLOPT_HEADER, "0");
curl_setopt($curl2, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($curl2, CURLOPT_URL, $url);
 
curl_setopt($curl2, CURLOPT_HTTPHEADER, array('Authorization: GoogleLogin auth=' . $token));
$response2 = curl_exec($curl2);
echo ($response2);
?>

As you can see to make my calls to Google I am using the cURL library that is usually already installed on your server if you have PHP. Also for the get_token.php I am also using the Curl class, made by Sean Huber, that just makes it easier to work with cURL.  Upload these files to your server. Now that we have the server side figured out, we can move on to the Flash part;  here it is:

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.URLVariables;
import flash.text.TextField;
 
public class Main extends Sprite
{
  private var loader:URLLoader;
  private var _loader2:URLLoader;
  private var _textField:TextField;
  private var _token:String;
  private var _buffer:String = "";
  public function Main():void
  {
    loader = new URLLoader();
    loader.addEventListener(Event.COMPLETE, _onTokenLoaded, false, 0, true);
   //this call will load the token
 
    loader.load(new URLRequest("http://www.YOUR_URL_WHERE_THE_PHP_RESIDE.net/get_token.php?user=YOUR_USERNAME&pass=YOUR_PASSWORD"));
 
    _textField = new TextField();
    _textField.height = 300;
    _textField.width = 300;
    _textField.multiline = true;
    _textField.wordWrap = true;
 
    addChild(_textField);
  }
 
  private function _onTokenLoaded(event:Event):void {
    var tempString:String = String(loader.data);
    tempString = tempString.substring(1, tempString.length);
    var tempXML:XML = XML(tempString);
    _token = tempXML.token;
 
    _textField.text = _token;
 
    _loader2 = new URLLoader();
    _loader2.addEventListener(Event.COMPLETE, _onFeedLoaded, false, 0, true);
 
    var request:URLRequest = new URLRequest("http://www.YOUR_URL_WHERE_THE_PHP_RESIDE.net/call_ga.php");
    var urlVar:URLVariables = new URLVariables();
    urlVar.token = _token;
    urlVar.url = "https://www.google.com/analytics/feeds/accounts/default";
    request.data = urlVar;
 
    _loader2.load(request);
  }
 
  private function _onFeedLoaded(event:Event):void {
    _textField.text = String (_loader2.data);
  }
 }
}

What you basically do is that you use your server to do all the communication between the Flash and Google. Everytime you will want a different feed to get different data you will call the call_ga.php file. It is that simple. If you have any question on this feel free to ask them in the comments.

, , , , , ,

12 Comments


My Google Analytics For Flash presentation slides

Last Thursday I did my presentation on Google Analytics for Flash for SWFMontreal and it went really well. I learned 2 things while doing it. First that I should practice presenting out loud before doing my real presentation because it just better than practicing in my head. Secondly that a bomb threat in the Montreal metro can really decimate the audience. As a matter of fact, since there was the previously mentioned threat, the attendance to the user group was greatly reduced (15 people instead of 50). That was sad, but there was nothing I could do. I still wanted to post my slides so here they are.

On the same note, I received my copy of the Flash & Flex developer’s magazine where my article on Google Analytics For Flash was published and it feels very nice to see my own work in paper. They forgot to put my bio where I mention this blog, but I think they will fix this on my next article on TubeLoc. Can’t wait to see it.

Here is the verbatim from my slides

Google Analytics For Flash – Presentation Transcript

1. Google Analytics for Flash
2. Dominic Gélineau Flash developer Analytics, Animation, SEO dgelineau@gmail.com Blog: www.zedia.net Twitter: http://www.twitter.com/zedia WE ARE HIRING aubrey@twistimage.com
3. Why care about analytics? Because it’s cool To provide data to your clients on the impact of what you are doing To give you feedback on the effectivness of your work
4. Why Google Analytics? It’s free It’s widely used It has a concept called event It now has a library just for Flash
5. Basic concepts about web analytics PageViews Events
6. PageViews The PageViews model is based on the HTML version of a web page The real idea behind a pageView is NAVIGATION In HTML this is sent automaticaly every time the user changes or refresh the pageIn Flash we have to do this manually We should try and keep the same syntax as HTML for consistency
7. Events The real idea behind events is INTERACTION Whenever you want to track something that is not related to navigation you should use an event. In Google Analytics Events are not enabled for all profiles http://code.google.com/p/gaforflash/wiki/EventTrackingRequ est
8. Google Analytics for Flash Library http://code.google.com/p/gaforflash/ Just search Google for «Google Analytics for Flash»
9. How to install it Flex and Flash CS4 can import SWC Flash CS3 can’t Download the library from SVN Put the SWC file in this folder: C:\\Program Files\\Adobe\\Adobe Flash CS3\\language\\Configuration\\Components Macintosh HD:Applications:Adobe Flash CS3:Configuration:Components
10. Sample Code import com.google.analytics.AnalyticsTracker; import com.google.analytics.GATracker; var _tracker:AnalyticsTracker = new GATracker ( main, “UA-7777777-7”, “AS3”); _tracker.trackPageview(yourSectionName + “/”);
11. More on Events _tracker.trackEvent(“English”, “Client Quiz”, “Question 3”, value); Category, Action, Label, valueOnly the two first are mandatory Value is an integer No standards, no real guidelines
12. 2 Modes: AS3 vs Bridge The library can work in two modes, AS3 or Bridge. Each of them has there advantages.
13. AS3 Mode Stand Alone mode Doesn’t require javascript Usefull for full Flash website Usefull when you don’t control the HTML that wraps the swf like for widgets or games
14. Bridge Mode var _tracker:AnalyticsTracker = new GATracker (main, “window.PageTracker”, “Bridge”); Integrates better when the Flash part of a website is minor Enables more of the Google Analytics API like E-commerce allowScriptAccess = always
15. Visual Debug var _tracker:AnalyticsTracker = new GATracker (main, “UA-7777777-7”, “AS3”, true);   One of the coolest features of GA for Flash Permits you to see in real time what is being sent to Google Clear advantage over the old way, which was to wait 3 hours and check to see if everything worked
16. Visual Debug Screenshot
17. What should you track Too much is like not enough Tracking errors is really helpful
18. One draw back The library will add 40k to your project Might not be the best thing for all project Like banners
19. Links  Google Code – http://code.google.com/p/gaforflash/  Developer group – http://groups.google.com/group/ga-for- flash?pli= 1  Adobe Max presentation on GA for Flash – http://tv.adobe.com/#vi+f15385v1040
20. Questions?
21. Thank you Dominic Gélineau dgelineau@gmail.com www.zedia.net http://www.twitter.com/zedia

, , ,

2 Comments