Śledzenie aplikacji internetowych w Google Analytics

Jak obiecaliśmy w tym tygodniu, po omówieniu podstaw śledzenia zdarzeń w Google Analytics przyszedł czas na rozszerzenie wątku o bogate aplikacji internetowej, których głównym przedstawicielem jest flash.

Na początek o samych bogatych aplikacjach internetowych (ang. Rich Internet Applications – RIAs).

Bogate aplikacje internetowe

Określenie Rich Internet Application zostało po raz pierwszy użyte w 2001 roku przez pracowników firmy Macromedia. Nazwali oni w ten sposób liczne i powstające jak grzyby po deszczu w owym czasie strony utworzone w technologii flash – stąd ten język kodowania stron internetowych jest głównym przedstawicielem tego typu systemów. Charakterystyką serwisu napisanego w tej technologii jest praca w dynamicznie generowanym i jednorodnym interfejsie. Strona taka pobiera większość danych z serwera na początku sesji użytkownika. Następnie są one przetwarzane oraz wyświetlane na bieżąco, dzięki czemu nie ma przeładowania strony, jak to dzieje się w stronach napisanych w języku HTML i podobnych – nazwijmy je standardowych.

Obecnie jest wiele tego rodzaju serwisów. Jednym z nich jest strona internetowa marki Ingreme. Zauważ, że przy korzystaniu z tego serwisu w pasku adresu pozostaje ciągle ten sam adres.

Jeżeli Ingreme nie ma zainstalowanego śledzenia zdarzeń, to będzie w stanie uzyskać jedynie informację o liczbie wejść i o samych wejściach – nie będzie potrafił natomiast odpowiedzieć sobie, jak użytkownicy zachowują się w jego serwisie.

Twórcy Google Analytics zadbali jednak i o to, aby śledzić zdarzenia na stronach, gdzie nie dochodzi do wykonania kodu śledzącego tj. przeładowania strony. Funkcjonalność ta nie byłaby możliwa bez zastosowania modyfikacji kodu strony.

Śledzenie RIAs

W celu uruchomienia śledzenia bogatych aplikacji internetowych musisz ściągnąć dodatkowy komponent Google Analytics for Flash. Znadjdziesz go tutaj.

Bez użycia komponentu gaforflash śledzenie flash z Google Analytics przysparza wiele problemów technicznych. Po pierwsze, trzeba opracować własny interfejs, tak aby flash mógł wykonać odpowiedni kod Analytics, taki jak trackPageview () lub trackEvent (). Ponadto, należy również przewidzieć, czy zawartość witryny flash będzie miała dostęp do Document Object Model (DOM) przeglądarki. Składnik Google Analytics dla programu Adobe Flash ułatwia śledzenie technologii Flash i obsługuje dostęp DOM.

Gaforflash umożliwa śledzenie m.in. oglądalności stron oraz zdarzeń w bogatych aplikacjach internetowych. Dzięki temu będziesz w stanie śledzić każdą stron napisaną we flashu.

Przedstawione w tej części przykłady pochodzą ze strony internetowej Inside RIA.

Śledzenie oglądalności stron

W zasadzie samo pojęcie oglądalności strony w bogatych aplikacjach internetowych nie ma sensu, ponieważ witrynę widzimy jedynie raz w ciągu wizyty – to co w rzeczywistości obserwujemy, to jest dynamiczna zmiana zawartości. W istocie rzeczy, instalacja śledzenia zmian na tego typu witrynie ma nam pomóc w śledzenie nawigacji w jej ramach.

Poniższy przykład ilustruje jak używając komponentu gaforflash na stronie napisanej w technologii flash możliwe jest śledzenie użytkowników takiego serwisu.

