Suggerimento rapido come utilizzare Google Analytics per il monitoraggio in Flash

In questo suggerimento rapido ti mostrerò come esaminare il modo in cui i visitatori utilizzano i tuoi siti web, i tuoi widget e i tuoi giochi. Quindi vedremo come migliorarli in base a queste informazioni!


introduzione

Costruire siti Web dall'aspetto piacevole è fantastico; costruire siti web che hanno un alto ritorno di investimento non ha prezzo.

Recentemente mi sono unito al web team di un'agenzia di comunicazione con sede a Bruxelles, un team con conoscenze specialistiche nei campi della progettazione dell'esperienza dell'utente, delle strategie di contenuto, dello sviluppo del software e della progettazione dell'interazione. Trascorriamo molto tempo su wireframe, storyboard e prototipi, che garantiscono che la funzionalità e il contenuto dei siti Web siano ottimali prima qualunque il disegno grafico ha luogo. Ciò significa che i nostri siti Web hanno una solida base su cui basarsi, il che si traduce in un ROI più elevato con meno tempo speso per lo sviluppo.

Una parte enorme del nostro lavoro è sotto il cofano: Google Analytics all'interno di Flash.

Questo strumento ci consente di misurare l'efficacia dei nostri siti rispetto ai nostri obiettivi predefiniti: frequenza di rimbalzo, percorsi di clic e persino misurazioni personalizzate come il numero di persone che hanno fatto scorrere una determinata pagina. I nostri specialisti analizzano tutte queste informazioni e le usano per ottimizzare il sito web. Se non stai misurando il modo in cui le persone utilizzano il tuo sito, puoi solo indovinare i suoi successi e i suoi insuccessi.

La seguente configurazione è una versione ridotta di una galleria di immagini; Google Analytics ha permesso al cliente di scoprire quali immagini hanno suscitato il maggior interesse. Ho omesso l'edificio della galleria in quanto non rientra nell'ambito di questo tutorial; Ce ne sono già abbastanza su Activetuts + - cerca solo "gallery".

Ci concentreremo su come configurare Google Analytics per dare un sorriso ai volti dei tuoi clienti (e probabilmente anche ai tuoi ...)


Google Analytics in azione

Ecco la galleria immagini semplificata:

Come puoi vedere, quando un'immagine viene cliccata, la sua identità viene inviata al mio account Google Analytics. Più avanti, posso controllare tutte le statistiche su cui sono state fatte le immagini, a che ora, in quali paesi e così via.

(Ovviamente, rimuoverai tutte le informazioni sovrapposte quando è dal vivo sul tuo sito!)


Passaggio 1: comprendere i vantaggi

Immagina di lavorare ore, settimane, persino mesi su un sito web. I file vengono consegnati con successo prima della scadenza, ma pochi mesi dopo è chiaro che, nonostante sia bello, il sito non attira più clienti di quanto si aspettasse il cliente. Google Analytics ti aiuta a rivedere le abitudini di navigazione dei visitatori e a scoprire quali parti del sito potrebbero essere meglio evidenziate. La bellezza è grande, ma credo che Return Of Investment dovrebbe essere la tua priorità principale.

In un altro scenario, questo stesso strumento ti aiuta a capire quale area del tuo sito web ha il maggior numero di visualizzazioni di pagina, quante volte i visitatori hanno voluto contattarti o quali elementi del tuo portfolio amano di più. Quanti benefici puoi pensare per il tuo sito?


Passaggio 2: configura un account Google Analytics

Se non disponi già di un account Google, registrane uno qui: ci vogliono solo pochi secondi.

Una volta fatto, vai su http://google.com/analytics e registrati per un account Analytics. Lì puoi dare un nome account per i siti web che vuoi monitorare.


Passaggio 3: all'interno della macchina

Vai a https://google.com/accounts/ManageAccount
e usa le tue abilità con il mouse per fare clic su Analytics.

Bene, ora siamo nella pagina Panoramica. Dovresti vedere il nome dell'account Analytics; cliccalo e ti ritroverai nei profili del sito.

Se non hai impostato un sito web da monitorare, fai semplicemente clic su "Aggiungi profilo sito web". Inserisci il tuo nome di dominio e il Paese, quindi fai clic su Fine.


Passaggio 4: Recupera il tuo codice UA e lo stato di monitoraggio

La pagina Stato del monitoraggio apparirà automaticamente:

La parte più importante è il tuo ID proprietà web. Si tratta di un numero univoco che Google Analytics utilizzerà per inviare e archiviare il traffico del tuo sito web. (Copia questo codice UA per utilizzarlo più tardi in Flash, o annotalo.) Per questa introduzione terremo semplicemente tutte le opzioni ai loro valori predefiniti.

