Snelle tip hoe Google Analytics te gebruiken voor traceren in Flash

In deze snelle tip laat ik zien hoe je kunt nagaan hoe bezoekers jouw websites, widgets en games gebruiken. Vervolgens bekijken we hoe u deze kunt verbeteren op basis van deze informatie!


Invoering

Het bouwen van mooie websites is geweldig; het bouwen van websites met een hoge Return of Investment is van onschatbare waarde.

Onlangs trad ik toe tot het webteam van een Brussels communicatiebureau, een team met vakkennis op het gebied van user experience design, contentstrategieën, softwareontwikkeling en interactieontwerp. We besteden veel tijd aan wireframes, storyboards en prototypen, wat garandeert dat de functionaliteit en de inhoud van de websites optimaal zijn voordat ieder grafisch ontwerp vindt plaats. Dit betekent dat onze websites een solide basis hebben waarop kan worden voortgebouwd, wat resulteert in een hogere ROI met minder tijd aan ontwikkeling.

Een groot deel van ons werk staat onder de motorkap: Google Analytics in Flash.

Met deze tool kunnen we meten hoe goed onze sites presteren ten opzichte van onze vooraf gedefinieerde doelen: bouncepercentage, klikpaden en zelfs aangepaste metingen, zoals het aantal mensen dat een bepaalde pagina heeft gescrold. Onze specialisten analyseren al deze informatie en gebruiken deze om de website te optimaliseren. Als u niet meet hoe mensen uw site gebruiken, kunt u alleen maar gissen naar de successen en mislukkingen.

De volgende opstelling is een uitgeklede versie van een afbeeldingengalerij; Google Analytics stond de cliënt toe om te ontdekken welke beelden de meeste interesse opwekten. Ik heb het eigenlijke galerijgebouw weggelaten omdat het buiten het bestek van deze tutorial valt; er zijn al genoeg op Activetuts + - zoek gewoon naar "galerij".

We zullen ons richten op het instellen van Google Analytics om een ​​glimlach op de gezichten van uw klanten (en waarschijnlijk ook die van u ...) te maken


Google Analytics in actie

Hier is de vereenvoudigde afbeeldingengalerij:

Zoals u kunt zien, wordt de identiteit van de afbeelding verzonden naar mijn Google Analytics-account wanneer er op een afbeelding wordt geklikt. Later kan ik kijken naar alle statistieken van welke afbeeldingen werden geklikt, op welke tijden, in welke landen, enzovoort.

(U verwijdert natuurlijk al die overlappende informatie wanneer deze live op uw eigen site staat!)


Stap 1: Begrijp de voordelen

Stel je voor dat je uren, weken of zelfs maanden op een website werkt. Je hebt de bestanden met succes vóór de deadline geleverd, maar een paar maanden later is het duidelijk dat - ondanks dat het mooi is - de site niet zoveel klanten aantrekt als je klant verwachtte. Met Google Analytics kunt u de surfgewoontes van bezoekers bekijken en ontdekken welke delen van de site beter kunnen worden gemarkeerd. Schoonheid is geweldig, maar ik denk dat Return of Investment je belangrijkste prioriteit moet zijn.

In een ander scenario helpt dezelfde tool u te begrijpen op welk gedeelte van uw website de meeste paginaweergaven voorkomen, hoe vaak bezoekers contact met u wilden opnemen of welke elementen van uw portfolio bezoekers het meest waarderen. Hoeveel voordelen kunt u bedenken voor uw site?


Stap 2: een Google Analytics-account instellen

Als je nog geen Google-account hebt, kun je je hier aanmelden - het duurt maar een paar seconden.

Zodra dat is gebeurd, gaat u naar http://google.com/analytics en meldt u zich aan voor een Analytics-account. Daar kunt u een accountnaam opgeven voor de websites die u wilt volgen.


Stap 3: In de machine

Ga naar https://google.com/accounts/ManageAccount
en gebruik je muisvaardigheden om op Analytics te klikken.

Geweldig, we staan ​​nu op de overzichtspagina. U zou uw Analytics-accountnaam moeten zien; klik erop en je komt terecht bij de websiteprofielen.

Als u geen website hebt ingesteld om te volgen, klikt u eenvoudig op 'Websiteprofiel toevoegen'. Voer uw domeinnaam en Land in en klik vervolgens op Voltooien.


Stap 4: haal uw UA-code en volgingsstatus op

De trackingstatuspagina verschijnt automatisch:

Het belangrijkste onderdeel is uw webproperty-ID. Dit is een uniek nummer dat Google Analytics gebruikt om het verkeer van uw website te verzenden en op te slaan. (Kopieer deze UA-code om later in Flash te gebruiken of schrijf hem op.) Voor deze introductie houden we alle opties gewoon op hun standaardwaarden.

Als u uw SWF op uw eigen webpagina wilt insluiten, moet de javascript-code vlak voor de. Worden geplakt tag in de HTML van de pagina. Hiermee kunt u statistieken bijhouden voor de daadwerkelijke pagina zelf, maar ook voor binnen de SWF. Het loont de moeite om deze code in elke pagina op uw site in te voegen.

