Snabbtips Hur använder du Google Analytics för spårning i Flash

I den här snabba tipsen visar jag hur du undersöker hur besökare använder dina webbplatser, widgets och spel. Då tittar vi på hur man förbättrar dem utifrån denna information!


Introduktion

Att bygga snygga webbplatser är bra; Att bygga webbplatser som har en hög avkastning på investeringar är ovärderliga.

Nyligen deltog jag i ett bröllopsbaserat kommunikationsbyrå, ett team med expertkunskap inom områdena användarupplevelse design, innehållsstrategier, mjukvaruutveckling och interaktionsdesign. Vi spenderar mycket tid på wireframes, storyboards och prototyper, vilket garanterar att funktionaliteten och innehållet på webbplatserna är optimala innan några grafisk design sker. Det innebär att våra webbplatser har en solid bas som ska byggas på, vilket resulterar i ett högre avkastning med mindre tid på utveckling.

En stor del av vårt arbete ligger under huven: Google Analytics i Flash.

Med det här verktyget kan vi mäta hur bra våra webbplatser gör mot våra fördefinierade mål: avvisningsfrekvens, klickvägar och till och med anpassade mätningar som hur många som rullade en viss sida. Våra specialister analyserar all denna information och använder den för att optimera webbplatsen. Om du inte mäter hur människor använder din webbplats kan du bara gissa om dess framgångar och misslyckanden.

Följande inställning är en avvecklad version av ett bildgalleri; Google Analytics gav klienten möjlighet att upptäcka vilka bilder som utlöste mest intresse. Jag har utelämnat den egentliga gallerianläggningen eftersom den ligger utanför omfattningen av denna handledning. det finns massor på Activetuts + redan - bara söka efter "galleri".

Vi kommer att fokusera på hur du konfigurerar Google Analytics för att sätta ett leende på dina kunders ansikten (och förmodligen din också ...)


Google Analytics i aktion

Här är det förenklade bildgalleriet:

Som du kan se, när en bild klickas, skickas dess identitet till mitt Google Analytics-konto. Senare kan jag titta på all statistik om vilka bilder som klickades, vid vilka tillfällen, i vilka länder osv.

(Naturligtvis tar du bort all den överlagda informationen när den är live på din egen webbplats!)


Steg 1: Förstå fördelarna

Föreställ dig arbetstider, veckor, tom månader på en webbplats. Du levererar filerna före tidsfristen, men några månader senare är det uppenbart att webbplatsen inte lockar så många kunder som kunden förväntas - trots att den är vacker. Google Analytics hjälper dig att granska besökarnas surfvanor och upptäcka vilka delar av webbplatsen som kan bli bättre markerade. Skönhet är bra, men jag tror att Return of Investment bör vara din huvudprioritet.

I ett annat scenario hjälper det här verktyget dig att förstå vilket område av din webbplats som har flest sidvisningar, hur många gånger besökare ville kontakta dig eller vilka delar av dina portföljbesökare som älskar mest. Hur många fördelar kan du tänka på för din webbplats?


Steg 2: Ställ in ett Google Analytics-konto

Om du inte redan har ett Google-konto kan du registrera dig här - det tar bara några sekunder.

När det är klart, gå till http://google.com/analytics och registrera dig för ett Analytics-konto. Där kan du ge ett kontonamn för de webbplatser du vill spåra.


Steg 3: Inuti maskinen

Gå till https://google.com/accounts/ManageAccount
och använd din muskompetens för att klicka på Analytics.

Bra, vi är nu på översiktssidan. Du bör se ditt Analytics-kontonamn klicka på det och du hittar dig själv på webbplatsens profiler.

Om du inte har skapat en webbplats för att spåra, klicka helt enkelt på "Lägg till webbplatsprofil". Ange ditt domännamn och land och klicka sedan på Slutför.


Steg 4: Hämta din UA-kod och spårningsstatus

Sidan för spårningsstatus visas automatiskt:

Den viktigaste delen är ditt webb-ID. Detta är ett unikt nummer som Google Analytics ska använda för att skicka och lagra webbplatsens trafik. (Kopiera den här UA-koden för att användas senare i Flash, eller skriv ner den.) För denna introduktion håller vi helt enkelt alla alternativ till sina standardinställningar.

Om du ska bädda in din SWF på din egen webbsida måste javascriptkoden klistras precis före tagg i sidans HTML. Detta gör att du kan behålla statistik för själva sidan, såväl som inom SWF. Det är värt att lägga in den här koden på varje sida på din webbplats.

