Share
Lär dig hur du kan analysera användarupplevelse och prestanda på Flash-webbplatser med Använd det Bättre analytics. Denna handledning visar dig hur du integrerar analysramar med en demo webbplats för att spela in användares besök och - med lite magi - spela upp dem som om de var videobilder!
Använd det Bättre analys är inte begränsat till att undersöka trafik för hela Flash-webbplatser, men kan vara lika värdefull vid användbarhetstestning eller mätning av RIA-mätvärden. Låt oss dyka in?
Låt oss ta en titt på det slutliga resultatet vi kommer att arbeta för. Klicka på bilden nedan för att spela upp ett provbesök på en demosida, inspelad tidigare med Använd det bättre:
Om du vill spela in och spela upp eget besök, klicka här för att besöka demo-webbplatsen och logga in på analyspanelen med:
På fliken Besök hittar du dina och klickar på Spela upp.
För syftet med denna handledning kommer vi att använda en grundläggande användningsplan, det är bättre, men integrationsprocessen är densamma för en fri plan.
När du har laddat ner och paketerar källkodspaketet ser du att det finns två mappar inuti. Båda innehåller källor på samma webbplats. Under handledningen kommer vi att arbeta på källor från Demo Site mapp. Om du vill förhandsgranska vad vi ska uppnå, kolla Demo Site - Slutresultat mapp som innehåller källor som redan har integrerats med Använd det bättre.
Inne i varje mapp hittar du en src mapp som innehåller * .as och * .fla-filer, och a bin-debug mapp med alla filer som krävs för att publicera webbplatsen - * .swf, * .html och så vidare.
Om du vill lära dig mer om något problem som jag täcker i handledningen bör du kolla Använd det bättre wiki
För att spara tid har jag redan laddat ner Använd det Bättre ramklasser och lagt dem in Demo Site / src / com / katalog av handledningens källkodspaket. Det finns också adobe paket i com katalog som innehåller några användbara bibliotek som används av och distribueras med ramverket.
I det praktiska fallet måste du ladda ner ramar från analyspanelen där du kan hitta den i den högra kolumnen på den inställningar sektion.
Först och främst öppet UIBDemo.fla och projektets huvudklass UIBDemo.as där du måste initiera Använd det bättre.
Börja med att importera ramverkets huvudklass, uDash:
paket import com.useitbetter.uDash; // kärna Använd det Bättre klass //? resten av förpackningsdelen
Hitta i det funktion som exekveras när huvudfilmen läggs till scenen. initiera uDash genom att lägga till följande rad kod:
privat funktion init (e: Event): void stage.addChild (uDash.init ()); // initiera och lägga till steg //? resten av funktionsorganet
Spara den redigerade filen och test UIBdemo.fla (Ctrl + Enter). Webbplatsen kommer att se ut som tidigare men du kommer att märka ett nytt meddelande i utmatningsfönstret:
u Meddelande: Välkommen till uDash! Din version är "uDash AS3 1.0". Njut av att utveckla! u Meddelande: uDash-anslutning till socket-serveren 59873.s.useitbetter.com:59873 OK. Validerar anslutningen? u Meddelande: uDash-anslutning till socket server 59873.s.useitbetter.com:59873 är giltig.
Det innebär att webbplatsen har etablerat en anslutning till Använd det Bättre servrarna och registrerar nu din aktivitet.
Försök att navigera runt webbplatsen - fyll i och skicka kontaktformuläret, spela med bilen. Vi försöker spela upp det här besöket i nästa steg för att se om inspelningen fungerade bra.
Om du inte redan har det är det dags att besöka http://panel.useitbetter.com och logga in på projektet med hjälp av följande uppgifter:
När du loggar in ser du Aktivitetsrapport men jag rekommenderar att du växlar till fliken Besök. I den vänstra kolumnen ser du alla inspelade besök sorterade efter tid - ditt nyligen registrerade besök kommer att vara högst upp.
Viktigt: Tänk på att du inte är den enda som använder den här handledningen och det kan finnas flera andra besök inspelade.
Till höger om sidan kan du se besökets detaljer. Klick Spela knappen för att spela upp besöket.
När du klickar på Spela-knappen öppnas en ny sida med instruktioner om hur du spelar upp ett besök som spelats in i Flash IDE. Kopiera bara ett replay-kommando, kommentera ditt original i det, och klistra in en från ditt urklipp nedan:
Accentsconagua
// stage.addChild (uDash.init ()); // initiera och lägga till 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 ')) Spara nu din AS-fil och testa Flash-filmen igen för att se omspelningen.
Tja, var det inte magi? Du kan se din musrörelse, klick och till och med tangentslag från det inspelade besöket. Och du gjorde det med bara två rader av kod!
Dock roterades bilen inte alls. Men oroa dig inte. Allt vi behöver göra är bara att göra några små tweaks som jag kommer att täcka i nästa steg. Men innan du går framåt, ta bort spelningen i det och uncommment den orignal en:
stage.addChild (uDash.init ()); // initiera och lägga till scenen
Annars skulle du se återspelningen igen.
Som du kan se, spelades alla dina interaktioner med webbplatsen med mus och tangentbord automatiskt in. Men alla lyssnare lade till skede objekt måste spelas in manuellt.
Det finns en sådan lyssnare i CarInfo.as från Demo Site \ src \ core \ sections \ car mapp. Kontrollera linjenummer. 272:
UIBDemo.instance.stage.addEventListener (MouseEvent.MOUSE_UP, stageMouseUpHandler);
Börja med att lägga till importinstruktionen:
paket core.sections.car import caurina.transitions.Tweener; importera caurina.transitions.properties.DisplayShortcuts; importera com.useitbetter.uDash;
Hitta nu stageMouseUpHandler funktion som utlöses av MOUSE_UP händelse. Det är ansvaret för att stänga av bilrotation efter att användaren släppt musknappen. Använda sig av recordMe Metod för att spela in det manuellt:
privat funktionsstadiumMouseUpHandler (e: MouseEvent): void uDash.recorder.recordMe (e); // registrerar detta event this.removeEventListener (Event.ENTER_FRAME, thisEnterFrameHandler);
En annan sak du måste ändra är koden ansvarig för 360 graders bild av bilen. Bilrotationen beror på muspositionen och du vill naturligtvis att den följer besökarens mus och inte din under återspelningen.
Söka efter mouseX i CarInfo.as och ersätta alla dess förekomster (det finns sex av dem) med uMouseX (), precis som här:
lastX = carHolder.uMouseX () // mapping markörposition
Det är helt säkert - uMouseX () Metoden returnerar reell musposition under inspelningen men en besökares mus under uppspelning.
TIPS: När du integrerar ett stort projekt, överväga att använda en kodredigerare som stöder flerfilsökning (t.ex. FlashDevelop). Det hjälper dig att hitta alla tillfällen i ditt projekt
Det finns bara en förinstallerad tillgång på Demo Site och det är bilen. Om du har en långsammare Internetanslutning än en besökare, vars besök du spelar upp, laddas bilen med en fördröjning. I de flesta fall skulle du inte ens märka skillnaden, men för denna tutorials skull kommer jag att visa dig hur du använder kontrollpunkter för att perfekt synkronisera spelningen.
I CarInfo.as, hitta onCarLoadCompleteHandler () funktion som utlöses av KOMPLETT händelse när bilen är förladdad. Lägg till en kontrollstation för att se till att återspelningen väntar tills bilen är laddad.
privat funktion onCarLoadCompleteHandler (e: Event): void uDash.checkpoints.place ("car loaded"); // kontrollpunkt läggas till för att synkronisera uppspelning med förspänning // resten av funktionskroppen TIPS: Checkpoints är användbara för att synkronisera alla tidsrelaterade händelser som animeringar.
Gå nu igenom steg 3-5 igen för att testa inspelningen och spela upp ett besök - återspelningen ska se exakt ut som du spelade in den. Om det gör - låt oss gå framåt!
Använda det Bättre är mer än bara om återspelande besök. Faktum är att det har några kraftfulla analysrapporter att fungera både på enskilda besök och aggregerade data. I nästa steg lär du dig att spela in viktiga metahändelser: sektioner och Åtgärder som kommer att mata dessa rapporter.
Obs! Om du bara är intresserad av återuppspelade besök kan du hoppa över till steg 14.
Låt oss börja med det viktigaste - registrera vilka delar av webbplatsen som besöks. Det kommer att möjliggöra sökvägar samt många andra funktioner på analyspanelen.
Demo-webbplatsen använder SWFAddress för deep-linking och Använd It Bättre kan automatiskt registrera delen av en URL efter # som en sektion. Dvs. besöker en sådan webbadress:
http://mywebsite.com/#/car
skulle spelas in som ett besök på bil sektion.
Öppna igen huvudprojektklassen UIBDemo.as ligger i Demo Site \ src mapp. Sök efter initSWFAddress () funktion och initiera SWFAddress stöd innan du lyssnar på BYTA händelse:
privat funktion initSWFAddress (): void uSWFAddress.init (); SWFAddress.setHistory (true); SWFAddress.addEventListener (SWFAddressEvent.CHANGE, swfAddressChangeListener);
Åh, och glöm inte att importera Använd det Bättre modul med ansvar för integration med SWFAddress:
paket import com.useitbetter.uDash; // core Använd det Bättre klass import com.useitbetter.modules.uSWFAddress; // modul ansvarig för integration med SWFAddress //? resten av förpackningsdelen
Obs! Om webbplatsen inte har SWFAddress kan du fortfarande spela in sektioner manuellt.
Det finns vissa önskade åtgärder som besökare kan utföra på demo webbplatsen vilket skulle göra webbplatsen ägare glad. Till exempel: skicka in en kontaktformulär. Låt oss spela in det.
Öppna ContactInfo.as från Demo Site \ src \ core \ sections \ contact mapp. Börja med importen som alltid:
importera com.useitbetter.uDash; // kärna Använd det Bättre klass
Hitta nu meddelande skickat funktion som kallas på framgångsrikt inlämnad form och lägg till åtgärden:
privat funktion messageSent (): void uDash.recorder.saveMeta (uDash.metaevents.ACTION, "User submitted form"); // resten av funktionskroppen
Åtgärder är en viktig del av alla Använd det bättre rapporter och de är en av de viktigaste resultatindikatorerna (KPI) som hjälper dig att utvärdera din webbplats.
Tips: Du kan spela in så många åtgärder som du vill, men försök att vara rimlig - inte alla åtgärder är lika önskade.
OK, nu är det sista men väldigt viktiga. Demo Site var inbäddad på HTML-sida med Flashobject för att passa 100% av webbläsarfönstret. Det betyder att filstorleken kommer att vara annorlunda i olika skärmupplösningar och kan ändras under ett besök genom att ändra storlek på webbläsarfönstret. Vi måste spela in det.
Gå till Demo Site \ bin-debug mapp där du kan hitta index.html. Öppna den med en textredigerare och leta efter ett ID för ett HTML-objekt som innehåller vår Flash-film. Låter svårt men det är lätt att hitta:
swfobject.embedSWF ("UIBDemo.swf", "UIBDemo", "100%", "100%", "9", "expressInstall.swf", flashvars, parametrar, attribut); Se det andra argumentet skickat till embedSWF? UIBDemo? Det var det vi letade efter!
Tips: Normalt, om du exporterar HTML från Flash IDE, är idet samma som SWF-filnamn.
Kom nu tillbaka till Flash till UIBDemo.as. Tryck Ctrl + F och hitta uDash.init (). Förklara en hänvisning till HTML-objekt före det:
privat funktion init (e: Event): void uDash.settings.uHtmlFlashObjectId = "UIBDemo"; // referens till HTML-objekt som innehåller SWF-film i index.html stage.addChild (uDash.init ()); // initiera och lägga till scenen // resten av funktionen kroppen
Nu är vi färdiga. Inget mer kodning. Allt du behöver göra nu exporterar Flash-filmen och publicerar alla filer från Demo Site \ bin-debug mapp till en server (eller en lokal värd) där du kan testa det i en webbläsare.
Öppna webbplatsen i en webbläsare, lura runt, försök att ändra storlek på webbläsaren. När du är klar stänger du webbplatsen och kontrollerar besökrapporten i analyspanelen. Hitta ditt besök på listan och spela om det för att se till att allt fungerar bra.
Det är allt! Att arbeta på en webbplatss kod som du inte har skrivit själv är svår, men jag hoppas att du hittade denna handledning intressant. Det finns en stor potential i Använd det Bättre, och du kan utnyttja återuppspelande besök, inte bara för att förbättra användbarheten och användarupplevelsen utan även att mäta kampanjens prestanda eller till och med upptäcka vem som fuskar i ditt Flash-spel.
Även om Demo-webbplatsen är ganska enkel tror jag att du kommer att kunna integrera med Använd det Bättre din egen webbplats, oavsett hur stor den är.