Dit alles is geweldig, maar je zult nog steeds niet in staat zijn om de interactie van je bezoekers tot in detail te bepalen, omdat de HTML blind is voor je feitelijke SWF / Flash-inhoud.


Stap 5: Hout verzamelen

Raadpleeg http://code.google.com/p/gaforflash/ om ervoor te zorgen dat u kunt zien welke delen van uw SWF worden gebruikt..

Deze geweldige open source AS3 API heeft veel geweldige functies voor het integreren van GA in Flash, maar zelfs met onze grootste en meest complexe websites hebben we slechts twee functies gebruikt. (Meer hierover later.) Zorg dat je de nieuwste versie aan de rechterkant van de pagina downloadt. (Kom op elk gewenst moment terug om de wiki, problemen etc. te lezen om meer te weten te komen over deze enorme API.)


Stap 6: installeer de componenten

De zip bevat een documentatiemap met de volledige API-indeling om u te helpen; een bibliotheekmap (lib) waarin u de twee componenten kunt vinden; en sommige tekstbestanden die u waarschijnlijk nooit zult lezen. Dat deed ik tenminste niet;]

Om de componenten te installeren, zorgt u ervoor dat Flash is gesloten en navigeert u vervolgens naar:

  • Windows-gebruikers: C: \ Program Files \ Adobe \ Adobe Flash CS X \ language \ Configuration \ Components
  • Mac-gebruikers: Macintosh HD / Toepassingen / Adobe Flash CS X / Configuratie / Onderdelen

Op dit punt moet u een map met de naam 'Google' maken en de bestanden van de map \ lib \ in de zip ernaar kopiëren.

In principe bieden de twee componenten dezelfde functionaliteit, maar zijn ze ontwikkeld voor twee verschillende doeleinden. Het Analytics-onderdeel is bedoeld voor mensen die niet vertrouwd zijn met AS3. Ik neem aan dat de meesten van jullie AS3 al gebruiken, dus we zullen de AnalyticsLibrary-component gebruiken.


Stap 7: Feeding the Fire

Open in Flash de FLA voor het project waaraan u werkt, klik op Venster> Componenten, en sleep de component AnalyticsLibrary naar uw bibliotheek.


Stap 8: Actie! (Script)

Of u nu codeert op de tijdlijn of een documentklasse gebruikt, u moet wat importeren doen:

 // importeer de Analytics-klassen import com.google.analytics.AnalyticsTracker; import com.google.analytics.GATracker;

Maak ook in uw code een nieuw exemplaar van de AnalyticsTracker:

 var tracker: AnalyticsTracker = nieuwe GATracker (dit, "UA-XXXXXX", "AS3", waar);

De parameters zijn: stage, UA-code, actionscript 3-modus, visuele debugger aan / uit. Laat ze allemaal achter zoals ik ze heb ingesteld, behalve de UA-code die u moet omwisselen voor uw eigen code. Stel de laatste parameter in op vals wanneer je klaar bent met je testfasen, zoals wanneer waar het maakt een overlay bovenop uw SWF-bestand zoals in het bovenstaande voorbeeld.

Test dit door een Click-gebeurtenislistener en -handler aan een van uw filmclips of knoppen toe te voegen:

 myMc.addEventListener (MouseEvent.CLICK, onClick);
 function onClick (event: MouseEvent): void // maak je klanten blij. // gebruik 'event.target.name' in plaats van 'event.target' // hier wordt 'myMc' weergegeven in plaats van [object myMc], wat uiteraard een mooiere output is. var mySelection: String = event.target.name; tracker.trackPageview ("gallery =" + mySelection); 

Hier gebruiken we de trackPageview () functie. Gebruik dit voor navigatiedoeleinden. U kunt een tekenreeks toevoegen zodat uw klant weet welk onderdeel wordt bijgehouden. In dit geval volgen we welke galerij is geactiveerd. Dus kopieer en plak deze code overal waar u uw interacties wilt volgen en geef een begrijpelijke tekenreeks aan de gegevens.

Als u bijvoorbeeld een knop "call to action" op het podium hebt om potentiële nieuwe klanten te lokken, kunt u schrijven:

 tracker.trackPageview ("Huur mij in");

... in de Click-gebeurtenis-handler voor die knop. Of als u wilt bijhouden hoe vaak zij uw disclaimer hebben gelezen:

 tracker.trackPageview ( "Disclaimer");

Ik weet zeker dat je het idee begrijpt.


Stap 9: het bijhouden van gebeurtenissen

Gebruik het bijhouden van gebeurtenissen als u wilt bijhouden welke video- of MP3-gebeurtenis wordt afgespeeld, of als de gebruiker deze onderbreekt - dat soort dingen. Het is eigenlijk voor elke actie die niet het openen van een "pagina" vertegenwoordigt.

De code ziet er zo uit:

 trackEvent (categorie, actie, label);

Bijvoorbeeld:

 tracker.trackEvent ("profielvideo's", "spelen", "eerste video: introductie");

