Share
Scopri come è possibile analizzare l'esperienza utente e le prestazioni dei siti Web Flash con Analitiche Usa meglio. Questo tutorial ti mostrerà come integrare la struttura di analisi con un sito demo per registrare le visite degli utenti e - con un po 'di magia - riprodurle come se fossero videoregistrate!
L'analisi It It Better non si limita all'esame del traffico per i siti Web Flash completi, ma può essere altrettanto utile durante i test di usabilità o la misurazione delle metriche RIA. Tuffiamoci dentro?
Diamo un'occhiata al risultato finale su cui lavoreremo. Fare clic sull'immagine qui sotto per riprodurre una visita di esempio in un sito demo, registrata in precedenza con Usa meglio:
Se si desidera registrare e riprodurre la propria visita, fare clic qui per visitare il sito demo stesso, quindi accedere al pannello di analisi utilizzando:
Nella scheda Visite, trova il tuo e fai clic su Riproduci.
Ai fini di questo tutorial utilizzeremo un piano di base di Use It Better, ma il processo di integrazione è lo stesso per un piano gratuito.
Dopo aver scaricato e decompresso il pacchetto sorgente, vedrai che all'interno ci sono due cartelle. Entrambi contengono fonti dello stesso sito web. Durante il tutorial lavoreremo su fonti da Sito demo cartella. Se vuoi vedere in anteprima ciò che stiamo per raggiungere, controlla Sito demo - Risultato finale cartella che contiene fonti che sono già state integrate con Usa meglio.
All'interno di ogni cartella troverai a src cartella contenente i file * .as e * .fla e a bin-debug cartella con tutti i file necessari per pubblicare il sito web - * .swf, * .html e così via.
Se vuoi saperne di più su qualsiasi argomento che copro nel tutorial, controlla la wiki di Use It Better
Per risparmiare tempo, ho già scaricato le classi di framework Use It Better e le ho inserite Demo sito / src / com / directory del pacchetto sorgente del tutorial. C'è anche adobe pacchetto in com directory contenente alcune librerie utili utilizzate da e distribuite con il framework.
Nel caso reale, dopo aver sottoscritto il proprio piano Use It Better (gratuito o a pagamento) è necessario scaricare framework dal pannello di analisi dove può essere trovato nella colonna di destra del impostazioni sezione.
Prima di tutto aperto UIBDemo.fla e la classe principale del progetto UIBDemo.as in cui dovrai inizializzare Use It Better.
Inizia con l'importazione della classe principale del framework, Udash:
package import com.useitbetter.uDash; // core Utilizza It Better class //? il resto del corpo del pacchetto
Trova dentro funzione che viene eseguita quando il film principale viene aggiunto allo stage. Inizializzare Udash aggiungendo la seguente riga di codice:
funzione privata init (e: Event): void stage.addChild (uDash.init ()); // inizializza e aggiungi allo stage //? il resto del corpo della funzione
Salva il file modificato e prova UIBdemo.fla (Ctrl + Invio). Il sito Web apparirà come prima ma noterai un nuovo messaggio nella finestra di output:
MESSAGGIO: benvenuto in uDash! La tua versione è "uDash AS3 1.0". Divertiti a sviluppare! MESSAGGIO: Connessione uDash al server socket 59873.s.useitbetter.com:59873 OK. Connessione valida? MESSAGGIO: la connessione uDash al server socket 59873.s.useitbetter.com:59873 è valida.
Ciò significa che il sito Web ha stabilito una connessione con i server Use It Better e ora registra la tua attività.
Prova a navigare nel sito web - compila e invia il modulo di contatto, gioca con la macchina. Cercheremo di ripetere questa visita nel prossimo passaggio per vedere se la registrazione ha funzionato correttamente.
Se non lo hai già fatto, è giunto il momento di visitare http://panel.useitbetter.com e accedere al progetto utilizzando le seguenti credenziali:
Una volta effettuato l'accesso, verrà visualizzato il report delle attività, ma ti consiglio di passare alla scheda Visite. Nella colonna di sinistra vedrai tutte le visite registrate in ordine di tempo - la tua visita registrata di recente sarà in alto.
Importante: tieni presente che non sei l'unico a utilizzare questo tutorial e potrebbero esserci altre visite registrate.
Sulla destra della pagina è possibile visualizzare i dettagli della visita. Clic Giocare pulsante per ripetere la visita.
Dopo aver fatto clic sul pulsante Riproduci, viene aperta una nuova pagina con le istruzioni su come riprodurre una visita registrata in Flash IDE. Basta copiare un comando replay, commentare il tuo originale dentro, e incollane uno dai tuoi appunti sotto:
Accentsconagua
// stage.addChild (uDash.init ()); // inizializza e aggiungi stage stage.addChild (uDash.init ('uTestSessionUrl @@ http: //panel.useitbetter.com/play/691d7f123f5d9780e613223e67ee8a22/ses/c5a72002ab439aaba2f9189718833035 || uTimezoneOffset @@ - 120 || uLocalDateTime @@ Sun May 15 19:57:29 GMT + 0200 2011 || uSessionDateTime @@ 2011-05-15 18: 57: 30 || uApiUrl @@ http: //api.useitbetter.com/ || uSessionHash @@ c5a72002ab439aaba2f9189718833035 || uProjectHash @ @ 691d7f123f5d9780e613223e67ee8a22 ')) Ora salva il tuo file AS e prova di nuovo il film Flash per vedere il replay.
Beh, non era magico? È possibile vedere i movimenti del mouse, i clic e anche i tratti chiave della visita registrata. E l'hai fatto con solo due righe di codice!
Tuttavia, la rotazione della macchina non ha funzionato affatto. Ma non preoccuparti. Tutto ciò che dobbiamo fare è solo apportare alcune piccole modifiche che tratterò nei prossimi passi. Ma prima di andare avanti, rimuovi il replay dentro e il non merito quello originale:
stage.addChild (uDash.init ()); // inizializza e aggiungi allo stage
Altrimenti vedresti di nuovo il replay.
Come puoi vedere, tutte le tue interazioni con il sito web usando il mouse e la tastiera sono state registrate automaticamente. Tuttavia, tutti gli ascoltatori aggiunti al palcoscenico l'oggetto deve essere registrato manualmente.
C'è uno di questi ascoltatori in CarInfo.as a partire dal Sito demo \ src \ core \ section \ car cartella. Controlla la linea n. 272:
UIBDemo.instance.stage.addEventListener (MouseEvent.MOUSE_UP, stageMouseUpHandler);
Inizia con l'aggiunta delle istruzioni di importazione:
pacchetto core.sections.car import caurina.transitions.Tweener; import caurina.transitions.properties.DisplayShortcuts; import com.useitbetter.uDash;
Ora trova il stageMouseUpHandler funzione che viene attivata da MOUSE_UP evento. È responsabile della disattivazione della rotazione della vettura dopo che l'utente ha rilasciato il pulsante del mouse. Uso recordMe metodo per registrarlo manualmente:
funzione privata stageMouseUpHandler (e: MouseEvent): void uDash.recorder.recordMe (e); // registra questo evento this.removeEventListener (Event.ENTER_FRAME, thisEnterFrameHandler);
Un'altra cosa che devi cambiare è il codice responsabile della vista a 360 gradi dell'auto. La rotazione dell'auto dipende dalla posizione del mouse e, naturalmente, ti piacerebbe che seguisse il mouse del visitatore e non il tuo durante il replay.
Cercare mouseX nel CarInfo.as e sostituire tutte le sue occorrenze (ce ne sono sei) con uMouseX (), proprio come qui:
lastX = carHolder.uMouseX () // mapping posizione del cursore
È completamente sicuro - uMouseX () il metodo restituisce la posizione reale del mouse durante la registrazione ma il mouse di un visitatore durante la riproduzione.
SUGGERIMENTO: quando si integra un progetto di grandi dimensioni, si consideri l'uso di un editor di codice che supporta la ricerca su più file (ad esempio, FlashDevelop). Ti aiuterà a trovare tutte le occorrenze nel tuo progetto
C'è solo una risorsa precaricata nel sito demo e questa è l'auto. Se si dispone di una connessione Internet più lenta di un visitatore, la cui visita si sta riproducendo, l'auto verrà caricata con un ritardo. Nella maggior parte dei casi non si noterà nemmeno la differenza, ma per il bene di questo tutorial ti mostrerò come usare i checkpoint per sincronizzare perfettamente la riproduzione.
Nel CarInfo.as, trovare la onCarLoadCompleteHandler () funzione che viene attivata da COMPLETARE evento una volta terminato il precaricamento della vettura. Aggiungere un posto di controllo per assicurarti che il replay attenda fino a quando l'auto non viene caricata.
funzione privata onCarLoadCompleteHandler (e: Event): void uDash.checkpoints.place ("car loaded"); // checkpoint aggiunto per sincronizzare la riproduzione con il preloading // il resto del corpo della funzione SUGGERIMENTO: i checkpoint sono utili per sincronizzare tutti gli eventi relativi al tempo come le animazioni.
Ora ripassa di nuovo i passaggi 3-5 per testare la registrazione e riprodurre una visita: il replay dovrebbe apparire esattamente come lo hai registrato. Se lo fa - andiamo avanti!
Use It Better è più che una semplice riproduzione di visite. Infatti, ha alcuni potenti report di analisi per lavorare sia su visite individuali sia su dati aggregati. Nei prossimi passi imparerai come registrare importanti eventi meta: sezioni e Azioni che alimenterà questi rapporti.
Nota: se sei interessato solo alle visite di riproduzione, puoi saltare al passaggio 14.
Iniziamo con la cosa più importante, registrando quali sezioni del sito web sono visitate. Abiliterà il rapporto sui percorsi e molte altre funzionalità nel pannello di analisi.
Il sito demo utilizza SWFAddress per il deep-linking e Use It Better può registrare automaticamente la parte di un URL dopo # come sezione. Cioè visitando tale URL:
http://mywebsite.com/#/car
sarebbe registrato come una visita al auto sezione.
Riattiva la classe principale del progetto UIBDemo.as situato in Demo Site \ src cartella. Cerca il initSWFAddress () funzione e inizializzare il supporto SWFAddress prima di ascoltare il MODIFICARE evento:
funzione privata initSWFAddress (): void uSWFAddress.init (); SWFAddress.setHistory (true); SWFAddress.addEventListener (SWFAddressEvent.CHANGE, swfAddressChangeListener);
Oh, e non dimenticare di importare il modulo Use It Better responsabile dell'integrazione con SWFAddress:
package import com.useitbetter.uDash; // core Usa It Better import di classe com.useitbetter.modules.uSWFAddress; // modulo responsabile dell'integrazione con SWFAddress //? il resto del corpo del pacchetto
Nota: se il sito web non ha indirizzo SWF puoi comunque registrare le sezioni manualmente.
Ci sono alcune azioni desiderate che i visitatori possono eseguire sul sito demo che renderebbe felice il proprietario del sito. Ad esempio: invio di un modulo di contatto. Registriamolo.
Aperto ContactInfo.as a partire dal Sito demo \ src \ core \ section \ contact cartella. Come sempre, inizia con l'importazione:
import com.useitbetter.uDash; // core Use It Better class
Ora trova messaggio inviato funzione che viene chiamata al modulo inviato con successo e aggiungere l'azione:
private function messageSent (): void uDash.recorder.saveMeta (uDash.metaevents.ACTION, "Modulo inviato dall'utente"); // il resto del corpo della funzione
Le azioni sono una parte importante di tutti i report Use It Better e sono uno degli indicatori chiave delle prestazioni (KPI) che ti aiuteranno a valutare il tuo sito web.
SUGGERIMENTO: puoi registrare quante azioni vuoi ma cerca di essere ragionevole - non tutte le azioni sono ugualmente desiderate.
OK, ora c'è l'ultima ma importantissima cosa. Il sito demo è stato incorporato nella pagina HTML utilizzando SWFObject per adattarsi al 100% della finestra del browser. Ciò significa che le dimensioni del film saranno diverse in risoluzioni dello schermo diverse e possono essere modificate durante una visita ridimensionando la finestra del browser. Dobbiamo registrarlo.
Vai a Sito demo \ bin-debug cartella in cui è possibile trovare index.html. Aprilo con un editor di testo e cerca un id di un oggetto HTML che contenga il nostro filmato Flash. Sembra difficile ma è facile da trovare:
swfobject.embedSWF ("UIBDemo.swf", "UIBDemo", "100%", "100%", "9", "expressInstall.swf", flashvars, params, attributi); Vedi il secondo argomento passato a embedSWF? UIBDemo? Questo è quello che stavamo cercando!
SUGGERIMENTO: in genere, se esporti HTML da Flash IDE, l'id è lo stesso del nome file SWF.
Ora torna a Flash in UIBDemo.as. Premi Ctrl + F e trova uDash.init (). Dichiarare un riferimento all'oggetto HTML prima di esso:
funzione privata init (e: Event): void uDash.settings.uHtmlFlashObjectId = "UIBDemo"; // riferimento all'oggetto HTML che contiene il filmato SWF in index.html stage.addChild (uDash.init ()); // inizializza e aggiunge allo stage // il resto del corpo della funzione
Ora abbiamo finito. Non più codifica. Tutto quello che devi fare ora è esportare il film Flash e pubblicare tutti i file da Sito demo \ bin-debug cartella su un server (o un host locale) in cui è possibile testarlo in un browser.
Apri il sito web in un browser, prendi in giro, prova a ridimensionare il browser. Al termine, chiudi il sito Web e controlla il rapporto Visite nel pannello di analisi. Trova la tua visita sulla lista e riproducila per assicurarti che tutto funzioni correttamente.
Questo è tutto! Lavorare sul codice di un sito Web che non hai scritto da solo è difficile, ma spero che tu abbia trovato interessante questo tutorial. Esiste un enorme potenziale in Use It Better e puoi sfruttare le visite di riproduzione non solo per migliorare l'usabilità e l'esperienza utente, ma anche per misurare le prestazioni delle campagne o persino scoprire chi sta barando nel tuo gioco Flash.
Anche se il Demo Site è abbastanza semplice, penso che sarai in grado di integrare con Use It Better il tuo sito web, non importa quanto sia grande.