Se hai intenzione di incorporare il tuo SWF nella tua pagina web, il codice javascript deve essere incollato immediatamente prima del tag nel codice HTML della pagina. Questo ti consentirà di mantenere le statistiche per la pagina vera e propria, così come all'interno del file SWF. Vale la pena inserire questo codice in ogni pagina del tuo sito.

Tutto questo è fantastico, ma non sarai ancora in grado di individuare l'interazione dei tuoi visitatori in modo molto dettagliato, dato che l'HTML è cieco rispetto al tuo reale contenuto SWF / Flash.


Passaggio 5: Raccolta del legno

Per assicurarti di poter vedere quali parti del tuo SWF vengono utilizzate, vai su http://code.google.com/p/gaforflash/.

Questa incredibile API open source AS3 ha un sacco di ottime funzionalità per l'integrazione di GA in Flash, ma anche con i nostri siti web più grandi e complessi, abbiamo sempre usato solo due funzioni. (Ulteriori informazioni su questi più avanti.) Assicurati di scaricare l'ultima puntata sulla destra della pagina. (Torna in qualsiasi momento per leggere il wiki, i problemi, ecc. Per saperne di più su questa vasta API).


Passaggio 6: installare i componenti

Lo zip contiene una cartella di documentazione con l'intero layout API per aiutarti lungo il percorso; una cartella della libreria (lib) in cui troverai i due componenti; e alcuni file di testo che probabilmente non leggerete mai. Almeno non l'ho fatto;]

Per installare i componenti, assicurati che Flash sia chiuso, quindi vai a:

  • Utenti Windows: C: \ Programmi \ Adobe \ Adobe Flash CS X \ lingua \ Configurazione \ Componenti
  • Utenti Mac: Macintosh HD / Applicazioni / Adobe Flash CS X / Configurazione / Componenti

A questo punto è necessario creare una directory denominata "Google" e copiare i file dalla cartella \ lib \ nel relativo zip.

Fondamentalmente i due componenti ti danno la stessa funzionalità ma sono sviluppati per due scopi diversi. Il componente Analytics è per coloro che non hanno familiarità con AS3. Presumo che molti di voi stiano già utilizzando AS3, quindi utilizzeremo il componente AnalyticsLibrary.


Step 7: Nutrire il fuoco

All'interno di Flash, apri FLA per il progetto su cui stai lavorando, fai clic su Finestra> Componenti, e trascinare il componente AnalyticsLibrary nella libreria.


Step 8: Azione! (Script)

Sia che stiate codificando sulla timeline o usando una classe di documenti, dovrete fare alcune importazioni:

 // importa le classi di Analytics import com.google.analytics.AnalyticsTracker; importare com.google.analytics.GATracker;

Inoltre, nel codice, crea una nuova istanza di AnalyticsTracker:

 var tracker: AnalyticsTracker = new GATracker (questo, "UA-XXXXXX", "AS3", vero);

I parametri sono: stage, codice UA, modalità actionscript 3, visual debugger on / off. Lasciali tutti come li ho impostati, a parte il codice UA che dovrai scambiare per conto tuo. Imposta l'ultimo parametro su falso quando hai finito con le tue fasi di test, come quando vero creerà una sovrapposizione sopra il tuo file SWF come nell'esempio sopra.

Prova questo aggiungendo un listener e un gestore di eventi Click a uno dei tuoi filmati o pulsanti:

 myMc.addEventListener (MouseEvent.CLICK, onClick);
 function onClick (event: MouseEvent): void // rendi felici i tuoi clienti. // usa 'event.target.name' invece di 'event.target' // questo mostrerà 'myMc' invece di [object myMc], che è ovviamente un output più carino. var mySelection: String = event.target.name; tracker.trackPageview ("gallery =" + mySelection); 

Qui stiamo usando il trackPageview () funzione. Utilizzare questo per scopi di navigazione. È possibile aggiungere una stringa in modo che il client sappia quale parte viene tracciata. In questo caso stiamo monitorando quale galleria è stata attivata. Quindi copia e incolla questo codice ovunque tu voglia monitorare le tue interazioni e dare una stringa comprensibile ai dati.

Ad esempio, se hai un pulsante "call to action" sul palco per attirare nuovi potenziali clienti, potresti scrivere:

 tracker.trackPageview ("Assumimi");

... nel gestore eventi Click per quel pulsante. O se vuoi monitorare quante volte hanno letto il tuo disclaimer:

 tracker.trackPageview ( "Disclaimer");

Sono sicuro che ti viene l'idea.


Passaggio 9: Monitoraggio eventi

Usa il tracciamento degli eventi se vuoi monitorare quale video o evento MP3 viene riprodotto, o quando l'utente lo mette in pausa - cose del genere. È fondamentalmente per qualsiasi azione che non rappresenti l'apertura di una "pagina".

Il codice si presenta così:

 trackEvent (categoria, azione, etichetta);

Per esempio:

 tracker.trackEvent ("profile video", "play", "first video: introduction");