Bovendien kunt u een vierde parameter toevoegen. Dit kan elke gewenste waarde vertegenwoordigen, maar het moet een geheel getal (geheel getal) zijn. U kunt bijvoorbeeld het exacte tijdstip opgeven waarop de video werd gepauzeerd.

Dit is geweldig om te zien hoe goed uw streaming of downloaden presteert voor uw bezoekers (niet iedereen heeft internetverbindingen van topklasse):

 var currentTime: Date = new Date (). time; // haal de huidige tijd // laad de video hier var readyToRoll: Date = new Date (). time - currentTime; // neem even de tijd om de video tracker.trackEvent ("profielvideo's", "video afspelen", "video 1/3: introductie", readyToRoll) te laden;

Stap 10: bekijk de gegevens in Google Analytics

Ga naar http://google.com/analytics/settings/ en klik op uw accountnaam. Klik naast uw domeinnaam op Rapport weergeven.

Hier ziet u een tijdlijn. (Let op: afhankelijk van de reactietijd van uw server kan het enige tijd duren voordat de gegevens worden opgeslagen, maar dit zou niet lang moeten duren.) Selecteer de datums waarop u hebt getest met de kalender in de rechterbovenhoek:

Zoek het inhoudsoverzicht; hier kunt u zien welke gebeurtenissen of knoppen zijn geactiveerd:

Zoals je kunt zien, zoals ik een paar stappen terug heb uitgelegd, event.target.name toont een "mooie" naam zoals "/ gallery = gallery 1", terwijl event.target retourneert zoiets als "[object afbeelding1]"

Door te klikken op een van deze links - bijvoorbeeld "/ gallery = gallery2" - kunt u gedetailleerde informatie bekijken, zoals welke schermresolutie uw gebruikers hebben, wanneer u een optie kiest in het vervolgkeuzemenu.

Er is een diepe en rijke informatiebron in bijna elke tak van de Google Analytics-module. Het is bijna onmogelijk om ze allemaal op te sommen. Wees niet bang; kijk rond en zie welke gegevens u aan uw klanten en uzelf kunt verstrekken.


Stap 11: Elimineer jezelf van de statistieken met behulp van filters

Het is een goed idee om je eigen gedrag uit te filteren; anders krijgt u onjuiste gegevens omdat u dit waarschijnlijk zeer gedetailleerd zult testen.

U kunt dit doen door alle activiteiten van uw IP-adres te filteren. Houd er echter rekening mee dat dit alleen werkt als u een statisch IP-adres hebt. Er is veel documentatie in de helpbestanden; Ik kan het hier niet allemaal bedekken. Bekijk http://www.google.com/support/googleanalytics/bin/answer.py?hl=en&answer=55481

Filters kunnen ook om andere redenen nuttig zijn. Hier is wat meer informatie: http://www.google.com/support/googleanalytics/bin/topic.py?hl=en&topic=11091


Stap 12: Het einde is het begin ...

In deze Snelle tip heb ik alleen een sneeuwvlok op het topje van de ijsberg behandeld van wat u kunt doen met deze geweldige API. Het is een snel overzicht van de twee gunstigste functies waarmee we onze websites verbeteren en die overeenkomen met de wensen van onze klanten.

U kunt ook vooraf gedefinieerde doelen instellen, gebruikers groeperen die (bijvoorbeeld) breedbeeldmonitoren gebruiken, uw Analytics baseren op zoekwoorden in de zoekmachine enzovoort. Voor uw klanten kunt u een e-mail verzenden met dagelijkse, wekelijkse of maandelijkse rapporten (als XML-, PDF- of andere indelingen) of ze zelfs toegang geven tot uw Analytics-pagina. Als je meer informatie wilt, vraag het dan in de comments!


Mijn mening over zoekmachine-vriendelijke Flash-websites

Hoewel het nuttig is om de interacties van uw bezoekers te lezen en te traceren, is dit nog ver verwijderd van het gebruik van Flash in een SEO-vriendelijke wereld. Ik heb je opgewarmd voor een optimaal websiteontwerp en de focus op Return of Investment, maar we zijn er nog niet.

Een goede volgende stap zou zijn om naar het Gaia-framework te kijken en de krachtige setup te gebruiken om met swfaddress en deeplinking te werken. Hiermee kunt u afzonderlijke pagina's van uw website-project volgen en in combinatie met uw nieuw geleerde magie van Google Analytics ben ik er zeker van dat niet alleen uw klanten zullen glimlachen.

Opmerking van de uitgever: We hebben enkele Gaia-zelfstudies opgesteld, maak je geen zorgen;)

Ik werk al meer dan 10 jaar in de grafische ontwerpwereld en heb nog nooit zoveel vermogen gehad om precies te weten wat mijn klanten en bezoekers willen. Ik noem het vaak 'gratis marketing en onderzoek vanaf je bureaublad'. (Als u zich afvraagt ​​waarom mijn eigen site deze technologie niet gebruikt, eerlijk gezegd ... ik hoop dat ik tegen midden 2010 * sips koffie * opnieuw mag lanceren *)

Ik hoop dat dit nieuwe deuren voor je opent en je vaardigheden verbetert. Veel succes en veel plezier!