1 <?xml version=”1.0″ encoding=”utf-8″?>
2 <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
3 layout=”absolute”
4 xmlns:ga4flash=”com.google.analytics.components.*”
5 addedToStage=”trackInitialView()”>
6
7 <ga4flash:FlexTracker
8 id=”tracker”
9 account=”UA-111-222″
10 visualDebug=”true”
11 mode=”AS3″
12 />
13
20 <mx:Script>
21 <![CDATA[
22 public function trackInitialView():void
23 {
24 tracker.debug.minimizedOnStart = true;
25 tracker.trackPageview(„/pane1″);
26 }
27 ]]>
28 </mx:Script>
29
30 <mx:Accordion x=”31″ y=”43″ width=”380″ height=”423″
31 change=”tracker.trackPageview(’/pane’ + String(event.newIndex+1));”>
32 <mx:Canvas label=”Pane 1″ width=”100%” height=”100%”>
33 <mx:Text text=”Welcome to Pane 1.”/>
34 </mx:Canvas>
35 <mx:Canvas label=”Pane 2″ width=”100%” height=”100%”>
36 <mx:Text text=”Benvenuti a Pane 2.”/>
37 </mx:Canvas>
38 <mx:Canvas label=”Pane 3″ width=”100%” height=”100%”>
39 <mx:Text text=”Bienvenue à Pane 3!”/>
40 </mx:Canvas>
41 </mx:Accordion>
42
43 </mx:Application>

Efekt implementacji powyższego kodu możesz sprawdzić tutaj.

Możesz zauważyć, że dane są wysyłane do konta Google Analytics oznaczonego w linii 12. Śledzenie oglądalności stron jest wykonane za pomocą opcji trackPageview (linia 25 i 31). Podstawowym parametrem w powyższym kodzie jest wirtualny URL, który stanowi wirtualną adres domeny RIA (w przykładzie jest to harmonijka zakładek, które rozsuwają się po kliknięciu na każdą z nich), która po włączeniu poszczególnych zakładek zmienia się na poszczególne wirtualne podstrony. Funkcjonalność powyższego kodu reprezentowana jest poprzez trzy warstwy, które się wzajemnie nakładają. Widok inicjujący – pierwsze wejście na stronę zaznaczone zostało w linii 22.

W związku z tym, że opcja visualDebug jest włączona (linia 10) dane nie są wysyłane do panelu Google Analytics, lecz wyświetlane są w oknie dialogowym na dole strony (zobacz). W przeciwnym wypadku kliknięcie na każdą z warstw oznaczone było jako odsłona strony oznaczona jako „pane1”, „pane2” lub „pane3” (patrz niżej).

Śledzenie nawigacji na stronach flash w Google Analytics

Źródło: http://www.insideria.com/2009/02/using-google-analytics-within.html

Śledzenie zdarzeń

Śledzenie zdarzeń najlepiej wykorzystuje się do raportowania akcji na stronie, które nie są bezpośrednio związane z nawigacją. W omawianym przykładzie zdarzeniem jest kliknięcie Pause/Resume – Zobacz jak działa zaimplementowane śledzenie zdarzeń w bogatej aplikacji internetowej).

Poniżej kod, dzięki któremu uzyskano powyższą aplikację:

