Integrating "Use It Better" Analytics med en Flash Website
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Lær hvordan du kan analysere brukeropplevelsen og ytelsen til Flash nettsteder med Use It Better analytics. Denne veiledningen vil vise deg hvordan du kan integrere analytics rammeverk med en Demo Side å registrere brukernes besøk og - med litt magi - spille dem tilbake som om de ble filmet
Bruk det bedre analytics! er ikke begrenset til å undersøke trafikken for fulle Flash nettsteder, men kan være like verdifulle under brukertesting eller måle RIA beregninger. La oss dykke i ..
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot. Klikk på bildet under for å spille en prøve besøk til en demo side, spilt inn tidligere med Use It Better:
Hvis du ønsker å ta opp og spille av din egen besøk, kan du klikke her for å besøke demoen selv, deretter logge på analytics panelet med: I kategorien besøk, finner din, og klikk på Start. For hensikten med denne opplæringen vil vi bruke et grunnleggende plan for bruk It Better, men integrasjonsprosessen er den samme for en gratis plan. Når du laster ned og pakk kilden pakken vil du se at det er to mapper inne. Begge inneholder kilder til samme nettsted. I løpet av opplæringen vil vi jobbe med kilder fra Demo nettstedet Inne i hver mappe du vil finne en src Hvis du ønsker å lære mer om alle problem som jeg dekke i opplæringen bør du sjekke Bruk It Better wiki For å spare tid, jeg har allerede lastet ned Bruk det bedre ramme klasser og plassert dem i Demo Side /src /no /katalog av opplæringen kilde pakken. Det er også adobe I real-case scenario, etter at du registrerer deg for din egen Use It Better plan (enten gratis eller betalt) du må laste ned rammeverket fra analytics panel der det kan finnes i høyre kolonne i Innstillinger Først av alt åpent UIBDemo.fla Hotell og prosjektets hoved klasse UIBDemo.as Start med å importere den viktigste klassen av rammeverket, uDash: Finn init funksjon som utføres når hovedfilmen er lagt til scenen. Initial uDash ved å legge til følgende linje med kode: Lagre den redigerte filen og test UIBdemo.fla Dette betyr at nettstedet har etablert en forbindelse med bruk det bedre servere, og er nå å ta opp aktiviteten. . Prøv å navigere rundt på nettsiden - fylle ut og sende kontaktskjemaet, leke med bilen. Vi skal prøve å spille dette besøket i neste trinn for å se om opptak fungerte fint Hvis du ikke allerede har, det er på høy tid å besøke http://panel.useitbetter.com og logge på prosjekt med følgende legitimasjon: Når du logger deg inn vil du se aktivitetsrapporten, men jeg anbefaler at du bytter til besøkende Tab. I den venstre kolonnen vil du se alle registrerte besøk Dårlig tid - din nylig innspilte besøket vil være på toppen Viktig: husk at du ikke er den eneste som bruker denne opplæringen og der. kan være flere andre besøk registreres. Til høyre på siden kan du se besøks detaljer. Klikk på Spill Når du klikker avspillingsknappen en ny side åpner med instruksjoner hvordan å spille et besøk innspilt i Flash IDE. Bare kopiere en replay kommando, kommentere din opprinnelige init, og lim en fra utklippstavlen under: Nå lagre AS fil og teste Flash movie igjen for å se reprisen Vel, var ikke det magi? Du kunne se dine musen bevegelse, klikk og selv tastetrykk fra den registrerte besøk. Og du gjorde det med bare to linjer med kode! Men roterende bilen fungerte ikke i det hele tatt. Men ikke fortvil. Alt vi trenger å gjøre er å bare gjøre noen små justeringer som jeg vil dekke i de neste trinnene. Men før du beveger deg fremover, fjerner replay init og uncommment orignal ett: Ellers ville du se reprisen igjen Som du kan se, all din interaksjoner med nettsiden bruker mus og tastatur ble registrert automatisk. Men alle lyttere lagt til scenen objektet har skal registreres manuelt. Det er en slik lytteren i CarInfo.as Start med å legge import instruksjon: Nå finner du den stageMouseUpHandler funksjon som er utløst av MOUSE_UP hendelsen. Det er ansvarlig for å slå av bilen rotasjon etter brukeren slipper museknappen. Bruk recordMe metode for å ta det opp manuelt: En annen ting du må endre er koden ansvarlig for 360 grader utsikt over bilen. Bilen rotasjon avhenger mus posisjon og selvfølgelig du vil at det skal følge besøks mus og ikke din under replay. Søk etter mouseX i CarInfo.as Hotell og erstatte alle forekomster ( det er seks av dem) med uMouseX (), akkurat som her: Det er helt trygt - uMouseX () metoden returnerer ekte mus posisjon under innspillingen, men en besøkendes musen under replay HINT:. Når du integrerer et stort prosjekt vurdere å bruke en kode editor som støtter multi-fil søk (f.eks FlashDevelop). Det vil hjelpe deg å finne alle forekomster i prosjektet Det er bare en forhåndsinstallert eiendel i demoen, og det er bilen . Hvis du har en tregere internettforbindelse enn en besøkende, som besøkte du spille på nytt, vil bilen lastes med en forsinkelse. I de fleste tilfeller vil du ikke engang merke forskjellen, men på grunn av denne opplæringen vil jeg vise deg hvordan du bruker sjekkpunkter til perfekt synkronisering replay. I CarInfo.as Hint: Checkpoints er nyttige for å synkronisere alle tidsrelaterte hendelser som animasjoner Nå går gjennom trinn 3-5 igjen for å teste opptak og avspilling et besøk - reprisen skal se ut akkurat slik du spilte det inn. Hvis den gjør det - la oss gå videre Bruk It Better er mer enn bare om replaying besøk!. Faktisk har det noen kraftige analyserapporter å jobbe både på enkeltbesøk og aggregerte data. I de neste trinnene vil du lære hvordan du tar opp viktige meta hendelser. §§ Kjøpe og Handlinger Merk: Hvis du er interessert bare i avspilling besøk, kan du hoppe til trinn 14. La oss starte med det viktigste - opptak som deler av nettsiden er besøkt. Den vil gjøre det mulig Paths Rapporter samt mange andre funksjoner på tvers av analytics panel. Demo Nettstedet bruker SWFAddress for dyp-kobling og bruke det bedre kan automaticaly ta opp en del av en URL etter # som en seksjon. Dvs. besøker en slik URL: would bli registrert som et besøk til bil Åpne nytt hovedprosjektet klassen. UIBDemo.as Oh, og ikke glem å importere Bruk It Better modul ansvarlig for integrasjon med SWFAddress: . Merk: Hvis nettstedet ikke har SWFAddress du kan fortsatt spille inn deler manuelt Det er visse ønskede Handlinger som besøkende kan utføre på demoen som ville gjøre området-eier lykkelig. For eksempel: å sende inn et kontaktskjema. La oss ta det opp. Åpne ContactInfo.as Nå finner messageSent funksjon som kalles på innsendt skjema og tilsett Handling: Handlinger er en viktig del av alle bruke det bedre rapporter og de er en av de nøkkelindikatorer (KPI) som vil hjelpe deg å vurdere ditt nettsted. HINT:. Du kan ta opp så mange handlinger som du vil, men prøv å være rimelig - ikke alle tiltak er like ønskelig OK, nå er det den siste, men veldig viktig ting. Demo Nettstedet ble integrert på HTML-siden ved hjelp av SWFObject Gå til Demo Side \\ bin-debug Se andre argument til embedSWF? UIBDemo HINT:!. Vanligvis, hvis du eksporterer HTML fra Flash IDE, er det id det samme som SWF filnavn Nå får tilbake til Flash til UIBDemo.as Nå er vi ferdige. Ingen flere koding. Alt du trenger å gjøre nå er å eksportere Flash movie og publisere alle filene fra Demo Side \\ bin-debug Åpne nettsiden i en nettleser, tøyse rundt, prøv å endre størrelsen på nettleseren. Når du er ferdig, lukker hjemmeside og sjekk Besøk Rapporter i analytics panel. Finn ditt besøk på listen, og spille det for å være sikker på at alt fungerer fint. Det er det! Arbeid på et nettkode som du ikke har skrevet selv er vanskelig, men jeg håper du fant denne opplæringen interessant. Det er et stort potensial i bruk It Better, og du kan utnytte ny kjøring besøk ikke bare for å forbedre brukervennlighet og brukeropplevelse, men også for å måle kampanjer ytelse eller til og med oppdage hvem som juks i Flash spill. Selv om demoen er ganske enkel jeg tror at du vil være i stand til å integrere med Use It Better din egen hjemmeside, uansett hvor stort det er. Anmeldelser
prosjekt: activetuts
passord: activetuts
Komme i gang
mappe. Hvis du ønsker å forhåndsvise det vi skal oppnå, sjekk Demo Site -. Endelig resultat
mappen som inneholder kilder som allerede er integrert med Use It Better
mappen som inneholder * .as og * FLA-filer, og en bin-debug
mappe med alle filene som kreves for å publisere nettsiden - * .swf, * .html og så
Trinn 1:. Download Bruk It Better Work for ditt prosjekt
pakke i com katalog inneholder noen nyttige biblioteker som brukes av og distribuert med rammeverket.
delen.
Trinn 2: Initial Bruk It Better
der må du initial Use It Better.
pakke {import com.useitbetter.uDash; //Kjerne Bruk It Better klasse //... resten av pakken kroppen
privat funksjon init (e: Hendelses): void {stage.addChild (uDash.init ()); //Initial og legge til scenen //... resten av funksjonen kroppen}
Trinn 3: Spill ditt første besøk
(Ctrl + Enter). Nettstedet vil se det samme som før, men du vil merke en ny melding i utgangsvinduet:
u MELDING: Velkommen til uDash! Din versjon er "uDash AS3 1.0". Nyt utvikle u MELDING: uDash tilkobling til socket server 59873.s.useitbetter.com:59873 OK. Validere Connection ... u BESKJED: uDash tilkobling til socket server 59873.s.useitbetter.com:59873 er gyldig
Trinn 4:. Finn ditt besøk i Analytics Panel
prosjekt: activetuts
passord: activetuts
knappen for å spille av besøket
Trinn 5:. Prøv Spille besøket i Flash IDE
//stage.addChild (uDash.init ()); //Initial og legge til stagestage.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') )
Trinn 6:. Tilpass Nettsted Kode for Nøyaktige Besøk Replay
stage.addChild (uDash.init ()); //Initial og legge til scenen
Trinn 7:. Manuelt Rekord hendelser som ikke ble registrert
fra Demo Side \\ src \\ kjerne \\ seksjoner \\ bil
mappe. Sjekk linjen no. 272:
UIBDemo.instance.stage.addEventListener (MouseEvent.MOUSE_UP, stageMouseUpHandler);
pakke core.sections.car {import caurina.transitions.Tweener; import caurina.transitions.properties.DisplayShortcuts; import com.useitbetter.uDash;
privat funksjon stageMouseUpHandler (e: MouseEvent): void {uDash.recorder.recordMe (e); //Registrerer denne hendelsen this.removeEventListener (Event.ENTER_FRAME, thisEnterFrameHandler);}
Trinn 8: Kart Mus Plasser Under Replay
lastX = carHolder.uMouseX () //kartlegging markørposisjon
Trinn 9: Synkron Replay med Eiendeler Forbelastning
, finne den onCarLoadCompleteHandler () -funksjonen som er utløst av COMPLETE hendelse når bilen forbelastning er gjort. Legg en sjekkpunkt
å sørge for at opptak vil vente til bilen er lastet
privat funksjon onCarLoadCompleteHandler (e: Hendelses):. Void {uDash.checkpoints.place ("bil lastet"); //Sjekkpunkt lagt til synkron replay med forbelastning //resten av funksjonen kroppen
. Trinn 10: Test Replay Igjen
Trinn 11: Record Meta Informasjon for Advanced Analytics
som vil mate disse rapportene
Trinn 12: Rekord Besøkte seksjoner med SWFAddress Integrasjon
http://mywebsite.com/#/car
delen
ligger i Demo Side \\ src
mappe. Søk for initSWFAddress () funksjon og initial SWFAddress støtte før du lytter til endringen hendelsen:
privat funksjon initSWFAddress (): void {uSWFAddress.init (); SWFAddress.setHistory (true); SWFAddress.addEventListener (SWFAddressEvent.CHANGE, swfAddressChangeListener);}
pakke {import com.useitbetter.uDash; //Kjerne Bruk It Better klasse import com.useitbetter.modules.uSWFAddress; //Modul ansvarlig for integrasjon med SWFAddress //... resten av pakken kroppen
Trinn 13: Record Ønskede Tiltak for å måle Side Conversion
fra Demo Side \\ src \\ kjerne \\ seksjoner \\ kontakt
mappe. Som alltid starter med import:
import com.useitbetter.uDash; //Kjerne Bruk It Better klassen
privat funksjon messageSent (): void {uDash.recorder.saveMeta (uDash.metaevents.ACTION, " Bruker innsendt skjema "); //Resten av funksjonen kroppen
Trinn 14: Aktiver opptak og avspilling av nettleservinduet Endre størrelse
å passe 100% av nettleservinduet. Dette betyr at filmen størrelse vil være forskjellig i ulike skjermoppløsninger og kan endres under et besøk ved å endre størrelse nettleservinduet. Vi må ta det opp.
mappen hvor du kan finne index.html
. Åpne den med en tekst editor og se etter en id av en HTML-objekt som inneholder våre Flash movie. Høres vanskelig, men det er lett å finne:
swfobject.embedSWF ("UIBDemo.swf", "UIBDemo", "100%", "100%", "9", "expressInstall.swf", FlashVars, params, attributter );
? Det er det vi var ute etter
. Trykk Ctrl + F og finne uDash.init (). Erklære en referanse til HTML-objekt før det:
privat funksjon init (e: Hendelses): void {uDash.settings.uHtmlFlashObjectId = "UIBDemo"; //Referanse til HTML-objekt som inneholder SWF film i index.html stage.addChild (uDash.init ()); //Initial og legge til scenen //resten av funksjonen kroppen}
Trinn 15: Publiser ditt nettsted til en server (eller en localhost)
mappe til en server (eller en lokal host) der du kan teste det i en nettleser.
Trinn 16: Test opptak og avspilling et besøk i en nettleser
The End