ActionScript » unijimpe

Google Analytics para Flash

22/11/2008
11:44 am
unijimpe

Acaban de lanzar una versión del código de seguimiento de Google Analytics, llamado gaforflash escrito en AS3 especialmente preparado para facilitar el seguimiento de páginas Flash. Este componente contiene toda la funcionalidad del código Javascript de Google Analytics y es 100% compatible con las últimas versiones del código de seguimiento ga.js.

En anterior oportunidad habíamos comentado sobre Google Analytics y Flash, una técnica que utiliza getURL para comunicar Flash con Javascript y por ello comunicar Flash con las funciones contenidas en ga.js. Pero esta nueva versión no requiere el uso de la librería ga.js y el uso Google Analytics es mucho mas sencillo pues se provee de funciones que se pueden llamar directamente con AS3.

Instalar el Componente
Para hacer uso del código de seguimiento en Flash, hace falta instalar un componente, para ello es necesario descargar los archivos desde gaforflash downloads. El siguiente paso es crear una carpeta llamada Google en el directorio de componentes de Flash.

// For Windows:
C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Components
// For Mac OS X:
Macintosh HD/Applications/Adobe Flash CS3/Configuration/Components

Luego, extraemos el archivo recién descargado y copiamos el archivo analytics.swc a la carpeta recién creada, con esto ya esta instalado el componente y ya estamos listo para hacer uso de sus propiedades y métodos.

Utilizando el Componente
Lo primero es importar las clases necesarias para hacer el seguimiento, esto lo hacemos al inicio de todo el código:

import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker;

El siguiente paso es crear una instancia del objeto GATracker, este objeto permite definir como se comportará el seguimiento de eventos en nuestro flash y cuya sintaxis es la siguiente.

new GATracker( display, "gaID", "mode", debug );

Donde se tienen los siguiente parámetros.

display: Referencia al actual objeto display.
gaID: es tu código de Google Analytics para registrar las visitas.
mode: es el modo de tracking (Bridge o AS3)
debug: modo de depuración (true o false).

Luego de ello creamos una variable del tipo GATracker y posteriormente lo utilizamos para hacer el seguimiento cada vez que se hace click a un botón.

import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker;
var tracker:AnalyticsTracker;
tracker = new GATracker( this, "UA-XXXXXX-X", "AS3", true );
playGame.addEventListener( MouseEvent.CLICK, onButtonClick );
function onButtonClick ( event:Event ):void {
tracker.trackPageview("/section");
}

Esta es una nueva opción que no solo sirve para hacer el seguimiento de visitas de páginas Flash si que también permitirá hacer el seguimiento de eventos en archivos SWFs individuales sin necesidad que estén incluidas en un HTML.

Posts Relacionados

trim en ActionScript

13/10/2008
11:41 pm
unijimpe

La función trim es una función muy común utilizada en la mayoría de lenguajes de programación la cual se encarga de eliminar los espacios en blanco al inicio y al final de una cadena. ActionScript por defecto no incluye esta función por lo cual tendremos que construirla manualmente.

La forma mas común de implementar esta función es crear dos funciones una para eliminar los espacios en blanco al inicio y otra al final de la cadena y luego unirlas, en esta ocasión les presento dos funciones preparadas para ser rápidas y eficientes.

trim en ActionScript 2.0

Es función fue creada por frog style web engineering con una serie de funciones adicionales. La función recorre los elementos desde el inicio y desde el fin eliminando los espacios en blanco, saltos de linea, tabuladores obteniéndose de esa forma la función trim.

function trim(str:String):String {
for(var i=0; str.charCodeAt(i)<33; i++);
for(var j=str.length-1; str.charCodeAt(j)<33; j--);
return str.substring(i, j+1);
}

Luego de ello podemos utilizar la función de forma sencilla, como se muestra a continuación.

var txt:String = " Hola trim!! ";
trace(trim(txt));

trim en ActionScript 3
Ahora en el caso de ActionScript 3 se puede hacer uso de las expresiones regulares, esta función publicada en AStorm - Devblog busca como en el caso anterior los espacios en blanco y los elimina pero con una expresión regular.

function trim(str:String):String {
return str.replace(/^\s*(.*?)\s*$/g, "$1");
}

Nuevamente podemos hacer las pruebas y verificar que efectivamente tenemos nuestra función trim que elimina los espacios en blanco al inicio y al final de una cadena.

