Share
Ontdek hoe u de gebruikerservaring en prestaties van Flash-websites kunt analyseren met behulp van Analytics voor gebruikers. Deze tutorial laat je zien hoe je een analytisch raamwerk kunt integreren met een demosite om bezoekersbezoeken vast te leggen en - met wat magie - ze terug te spelen alsof ze op video zijn opgenomen!
Gebruik het Betere analyses zijn niet beperkt tot het onderzoeken van verkeer voor volledige Flash-websites, maar kunnen even waardevol zijn tijdens gebruikstests of het meten van RIA-metrieken. Laten we erin duiken?
Laten we eens kijken naar het uiteindelijke resultaat waar we naartoe zullen werken. Klik op de afbeelding hieronder om een voorbeeldbezoek aan een demosite opnieuw af te spelen, eerder opgenomen met Use It Better:
Als u uw eigen bezoek wilt opnemen en afspelen, klik dan hier om de demosite zelf te bezoeken en meld u aan bij het analysepaneel met behulp van:
Zoek op het tabblad Bezoeken de uwe en klik op Afspelen.
Voor het doel van deze tutorial gebruiken we een basisplan van Use It Better, maar het integratieproces is hetzelfde voor een gratis plan.
Nadat u het bronpakket hebt gedownload en uitgepakt, ziet u dat er twee mappen in zitten. Beide bevatten bronnen van dezelfde website. Tijdens de tutorial zullen we werken aan bronnen van Demo-site map. Als je een voorbeeld wilt zien van wat we gaan bereiken, kijk dan Demo-site - eindresultaat map die bronnen bevat die al zijn geïntegreerd met Use It Better.
In elke map vindt u een src map met * .as en * .fla-bestanden, en a bin-debug map met alle bestanden die nodig zijn om de website te publiceren - * .swf, * .html enzovoort.
Als u meer wilt weten over een probleem dat ik in de zelfstudie behandel, moet u de wiki voor het gebruik van dit programma raadplegen
Om je tijd te sparen, heb ik de framework-klassen van Use It Better al gedownload en geplaatst Demo Site / src / com / index van het bronpakket van de zelfstudie. Er is ook adobe pakket in com map met enkele nuttige bibliotheken die worden gebruikt door en gedistribueerd met het framework.
In het echte scenario, nadat u zich heeft aangemeld voor uw eigen gebruik van It It Better-abonnement (gratis of betaald), moet u het framework downloaden van het analysepaneel waar dit te vinden is in de rechterkolom van de instellingen sectie.
Allereerst open UIBDemo.fla en de hoofdklasse van het project UIBDemo.as waarin u Use It Better moet initialiseren.
Begin met het importeren van de hoofdklasse van het framework, uDash:
pakket import com.useitbetter.uDash; // core Gebruik It Better class //? de rest van de behuizing van het pakket
Vind in het functie die wordt uitgevoerd wanneer de hoofdfilm wordt toegevoegd aan de fase. initialiseren uDash door de volgende coderegel toe te voegen:
private function init (e: Event): void stage.addChild (uDash.init ()); // initialiseren en toevoegen aan fase //? de rest van de functielichaam
Sla het bewerkte bestand op en test UIBdemo.fla (Ctrl + Enter). De website ziet er hetzelfde uit zoals eerder, maar u zult een nieuw bericht opmerken in het outputvenster:
u MESSAGE: Welkom bij uDash! Uw versie is "uDash AS3 1.0". Veel plezier met ontwikkelen! u MESSAGE: uDash-verbinding met socket-server 59873.s.useitbetter.com:59873 OK. Verbinding valideren? u MESSAGE: uDash-verbinding met socket-server 59873.s.useitbetter.com:59873 is geldig.
Dit betekent dat de website een verbinding heeft gemaakt met de Use It Better-servers en nu uw activiteit registreert.
Probeer te navigeren op de website - vul het contactformulier in en verstuur het, speel met de auto. We zullen proberen dit bezoek in de volgende stap opnieuw af te spelen om te zien of de opname goed werkte.
Als u dit nog niet hebt gedaan, is het hoog tijd om http://panel.useitbetter.com te bezoeken en u aan te melden bij het project met behulp van de volgende inloggegevens:
Zodra u zich aanmeldt, ziet u het activiteitenrapport, maar ik raad u aan om naar het tabblad Bezoeken over te schakelen. In de linkerkolom ziet u alle geregistreerde bezoeken gesorteerd op tijd - uw recent opgenomen bezoek staat bovenaan.
Belangrijk: houd er rekening mee dat u niet de enige bent die deze zelfstudie gebruikt en dat er verschillende andere bezoeken kunnen worden geregistreerd.
Aan de rechterkant van de pagina ziet u de details van het bezoek. Klik Spelen knop om het bezoek opnieuw af te spelen.
Nadat u op de knop Afspelen hebt geklikt, wordt een nieuwe pagina geopend met instructies voor het opnieuw afspelen van een bezoek dat is opgenomen in Flash IDE. Kopieer gewoon een replay-commando, becommentarieer je origineel in het, en plak er een van je klembord eronder:
Accentsconagua
// stage.addChild (uDash.init ()); // initialiseren en toevoegen aan fase 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 ')) Sla nu je AS-bestand op en test de Flash-film opnieuw om de herhaling te zien.
Nou, was het niet magie? Je kon je muisbeweging, kliks en zelfs toetsaanslagen van het opgenomen bezoek zien. En je hebt het gemaakt met slechts twee regels code!
Het draaien van de auto werkte echter helemaal niet. Maar maak je geen zorgen. Het enige wat we moeten doen is een paar kleine aanpassingen maken die ik in de volgende stappen zal behandelen. Maar voordat je verdergaat, verwijder je de herhaling in het en uncommment de originele:
stage.addChild (uDash.init ()); // initialiseren en toevoegen aan fase
Anders zou je de herhaling opnieuw zien.
Zoals je kon zien, werden al je interacties met de website met behulp van de muis en het toetsenbord automatisch vastgelegd. Alle luisteraars zijn echter toegevoegd aan de stadium objecten moeten handmatig worden vastgelegd.
Er zit zo'n luisteraar in CarInfo.as van Demo Site \ src \ core \ sections \ car map. Controleer regel nr. 272:
UIBDemo.instance.stage.addEventListener (MouseEvent.MOUSE_UP, stageMouseUpHandler);
Begin met het toevoegen van de importinstructie:
package core.sections.car import caurina.transitions.Tweener; import caurina.transitions.properties.DisplayShortcuts; import com.useitbetter.uDash;
Zoek nu het stageMouseUpHandler functie die wordt geactiveerd door MOUSE_UP evenement. Het is verantwoordelijk voor het uitschakelen van de autorotatie nadat de gebruiker de muisknop heeft losgelaten. Gebruik recordMe methode om het handmatig op te nemen:
persoonlijke functie stageMouseUpHandler (e: MouseEvent): void uDash.recorder.recordMe (e); // neemt deze gebeurtenis op this.removeEventListener (Event.ENTER_FRAME, thisEnterFrameHandler);
Een ander ding dat je moet veranderen, is de code die verantwoordelijk is voor het 360 graden beeld van de auto. De rotatie van de auto hangt af van de positie van de muis en u wilt natuurlijk dat deze de muis van de bezoeker volgt en niet de uwe tijdens de herhaling.
Zoeken mouseX in CarInfo.as en vervang al zijn occurrences (er zijn er zes) met uMouseX (), net zoals hier:
lastX = carHolder.uMouseX () // positie van de toewijzingscursor
Het is volkomen veilig - uMouseX () methode retourneert de werkelijke positie van de muis tijdens de opname maar de muis van een bezoeker tijdens het opnieuw spelen.
TIP: Wanneer u een groot project integreert, overweeg dan een code-editor te gebruiken die zoeken in meerdere bestanden ondersteunt (bijvoorbeeld FlashDevelop). Het zal u helpen om alle gebeurtenissen in uw project te vinden
Er is slechts één vooraf geladen item op de demosite en dat is de auto. Als u een langzamere internetverbinding hebt dan een bezoeker, van wie u het bezoek dat u afspeelt, zal de auto met een vertraging laden. In de meeste gevallen zou je het verschil niet eens opmerken, maar in het belang van deze tutorial zal ik je laten zien hoe je checkpoints kunt gebruiken om het opnieuw spelen perfect te synchroniseren.
In CarInfo.as, vind de onCarLoadCompleteHandler () functie die wordt geactiveerd door COMPLEET evenement nadat de auto is geladen. Voeg een ... toe checkpoint om ervoor te zorgen dat de replay zal wachten tot de auto is geladen.
private function onCarLoadCompleteHandler (e: Event): void uDash.checkpoints.place ("car loaded"); // controlepunt toegevoegd om herhaling te synchroniseren met preloading // de rest van de hoofdtekst van de functie TIP: IJkpunten zijn handig voor het synchroniseren van alle aan de tijd gerelateerde gebeurtenissen, zoals animaties.
Doorloop nu nogmaals stappen 3-5 om de opname te testen en een bezoek opnieuw af te spelen - de herhaling moet er precies zo uitzien als u deze hebt opgenomen. Als dat zo is - laten we verder gaan!
Gebruik It Better is meer dan alleen het opnieuw bezoeken van bezoeken. In feite heeft het enkele krachtige analyserapporten om zowel op individuele bezoeken als geaggregeerde gegevens te werken. In de volgende stappen leert u hoe u belangrijke meta-evenementen kunt vastleggen: secties en acties die deze rapporten zullen voeden.
Opmerking: als u alleen geïnteresseerd bent in het opnieuw bezoeken van bezoeken, kunt u doorgaan naar stap 14.
Laten we beginnen met het belangrijkste: vastleggen welke delen van de website worden bezocht. Hiermee worden padenrapportage en vele andere functies in het analysepaneel ingeschakeld.
De demosite gebruikt SWFAddress voor deep-linking en Use It Better kan het gedeelte van een URL na # automatisch als een sectie opnemen. D.w.z. een dergelijke URL bezoeken:
http://mywebsite.com/#/car
zou worden geregistreerd als een bezoek aan de auto sectie.
Open opnieuw de hoofdprojectklasse UIBDemo.as gevestigd in Demo Site \ src map. Zoeken naar de initSWFAddress () functie en initialiseer SWFAddress-ondersteuning voordat u naar de VERANDERING evenement:
persoonlijke functie initSWFAddress (): void uSWFAddress.init (); SWFAddress.setHistory (waar); SWFAddress.addEventListener (SWFAddressEvent.CHANGE, swfAddressChangeListener);
Oh, en vergeet niet de Use It Better-module te importeren die verantwoordelijk is voor integratie met SWFAddress:
pakket import com.useitbetter.uDash; // core Gebruik It Betere klasse import com.useitbetter.modules.uSWFAddress; // module die verantwoordelijk is voor integratie met SWFAddress //? de rest van de behuizing van het pakket
Opmerking: als de website geen SWFAddress heeft, kunt u secties nog steeds handmatig opnemen.
Er zijn bepaalde gewenste acties die bezoekers op de demosite kunnen uitvoeren, waardoor de site-eigenaar tevreden zou zijn. Bijvoorbeeld: een contactformulier verzenden. Laten we het opnemen.
Open ContactInfo.as van Demo Site \ src \ core \ sections \ contact map. Zoals altijd, begin met de import:
import com.useitbetter.uDash; // core Gebruik It Better-klasse
Nu vinden bericht verzonden functie die een succesvol ingediend formulier gebruikt en de actie toevoegt:
persoonlijke functie messageSent (): void uDash.recorder.saveMeta (uDash.metaevents.ACTION, "Door gebruiker verzonden formulier"); // de rest van het hoofdgedeelte van de functie
Acties vormen een belangrijk onderdeel van alle Use It Better-rapporten en ze vormen een van de belangrijkste prestatie-indicatoren (KPI's) die u helpen uw website te evalueren.
TIP: U kunt zoveel acties opnemen als u wilt, maar proberen redelijk te zijn - niet elke actie is even gewenst.
OK, nu is er het laatste, maar heel belangrijke. Demo Site is ingesloten op HTML-pagina met SWFObject om 100% van het browservenster te passen. Dit betekent dat de filmomvang verschillend is in verschillende schermresoluties en tijdens een bezoek kan worden gewijzigd door het formaat van het browservenster aan te passen. We moeten het opnemen.
Ga naar Demo-site \ bin-debug map waar u kunt vinden index.html. Open het met een teksteditor en zoek naar een id van een HTML-object dat onze Flash-film bevat. Klinkt moeilijk, maar het is gemakkelijk te vinden:
swfobject.embedSWF ("UIBDemo.swf", "UIBDemo", "100%", "100%", "9", "expressInstall.swf", flashvars, params, attributen); Zie het tweede argument dat is doorgegeven aan embedSWF? UIBDemo? Dat is waar we naar op zoek waren!
TIP: Gewoonlijk, als u HTML exporteert vanuit Flash IDE, is de id hetzelfde als de SWF-bestandsnaam.
Ga nu terug naar Flash to UIBDemo.as. Druk op Ctrl + F en zoek uDash.init (). Declareer een verwijzing naar het HTML-object vóór het:
private function init (e: Event): void uDash.settings.uHtmlFlashObjectId = "UIBDemo"; // verwijzing naar HTML-object met SWF-film in index.html stage.addChild (uDash.init ()); // initialiseren en toevoegen aan fase // de rest van de functielichaam
Nu zijn we klaar. Geen codering meer. Het enige dat u nu hoeft te doen, is de Flash-film exporteren en alle bestanden publiceren Demo-site \ bin-debug map naar een server (of een lokale host) waar u het in een browser kunt testen.
Open de website in een browser, maak een grapje, probeer de grootte van de browser te veranderen. Als u klaar bent, sluit u de website en controleert u het bezoekrapport in het analysepaneel. Zoek uw bezoek op de lijst en herhaal het opnieuw om te controleren of alles goed werkt.
Dat is het! Werken aan de code van een website die je zelf niet hebt geschreven, is moeilijk, maar ik hoop dat je deze tutorial interessant vond. Er is een enorm potentieel in Use It Better en u kunt bezoeken opnieuw gebruiken gebruiken om niet alleen de bruikbaarheid en gebruikerservaring te verbeteren, maar ook om de prestaties van campagnes te meten of zelfs te detecteren wie vals speelt in uw Flash-game..
Hoewel de demosite vrij eenvoudig is, denk ik dat je in staat zult zijn om te integreren met Use It Better, je eigen website, hoe groot deze ook is.
