Rieccoci con un semplice tutorial ma che mi ha fatto dannare un po’ di giorni, perché non ne ho trovato uno che mi soddisfacesse.

Oggi parliamo di come tracciare un sito in flash tramite il tool di google analytics, ovvero il traking di un sito, tramite le librerie messe a disposizione proprio da google per l’actionscript.

Quello che noi possiamo tracciare sono tutte le azioni di un utente, ovvero gli eventi che si scatenano a particolari azioni, come la pressione di un tasto, oppure il fatto stesso di averci passato sopra il mause,  e poi ancora, pressioni di menù, banner, link e qualsiasi oggetto presente all’interno del nostro sito, consultabili tramite il pannello delle statistiche di google, uno dei più completi strumenti free. Ma come si fa?

Di seguito un semplicissimo tutorial step by step:

Passo 1:

Creazione di un account analytics dal seguente link (E’ necessario avere un account di posta GMail per poter accedere. Si può creare da qui).

Una volta entrato nel pannello di analytics in alto a destra creiamo il nostro account analytics, seguiamo tutti gli step che ci suggerisce google, il tutto è abbastanza semplice e intuitivo.

A fine operazione dovremmo avere una schermata dove ci viene chiesto di copiare lo script da inserire nel nostro sito.  In realtà a noi non serve l’intero script (perché quello è per un normale sito html) a noi interessa l’ID, facilmente riconoscibile perché è una sequenza di lettere e numeri come questa “UA-xxxxxx-x“. Lo copiamo e lo mettiamo da parte.

Passo2:

Ora scarichiamo la libreria per l’actionscript (nel mio caso si tratta di actionsctipt 3), che ci permette di interagire con analytics, dal seguente link. A lato troviamo il link nel pannello “Featured downloads“.

A questo punto decomprimiamo il pacchetto scaricato e all’interno troviamo la cartella doc, copiamo l’intero contenuto della cartella doc e lo incolliamo nel path dove è contenuto il nostro swf. Queste che abbiamo ora inserito sono le librerie che ci permetteranno di interagire con analytics.

Passo3:

Ora apriamo il nostro file flash del nostro sito e ipotiziamo di avere un codice come questo:

btn_azienda.addEventListener(MouseEvent.CLICK, chiama_azienda);

function chiama_azienda(e:MouseEvent):void
{

loader.load(new URLRequest(“sito/flash/azienda.swf”));

stagee.addChild(loader);

}

Questo è un tipico script che si applica a un tasto, che dice: quando viene premuto il pulsante che ha nome istanza btn_azienda allora scatena l’evento chiama_azienda, eseguendo la funzione.

La funzione in questo caso carica un nuovo filmato swf e lo aggiunge allo stage. Se vogliamo tracciare il click su questo pulsante allora procediamo come segue:

1. importiamo le librerie precedentemente scaricate e aggiunte al path del nostro sito:
   import com.google.analytics.AnalyticsTracker;
   import com.google.analytics.GATracker;
   
2. creiamo una variabile di tipo AnalyticsTrackers che ci servirà per tracciare ogni azione, e passiamo come parametri l’ID che abbiamo precedentemente copiato e incollato sul nostro blocco note, AS3 sta ad indicare il tipo di actionscript, mentre il parametro false indica che non è in modalità prova, se vogliamo controllare che tutto funzioni correttamente cambiamo in true, in questo modo vedremo un’interfaccia che ci farà vedere come l’actionscript invia le informazioni ad analytics:
   var tracker:AnalyticsTracker = new GATracker(this, “UA-xxxxxxx-x”, “AS3″, false );
   
3. scriviamo all’interno della funzione chiama_azienda questa riga, che altro non fa che inviare un impulso ad analytics, in modo da incrementare il valore delle statistiche per la pagina /Azienda, che non esiste, ma è come se fosse una pagina virtuale, serve solo a noi per poter capire all’interno del pannello di analytics, dove l’utente ha cliccato:
   tracker.trackPageview(“/Azienda);

A questo punto, ricapitolando,  il nostro codice sarà il seguente:

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

var tracker:AnalyticsTracker = new GATracker(this, “UA-xxxxxxx-x”, “AS3″, false );

btn_azienda.addEventListener(MouseEvent.CLICK, chiama_azienda);

function chiama_azienda(e:MouseEvent):void
{

loader.load(new URLRequest(“sito/flash/azienda.swf”));

stagee.addChild(loader);

tracker.trackPageview(“/Azienda);

}

A questo punto la riga tracker.trackPageview(“/Azienda”); dovrà essere riportata all’interno di ogni funzione che e richiamata da un EventListener, cioè un ascoltatore di evento, cambiando il target (/xxxx) in base al tipo di pulsante o evento associato.

Per il pulsante Home il codice sarà: tracker.trackPageview(“/Home”)

nel caso di una sotto-categoria di azienda il codice sarà: tracker.trackPageview(“/Azienda/Contatti”). Cosi facendo sappiamo che l’utente ha raggiunto la categoria Contatti passando per la categoria Azienda.

Conclusioni:

In questo modo noi abbiamo il pieno controllo di tutte le azioni che sono presenti nel nostro sito. Il tutto è ora consultabile all’interno del pannello statistiche di analytics al seguente link, dove possiamo monitorare i vari click.

ATTENZIONE: le statistiche sono riferite al giorno precedente. E quindi se abbiamo  appena implementato il traking code per flash, passeranno almeno un paio di giorni prima di vedere nel pannello i primi click.