Allt detta är bra, men du kommer fortfarande inte att kunna hitta dina besökares interaktion i detalj, eftersom HTML är blind för ditt faktiska SWF / Flash-innehåll.


Steg 5: Samla trä

För att se till att du kan se vilka delar av din SWF som används, gå till http://code.google.com/p/gaforflash/.

Detta fantastiska open source-AS3 API har många bra funktioner för att integrera GA till Flash, men även på våra största och mest komplexa webbplatser har vi bara använt två funktioner. (Mer om dem senare.) Se till att du hämtar den senaste delen till höger om sidan. (Kom tillbaka när som helst för att läsa wiki, problem etc, för att lära dig mer om detta stora API.)


Steg 6: Installera komponenterna

Zippan innehåller en dokumentationsmapp med hela API-layouten för att hjälpa dig längs vägen; en biblioteksmapp (lib) där du hittar de två komponenterna; och några textfiler kommer du förmodligen aldrig att läsa. Åtminstone gjorde jag inte;]

För att installera komponenterna, se till att Flash är stängt och navigera sedan till:

  • Windows-användare: C: \ Program \ Adobe \ Adobe Flash CS X \ language \ Konfiguration \ Komponenter
  • Mac-användare: Macintosh HD / Program / Adobe Flash CS X / Konfiguration / Komponenter

Vid denna tidpunkt måste du skapa en katalog med namnet "Google" och kopiera filerna från mappen \ lib \ i zip till den.

I grund och botten ger de två komponenterna samma funktion men utvecklas för två olika ändamål. Analytics-komponenten är för dem som inte är bekanta med AS3. Jag antar att de flesta av er redan använder AS3, så vi använder AnalyticsLibrary-komponenten.


Steg 7: Matning av elden

Innehåll Flash, öppna FLA för projektet du jobbar på, klicka Fönster> Komponenter, och dra AnalyticsLibrary-komponenten till ditt bibliotek.


Steg 8: Åtgärd! (Manus)

Oavsett om du kodar på tidslinjen eller använder en dokumentklass, måste du göra lite import:

 // importera Analytics-klasserna importera com.google.analytics.AnalyticsTracker; importera com.google.analytics.GATracker;

I din kod skapar du också en ny instans av AnalyticsTracker:

 var tracker: AnalyticsTracker = ny GATracker (detta, "UA-XXXXXX", "AS3", sant);

Parametrarna är: steg, UA-kod, ActionScript 3-läge, visuell debugger på / av. Lämna dem alla som jag har ställt dem, förutom UA-koden som du behöver byta för dig själv. Ställ in den sista parametern till falsk när du är färdig med dina testfaser, som när Sann Det kommer att skapa en överlay ovanpå din SWF-fil som i exemplet ovan.

Testa detta genom att lägga till en Click Event-lyssnare och hanterare till en av dina filmklipp eller knappar:

 myMc.addEventListener (MouseEvent.CLICK, onClick);
 funktion onClick (händelse: MouseEvent): void // gör dina kunder lyckliga. // använd 'event.target.name' istället för 'event.target' // det här kommer att visa 'myMc' istället för [object myMc], vilket är uppenbarligen en snyggare utmatning. var mySelection: String = event.target.name; tracker.trackPageview ("gallery =" + mySelection); 

Här använder vi track () fungera. Använd detta för navigationsändamål. Du kan lägga till en sträng så din kund vet vilken del som spåras. I det här fallet spårar vi vilket galleri som har utlösts. Så kopiera och klistra in den här koden överallt där du vill spåra dina interaktioner och ge en förståelig sträng till data.

Om du till exempel har en "call to action" -knapp på scenen för att locka potentiella nya kunder kan du skriva:

 tracker.trackPageview ("Hire me");

... i Click-händelsehanteraren för den knappen. Eller om du vill spåra hur många gånger de har läst din ansvarsfriskrivning:

 tracker.trackPageview ( "Varning");

Jag är säker på att du får idén.


Steg 9: Händelsespårning

Använd händelsespårning om du vill spåra vilken video eller MP3-händelse som spelas, eller när användaren pausar det - saker som så. Det är i grunden för alla åtgärder som inte representerar att öppna en "sida".

Koden ser ut så här:

 trackEvent (kategori, åtgärd, etikett);

Till exempel:

 tracker.trackEvent ("profilvideor", "spel", "första video: introduktion");