1 <?xml version=”1.0″ encoding=”utf-8″?>
2 <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
3 layout=”absolute” addedToStage=”initExample2()”>
4
5 <mx:Script>
6 <![CDATA[
7 import mx.events.MetadataEvent;
8 import mx.controls.Button;
9 import mx.events.VideoEvent;
10 import mx.controls.VideoDisplay;
11 import mx.containers.Panel;
12 import com.google.analytics.GATracker;
13
14 private var tracker:GATracker;
15 private var readyTime:Number;
16 private var video:VideoDisplay;
17
18 public function initExample2():void
19 {
20 tracker = new GATracker(this, „UA-111-222”, „AS3”, true);
21
22 //build video UI
23 var panel:Panel = new Panel();
24 panel.title = „Example 2”;
25 panel.setStyle(„horizontalAlign”, „center”);
26 panel.x = 20;
27 panel.y = 40;
28 panel.width = 545;
29 panel.height = 372;
30 this.addChild(panel);
31 video = new VideoDisplay();
32 video.autoPlay = true;
33 video.width = 525;
34 video.height = 300;
35 video.autoRewind = false;
36 video.addEventListener(VideoEvent.READY, handleReady);
37 video.addEventListener(VideoEvent.COMPLETE, handleComplete);
38 panel.addChild(video);
39 var button:Button = new Button();
40 button.label = „Pause”;
41 button.addEventListener(MouseEvent.CLICK, handlePause);
42 panel.addChild(button);
43
44 readyTime = new Date().time;
45 video.source = „http://farm.sproutbuilder.com/asset/JwDKrdjrDnJcRVxp.flv”;
46 }
47
48 public function handleReady(event:Event):void
49 {
50 // calculate time (in milliseconds) in which
51 // the video was ready to play
52 readyTime = new Date().time – readyTime;
53 tracker.trackEvent(„Videos”, „ReadyTime”, „Video1”, readyTime);
54 }
55
56 public function handleComplete(event:Event):void
57 {
58 tracker.trackEvent(„Videos”, „Completed”, „Video1”);
59 }
60
61 public function handlePause(event:MouseEvent):void
62 {
63 var button:Button = event.target as Button;
64 if (button.label == „Pause”) {
65 video.stop();
66 button.label = „Resume”;
67 tracker.trackEvent(„Videos”, „Paused”, „Video1”);
68 } else {
69 video.play();
70 button.label = „Pause”;
71 tracker.trackEvent(„Videos”, „Resumed”, „Video1”);
72 }
73 }
74
75 ]]>
76 </mx:Script>
77
78 </mx:Application>

Śledzenie zmian inicjowane jest w linii 20. Zawiera ono trzy parametry:

this w tym przypadku odnosi się do mx:Application, ale w rzeczywistości może odnosić się do dowolnego obiektu, który będzie wyświetlany.
Drugim parametrem jest identyfikator konta Google Analytics.
Trzeci parametr określa metodę własności (ang. mode property).
Ostatni to visualDebug, o którym była mowa wcześniej.

Analizując kod dalej widzimy, że śledzone są cztery zdarzenia:

Zakończenie odtwarzania klipu (linia 56).
Pauza lub wznowienie klipu (linia 67 i 71).
Zdarzenie polegające na załadowaniu filmu (linia 53).

Co więcej, jeżeli spojrzysz na kod i na poszczególną kategoryzację zdarzeń możesz dostrzec parametry, o których pisałem wcześniej tj. kategorię (np. „Videos”), akcję (np. „Paused”) oraz etykietę (np. „Video1”).

W ten sposób natomiast prezentują się wyniki w pulpicie Google Analytics:

Śledzenie zdarzeń na stronach flash w Google Analytics

Źródło: http://www.insideria.com/2009/02/using-google-analytics-within.html

Jak widać śledzenie zmian w bogatych aplikacjach internetowych nie jest takie skomplikowane. Trzeba jedynie zainstalować gaforflash i możesz śledzić użytkowników Twojego serwisu napisanego w technologii flash.

ANALITYKA WEB

ANALITYKA APP

PRYWATNOŚĆ (CMP)

WIZUALIZACJA I BI

HURTOWANIE DANYCH

ROZWIĄZANIA CHMUROWE

MODELOWANIE DANYCH

OPTYMALIZACJA KONWERSJI (CRO)

AKTYWACJA DANYCH

PREDYKCJA I AI

Śledzenie bogatych aplikacji internetowych w Google Analytics

Bogate aplikacje internetowe

Śledzenie RIAs

Śledzenie oglądalności stron

Śledzenie zdarzeń

Conversion Data Guard

Conversion Insight Stream

Analytics Hotline

ANALITYKA WEB

ANALITYKA APP

PRYWATNOŚĆ (CMP)

WIZUALIZACJA I BI

HURTOWANIE DANYCH

ROZWIĄZANIA CHMUROWE

MODELOWANIE DANYCH

OPTYMALIZACJA KONWERSJI (CRO)

AKTYWACJA DANYCH

PREDYKCJA I AI

Popularne tematy

Najnowsze wpisy

Kim jesteśmy?

Nasi klienci

Śledzenie bogatych aplikacji internetowych w Google Analytics

Bogate aplikacje internetowe

Śledzenie RIAs

Śledzenie oglądalności stron

Śledzenie zdarzeń