Google Analytics e Flash – Tracking di un sito Flash (AS2 & AS3)

analytics-flash

Da un po’ di giorni alcuni utenti mi hanno scritto, descrivendomi le loro difficoltà ad utilizzare il tracking code di google con actionscript  2, in un vecchio post infatti avevo descritto con un tutorial la possibilità di utilizzare google analytics solo con AS3, ho pensato quindi di creare un post apposito per schiarire un po’ le idee su questo argomento, e infondo all’articolo la possibilità di scaricare il file sorgente in entrambi i linguaggi AS2 e AS3.

Il codice di google è sostanzialmente sempre uguale per entrambe le versioni di actionscrip, la differenza tra il AS2 e AS3 è ovviamente il modo in cui sono trattati gli eventi pulsante.

Ma partiamo dall’inizio, velocemente riscrivo i semplici passi da seguire prima di operare sul file flash:

1. Iscriversi a Google Analyics tramite questo link. (Bisogna avere un account google per poter fare ciò).

2. Registrare un nuovo dominio, quindi ricavare il codice html di tracking code.

Dovremmo avere qualcosa tipo questo (a seconda l’utilizzo del codice vecchio o nuovo di anayltics):

<!– LEGACY GOOGLE ANALYTICS CODE –>

<script src=”http://www.google-analytics.com/urchin.js” type=”text/javascript”></script>

<script type=”text/javascript”>

_uacct = “UA-000000-0″;

urchinTracker();

</script>

<!– NEW GOOGLE ANALYTICS CODE –>

<script type=”text/javascript”>

var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);

document.write(unescape(“%3Cscript src='” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));

</script>

<script type=”text/javascript”>

var pageTracker = _gat._getTracker(“UA-000000-0″);

pageTracker._initData();

pageTracker._trackPageview();

</script>

3. A questo punto incolliamo l’intero codice sopra riportato infondo alla pagina html (index.html o index.php) prima del tag </body>

4. A questo punto passiamo a inserire il nostro codice all’interno del flash (nell’esempio è sempre visualizza in doppia versione vecchio è new codice per entrambe le versioni di AS):

AS2

// legacy tracking code
indexLegacy_mc.onRelease = function():Void
{
getURL(“javascript:urchinTracker(‘/home/indexLegacy’);”);
};
// new tracking code
indexNew_mc.onRelease = function():Void
{
getURL(“javascript:pageTracker._trackPageview(‘/home/indexNew’);”);
};

AS3

indexLegacy_mc.addEventListener(MouseEvent.MOUSE_UP, doLegacyRelease);
indexNew_mc.addEventListener(MouseEvent.MOUSE_UP, doNewRelease);
indexLegacy_mc.buttonMode = true;
indexNew_mc.buttonMode = true;
// legacy tracking code
var legacyURL:String = “javascript:urchinTracker(‘/home/indexLegacy’);”;
function doLegacyRelease($evt:MouseEvent):void
{
navigateToURL(new URLRequest(legacyURL));
}
// new tracking code
var newURL:String = “javascript:pageTracker._trackPageview(‘/home/indexNew’);”;
function doNewRelease($evt:MouseEvent):void
{
navigateToURL(new URLRequest(newURL));
}

In entrambi i casi, vediamo come viene inserita all’interno della funzione che è richiamata quando si clicca sul pulsante un particolare codice come se si richiamasse un url, ma non richiamiamo un url vero e proprio ma un codice javascript di questo tipo: “javascript:urchinTracker(‘/home/indexLegacy’);”

Con questo codice non facciamo altri che passare alla funzione urchinTracker di google un parametro (/home/indexLegacy) o può essere il nostro pulsante di “Home” come “Chi Siamo” o “Contatti” e se il pulsante si trova in una sottosezione di “Chi Siamo” come ad esempio facciamo che sia “La Mission” in questo caso come parametro all’interno del pulsante “La Mission” inseriremo il seguente codice “javascript:urchinTracker(‘/home/indexLegacy’);”

Il nome utilizzato all’interno della funzione javascript sarà quello visualizzato all’interno del nostro pannello di statistiche analytics, quindi questo ci permette di capire con facilità che le statistiche si riferiscono a quella particolare sezione raggiunta tramite la sezione “ChiSiamo”. Nel caso la stessa sezione è anche raggiungibile tramite un pulsante posizionato in home sarà /home/LaMission, in questo caso avremo le statistiche su questa particolare sezione visualizzata all’interno di analytics come Home/LaMission, quindi raggiunta direttamente da Home.

Lo stesso, accade per l’ AS3.

Di seguito è possibile scaricare anche il sorgente del progetto!

[download id=”2″ format=”1″]

  • kikko

    Davide…Grandissimo!

  • Roberto

    Bellissimo tutorial, molto utile

  • Laura

    Scusami…ma quindi non bisogna più importare le classi (in flash) come avevi detto nell’articolo precedente?