Bogata aplikacja internetowa - Conversion

Metody zbierania danych: tagi JavaScript, dzienniki serwerowe, obrazy web beacon

Paweł Ogonowski — Tue, 15 Mar 2011 10:36:30 +0000

Swego czasu Mariusz opisywał w jaki sposób Google Analytics zbiera dane o użytkownikach. W artykule został zawarty opis pozyskiwania danych za pomocą umieszczonych w kodzie tagów JavaScript.

Prawdą jest, że tagi JavaScript są obecnie najpopularniejszą metodą zbierania danych w analityce internetowej. Dzieje się tak, ponieważ mają wiele zalet:

są bardzo proste w implementacji,
w przypadku braku dostępu do serwerów (brakiem własnej infrastruktury IT) jest to praktycznie jedyne dostępne narzędzie,
przechowywanie stron internetowych w cache przeglądarek nie stanowi problemu,
w łatwy sposób można je dopasowywać do indywidualnych wymogów i śledzić dodatkowe elementy na wybranych podstronach (np. koszyk zakupowy, potwierdzenie zamówienia lub wyszukiwanie w witrynie),
umożliwiają zbieranie danych ze stron typu RIA (ang. Rich Internet Application – Bogate Aplikacje Internetowe),
narzędzia tej klasy mogą umożliwiać zbieranie i analizowanie danych w czasie rzeczywistym.

Jednak pomimo tej długiej listy zalet, tagi JavaScript mają również swoje minusy do których należy zaliczyć:

niepełna lub niepoprawna implementacja powoduje, że tracimy dane na zawsze (nie można powrócić, aby ponownie przeanalizować niektóre dane),
część użytkowników posiada wyłączone ciasteczka, obsługę JS lub ich zapory sieciowe blokują wykonywanie skryptów tego typu (ok. 5% ruchu na stronie),
brak możliwości zliczania faktycznej liczby pobrań plików (możemy zmierzyć jedynie liczbę rozpoczęć pobierania, która jest daleka od liczby pobrań zakończonych sukcesem),
brak możliwości śledzenia aktywności robotów wyszukiwarek internetowych (w Polsce jest to niedużym problemem bo Google posiadający 93% udziały w rodzimym rynku udostępnia nam Narzędzia dla Webmasterów),
brak możliwości pełnego śledzenia kampanii newsletterowych za ich pomocą (niepełne dane jedynie o przeklikach – np. brak informacji o otwarciach).

Jeśli nie tagi JavaScript to co?

Nie istnieje niestety duża liczba alternatyw do tagów JavaScript. Skupię się na dwóch z nich, które są najbardziej popularne: dzienniki serwerowe i obrazy web beacon.

Dzienniki serwerowe

Praktycznie na każdym serwerze zainstalowane jest przynajmniej jedno narzędzie do zbierania logów serwerowych. Oryginalnie to właśnie z nich wywodzi się analityka internetowa.

Dzienniki serwerowe zostały oryginalnie stworzone w celu rejestrowania błędów występujących na serwerze. Obecnie logi serwerowe używane są przez takie narzędzia jak np. Google Urchin (płatna wersja programu analitycznego od Google). Screen takich statystyk dla naszej strony internetowej wygląda następująco:

Kliknij na zdjęcie, aby je powiększyć

Proces zbierania danych poprzez dzienniki serwerowe przebiega w następujący sposób:

a) Użytkownik wpisuje adres strony www w przeglądarce internetowej.
b) Zapytanie zostaje wysłane do serwera na którym znajduje się witryna.
c) Serwer akceptuje zapytanie i tworzy zapis w dzienniku serwera (zazwyczaj są to nazwa podstrony, adres IP, typ przeglądarki, data i godzina).
d) Serwer wysyła stronę internetową do użytkownika.

Do plusów korzystania z dzienników serwerów zaliczyć można:

są jedynym narzędziem, które rejestruje działalność robotów wyszukiwarek,
informacje zbierane za ich pomocą są zawsze dostępne – jest to automatyczna konfiguracja każdego serwera (jeśli mówimy o standardowych rozwiązaniach),
posługując się dziennikami serwerowymi firma jest właścicielem danych – są one przetrzymywane na firmowym serwerze,
jako jedyne umożliwiają całkowite śledzenie pobrań plików z serwera (nie tylko rozpoczęcie, ale również czy plik został z sukcesem ściągnięty).

Ograniczeniami dzienników serwerów są:

narzędzie zostało zaprojektowane do śledzenia błędów serwerów, przez co nie dostarcza wystarczających informacji biznesowych i marketingowych,
adaptacja dzienników serwerów wymaga ścisłej współpracy z działem IT, co spowalnia proces wprowadzania zmian,
dzienniki serwerów zbierają informacje na temat wszystkich wywołań – nie tylko stron, ale również obrazów, plików, wywołań robotów wyszukiwarek, przez co dane muszą być dokładnie odfiltrowane, aby można było na ich podstawie wnioskować,
ponieważ część stron przechowywana jest w pamięci podręcznej przeglądarek, część ruchu jest w ogóle nie widoczna w tej metodzie (ok. 10%).

Obrazy web beacon

Web beacon to jednopikselowe (zazwyczaj), przezroczyste obrazy w formacie GIF umieszczane na stronie internetowej. W obecnych czasach obrazy web beacon stosowane są najczęściej do śledzenia kampanii newsletterowych:

Proces zbierania danych w przypadku obrazów web beacon przebiega w następujący sposób:

