Share
Lær hvordan du kan analysere brukeropplevelse og ytelse av Flash-nettsteder med Use It Better analytics. Denne opplæringen vil vise deg hvordan du integrerer analyserammer med et demo-nettsted for å registrere brukerbesøk og - med litt magi - spille dem tilbake som om de var videoopptatt!
Bruk det Bedre analyser er ikke begrenset til å undersøke trafikk for hele Flash-nettsteder, men kan være like verdifulle ved brukervurderinger eller måling av RIA-beregninger. La oss dykke inn?
La oss se på det endelige resultatet vi skal jobbe for. Klikk på bildet nedenfor for å spille av et prøvebesøk på et demo-nettsted, innspilt tidligere med Bruk det bedre:
Hvis du vil spille inn og spille av ditt eget besøk, klikker du her for å besøke selve demo-siden, og logger deg på analysepanelet ved å bruke:
På fanen Besøk finner du ditt, og klikker på Spill av.
I denne veiledningen vil vi bruke en grunnleggende brukerplan, det er bedre, men integrasjonsprosessen er den samme for en fri plan.
Etter at du lastet ned og pakker ut kilden, ser du at det er to mapper inne. Begge inneholder kilder til samme nettside. Under opplæringen vil vi jobbe med kilder fra Demo Site mappe. Hvis du vil forhåndsvise hva vi skal oppnå, sjekk Demo Site - Endelig Resultat mappe som inneholder kilder som allerede er integrert med Bruk det bedre.
Innenfor hver mappe finner du en src mappe som inneholder * .as og * .fla-filer, og a bin-debug mappe med alle filene som kreves for å publisere nettstedet - * .swf, * .html og så videre.
Hvis du vil lære mer om et problem som jeg dekker i opplæringen, bør du sjekke Bruk det bedre wiki
For å spare tid har jeg allerede lastet ned Bruk It Better Framework klasser og lagt dem inn Demo Site / src / com / katalog av opplærings kildepakke. Det er også adobe pakke inn com katalog inneholder noen nyttige biblioteker brukt av og distribuert med rammen.
I det ekte tilfelle, etter at du har registrert deg for din egen Bruk det bedre plan (enten gratis eller betalt), må du laste ned rammeverket fra analysepanelet hvor det finnes i høyre kolonne av innstillinger seksjon.
Først av alt åpent UIBDemo.fla og prosjektets hovedklasse UIBDemo.as der du må initialisere Bruk det bedre.
Begynn med å importere hovedklassen av rammen, uDash:
pakke import com.useitbetter.uDash; // kjerne Bruk det bedre klasse //? resten av pakkehuset
Finne i det funksjon som utføres når hovedfilmen legges til scenen. initial~~POS=TRUNC uDash ved å legge til følgende linje av kode:
privat funksjon init (e: Event): void stage.addChild (uDash.init ()); // initialiser og legg til scenen //? resten av funksjonen kroppen
Lagre den redigerte filen og testen UIBdemo.fla (Ctrl + Enter). Nettstedet vil se ut som tidligere, men du vil legge merke til en ny melding i utgangsvinduet:
Du MELDING: Velkommen til uDash! Din versjon er "uDash AS3 1.0". Nyt å utvikle! u MELDING: uDash-tilkobling til sokkel server 59873.s.useitbetter.com:59873 OK. Validerer du tilkobling? u MELDING: uDash-tilkobling til socket server 59873.s.useitbetter.com:59873 er gyldig.
Dette betyr at nettsiden har etablert en forbindelse med Use It Better-serverne og registrerer nå aktiviteten din.
Prøv å navigere rundt nettsiden - fyll ut og send kontaktskjemaet, lek med bilen. Vi prøver å gjenta dette besøket i neste trinn for å se om innspillingen fungerte bra.
Hvis du ikke allerede har det, er det på tide å besøke http://panel.useitbetter.com og logge inn på prosjektet ved hjelp av følgende legitimasjonsbeskrivelser:
Når du logger inn, ser du Aktivitetsrapport, men jeg anbefaler at du bytter til Visninger-fanen. I den venstre kolonnen ser du alle registrerte besøk sortert etter tid - ditt nylig registrerte besøk vil være øverst.
Viktig: Husk at du ikke er den eneste som bruker denne opplæringen, og det kan være flere andre besøk registrert.
På høyre side kan du se besøkets detaljer. Klikk Spille knappen for å spille på nytt.
Når du klikker på Play-knappen, åpnes en ny side med instruksjoner om hvordan du spiller på nytt et besøk registrert i Flash IDE. Bare kopier en replay-kommando, kommentér originalen din i det, og lim inn en fra utklippstavlen din under:
Accentsconagua
// stage.addChild (uDash.init ()); // initialiser og legg til scenen 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 ')) Lagre din AS-fil og test Flash-filmen igjen for å se replayen.
Vel, var det ikke magi? Du kan se musebevegelsen, klikk og til og med nøkkelslag fra det registrerte besøket. Og du gjorde det med bare to linjer med kode!
Imidlertid fungerte det ikke å rotere bilen. Men ikke bekymre deg. Alt vi trenger å gjøre er bare å lage noen små tweaks som jeg vil dekke i de neste trinnene. Men før du går videre, fjern replayen i det og frigjør den orignale en:
stage.addChild (uDash.init ()); // initialiser og legg til scenen
Ellers vil du se replay igjen.
Som du kunne se, ble alle dine samspill med nettstedet ved hjelp av mus og tastatur tatt opp automatisk. Alle lyttere ble imidlertid lagt til scene objekt må registreres manuelt.
Det er en slik lytter i CarInfo.as fra Demo Site \ src \ core \ sections \ bil mappe. Kontroller linjenr. 272:
UIBDemo.instance.stage.addEventListener (MouseEvent.MOUSE_UP, stageMouseUpHandler);
Begynn med å legge til importinstruksjonen:
pakke core.sections.car import caurina.transitions.Tweener; importere caurina.transitions.properties.DisplayShortcuts; importer com.useitbetter.uDash;
Finn nå stageMouseUpHandler funksjon som utløses av MOUSE_UP begivenhet. Det er ansvarlig for å slå av bilrotasjon etter at brukeren har slettet museknappen. Bruk recordMe metode for å registrere den manuelt:
privat funksjon stadiumMouseUpHandler (e: MouseEvent): void uDash.recorder.recordMe (e); // registrerer denne hendelsen this.removeEventListener (Event.ENTER_FRAME, thisEnterFrameHandler);
En annen ting du må endre er koden som er ansvarlig for 360 graders visning av bilen. Bilrotasjonen avhenger av musens posisjon og selvfølgelig vil du at den skal følge besøkendeens mus og ikke din under replayen.
Søk etter mouseX i CarInfo.as og erstatte alle sine forekomster (det er seks av dem) med uMouseX (), akkurat som her:
lastX = carHolder.uMouseX () // mapping markør posisjon
Det er helt trygt - uMouseX () Metoden returnerer ekte musposisjon under opptaket, men en besøkers mus under replay.
Tips: Når du integrerer et stort prosjekt, bør du vurdere å bruke en kodeditor som støtter flerfilsøk (for eksempel FlashDevelop). Det vil hjelpe deg med å finne alle forekomster i prosjektet ditt
Det er bare en forhåndslastet ressurs i Demo-siden, og det er bilen. Hvis du har en langsommere Internett-tilkobling enn en besøkende, hvis besøk du replayer, lastes bilen med forsinkelse. I de fleste tilfeller vil du ikke engang merke til forskjellen, men for denne tutorials skyld vil jeg vise deg hvordan du bruker kontrollpunkter for å perfekt synkronisere replay.
I CarInfo.as, Finn onCarLoadCompleteHandler () funksjon som utløses av FULLSTENDIG hendelse når bilen er forhåndsinstallert. Legg til en kontrollpunkt For å sikre at replay venter til bilen er lastet inn.
privat funksjon onCarLoadCompleteHandler (e: Event): void uDash.checkpoints.place ("car loaded"); // kontrollpunkt lagt til for å synkronisere replay med forspenning // resten av funksjonslegemet TIPS: Kontrollpunkter er nyttige for synkronisering av alle tidsrelaterte hendelser som animasjoner.
Nå gå gjennom trinn 3-5 igjen for å teste innspillingen og spille på nytt - replayet bør se akkurat som du har spilt inn det. Hvis det gjør det - la oss gå videre!
Bruk det bedre er mer enn bare om å spille på nytt. Faktisk har det noen kraftige analyserapporter for å fungere både på individuelle besøk og aggregerte data. I de neste trinnene lærer du hvordan du tar opp viktige meta hendelser: seksjoner og handlinger som vil mate disse rapportene.
Merk: Hvis du bare er interessert i replaying besøk, kan du hoppe over til trinn 14.
La oss starte med det viktigste - å registrere hvilke deler av nettstedet som er besøkt. Det vil aktivere Banerapport, samt mange andre funksjoner på analysepanelet.
Demo-siden bruker SWFAddress for dypkobling og bruk det. Better kan automatisk registrere delen av en URL etter # som en seksjon. Dvs. besøker en slik nettadresse:
http://mywebsite.com/#/car
ville bli registrert som et besøk til bil seksjon.
Åpne igjen hovedprosjektet UIBDemo.as lokalisert i Demo Site \ src mappe. Søk etter initSWFAddress () funksjon og initialiser SWFAddress-støtte før du lytter til ENDRING begivenhet:
privat funksjon initSWFAddress (): void uSWFAddress.init (); SWFAddress.setHistory (true); SWFAddress.addEventListener (SWFAddressEvent.CHANGE, swfAddressChangeListener);
Å, og ikke glem å importere Bruk det Bedre modul som er ansvarlig for integrasjon med SWFAddress:
pakke import com.useitbetter.uDash; // kjernen Bruk det Bedre klasse import com.useitbetter.modules.uSWFAddress; // modul ansvarlig for integrasjon med SWFAddress //? resten av pakkehuset
Merk: Hvis nettstedet ikke har SWFAddress, kan du likevel registrere opptak manuelt.
Det er visse ønskede handlinger som besøkende kan utføre på demoområdet, noe som vil gjøre nettstedseieren lykkelig. For eksempel: sende inn et kontaktskjema. La oss registrere det.
Åpen ContactInfo.as fra Demo Site \ src \ core \ sections \ contact mappe. Som alltid, start med importen:
importer com.useitbetter.uDash; // kjernen Bruk det Bedre klasse
Finn nå Melding sendt funksjon som kalles på vellykket innsendt skjema og legg til handlingen:
privat funksjon messageSent (): void uDash.recorder.saveMeta (uDash.metaevents.ACTION, "User submitted form"); // resten av funksjonsorganet
Handlinger er en viktig del av alle Bruk det bedre rapporter, og de er en av de viktigste resultatindikatorene (KPI) som vil hjelpe deg med å evaluere nettstedet ditt.
Tips: Du kan ta opp så mange handlinger som du vil, men prøv å være rimelig - ikke alle handlinger er like ønsket.
OK, nå er det den siste, men veldig viktige tingen. Demo Site ble innebygd på HTML-siden ved hjelp av SWFObject for å passe 100% av nettleservinduet. Dette betyr at filmstørrelsen vil være forskjellig i forskjellige skjermoppløsninger, og kan endres under et besøk ved å endre størrelse på nettleservinduet. Vi må registrere det.
Gå til Demo Site \ bin-debug mappe hvor du kan finne index.html. Åpne den med en tekstredigerer og se etter et ID for et HTML-objekt som inneholder vår Flash-film. Høres vanskelig, men det er lett å finne:
swfobject.embedSWF ("UIBDemo.swf", "UIBDemo", "100%", "100%", "9", "expressInstall.swf", flashvars, parameter, attributter); Se det andre argumentet passert til embedSWF? UIBDemo? Det var det vi lette etter!
Tips: Vanligvis, hvis du eksporterer HTML fra Flash IDE, er ID det samme som SWF-filnavn.
Kom nå tilbake til Flash til UIBDemo.as. Trykk Ctrl + F og finn uDash.init (). Erklære en referanse til HTML-objektet før det:
privat funksjon init (e: Event): void uDash.settings.uHtmlFlashObjectId = "UIBDemo"; // referanse til HTML-objekt som inneholder SWF-film i index.html stage.addChild (uDash.init ()); // initialiser og legg til scenen // resten av funksjonen kroppen
Nå er vi ferdige. Ingen mer koding. Alt du trenger å gjøre nå, er å eksportere Flash-filmen og publisere alle filer fra Demo Site \ bin-debug mappe til en server (eller en lokal vert) der du kan teste den i en nettleser.
Åpne nettstedet i en nettleser, lure rundt, prøv å endre størrelsen på nettleseren. Når du er ferdig, lukk nettstedet og sjekk besøksrapporten i analysepanelet. Finn ditt besøk på listen og spill på nytt for å sikre at alt fungerer bra.
Det er det! Det er vanskelig å jobbe på et nettsteds kode som du ikke har skrevet selv, men jeg håper du fant denne opplæringen interessant. Det er et stort potensial i Bruk det bedre, og du kan utnytte replaying besøk ikke bare for å forbedre brukervennligheten og brukeropplevelsen, men også for å måle kampanjerytelsen eller til og med oppdage hvem som snyder i ditt Flash-spill.
Selv om Demo-nettstedet er ganske enkelt, tror jeg at du vil kunne integrere med Bruk det, bedre ditt eget nettsted, uansett hvor stor det er.
