Share
Aflați cum puteți analiza experiența utilizatorilor și performanța site-urilor Flash cu ajutorul aplicației It It Better Analytics. Acest tutorial vă va arăta cum să integrați cadrul de analiză cu un site demo pentru a înregistra vizitele utilizatorilor și - cu unele magie - să le redați ca și cum s-ar fi înregistrat video!
Utilizați-o Analizele mai bune nu se limitează la examinarea traficului pentru site-urile Flash complete, dar pot fi la fel de valoroase în timpul testării utilizabilității sau măsurării măsurătorilor RIA. Hai să ne aruncăm?
Să aruncăm o privire asupra rezultatului final la care vom lucra. Faceți clic pe imaginea de mai jos pentru a reda o vizită de probă pe un site demo, înregistrată mai devreme cu "Utilizați-o mai bine":
Dacă doriți să înregistrați și să vă redați propria vizită, faceți clic aici pentru a vizita site-ul demo, apoi conectați-vă la panoul de analiză folosind:
În fila Vizite, găsiți-vă pe dvs. și faceți clic pe Redați.
În scopul acestui tutorial vom folosi un plan de bază de utilizare mai bine, dar procesul de integrare este același pentru un plan gratuit.
După ce descărcați și dezarhivați pachetul sursă, veți vedea că există două foldere în interior. Ambele conțin surse ale aceluiași site web. În timpul tutorialului vom lucra pe surse din Site Demo pliant. Dacă doriți să previzualizați ce vom realiza, verificați Site Demo - Rezultat final care conține surse care au fost deja integrate cu "Utilizați-o mai bine".
În interiorul fiecărui dosar veți găsi a src care conține fișiere * .as și * .fla și a bin-depanare dosar cu toate fișierele necesare publicării site-ului - * .swf, * .html și așa mai departe.
Dacă doriți să aflați mai multe despre orice problemă pe care o acoperim în tutorial trebuie să verificați wiki-ul Utilizați-o mai bine
Pentru a vă salva timpul, am descărcat deja clasele Utilizați-o mai bine și le-ați plasat Site Demo / src / com / directorul pachetului sursă al tutorialului. Există deasemenea chirpici pachet în com care conține câteva biblioteci utile utilizate și distribuite cu cadrul.
În cazul scenariului real, după ce vă înscrieți pentru propriul plan de folosire mai bună (fie gratuit, fie plătit), va trebui să descărcați un cadru din panoul de analiză, unde poate fi găsit în coloana din dreapta Setări secțiune.
Mai întâi de toate deschise UIBDemo.fla și clasa principală a proiectului UIBDemo.as în care va trebui să inițializați Utilizare mai bună.
Începeți cu importul clasei principale a cadrului, uDash:
pachet import com.useitbetter.uDash; // core Use It Mai bine clasa //? restul corpului pachetului
Găsi init care este executată atunci când filmul principal este adăugat la etapă. Inițializare uDash prin adăugarea următorului rând de cod:
funcția privată init (e: Eveniment): void stage.addChild (uDash.init ()); // inițializați și adăugați la scenă //? restul corpului funcției
Salvați fișierul editat și testați-l UIBdemo.fla (Ctrl + Enter). Site-ul Web va arăta la fel ca înainte, dar veți observa un nou mesaj în fereastra de ieșire:
u MESAJ: Bine ați venit la uDash! Versiunea dvs. este "uDash AS3 1.0". Bucurați-vă de dezvoltare! u MESAJ: uDash conexiune la server socket 59873.s.useitbetter.com:59873 OK. Validarea conexiunii? u MESSAGE: conexiunea uDash la serverul socket 59873.s.useitbetter.com:59873 este validă.
Acest lucru înseamnă că site-ul a stabilit o conexiune cu serverele Use It Better și acum vă înregistrează activitatea.
Încercați să navigați în jurul site-ului - completați și trimiteți formularul de contact, jucați cu mașina. Vom încerca să reluăm această vizită în următorul pas pentru a vedea dacă înregistrarea a funcționat bine.
Dacă nu ați făcut deja acest lucru, este timpul să vizitați http://panel.useitbetter.com și să vă conectați la proiect folosind următoarele acreditări:
După ce vă conectați, veți vedea Raportul de activitate, dar vă recomandăm să treceți la fila Vizite. În coloana din stânga veți vedea toate vizitele înregistrate sortate în funcție de timp - vizita recent înregistrată va fi în partea de sus.
Important: rețineți că nu sunteți singurul care utilizează acest tutorial și s-ar putea înregistra alte câteva vizite.
În partea dreaptă a paginii puteți vedea detaliile vizitei. Clic Joaca pentru a relua vizita.
După ce faceți clic pe butonul Redare, se deschide o nouă pagină cu instrucțiuni despre reluarea unei vizite înregistrate în Flash IDE. Copiați doar o comandă de repetare, comentați originalul init, și lipiți una din clipboard-ul dvs. dedesubt:
Accentsconagua
// etapa.addChild (uDash.init ()); // inițializați și adăugați la etapa stage.addChild (uDash.init ('uTestSessionUrl @@ http: //panel.useitbetter.com/play/691d7f123f5d9780e613223e67ee8a22/ses/c5a72002ab439aaba2f9189718833035 || uTimezoneOffset @@ - 120 || uLocalDateTime @@ Sun Mai 15 19:57:29 GMT + 0200 2011 || uSessionDateTime @@ 2011-05-15 18: 57: 30 || uApiUrl @@ http: //api.useitbetter.com/ || uSessionHash @@ c5a72002ab439aaba2f9189718833035 || uProjectHash @ @ 691d7f123f5d9780e613223e67ee8a22 ')) Acum salvați fișierul AS și testați din nou filmul Flash pentru a vedea reluarea.
Ei bine, nu era magie? Ați putea vedea mișcarea mouse-ului, clicurile și chiar loviturile cheie de la vizita înregistrată. Și ai făcut-o cu doar două rânduri de cod!
Cu toate acestea, rotirea mașinii nu a funcționat deloc. Dar nu-ți face griji. Tot ce trebuie să facem este să facem niște mici trucuri pe care le voi acoperi în etapele următoare. Dar înainte de a vă deplasa înainte, eliminați reluarea init și necompetiză pe cea orignală:
stage.addChild (uDash.init ()); // inițializați și adăugați la etapă
În caz contrar, veți vedea reluarea din nou.
După cum puteai vedea, toate interacțiunile tale cu site-ul folosind mouse-ul și tastatura au fost înregistrate automat. Cu toate acestea, toți ascultătorii au adăugat la etapă obiect trebuie să fie înregistrate manual.
Există un astfel de ascultător CarInfo.as din Site Demo \ src \ core \ sections \ car pliant. Verificați linia nr. 272:
UIBDemo.instance.stage.addEventListener (MouseEvent.MOUSE_UP, stageMouseUpHandler);
Începeți cu adăugarea instrucțiunii de import:
pachet core.sections.car import caurina.transitions.Tweener; import caurina.transitions.properties.DisplaySortcuts; import com.useitbetter.uDash;
Acum găsiți stageMouseUpHandler care este declanșată de MOUSE_UP eveniment. Este responsabil pentru oprirea rotației mașinii după ce utilizatorul eliberează butonul mouse-ului. Utilizare recordMe metodă de înregistrare manuală:
funcția privată stageMouseUpHandler (e: MouseEvent): void uDash.recorder.recordMe (e); // înregistrează acest eveniment this.removeEventListener (Event.ENTER_FRAME, thisEnterFrameHandler);
Un alt lucru pe care trebuie să-l schimbați este codul responsabil pentru vizualizarea la 360 de grade a mașinii. Rotirea mașinii depinde de poziția mouse-ului și, bineînțeles, doriți să urmați mouse-ul vizitatorului și nu al dvs. în timpul replay-ului.
Caută mouseX în CarInfo.as și să înlocuiască toate aparițiile sale (există șase dintre acestea) cu uMouseX (), ca aici:
lastX = carHolder.uMouseX () // maparea poziției cursorului
Este complet sigur - uMouseX () metoda returnează poziția reală a mouse-ului în timpul înregistrării, dar un mouse al vizitatorului în timpul reluării.
SFAT: Atunci când integrați un proiect mare, luați în considerare utilizarea unui editor de cod care acceptă căutarea în mai multe fișiere (de exemplu FlashDevelop). Vă va ajuta să găsiți toate evenimentele din proiectul dvs.
Există un singur echipament preîncărcat pe site-ul Demo și asta este mașina. Dacă aveți o conexiune la internet mai lentă decât un vizitator, a cărui vizită reluați, mașina se va încărca cu întârziere. În majoritatea cazurilor, nici nu ați observa diferența, dar de dragul acestui tutorial vă voi arăta cum să utilizați puncte de control pentru a sincroniza perfect reluarea.
În CarInfo.as, găsi onCarLoadCompleteHandler () care este declanșată de COMPLET eveniment după efectuarea preîncărcării. Adauga o punct de control pentru a vă asigura că reluarea va aștepta până când autovehiculul va fi încărcat.
funcția privată onCarLoadCompleteHandler (e: Event): void uDash.checkpoints.place ("car încărcat"); / / adăugat punct de control pentru a sincroniza replay cu preloading // restul corpului funcției SFAT: Punctele de control sunt utile pentru sincronizarea tuturor evenimentelor legate de timp, cum ar fi animațiile.
Acum treceți din nou pasii 3-5 pentru a testa înregistrarea și a relua o vizită - reluarea ar trebui să arate exact așa cum ați înregistrat-o. Dacă este așa - să mergem mai departe!
Utilizați-o mai bine este mai mult decât să reluați vizitele. De fapt, are câteva rapoarte puternice de analiză care să funcționeze atât pe vizitele individuale, cât și pe date agregate. În pașii următori veți afla cum să înregistrați evenimente importante meta: secţiuni și acţiuni care va alimenta aceste rapoarte.
Notă: dacă sunteți interesat doar de reluarea vizitelor, puteți trece la Pasul 14.
Să începem cu cel mai important lucru - înregistrarea secțiunilor site-ului vizitate. Acesta va permite raportul Paths, precum și multe alte funcționalități din panoul de analiză.
Site-ul Demo utilizează SWFAddress pentru corelarea profundă și Utilizați-o mai bine poate înregistra automat o parte a unei adrese URL după # ca secțiune. I.E. vizitarea unei astfel de adrese URL:
http://mywebsite.com/#/car
va fi înregistrată ca o vizită la mașină secțiune.
Deschideți din nou clasa principală a proiectului UIBDemo.as situat în Site demo \ src pliant. Căutați initSWFAddress () și inițializați suportul SWFAdress înainte de a asculta SCHIMBARE eveniment:
funcția privată initSWFAdress (): void uSWFAdress.init (); SWFAddress.setHistory (true); SWFAddress.addEventListener (SWFAddressEvent.CHANGE, swfAddressChangeListener);
Oh, și nu uitați să importați modulul Folosește mai bine responsabil pentru integrarea cu SWFAdress:
pachet import com.useitbetter.uDash; // core Use It Mai bine clasa de import com.useitbetter.modules.uSWFAdress; // modul responsabil pentru integrarea cu SWFAddress //? restul corpului pachetului
Notă: dacă site-ul nu are SWFAdress, puteți înregistra secțiuni manual.
Există anumite Acțiuni dorite pe care vizitatorii le pot efectua pe site-ul Demo care ar face fericit proprietarul site-ului. De exemplu: trimiterea unui formular de contact. Să o înregistrăm.
Deschis ContactInfo.as din Site Demo \ src \ core \ sections \ contact pliant. Ca întotdeauna, începeți cu importul:
import com.useitbetter.uDash; // core Use it Clasa mai bună
Acum găsiți mesaj trimis funcția care este solicitată prin formularul prezentat cu succes și adăugați acțiunea:
funcția privată messageSent (): void uDash.recorder.saveMeta (uDash.metaevents.ACTION, "Formular trimis de utilizator"); // restul corpului funcției
Acțiunile reprezintă o parte importantă a tuturor rapoartelor "Utilizați-o mai bine" și sunt unul dintre indicatorii cheie de performanță (KPI) care vă vor ajuta să evaluați site-ul dvs..
SFAT: Puteți înregistra cât mai multe acțiuni pe care le doriți, dar încercați să fiți rezonabile - nu orice acțiune este la fel de dorită.
OK, acum este ultimul lucru foarte important. Site-ul demo a fost încorporat în pagina HTML utilizând SWFObject pentru a se potrivi cu 100% din fereastra browserului. Acest lucru înseamnă că dimensiunea filmului va fi diferită în diferite rezoluții ale ecranului și poate fi modificată în timpul vizitei, prin redimensionarea ferestrei browserului. Trebuie să o înregistrăm.
Mergi la Site demo \ bin-debug dosarul pe care îl puteți găsi index.html. Deschideți-l cu un editor de text și căutați un id al unui obiect HTML care conține filmul nostru Flash. Sună dificil, dar este ușor de găsit:
swfobject.embedSWF ("UIBDemo.swf", "UIBDemo", "100%", "100%", "9", "expressInstall.swf", flashvars, paramuri, atribute); Vedeți al doilea argument care a fost transmis embedSWF? UIBDemo? Asta am căutat!
SFAT: De obicei, dacă exportați codul HTML din Flash IDE, id-ul este identic cu numele fișierului SWF.
Acum, reveniți la Flash la UIBDemo.as. Apăsați Ctrl + F și găsiți uDash.init (). Declarați o referință la obiectul HTML înainte de el:
funcția privată init (e: Eveniment): void uDash.settings.uHtmlFlashObjectId = "UIBDemo"; // trimitere la obiectul HTML care conține filmul SWF în index.html stage.addChild (uDash.init ()); // inițializați și adăugați la etapa // restul corpului funcției
Acum am terminat. Nu mai există codificare. Tot ce trebuie să faceți acum este să exportați filmul Flash și să publicați toate fișierele Site demo \ bin-debug dosar la un server (sau la o gazdă locală) unde ați putea să îl testați într-un browser.
Deschideți site-ul într-un browser, înșelător în jur, încercați să redimensionați browserul. După ce ați terminat, închideți site-ul și verificați raportul Vizite în panoul de analiză. Găsiți-vă vizita în listă și reluați-o pentru a vă asigura că totul funcționează bine.
Asta e! Lucrul pe codul site-ului pe care nu l-ați scris singur este dificil, dar sper că ați găsit acest tutorial interesant. Există un potențial uriaș în utilizarea It It Better și puteți beneficia de repetarea vizitelor nu doar pentru a îmbunătăți gradul de utilizare și experiența utilizatorilor, ci și pentru a măsura performanța campaniilor sau chiar a detecta cine înșelă în jocul dvs. Flash.
Chiar dacă site-ul Demo este destul de simplu, cred că veți putea să vă integrați cu Utilizarea Este mai bine propriul dvs. site web indiferent cât de mare este.