a) Użytkownik wpisuje adres strony www w przeglądarce internetowej.
b) Zapytanie zostaje wysłane do serwera na którym znajduje się witryna.
c) Serwer wysyła z powrotem treść strony internetowej wraz z zapytaniem o jednopikselowy obrazek znajdujący się na drugim serwerze.
d) Strona w trakcie ładowania wysyła zapytanie do drugiego serwera wraz z informacjami o przeglądanej stronie internetowej.
e) Serwer wysyła obrazek GIF wraz z kodem, który jest w stanie czytać ciasteczka, przechwytując tym samym anonimowe informacje o adresie IP użytkownika, czasie oglądania strony itp.

Kliknij na zdjęcie, aby je powiększyć

Wśród zalet korzystania z obrazów web beacon należy wymienić:

ich łatwą implementację,
możliwość wskazania danych, które mają być zbierane,
możliwość korzystania z narzędzi do zbierania statystyk na temat kampanii newsletterowych,
jeżeli obrazy umieszczane są na kilku witrynach mogą być używane do śledzenia jednego użytkownika korzystającego z wielu witryn.

Ograniczeniami obrazów web beacon są:

z powodu możliwości śledzenia jednego użytkownika na wielu witrynach to narzędzie ma złą reputację – wielu użytkowników uważa, że narusza ono ich prywatność, przez co wyłączają obsługę ciasteczek w swoich przeglądarkach,
jeżeli obrazy są wyłączone w klientach poczty e-mail (a staje się to domyślnym ustawieniem wielu programów) dane nie mogą być zbierane przy zastosowaniu tej metody,
narzędzia nie można tak łatwo dostosować do indywidualnych potrzeb jak np. tagów JavaScript.

Która z wymienionych metod jest najlepszą?

Każde z trzech metod posiada swoje zalety i wady, które powinny być brane pod uwagę w przypadku doboru metod zbierania danych ilościowych dla konkretnej witryny internetowej. Najbardziej optymalnym rozwiązaniem jest połączenie wszystkich trzech metod w strategii zbierania danych, ponieważ każde z nich przewyższa pozostałe w wybranym obszarze.

Tagi JavaScript powinny być brane pod uwagę jako główne narzędzie analizy danych na stronie internetowej. W obecnych czasach narzędzia tej klasy pozwalają na uzyskanie największej liczby informacji o użytkowniku i są dynamicznie rozwijane przez usługodawców. Dodatkowo wraz pojawieniem się darmowego narzędzia działającego w oparciu o tą technikę, jakim jest Google Analytics, zmniejszyły się drastycznie nakłady potrzebne na implementację narzędzia. Dzięki temu więcej środków finansowych można przeznaczyć na zasoby ludzkie, które są potrzebne do analizy danych i wyciągania wniosków. Ponadto Tagi JavaScrpt dają bardzo dużą swobodę w dostosowywaniu typu zbieranych danych do potrzeb organizacji.

Dzienniki serwerów są jedynym narzędziem, które daje możliwość śledzenia robotów wyszukiwarek, dlatego powinny być używane, aby optymalizować działania w sferze pozycjonowania w wyszukiwarkach internetowych. W polskich warunkach narzędzie to może jednak zostać pominięte, ponieważ Google udostępnia swoje własne, darmowe narzędzie zapewniające dostęp do wszystkich kluczowych informacji, które są potrzebne w ramach działań pozycjonowania. Mając na uwadze fakt, że wyszukiwarka ta jest monopolistą na polskim rynku z udziałami sięgającymi 93%, nie ma potrzeby ponoszenia dodatkowych kosztów na obsługę dzienników serwera.

Obrazy web beacon mogą być używane jako uzupełnienie do zbierania informacji za pomocą tagów JavaScript przy śledzenia kampanii mailingowych. Na dzień dzisiejszy stanowią one najlepszą formę śledzenia współczynnika otwarć, który jest stosunkiem otwartych e-maili do wszystkich wysłanych elektronicznych wiadomości i jest jednym ze wskaźników stanowiących o efektywności newslettera.

Korzystanie w przedstawiony wyżej sposób z opisanych narzędzi do zbierania danych ilościowych o użytkownikach zapewnia solidną podstawę do budowy strategii analityki strony internetowej i dobrania odpowiednich KPI.

Teraz Wasza kolej: jak Wy wykorzystujecie różne metody zbierania danych w swojej pracy?

The post Metody zbierania danych: tagi JavaScript, dzienniki serwerowe, obrazy web beacon first appeared on Conversion.

Śledzenie bogatych aplikacji internetowych w Google Analytics

Mariusz Michalczuk — Thu, 08 Jul 2010 18:23:49 +0000

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
2 3 layout=”absolute”
4 xmlns:ga4flash=”com.google.analytics.components.*”
5 addedToStage=”trackInitialView()”>
6
7 8 id=”tracker”
9 account=”UA-111-222″
10 visualDebug=”true”
11 mode=”AS3″
12 />
13
20
21 22 public function trackInitialView():void
23 {
24 tracker.debug.minimizedOnStart = true;
25 tracker.trackPageview(„/pane1″);
26 }
27 ]]>
28
29
30 31 change=”tracker.trackPageview(’/pane’ + String(event.newIndex+1));”>
32
33
34
35
36
37
38
39
40
41
42
43

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).

Ź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
2 3 layout=”absolute” addedToStage=”initExample2()”>
4
5
6 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
77
78

Ś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:

Ź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.

The post Śledzenie bogatych aplikacji internetowych w Google Analytics first appeared on Conversion.