Inoltre è possibile aggiungere un quarto parametro. Questo può rappresentare qualsiasi valore che ti piace, ma deve essere un numero intero (numero intero). Ad esempio, potresti voler indicare l'ora esatta in cui il video è stato messo in pausa.

Questo è bello per vedere quanto il tuo streaming o il download è performante per i tuoi visitatori (non tutti hanno connessioni Internet di prima classe):

 var currentTime: Date = new Date (). time; // ottenere l'ora attuale // caricare il video qui var readyToRoll: Date = new Date (). time - currentTime; // tempo necessario per caricare il video tracker.trackEvent ("profilo video", "riproduzione del video", "video 1/3: introduzione", readyToRoll);

Passaggio 10: visualizza i dati in Google Analytics

Vai a http://google.com/analytics/settings/ e fai clic sul nome dell'account. Accanto al tuo nome di dominio, fai clic su Visualizza rapporto.

Qui vedrai una sequenza temporale. (Nota: a seconda del tempo di risposta del tuo server, può trascorrere un po 'di tempo prima che i dati vengano archiviati, ma non dovrebbe impiegare troppo tempo.) Seleziona le date per quando hai provato usando il calendario in alto a destra:

Individuare la panoramica del contenuto; qui puoi vedere quali eventi o pulsanti sono stati attivati:

Come puoi vedere, come ho spiegato alcuni passi indietro, event.target.name visualizza un nome "carino" come "/ gallery = galleria 1", mentre event.target restituisce qualcosa come "[oggetto foto1]"

Cliccando su uno di questi link - ad esempio, "/ gallery = gallery2" - sarai in grado di vedere informazioni approfondite, come la risoluzione dello schermo dei tuoi utenti, quando scegli un'opzione nel menu a discesa.

C'è una fonte di informazioni profonda e ricca in quasi ogni singolo ramo del modulo di Google Analytics. È quasi impossibile elencarli tutti. Non aver paura; guardati intorno e vedi quali dati puoi fornire ai tuoi clienti e te stesso.


Step 11: Elimina te stesso dalle statistiche usando i filtri

È una buona idea filtrare il tuo comportamento; in caso contrario, ti fornirà dati errati poiché probabilmente lo testerai in modo dettagliato.

Puoi farlo filtrando tutte le attività provenienti dal tuo indirizzo IP, anche se tieni presente che funziona solo se hai un indirizzo IP statico. C'è molta documentazione nei file di aiuto; Non posso coprire tutto qui. Consulta http://www.google.com/support/googleanalytics/bin/answer.py?hl=it&answer=55481

I filtri possono anche essere utili per altri motivi. Ecco ulteriori informazioni: http://www.google.com/support/googleanalytics/bin/topic.py?hl=it&topic=11091


Step 12: The End is the Beginning ...

In questo suggerimento ho coperto solo un fiocco di neve sulla punta dell'iceberg di quello che puoi fare con questa incredibile API. È una rapida panoramica sulle due funzioni più vantaggiose che trattiamo per migliorare i nostri siti Web e soddisfare i desideri dei nostri clienti.

Puoi anche impostare obiettivi predefiniti, utenti di gruppi che (ad esempio) utilizzano monitor widescreen, basano i tuoi Analytics sulle parole chiave del motore di ricerca e così via. Per i tuoi clienti, puoi inviare un'e-mail con rapporti giornalieri, settimanali o mensili (come xml, PDF o altri formati) o persino dare loro l'accesso alla tua pagina Analytics. Se desideri maggiori informazioni, chiedi nei commenti!


Le mie opinioni sui siti Web Flash compatibili con i motori di ricerca

Sebbene sia utile leggere e rintracciare le interazioni dei tuoi visitatori, questa è una lunga strada dall'utilizzo di Flash in un mondo SEO-friendly. Ti ho scaldato per la progettazione ottimale del sito web e concentrandomi sul ritorno degli investimenti, ma non siamo ancora arrivati.

Un buon passo successivo sarebbe quello di esaminare il framework Gaia e utilizzare la sua potente configurazione per lavorare con swfaddress e deeplinking. Questo ti permetterà di tracciare le singole pagine del tuo progetto di sito web e in combinazione con la tua nuova conoscenza della magia di Google Analytics, sono sicuro che non solo i tuoi clienti sorrideranno.

Nota dell'editore: Abbiamo alcuni tutorial di Gaia in fila, non preoccuparti;)

Ho lavorato per oltre 10 anni nel mondo della grafica e non ho mai avuto così tanto potere per sapere esattamente cosa vogliono i miei clienti e visitatori. Mi piace spesso chiamarlo "marketing e ricerca gratuiti dal desktop". (Se ti stai chiedendo perché il mio sito non stia usando questa tecnologia, onestamente ... spero di rilanciare entro la metà del 2010 * sorseggiare un caffè *)

Spero che questo ti apra nuove porte e aumenti le tue capacità. Buona fortuna e buon divertimento!