Przeglądasz posty otagowane: ‘Bogata aplikacja internetowa’

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

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:

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:

Google Urchin na stronie conversion.pl

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.

Zbieranie danych poprzez dzienniki serwerowe

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

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:

Przykład obrazu web beacon w kampani newsletterowej

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.

Zbieranie danych poprzez obrazy web beacon

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ą?

Współpraca trzech metodKaż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?

Śledzenie bogatych 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.

Przykładowa strona flash

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 (tutaj znajdziesz podstawowe informacje o tym jak działa Google Analytics). 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 (