Un blog di ispirazione...

GraphiCal

…di tutorials, grafica, freebies, web design, sviluppo web, flash, photoshop, illustrator, idee, showcases, tools, font, css …

Google Analytics e Flash – Tracking di un sito Flash

October15

tut6-ban

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.

graphical_analytics



Se ti è piaciuto l'articolo condividilo in rete! ;)

http://www.graphical.it/wp-content/plugins/sociofluid/images/digg_32.png http://www.graphical.it/wp-content/plugins/sociofluid/images/stumbleupon_32.png http://www.graphical.it/wp-content/plugins/sociofluid/images/delicious_32.png http://www.graphical.it/wp-content/plugins/sociofluid/images/technorati_32.png http://www.graphical.it/wp-content/plugins/sociofluid/images/google_32.png http://www.graphical.it/wp-content/plugins/sociofluid/images/myspace_32.png http://www.graphical.it/wp-content/plugins/sociofluid/images/facebook_32.png http://www.graphical.it/wp-content/plugins/sociofluid/images/twitter_32.png

Ti potrebbe interessare anche:

  1. Google Analytics e Flash – Tracking di un sito Flash (AS2 & AS3) 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...
  2. Google search stories – Racconta la tua storia con una ricerca creativa! Google Search Stories un nuovo servizio by Google creato per la creazione di video in modo automatico e creativo da pubblicare, non a caso, su YouTube. Con questo servizio...
  3. Nuovi font per un web più attraente! Ci pensa Google! Quante volte siamo stati vincolati dall’utilizzo dei soliti font compatibili per il web, perché gli unici permessi dallo standard  browser, a scapito del design del sito stesso. Infatti i...
Categoria: Tutorials
11 Comments to

“Google Analytics e Flash – Tracking di un sito Flash”

  1. kikko Il 14 May 2010, alle 5:20 pm

    Ciao Davide,
    innanzitutto complimenti per il tuo blog e per questo articolo in particolare. Ho un paio di domande in merito:

    1) funziona anche con AS2? se si, in che modo?

    2) Funziona se ho tutto il sito fatto in flash diviso per scene? nel senso che ho un unico swf con all’interno 4 scene.. index, chi siamo, news, prodotti.

    grazie mille

    kikko

  2. Davide Il 14 May 2010, alle 8:25 pm

    Ciao Kikko grazie per i complimenti ;)
    Si in effetti il codice è per as3, ma credo che funzioni allo stesso modo anche per as2, basta convertire la stessa funzione per as2 e allo stesso modo richiamarla all’interno di un evento pulsante.

    Per le scene, non c’è problema, funziona ugualmente.

    Ma se posso darti un consiglio per un sito in flash cerca di lavorare per swf e non per scene, crea un swf principale e un swf per ogni sezione del sito, richiamdoli all’occorrenza all’interno di quello principale quando viene cliccata la sezione. Questo ti permette di avere un sito più leggero e veloce nel caricamento! ;)

    ciao e se non l’hai ancora fatto continua a seguirmi anche su facebook!

  3. alessandro Il 15 May 2010, alle 12:43 am

    Scusami,cos’è il path?
    e soprattutto per un pulsante classico on realease goToAndPlay ecc…
    è possibile fare lo stesso procedimento?

  4. Davide Il 15 May 2010, alle 10:21 am

    Ciao Alessandro, il Path di un file o di una cartella è il percorso, in questo caso è il l’indirizzo dove tu hai il progetto flash, determina la posizione esatta del progetto flash sul tuo computer.

    Es. se io ho la cartella del sito sul desktop quindi in: ..davide/desktop/sito/main.swf andrò incollare la cartella doc in ..davide/desktop/sito/ quindi nello stesso “path” del sito flash.

    Per il gotoAndPlay funziona allo stesso modo, tutte le azioni possono essere tracciate, perchè in flash ogni cosa che clickki è contenuta in un pulsante, questo scatena l’esecuzione di una funzione in questo caso quella del gotoAndPlay, dovrai quindi inserire la riga di codice che ti permette di tracciare l’evento nella stessa posizione di gotoAndPlay dentro OnRealease(){…} :)

  5. kikko Il 15 May 2010, alle 10:34 am

    grazie Davide…allora faccio un pò di prove. :-)

    posso disturbarti se ho difficolta?

  6. Davide Il 15 May 2010, alle 11:45 am

    Certamente! ciao

  7. alessandro Il 16 May 2010, alle 10:16 pm

    sei stato chiarissimo!!!…scusa certe domande sono veramente basilari…ma il tuo è davvero un bel blog..nn potevo nn approfittarmene …GRAZIE ANCORA ORA PROVO UN Pò

  8. alessandro Il 17 May 2010, alle 1:30 pm

    ciao davide scusami…

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

    var tracker:AnalyticsTracker = new GATracker(this, “UA-******-1”,
    “AS2″, false );
    on (release) {
    gotoAndPlay(”homepage”)
    tracker.trackPageview(”/homepage);
    }

    così mi dà una caterva di errori…l’swf funziona mi da parecchi errori di sintassi e di variabile?
    sapresti darmi qualke consiglio? ***

  9. alessandro Il 17 May 2010, alle 1:38 pm

    ho provato a correggere così…e mi dice

    on (release) {
    import com.google.analytics.AnalyticsTracker;
    import com.google.analytics.GATracker;

    var tracker:AnalyticsTracker = new GATracker(this, “UA-16403964-1”,”AS2″, false );

    gotoAndPlay(”homepage”);
    tracker.trackPageview(”homepage”);
    }

    e mi dice impossibile caricare la classe o l’interfaccia com.google.analytics.analitycsTraker

    io vorrei metterlo solo sul tasto entra…Ma mi dà quest’errore…

  10. Davide Il 17 May 2010, alle 5:49 pm

    No non puoi mettere gli import all’interno della funzione richiamata dal pulsante. Avevi fatto bene nel commento precedente…soltanto che non so aiutarti con AS2.. vedo di fare alcune prove e ti faccio sapere

  11. Davide Il 18 May 2010, alle 8:00 am

    Per tutti quelli che hanno trovato difficoltà, ho scritto un nuovo post per schiarire ogni dubbio e perplessità anche per il mondo dell’AS2, con esempio da scaricare:

    http://www.graphical.it/tutorials/google-analytics-e-flash-%E2%80%93-tracking-di-un-sito-flash-as2-as3/

    Spero possa essere d’aiuto
    Davide

Email will not be published

Website example

Your Comment:

Ads

  • Polls

    • A che tipo di articoli sei interessato?

      View Results

      Loading ... Loading ...