Posts Relacionados

JSON con Flash

05/08/2008
12:40 am
unijimpe

Como comentabamos hace poco en JSON con Mootools, JSON es un formato para intercambio de datos que a diferencia de XML es mucho mas ligero pues se transmite la información como un objeto Javascript. En esta oportunidad veremos como utilizar JSON con Flash.

Cargando Flash

Obteniendo los Datos
Los datos en formato JSON para nuestro ejemplo lo obtendremos del servicio Google Ajax Search API del cual hemos comentado en un post anterior, para ello creamos un proxy el cual se encargará de hacer el cambio de dominio para poder acceder a esta información.

$apiQue = "Google"; // variable a consultar
$apiKey = "tu_key_google"; // key para acceder al servicio
$apiUrl = "http://ajax.googleapis.com/ajax/services/search/web";
if (isset($_GET['query'])){
$apiQue = urlencode($_GET['query']);
}
readfile($apiUrl."?v=1.0&key=".$apiKey."&q=".$apiQue);

Utilizando JSON con ActionScript 3
Por defecto Flash no puede interpretar JSON, pero para ello utilizaremos la librería as3corelib el cual contiene una gran variedad de clases para extender la funcionalidades del AS3 entre ellas un parser de JSON. Entonces descargamos los archivos y utilizamos las clase ubicadas en la carpeta com.

En nuestro archivo fla lo primero que hacemos es importar las clases necesarias para el funcionamiento de nuestro script.

import com.adobe.serialization.json.*;

Lo siguiente es leer el archivo que contiene la respuesta en JSON del servidor, esto lo hacemos con la clase URLLoader, luego agregamos un listener para detectar que se ha completado la carga para luego ejecutar la función decodeJSON.

var loader:URLLoader = new URLLoader() ;
var request:URLRequest = new URLRequest() ;
request.url = "proxy.php?query=unijimpe";
loader.load(request) ;
loader.addEventListener(Event.COMPLETE, decodeJSON) ;

Luego definimos al función decodeJSON, la cual se ejecutará inmediatamente después de completarse la carga de los datos, aquí utilizamos el método JSON.decode el cual se encarga de convertir el texto en formato JSON a un objeto que sera fácilmente manipulable con ActionScript.

function decodeJSON(event:Event):void {
var loader:URLLoader = URLLoader(event.target);
var data:Object = JSON.decode(loader.data);
var results = data.responseData.results;
for (var i=0; i<results.length; i++) {
var tmp = results[i];
trace(i + " --> " + tmp.title + "\n" + tmp.url);
}
}

Unimos estos elementos y tenemos un parser de JSON de manera sencilla, como podemos ver lo que se hace es convertir el texto cargado en un objeto que es muy fácil de manipular en Flash.

Completando nuestra aplicación
En el ejemplo anterior, solo hemos trazado los resultados, es momento de agregar un campo de texto para ingresar el criterio de búsqueda y otro campo de texto para mostrar los resultados, con lo cual obtenemos el siguiente código.

import com.adobe.serialization.json.*;
var vPath:String = "proxy.php?query=";
var vRequ:URLRequest = new URLRequest();
var vLoad:URLLoader = new URLLoader();
vRequ.url = vPath+"unijimpe";
vLoad.load(vRequ);
vLoad.addEventListener(Event.COMPLETE, onLoaded);
function onLoaded(event:Event){
var rpta:URLLoader = URLLoader(event.target);
var json:Object = JSON.decode(rpta.data);
var data:Array = json.responseData.results;
var vcon:String = "";
for (var i:Number=0; i<data.length; i++) {
var tmp = data[i];
vcon+= "<a href='"+tmp.url+"'>"+tmp.title+"</a>";
vcon+= "<br>"+tmp.content+"<br><br>";
}
txtcontent.htmlText = vcon;
scroller.scrollTarget = txtcontent;
}
btsearch.addEventListener(MouseEvent.CLICK, onClick);
btsearch.buttonMode = true;
function onClick(e:Event) {
txtcontent.htmlText = "Loading...";
vRequ.url = vPath+escape(txtQuery.text);
vLoad.load(vRequ);
}

El resultado de este ejemplo lo pueden ver al inicio de este post, como se observa ingresamos el criterio de búsqueda y obtenemos el resultado deseado. Finalmente les dejo los archivos fuente de este ejemplo para que lo descarguen y puedan realizar sus pruebas.