Dessutom kan du lägga till en fjärde parameter. Detta kan representera valfritt värde, men det måste vara ett heltal (heltal). Du kan till exempel bestämma den exakta tiden när videon var pausad.

Det här är bra att se hur bra din streaming eller nedladdning utför för dina besökare (inte alla har högklassiga Internetanslutningar):

 var currentTime: Date = new Date (). time; // Hämta den aktuella tiden // ladda videon här var klarToRoll: Datum = Ny Datum (). Tid - Nuvarande Tid; // ta tid att ladda videotracker.trackEvent ("profilvideor", "spela upp videon", "video 1/3: introduktion", readyToRoll);

Steg 10: Se data i Google Analytics

Gå till http://google.com/analytics/settings/ och klicka på ditt kontonamn. Klicka på Visa rapport bredvid ditt domännamn.

Här ser du en tidslinje. (Observera: beroende på din serverkonsvarstid kan det ta ett tag innan data lagras, men det ska inte ta för lång tid.) Välj datum för när du har testat med kalendern högst upp till höger:

Leta reda på innehållsöversikten; här kan du se vilka händelser eller knappar som utlöstes:

Som du kan se, som jag förklarade några steg tillbaka, event.target.name visar ett "trevligt" namn som "/ gallery = gallery 1", medan event.target returnerar något som "[objektbild1]"

Klicka på någon av dessa länkar, till exempel "/ gallery = gallery2" - du kommer att kunna se djup information, som vilken skärmupplösning dina användare har när du väljer ett alternativ i rullgardinsmenyn.

Det finns en djup och rik informationskälla i nästan alla grenar i Google Analytics-modulen. Det är nästan omöjligt att lista dem alla. Var inte rädd; titta runt och se vilka data du kan ge till dina kunder och dig själv.


Steg 11: Eliminera dig själv från statistiken med hjälp av filter

Det är en bra idé att filtrera bort ditt eget beteende; Annars kommer det att ge dig felaktiga data eftersom du noga kommer att testa det här i detalj.

Du kan göra detta genom att filtrera all aktivitet som kommer från din IP-adress - men observera att det här bara fungerar om du har en statisk IP-adress. Det finns mycket dokumentation i hjälpfilerna. Jag kan inte täcka allt här. Kolla in http://www.google.com/support/googleanalytics/bin/answer.py?hl=sv&answer=55481

Filter kan också vara användbara av andra skäl. Här är lite mer information: http://www.google.com/support/googleanalytics/bin/topic.py?hl=sv&topic=11091


Steg 12: Slutet är början ...

I den här snabba Tips har jag bara täckt en snöflinga på toppen av isberget om vad du kan göra med det här fantastiska API: n. Det är en snabb översikt över de två mest fördelaktiga funktionerna som vi hanterar för att förbättra våra webbplatser och matcha våra kunders önskemål.

Du kan också ställa in fördefinierade mål, gruppera användare som (till exempel) använda widescreen-bildskärmar, basera din Analytics på sökmotors nyckelord och så vidare. För dina kunder kan du skicka ett mail med dagliga, veckovisa eller månatliga rapporter (som xml, PDF eller andra format), eller till och med ge dem tillgång till din Analytics-sida. Om du vill ha mer information, fråga i kommentarerna!


Mina åsikter om sökmotorvänliga Flash-webbplatser

Även om det är fördelaktigt att läsa och spåra dina besökares interaktioner, är det långt ifrån att använda Flash i en SEO-vänlig värld. Jag har värmt upp dig för optimal webbdesign och fokus på Return of Investment, men vi är inte där ännu.

Ett bra nästa steg skulle vara att titta på Gaia-ramen och använda sin mäktiga inställning för att arbeta med swfaddress och deeplinking. Detta gör att du kan spåra enskilda sidor på ditt webbprojekt och i kombination med din nyinlärda Google Analytics-magi, jag är säker på att inte bara dina kunder kommer att le.

Redaktörens anmärkning: Vi har några Gaia tutorials uppställda, oroa dig inte;)

Jag har jobbat i över 10 år i grafisk designvärlden och har aldrig haft så mycket makt att veta exakt vad mina kunder och besökare vill ha. Jag brukar kalla det "fri marknadsföring och forskning från ditt skrivbord". (Om du undrar varför min egen webbplats inte använder den här teknologin, ärligt talat ... Jag hoppas att återlansera i mitten av 2010 * sips kaffe *)

Jag hoppas att detta öppnar nya dörrar för dig och ökar din skicklighet. Lycka till och ha kul!