Systém trackování uživatele na webu

Mendelova univerzita v Brně Provozně ekonomická fakulta

Systém trackování uživatele na webu Bakalářská práce

Vedoucí práce: Ing. Ondřej Popelka, Ph.D.

Milan Šafář

Brno 2011

2

Zadání práce

Touto cestou chci poděkovat vedoucímu bakalářské práce Ing. Ondřeji Popelkovi, Ph.D. za věcné připomínky a cenné rady při tvorbě této práce. Dále svým rodičům za podporu v době studia a slečně Markétě Bogárové za čas strávený nad korekturou texu.

Prohlašuji, že jsem tuto práci vypracoval samostatně s použitím literatury, jejíž seznam uvádím v závěru práce a kterou řádně cituji v textu.

V Brně dne 25. května 2011

....................................................

5

Abstract Šafář, M. Bachelor thesis. Brno, 2011. The bachelor thesis deals with tracking of users on site. Survey of existing applications for user tracking and possible use of this data for the implementation of campaigns and advice on ergonomics. Result of this work is application which can gather data about user behavior during web browsing, which can be used to improve the web presentation. Keywords Ajax, JSON, user tracking, web, web analytics

Abstrakt Šafář, M. Bakalářská práce. Brno, 2011. Bakalářská práce se zabývá tématem trackování uživatele na webu. Průzkumem stávajících aplikací pro trackování uživatele a možného využití těchto dat pro realizaci kampaně a doporučení pro ergonomii. Závěrem této práce je aplikace umožnující trackovat uživatele na webu pro získaní dat, které vedou k zlepšení ergonomie na webové prezentaci. Klíčová slova Ajax, JSON, trackování uživatele, web, webová analýza

6

OBSAH

Obsah 1 Úvod a cíl práce 1.1 Úvod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2 Cíl práce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Metodika 2.1 Prezentace dat u uživatele . . . . . 2.1.1 HTML . . . . . . . . . . . . 2.1.2 DOM . . . . . . . . . . . . . 2.1.3 CSS . . . . . . . . . . . . . 2.2 Základní pojmy . . . . . . . . . . . 2.2.1 Internet . . . . . . . . . . . 2.2.2 World Wide Web . . . . . . 2.2.3 Cookie . . . . . . . . . . . . 2.2.4 Internetová doména . . . . . 2.2.5 URL . . . . . . . . . . . . . 2.3 Získání dat . . . . . . . . . . . . . 2.3.1 JavaScript . . . . . . . . . . 2.3.2 Frameworky . . . . . . . . . 2.3.3 jQuery . . . . . . . . . . . . 2.4 Přenos dat a jejich formát . . . . . 2.4.1 JSON . . . . . . . . . . . . 2.4.2 XML . . . . . . . . . . . . . 2.4.3 XMLHttpRequest . . . . . . 2.4.4 Ajax . . . . . . . . . . . . . 2.4.5 CORS . . . . . . . . . . . . 2.4.6 JSONP . . . . . . . . . . . 2.5 Získávání dat pro analýzu . . . . . 2.5.1 Značkování stránek . . . . . 2.5.2 Serverové logy . . . . . . . . 2.6 Ergonomie . . . . . . . . . . . . . . 2.6.1 Ergonomie na webu . . . . . 2.7 Kampaně . . . . . . . . . . . . . . 2.7.1 Návrh PPC kampaní . . . . 2.7.2 Způsob práce s kampaněmi

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3 Možnosti trackování uživatele 3.1 Google Analytics . . . . . . . . . . . . . . . . . . 3.2 Omniture . . . . . . . . . . . . . . . . . . . . . . 3.3 Fireclick . . . . . . . . . . . . . . . . . . . . . . . 3.4 AWStats . . . . . . . . . . . . . . . . . . . . . . . 3.5 Využití dat z analitických nástrojů pro ergonomii

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . .

7 7 7

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8 8 8 8 8 9 9 9 9 9 9 10 10 10 10 11 11 11 12 12 13 13 13 13 15 16 16 16 16 17

. . . . .

18 18 18 19 19 20

OBSAH

7

3.6

Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

4 Vlastní práce 4.1 Implementace trackovacího nástroje . . . . . . . . 4.1.1 GATC . . . . . . . . . . . . . . . . . . . . 4.1.2 Implementace . . . . . . . . . . . . . . . . 4.2 Analýza, doporučení a optimalizace . . . . . . . . 4.2.1 Analýza DřevostavbyOk . . . . . . . . . . 4.2.2 Analýza UIS . . . . . . . . . . . . . . . . . 4.3 Nedostatky při analýze . . . . . . . . . . . . . . . 4.4 Realizace vlastního Trackeru . . . . . . . . . . . . 4.4.1 Práce uživatele . . . . . . . . . . . . . . . 4.4.2 Formát komunikace . . . . . . . . . . . . . 4.4.3 Typ rozhraní komunikace . . . . . . . . . 4.4.4 Databáze . . . . . . . . . . . . . . . . . . 4.4.5 Tracker . . . . . . . . . . . . . . . . . . . 4.5 Prezentace dat . . . . . . . . . . . . . . . . . . . 4.5.1 Komunikace se serverem . . . . . . . . . . 4.5.2 Přehledy . . . . . . . . . . . . . . . . . . . 4.6 Vyhodnocení práce . . . . . . . . . . . . . . . . . 4.6.1 Relizace u demonstračního příkladu . . . . 4.6.2 Doporučení pro zlepšení ergonomie stránky 4.6.3 Ekonomická efektivita . . . . . . . . . . . 4.6.4 Realizace v UIS . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

22 22 22 22 23 23 25 26 27 27 27 28 28 30 31 31 32 37 37 37 38 38

5 Diskuze

39

6 Závěr

40

7 Literatura

41

Přílohy

43

A Přílohy na CD

44

1

ÚVOD A CÍL PRÁCE

1 1.1

8

Úvod a cíl práce Úvod

Internetové technologie jsou jedny z technologií, které jdou „mílovými krokyÿ kupředu. Tento vývoj je pozorován velkou skupinou lidí zahrnující vývojáře, webmástery, developery až po koncové uživatele. Jedním směrem vývoje je uživatelské prostředí webových aplikací a prezentací. Moderní webové prezentace umožňují zobrazit ve svém obsahu text, obrázky, videa a mnoho dalších prvků. S možností zobrazení těchto prvků se může stát webová prezentace nepřehledná a tím pro uživatele nepřívětivá. Pojem nepřívětivá si každý může vyložit jinak, do aspektů nepřívětivosti řadíme např. nevhodné rozložení stránky, zvolené barvy, nekonzistence obsahu či rychlost webové prezentace. Všechny tyto faktory mají vliv na uživatele a jeho pohodlnou a rychlou práci na webové prezentaci. Tyto faktory označujeme pojmem ergonomie práce. Webové prezentace, ač se dodržují určitá pravidla při jejich návrhu, mohou být pro uživatele nepřehledné. Jednou z možností, jak zjistit pocit z prezentace a její navigace, je zeptat se uživatele dotazníkem např. při odchodu ze stránky. Další možností je sledovat uživatele při jeho práci na webové prezentaci, což neznamená sedět uživateli za zády a kontrolovat jeho pohyby, prostřednictvím webových technologií. Sběr dat u uživatele zajišťuje aplikace (skript), která je připojena k webové stránce, při jejím načtení ze serveru. Tento skript odesílá data pro analýzu na sběrný server. Analýzy jsou prováděny zejména pro webový marketing a obchod. Některá získaná data je možné prezentovat i se spojením ergonomií či uživatelskou přívětivostí, ale nebudou poskytovat veškerá potřebná data pro vyhodnocení těchto vlastností na webové prezentaci.

1.2

Cíl práce

Cílem této bakalářské práce je realizace nástroje pro sledování činnosti uživatele na webové prezentaci. Tento nástroj bude realizován tak, aby získal(trackoval) informace, které pomohou zlepšit ergonomii webu. Nástroj se bude skládat z částí trackovací a prezentační. Dílčí částí bakalářské práce je průzkum aplikací, které jsou již na trhu a zjištění jejich vlastností. Dále implementace jedné z těchto aplikací na demonstrační příklad a univerzitní informační systém, za účelem analýzy získaných dat z tohoto nástoje pro doporučení zvýšení ergonomie. U demonstračního příkladu předvést návrh kampaně.

2

METODIKA

2

9

Metodika

Webové prezentace můžeme rozdělit dle jejich účelu do dvou hlavních skupin. První skupinu zastupují stránky zaměřené na poskytování informací (zpravodajské portály, blogy, osobní či firemní prezentace) a druhou skupinu zastupují webové aplikace (informační systémy, e-shopy, kancelářské balíky). Pro tyto vymezené skupiny je dobré vědět informace, které jsou vázány k jejich účelu. V případě osobní či firemní prezentace, to mohou být klíčová slova vedoucí z vyhledávačů na webovou prezentaci či návštěvnost jednotlivých částí webové prezentace. Naopak u e-shopu, spíše převažuje potřeba znát konverzní poměr u jednotlivých druhů zboží, v závislosti na reklamní kampani, či grafické znázornění určité nabídky. Obě tyto skupiny spojuje potřeba dovědět se informace o ergonomii prezentace, aby bylo možné prezentaci co nejvíce optimalizovat uživateli. Informace o webové prezentaci zprostředkovávají analytické nástroje, které mohou být založeny na následujících technologiích.

2.1

Prezentace dat u uživatele

Prezentace dat webové stránky je prováděna ve webovém prohlížeči (Firefox, Opera a další). Webový prohlížeč umí pracovat s následujícími technologiemi. 2.1.1

HTML

Je značkovacím jazykem pro zápis textu. Využívá se především pro vytváření webových prezentací na internetu. Jeho značky se nazívají tagy. 2.1.2

DOM

DOM (Document Object Model) je multiplatformní rozhraní umožňující programům a skriptům dynamický přístup k aktualizaci obsahu, struktury a stylu dokumentů. Tento model může být dále zpracován a výsledky tohoto zpracování lze začlenit zpět do prezentované stránky. DOM se využívá při zpracování dynamických webových stránek. Práce s DOM je implementována do programovacích jazyků. Poslední vydanou verzí DOM od společnosti W3C je DOM Level 3 (W3C, 2005). 2.1.3

CSS

Je jednoduchý mechanismus pro vkládání stylů (např. fonty, barvy) do Webových dokumentů jako HTML či XML (W3C, 2005). Ukázka zápisu CSS /*deklarace šířky a výšky elementu s id hlavicka*/

2.2

Základní pojmy

10

#hlavicka{width: 200px; height: 450px;} /*deklarace červené barvy textu třídy cervena*/ .cervena{color: red;}

2.2 2.2.1

Základní pojmy Internet

Internet je síť navzájem propojených počítačových sítí. Tyto počítačové sítě komunikují pomocí protokolů TCP/IP. Nejrozšířenější službou poskytovanou na Internetu je WWW. 2.2.2

World Wide Web

Zkráceně WWW je obecný název přiřazovaný všem hypertextovým dokumentům na internetu. Dělí se na dvě skupiny a to statické weby a dynamické weby. Statické weby se vyznačují jednoduchou komunikací, která probíhá na bázi požadavku a generaci celé stránky. Dynamické umožňují aktualizovat pouze část stránky bez nutnosti celkového načtení stránky. 2.2.3

Cookie

Soubory cookie jsou malé textové zprávy, uchovávány webovými prohlížeči. Mohou být generovány webovým serverem nebo JavaScriptem. Cookie soubory se dělí do dvou skupin z pohledu uchování dat na klientském počítači. První skupinou jsou trvalé soubory cookie, zůstávající i po zavření webového klienta a při znovuotevření je z nich možno číst. Session cookie slouží pro uchovávání dat pouze po dobu, strávenou na webové prezentaci. Dalším dělením cookie souborů je na vlastní, uložené danou webovou doménou a cizí (Clifton, 2005). 2.2.4

Internetová doména

Je jméno (identifikátor) počítače nebo počítačové sítě, které jsou připojené do internetu. Domény se dělí dle hierarchie na domény nejvyššího řádu (.cz, .com) dle použití. Další doménová jména nazýváme subdoménami (seznam.cz) těchto domén nejvyššího řádu. Každé doménové jméno může obsahovat několik subdomén k doménovému jménu. Jednotlivé subdomény jdou odděleny tečkou (nic, 2010). 2.2.5

URL

URL (Uniform Resource Locators) je řetězec znaků reprezentující zdroje přes Internet. Řetězec obsahuje doménové jméno, port, specifikace souboru a paramety. URL je definováno v RFC 1630 (CERN, 1994).

2.3

Získání dat

2.3

11

Získání dat

Webové prezentace jsou tvořeny HTML dokumenty a tyto dokumenty se skádají z jednotlivých elementů. Uživatel při procházení webové prezentace vyvolává nad těmito elementy události. Webové prohlížeče na tyto události reagují standardnímy akcemi. Jednou z těchto akcí může být načtení nové části webové prezentace po kliknutí na odkaz. Události nad elementy jsou také zachytitelné JavaScriptem, který může z události vyčíst informace. Při uvedeném kliku na odkaz může zjistit odkazovanou adresu, polohu kurzoru pri kliku, či barvu textu. Tyto data mohou být dále zpracována posláním na server. 2.3.1

JavaScript

Je skriptovací jazyk implementovaný do většiny webových prohlížečů. Autorem je Brendan Eich ze společnosti Netscape. JavaScript byl roku 1997 standardizován asociací ECMA (Europen Computer Manufacturers Association) o rok později ISO (International Organization for Standardization). Nynější verze jsou specifikované v ECMA-262 Edition 3 (Mozilla, 2009). 2.3.2

Frameworky

Frameworky jsou softwarové balíky obsahující funkce a procedúry. Účel frameworku je zjednodušit práci při programování např. odstraněním nekompatibility v implementaci JavaScriptu u jednotlivých webových prohlížečů. Pro jednotlivé frameworky existují dodatečné pluginy, jež mají užší zaměření na práci s grafikou či DOM. 2.3.3

jQuery

Framework jQuery je rychlý, stručný a zjednodušuje HTML zpracování události, animací a Ajaxových interakcí pro rychlý vývoj webových aplikací (jQuery, 2010). jQuery user interface Rozšíření pro jQuery určené k práci s uživatelkým rozhraním. Podporuje práci s okny, záložkami či dialogy (jQuery project, 2010). jqPlot Rozšíření, jqPlot, pro jQuery slouží pro vykreslování grafů. Mezi podporované grafy patří sloupcový, výsečový a spojnicový. Toto rozšíření je dílem Chrise Leonalla (jqPlot, 2010).

2.4

Přenos dat a jejich formát

2.4

12


K přenosu dat, z webového prohlížeče na server, může být využito XMLHttpRequestu nebo jiné techniky. Přenášená data je vhodné zadavát do formátu, který je standardizován. 2.4.1

JSON

JavaScript Object Notation je způsob zápisu dat. Zapisuje se v textové podobě, jež je snadno čitelná i jednoduchá pro zápis. JSON je založen na struktuře kolekce párů (název, hodnota) nebo tříděném seznamu hodnot. Je podporován v mnoha jazycích (Java, C, PHP nebo JavaScript) (JSON, 2009). Ukázka zápisu JSON { "jmeno": "Milan", "prijmeni": "Safar", "adresa":{ "ulice": "Dolni", "mesto": "Brno", "psc": "64621" } } 2.4.2

XML

Extensible Markup Language je jednoduchý, velmi flexibilní textový formát, odvozený z SGML (Standard Generalized Markup Language) a využívaný pro serializaci dat. Značkovací jazyk byl vyvinut a standardizován organizací W3C (W3C, 2009). Ukázka zápisu XML <jmeno>Milan <prijmeni>Safar Dolni <mesto>Brno 64621

2.4


2.4.3

13

XMLHttpRequest

XMLHttpRequest objekt implementuje rozhraní, které umožňuje komunikaci mezi webovým prohlížečem a serverem. Vytvoření tohoto objektu se liší v některých prohlížečích. XMLHttpRequest obsahuje metody a atributy pro obsluhu události. Metoda open() je inicializační metodou požadavku. V metodě open je definována metoda odeslání GET nebo POST. Metoda setRequestHeader() je určena ke specifikaci parametů hlavičky. Metoda send() slouží k odeslání požadavku na cílový server. Metoda abort() slouží ke zrušení požadavku. Metoda getResponseHeader() a getAllResponseHeader() slouží k získání hlaviček požadaveků. Atribut status obsahuje HTTP status kód. Atribut statusText() obsahuje HTTP status text. Atribut responseText obsahuje odpověď ve formě textu. Atribut responseXML() obsahuje odpověď ve formě XML, která lze zpracovat pomocí DOM. (W3C, 2009). Ukázka vytvoření a zpracování požadavku // vytvoření požadavku var xhr = new XMLHttpRequest(); // přiřazení funkce odpoved na handler xhr.onreadystatechange = odpoved; // nastavení metody a souborku k odeslaní xhr.open("GET", "test.xml"); // odeslaní požadavku xhr.send(); function odpoved(){ // deklarace funkce if(xhr.readyState == 4){ // když je požadavek ukoncen body.innerHTML = xhr.responseText;// vloží odpověd do html } } 2.4.4

Ajax

Termín Ajax byl poprvé zveřejněn v článku Jesse Jamese Garretta. Ajax není technologií. Je to několik technologií využívaných dohromady za určitým cílem (HTML, DOM, XML, XMLHttpRequest, JavaScript). (Garrett, 2005). Tento cíl můžeme nazvat dynamičnost webových stránek. Obsah webové stránky tedy není načítán najednou, ale je načítán HTTP požadavky postupně. Ke zpracování HTTP požadavků je využit JavaScript. Data přijatá v požadavku jsou poté včleněna do stránky pomocí DOM.

2.5

Získávání dat pro analýzu

2.4.5

14

CORS

CORS (Cross-Origin Resource Sharing) je standard definující komunikaci napříč doménami od organizace W3C. Standardně není možné posílat XMLHttpRequest napříč doménami, protože tyto dotazy jsou blokovány prohlížeči kvůli bezpečnosti. Realizace CORS spočívá v uvedení hlaviček ve scriptu na straně serveru. V těchto hlavičkách jsou určeny povolené domény, metody a maximální čas odpovědi. Odpověď od serveru s těmito parametry nechají webové prohlížeče zpracovat (W3C, 2009). 2.4.6

JSONP

Kromě CORS je možné využít ke komunikace mezi doménami JSON with Padding. JavaScriptem je vytvořen požadavek na server tím, že do HTML dokumentu je vložen tag script s adresou serveru obsahující data ve formátu JSON a funkce, která je vyvolána při odpovědi serveru na požadavek. Odpověd serveru obsahuje spustitelný JavaScriptový kód (Bob Ippolito, 2005). //definice funkce,která bude vyvolána při odpovědi serveru function test($data){ alert($data.odpoved); } //JavaScriptem vložený tag script <script type="text/javascript" src="http://test.com?data={"id":120,"jmeno":"Milan"}&funkce=test"> //odpověd serveru test({"odpoved":"ok"});

2.5


Data pro analýzu můžeme získad ze dvou hlavních zdrojů infomací. Prvním zdrojem jsou serverové logy, které jsou ukládané při přijetí HTTP požadavku na server. Druhým zdrojem dat je webová prezentace zobrazená ve webovém prohlížeči, kde se data získávají metodou značkování stránek (Clifton, 2005). 2.5.1

Značkování stránek

Jedná se o metodu zpracovávanou na straně klienta ve webovém prohlížeči. Do webové prezentace je vložen takzvaný „trackerÿ JavaScriptový kód, který se přiřadí k jednotlivým sledovaným elementům. Akce (např. kliknutí na odkaz) vyvolaná na webové prezentaci událost, která je zpracována nejprve trackerem a poté webovým prohlížečem. Jelikož je událost zpracovaná trackerem je z ní možné získat informace. Výhody a nevýhody řešení sběru dat metodou značkování stránek.

2.5


15

Obr. 1: Přístup k datům z metody značkování stránek

Výhody • Sleduje události na straně klienta (JavaScript, Flash nebo Web 2.0). Brána firewall může poškodit nebo zakázat značky. • Zachytává data na straně klienta. • Sbírá a zpracovává data návštěvníků téměř v reálném čase. • Aktualizace programu dodavatelem. • Ukládání a archivaci dat dodavatelem. Nevýhody • Chyba v nastavení vede ke ztrátě dat. • Brána firewall může poškodit nebo zakázat značky. • Nelze sledovat šířku pásma ani dokončená stahování. • Nelze sledovat roboty vyhledávačů, protože roboti stránkové značky ignorují. K metodě značkování stránek se váže využití souborů cookie pro zpracování dat. V souborech si analytické nástroje uchovávají ID návštěvníka, ze kterých lzde vyčíst, zda je návštěvník nový či vracející se (za jak dlouhou dobu se vrátil) a mnoho dalších analyticky důležitých dat. Velkou nevýhodou této metody je to, že soubory cookie si mohou uživatelé smazat nebo jsou automaticky smazány po ukončení relace webovým prohlížečem a tím znemožní pozdější identifikaci návštěvníka. Tím, že analytický nástroj nemá možnost identifikovat návštěvníka je návštěvník zařazen k novým namísto vracejících se a tím statistiky nejsou přesné.

2.5


2.5.2

16

Serverové logy

Serverové logy neboli soubory s logy, jsou automaticky tvořené a ukládané webovým serverem. Webové servery zachovávají v logu historii požadavků HTTP. Serverové logy jsou standardizovány W3C. Ze serverových logů produkovaných webovým serverem můžeme vyčíst uchovávaná data: IP adresy, požadavky (čas nebo datum požadavku s požadovanou stránkou), požadované stránky a odkazy, ze kterých byl vyvolán požadavek na stránku (referer) atd. Serverové logy dostupné pouze správci serveru jsou pro běžného uživatele nezpracovatelné. Výhody a nevýhody serverových logů.

Obr. 2: Přístup k datům ze serverových logů

Výhody • Starší data lze snadno znovu zpracovat. • Není nutné se starat o problémy související s bránou firewall. • Umí sledovat šířku pásma a dokončená stahování. Umí totiž rozlišovat mezi dokončeným a částečným stažením. • Standardně sleduje roboty vyhledávačů. • Standardně sleduje mobilní návštěvníky. Nevýhody • Nepřesnosti způsobené proxy-servery a servery vyrovnávací paměti. • Žádné sledování událostí (JavaScript, Web 2.0). • Vyžaduje ukládání i archivaci dat na webovém serveru. • Roboti zvyšují počty návštěv.

2.6

Ergonomie

2.6

17

Ergonomie

Ergonomie je mezioborová disciplína, jejíž cílem je dosáhnout přizpůsobení pracovních podmínek výkonnostním možnostem člověka. Ergonomie začleňuje poznatky z humanitních věd (psychologie) a věd technických (kybernetika). Hlavním zájmem ergonomie je navrhnutí nástroje tak, aby se snadno používal a byl navrhnutý dle možností lidského těla. Ergonomie se projevuje i při návrhu rozmístění řídících modulů, kde se navrhuje dle dostupnosti, logické návaznosti a dalších hledisek. 2.6.1

Ergonomie na webu

Ergonomie na webu se váže na uživatelské rozhraní dané webové prezentace. Webové prezentace by se měly vyznačovat shodným vzhledem stránek, celkové dělení obsahu by mělo být do krátkých a stručných textů. Obsah webových prezentací je třeba strukturovat a vyznačovat opěrné body, doporučuje se text členit vhodně zvolenými úrovněmi nadpisů. Písmo má také vliv na celkový vzhled a ergonomii, není vhodné dlouhé texty psát velkým písmem (versálky). Webová stránka jako celek by měla tvořit logicky ucelenou skupinu. Dílčím prvkem ergonomie na webové prezentaci je rychlost neboli odezva serveru na požadavky. Rychlost lze částečně ovlivnit vzhledem a náročností stránky na její obsah (obrázky či flash). Barevné provedení webové prezentace může vylepšit ergonomii např. vhodně zvolenými barvami na zvýraznění odkazů. Barvy je nejlépe volit z tzv. bezpečných barev. Tyto barvy jsou všeobecně podporovány a tím nehrozí optimalizování u nekompatibilního zařízení. Je vhodné také zvolit odpovídající kontrast barev (Netrefová, 2005).

2.7

Kampaně

Kampaně jsou cíleně navrhnuté reklamy směřující k jednomu cíli. Druhy reklam mohou být různé např. televizní v rádiu či na webové prezentaci. Mezi nejčastější druhy reklamních kampaní na internetu se řadí bannery, e-mailova reklama a PPC reklamy. PPC (pay per click) je reklama využívaná především u vyhledávačů. U tohoto druhu reklamy se platí za každý klik na tuto reklamu (odkaz). Vyskytují se v podobě textové i grafické. 2.7.1

Návrh PPC kampaní

Při návrhu PPC kampaně je důležité určit daný cíl reklamy pro web. Mezi cíle se řadí vyšší návštěvnost stránek nebo prodej produktu. Dle cíle reklamy by měla být zvolena klíčová slova na která se má daná reklama zobrazí ve vyhledávači. Pro zvýšení návštěvnosti webu je vhodné definovat co nejvíce klíčových slov identifikujících danou webovou stránku. Tato reklama bude odkazovat na hlavní vstupní

2.7

Kampaně

18

stránku webové prezentace. V případě cíle prezentace produktu či zvýšení prodeje je vhodné zadat klíčová slova specifikující co nejpřesněji daný produkt. U této reklamy je vhodné, aby odkaz směřoval přímo na stránku s produktem kvůli možné dezorientaci návštěvníka. 2.7.2

Způsob práce s kampaněmi

Analytické nástroje jako je Google Analytics mají možnost nastavení sledování reklamních kampaní na internetu. K těmto kampaním se přidává určitý kód pod kterým je daná reklama identifikovatelná a umožňuje další práci s reklamou. Pro efektivní práci s kampaněmi je vhodné označit veškeré odkazy vedoucí na webovou prezentaci. Tyto odkazy členit do celků dle zaměření na odkazovanou webovou stránku. V případě neoznačení odkazu bude údaj o návštěvně zaznamenán, ale neumožní bližší specifikaci. Tím se připravíme o množství dat, udávající účinnost jednotlivých reklam či variant reklam. Google Analytics umožňuje u kampaní rozlišovat: • Zdroje (odkazující stránka) (Povinný). • Médium slouží k bližší specifikaci zdroje (Povinný). • Zadané klíčové slovo (Volitelné). • Obsah popisuje verzi reklamy (Volitelné). • Kampaň (Doporučené). U spuštěné kampaně s řádně označenými odkazy jdou dostupná data pro míru konverzí u jednotlivých slov či druhů reklamy. S těmito údaji je možné dále pracovat na zefektivnění investic do reklamní kampaně např. eliminací reklam nevedoucí k cíli. Větší efektivitu webových kampaní je možné dosáhnout specifikací webových prezentací na kterých bude reklama zobrazena. Vymezením se dosáhne zobrazení reklamy jen specifické skupině lidí neboli cílové skupině pro reklamu. Další možností jak dosáhnout větší efektivity reklamní kampaně je geografická segmentace trhů.

3

MOŽNOSTI TRACKOVÁNÍ UŽIVATELE

3 3.1

19

Možnosti trackování uživatele Google Analytics

Zdarma nabízený nástroj pro sběr dat od společnosti Google, který byl vyvinut pod vedením Briana Cliftona expert na webovou analytiku a marketing. Pro sledování dat je nutná pouze registrace u společnosti Google a to založením Google učtu, sloužícího pro více služeb od společnosti Google. Google zajišťuje ukládaní dat na jejich serverech nejméně na 25 měsíců a to bezplatně. Sledování dat je realizováno metodou značkování stránek. Pro sledování je nutné na danou stránku umístit takzvaný tracker. Je to JavaScriptový kód, sbírající a odesílající data na servery Googlu. Tento tracker nazvaný GATC (Google Analytics Tracking Code) obsahuje identifikační číslo, které je přiděleno společností Google na základě registrace služby Google Analytics. Pro sledování některých údajů pro statistiky jsou data ukládána do souborů cookie. Služba Google Analytics umožňuje prezentovat data osmdesáti základními přehledy. Mezi nejdůležitější přehledy zahrnuje (Clifton, 2005) tyto: Návštěvníci jedná se o přehled umožňující zobrazit odkud uživatelé navštěvují stránky, využití tohoto přehledu je v identifikování lukrativních trhů vzhledem k geografické poloze. Přehled elektronické obchodování přináší množství informací ohledně elektronického obchodování, které má návaznost na kampaně až na úroveň klíčových slov u jednotlivých produktů. Zdroje provozu zahrnují přehled odkud návštěvníci webové prezentace přicházejí. Má několik možností určení a to od přímého vstupu na webovou prezentaci (organic) až po odkaz realizovaný na jiné webové stránce (referral). Google Analytics umožňuje přidat GATC i pro odkazy umístěné např. v emailu a tím určit kolik zákazníků přišlo právě přes tento odkaz na webovou prezentaci. Obsah je jedním z přehledů, který dává náhled na popularitu jednotlivých stránek webové prezentace. U jednotlivých stránek jsou uvedeny informace o počtu zobrazení dané webové stránky, čas strávený na stránce, poměr návratů nebo procentuální zobrazení návštěv, které na stránce končí (Clifton, 2005)

3.2

Omniture

Společnost Omniture, nabízí produkt SiteCatalyst určený pro webovou analýzu. Tento produkt je placený a to dle návštěvnosti daného webu (Na webovou prezentaci s návštěvností 1 000 000 uživatelů měsíčně jsou náklady 75 000 Kč až 150 000 Kč). SiteCatalyst umožňuje zobrazení přehledů (metrik) v grafické i textové podobě. Mezi nejpopulárnější metriky patří přehledy: návštěvnosti webové prezentace, nejčastěji navštěvované následující stránky, míra opuštění, geografická segmentace návštěvníků a konverzní pomeř. Umožňuje zobrazit hierarchii webu pro určení vhodné navigace na webové prezentaci. Na webových stránkách zabývající se prodejem výrobků nabízí přehledy pro míru konverzí jednotlivých výrobků a snadné dohledání dat při jejich analýze.

3.3

Fireclick

20

Se vzrůstající tendencí sociálních sítí a tím marketingových trhů, zařadil SiteCatalyst podporu pro sledování aplikací Facebooku. Sledování dat pro analýzu je realizováno hybridní metodou. SiteCatalyst se snaží vytvářet webovou analýzu nezávislou na jazyce JavaScript. Má širokou podporu pro trackování mobilních přístrojů, které většinou nepodporují JavaScript. Tracker je upravován na jednotlivé přístroje: iPad, iPhone, BlackBerry, Android a Nokia. Pro analýzu návštěvníků webové prezentace z mobilního přístroje nabízí 21 přehledů zahrnující např. geografickou segmentaci. Snaha oproštění se od JavaScriptu je také patrná na nativním trackování prvků Adobe Flash a Flex (videa, animace, bannery). Tyto prvky jsou trekovány programovacím jazykem s názvem ActionScript. Pro trackování videí na webové prezentaci je určeno 11 přehledů. Videa lze sledovat i napříč weby, které si tyto videa sdílí. Mezi podporované přehrávače pro treckování se řadí: Windows Media Player, QuickTime nebo RealPlayer. Oproti Google Analytics nabízí kustomizaci uživatelského rozhraní pro více uživatelů (SiteCatalyst, 2009).

3.3

Fireclick

Fireclick je analytický nástroj od společnosti Digital River. Základní balíček stojí 9 000 Kč za měsíc. Pro uživatele nabízí více než 30 klíčových metrik mezi které patří: návštěvnost stránek, marketingové kampaně, nákupní aktivita a klíčová slova. Mezi další vlastnosti Frireclicku patří testování vizuálního rozhraní webové prezentace. K prezentaci některých dat (kliknuti na odkazy) používá vizualizaci na webové prezentaci. Pro práci s kampaněmi využívá geografickou segmentaci (státy, regiony). Umožňuje náhled na nejlépe odkazující domény či webové vyhledávače. Podobně jako SiteCatalyst nabízí možnost návrhu rozložení pracovní plochy. Export dat je možný do dokumentu Microsoft Excel (Fireclick, 2006).

3.4

AWStats

Představené nástroje jsou založené především na způsobu značkování stránek. Nástroj AWStats využívá k analýze serverové logy. Jako jediný z nástrojů musí být nainstalovaný přímo na webovém serveru. Z instalace přímo na webovém serveru vyplývají jeho výhody a nevýhody. Nevýhodou je zmiňovaná instalace na webovém serveru, jež nemusí být vždy umožněna (v případě webového hostingu). Hlavní výhodu poskytuje způsob analýzy, jelikož se nemusí implementovat žádný tracker do již vytvořené webové prezentace. AWStats je volně dostupný pod licencí GNU GPL. Mezi základní metriky patří počet zobrazení jednotlivých stránek, doba trvání prohlížení na stránce, globalní lokalizace uživatele, informace o operačním systému a webovém prohlížeči.

3.5

Využití dat z analitických nástrojů pro ergonomii

21

Obr. 3: Vizualizace na webové prezentaci

AWStats nejsou určeny pouze pro analýzu logů webového serveru, slouží také pro analýzu ftp logů a mail logů (AWStats,2008)

3.5

Využití dat z analitických nástrojů pro ergonomii

Všechny uvedené analytické nástroje mají společné metriky, zaměřené na návštěvnost jednotlivých stránek uživateli, rozdělení návštěvnosti dle geolokace, přehled o operačních systémech a webových prohlížečích, ze kterých se na webovou stránku přistupuje. Analytické nástroje založené na značkování stránek obsahují převážně metriky a další funkce zaměřené na marketing a prodej. Nabízejí možnosti sledování kampaní, testování variant vzhledu či možnosti sledovat odkud uživatel přišel na webovou prezentaci (na její část). Nástroj AWStats je spíše zaměřen na celkový provoz webových stránek, tím nenabízí jednotlivé pohledy na vstupní a výstupní stránky jednotlivě ke každé stránce, ale pouze celkově pro celou webovou prezentaci. Oproti ostatním nabízí širší možnosti z pohledu přenesených dat či určení typů přenášených souborů z webového serveru na webovu prezentaci.

3.6

Shrnutí

22

Některé z výše uvedených metrik mohou pomoci k optimalizaci ergonomie a přístupnosti webových prezentací. V následující tabulce je vypsán přehled techto metrik s určením, zda tyto metriky jsou v analytickém nástroji podporovány. Tab. 1: Přehled metrik

Google Analytics V/V stánky Ano Testování A/B Ano Rozlišení obrazovky Ano

Omniture Fireclick AWStats Ano Ano Ne Ano Ano Ne Ano Ano Ano

Využití metrik Metrika, vstupní a výstupní stránky, nám nabízí přehled, ze kterého odkazu uživatel přišel. Vstupní stránkou je ta na které je umístěn odkaz na aktuální stránku. Výstupní stránky jsou ty na které se z aktuální stránky přechází (odkazuje). Z těchto údajů lze vyvodit závěry o důležitosti jednotlivých odkazů na stránce. Nejčastější výstupní odkazy je možné zvýraznit či z nich vytvořit rychlou nabídku a tím uživateli usnadnit procházením stránek. Testování možností A/B slouží k poznání účinku jednotlivých variant webových prezentací na uživatele. Tyto varianty se mohou lišit fonty, textem, barvou či uspořádání obsahu. Některé nástoje umožňují i multivariační testování (testovaní nejenom dvou verzí obsahu). Jednotlivými variantami můžeme ovlivnit uživatelovu schopnost dohledání informací. Testováním variant, můžeme určit rozložení, pro uživatele přehlednější. Přehled rozlišení obrazovky nabízí rozlišení uživatelů. Tato informace může vést k redesignu na určité, nejvíce vyhovující rozlišení, nebo na rozvržení textu webové prezentace do sloupců při širokoúhlých monitorech. Rozvržením textu do sloupců se dosáhne pohodlnějšího čtení textu pro uživatele.

3.6

Shrnutí

Tyto nástroje můžeme shrnout jako podřízené ke sledování marketingových údajů na webové prezentaci. Tím neposkytnou údaje týkající se v širším měřítku ergonomie, oblíbenosti jednotlivých částí webové prezentace či nepromítnou jednotlivé tahy uživatele na webové prezentaci. Tyto údaje mohou být pro webovou analýzu podstatné při návrhu či rozložení řídících prvků.

4

VLASTNÍ PRÁCE

4 4.1

23

Vlastní práce Implementace trackovacího nástroje

Pro implementaci na webovou prezentaci DřevostavbyOk jsem využil službu Google Analytics. Důvody pro využití služeb Google Analytics byly následující: snadná implementace a nenáročnost na hardwarové požadavky, dostatečná doba pro uložení dat (25 měsíců), česká lokalizace a volná dostupnost služby. 4.1.1

GATC

GATC (Google Analytics Tracking Code) je sledovací kód Google Analytics. GATC je část zdrojového kódu v JavaScriptu, který je vložen uživatelem služby na webovou prezentaci. Celý kód je rozdělen do tří částí. První část obsahuje ga.js, je to kód nezbytný pro zavedení trackeru. Tento tracker je poté uložen do vyrovnávací paměti. Dále obsahuje identifikační číslo uživatele služby generované společností Google ve formátu UA-XXXX-YY. Třetí část obsahuje trackPageview(). Celý kód GATC by měl být umístěn před koncovou HTML značku z důvodu rychlejšího načtení obsahu webové prezentace (Clifton, 2005). 4.1.2

Implementace

Implementace vlastního kódu GATC může být u menších webových stránek vložení ručně, při větší webové prezentaci se doporučuje generovat kód GATC pomocí serveru. Pro webovou prezentaci DřevostavbyOk byl zvolen první způsob z důvodu, že webová prezentace je tvořena jednotlivými HTML stránkami. Celý vkládaný GATC kód je uveden následovně. Kód GATC <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src=’" + gaJsHost + "google-analytics.com/ga.js’ type=’text/javascript’ %3E%3C/script%3E")); <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-XXXX-YY"); pageTracker._trackPageview(); } catch(err) {}

4.2

Analýza, doporučení a optimalizace

4.2

24


Analýza univerzitního informačního systému (UIS) a webové prezentace Dřevostavby Ok jsou z dat získaných nástrojem Google Analytics. Většina údajů pochází z přehledu Obsah udávající počty přístupů na jednotlivé stránky, doby strávené na stránkách, procento přístupů či procentuální podíl odchozích z této stránky. Dálší kapitoly se budou věnovat datům z přehledu Návštěvníci a Zdroje provozu. Data určena k analyzaci pocházejí u Dřevostaveb Ok z období 1. 1. 2010 do 31. 3. 2010. Toto období je dostatečné pro analýzu z důvodu neměnnosti stránek a podmínek pro sledování. U analýzy UIS je toto období celý rok od data 1.4.2009 z důvodu, že v různých časových období probíhají na UIS různé procesy např. zápis či registrace předmětů. 4.2.1

Analýza DřevostavbyOk

Přehled návštěvníci umožňuje získat komplexní údaje o parametrech prohlížeče a další údaje o návštěvníkovi. Typický návštěvník webové prezentace Dřevostavby Ok používá prohlížeč Internet Explorer verze 8.0 (48 %) nebo Firefox (37 %). Webovou prezentaci si prohlíží na monitoru s rozlišením 1280x800 (25 %) dalším nejčastějším rozlišením monitoru jsou 1024x768 (21 %) a 1280x1024 (16 %). Přehled zdroje návštěvnosti slouží pro přehled odkud na webovou stránku přistupují jednotliví návštěvníci. Dále nabízí přehledy klíčových slov pro webovou prezentaci a reklamy AdWords. Nejvíce na webovou prezentaci přistupují z odkazujících stránek (49,95 %) poté přes vyhledávače (29,87 %) a zbytek uživatelů přichází přímo zadáním adresy do vyhledávače (20,18 %). Přehled Obsah pro nejnavštěvovanější stránky nebo nejlepší vstupní stránky. Z těchto přehledů je možné se sdozvědět nejvíce o práci uživatele a přizpůsobit tím obsah a navigaci dle preferencí. Tab. 2: Nejnavštěvovanější stránky DřevostavbyOk

Stránka /naklic.html drevostaby.html index.html /stavebnice.html /hruba.html reference.html /nizkoen.html

Unikátní Prům. Zobrazení Míra zobrazení doba na stránek opuštění stránek stránce 3866 1680 00:00:56 35,48 % 3787 2307 00:00:18 40,84 % 3648 2499 00:00:42 17,10 % 2701 1130 00:01:10 36,68 % 2117 948 00:01:02 27,78 % 1582 686 00:00:19 11,90 % 1117 779 00:00:49 43,81 %

% odchodů 14,41 % 6,18 % 23,99 % 12,51 % 10,91 % 7,90 % 17,58 %

4.2


25

Z uvedené tabulky vyplývají následující údaje. Webová prezentace naklic.html má největší počet zobrazení, unikátní zobrazení stránek tvoří 50 % těchto zobrazení. Tím můžeme říci, že každého uživatele stránka zaujala natolik, aby se na ni ještě jednou vrátil. Míra opuštění u této stránky (35 %) je procentuálním vyjádření počtu odchozích uživatelů, kteří se dostali na tuto stránku jako vstupní (první zobrazená stránka webové prezentace) čili na této stránce nenašli obsah kvůli kterému se na stránku dostali. Celkově z této prezentace odejde 14 % návštěvníků, kteří navštíví tuto část webové prezentace ostatních 86 % pokračovalo na další část webové prezentace. . Vstupní stránka index.html webové prezentace splňuje svůj účel, to vyplývá z údaje míry opuštění, která je pouze 17 %. Celkově z této stránky odchází 23 % uživatelů. Což může být způsobeno tím, že uživatelé se před odchodem vrací na vstupní stránku. Z Tabulky 1. lze zjistit preferenci uživatelů k jednotlivým fázím výstavby dřevostaveb. Fáze výstavby jsou v tabulce označeny lomítkem. Nejpreferovanější fází výstavby je stavba na klíč, poté stavebnice následující hrubou stavbou a poslední je nízkoenergetická stavba. Optimalizace trackování Pro optimalizaci trackovacího postupu je vhodné, aby se stejné odkazy na jedné stránce daly od sebe identifikovat. Tato identifikace je vhodná zejména pro objektivní zjištění zda jsou tyto odkazy využívány a jak často. Tento stav se nalézá na stránce drevostavbyok.html a zdene.html. Na stránce jsou umístěny dokumenty pdf u kterých není uzpůsoben tracker tak, aby mohl sledovat informace o využití. Proto by bylo vhodné toto omezení ve sledování dokumentů pdf vyřešit přiřazením trackeru každému dokumentu. Tato optimalizace dá větší představu o tom, jak jednotliví uživatelé používají odkazy na stránkách a také dá data o využití přiložených dokumentů pdf. Návrh kampaně DřevostavbyOk Cíl kampaně zvýšení návštěvnosti webové prezentace je jedním z nejčastějších cílů webových prezentací. Pro úspěšné splnění daného cíle je vhodné zapojit tyto prostředky: • Do každého odeslaného emailu při komunikaci s klienty uvést kromě adresy a kontaktu také odkaz na webovou prezentaci v grafické podobě. K tomuto odkazu přidělit vhodné parametry specifikace kampaně dle daného klienta (stávající, nový). • Při realizaci PPC kampaně zvolit klíčová slova, která nejsou úzce zaměřená na jednotlivé typy či druhy budov dle katalogů, ale ty co obsáhnou největší množství dotazů. Mezi tyto klíčová slova u dřevostaveb patří: dřevostavby, dřevostavby na klíč, zděné stavby, zděné stavby na klíč a hrubá stavba. Pro účin-

4.2


26

nost této PPC kampaně je vhodné neomezovat zobrazení odkazu na webových prezentacích nebo aplikovat geografickou segmentaci. • Bannerová reklama na webových prezentacích zaměřených na výstavbu nových rodinných domů či katalogů firem, provádějící výstavby domů. • Využití zvýhodněných pozicí u webových prohlížečů. 4.2.2

Analýza UIS

Návštěvník univerzitního informačního systému používá prohlížeč Firefox (50 %), větší zastoupení také má u uživatelů Internet Explorer (35 %) či Opera (8 %). UIS si prohlíží na monitoru o rozlišení 1280x800 (38 %), 1280x768 (16 %) či 1024x1024 (15 %). Návštěvníci z mobilních telefonů nejvíce používají přístroje iPhone nebo přístroje s operačním systémem SymbianOS. Návštěvník se na stránky UIS dostane nejčastěji odkazem (42 %) a to ze stránek mendelu.cz, přímo na stránky nebo pomocí uloženého odkazu v prohlížeči (42 %) a vyhledáním UIS ve vyhledávačích (15 %). Nejčastěji je UIS vyhledáván za pomocí vyhledávače google a seznam. Na těchto vyhledávačích jsou především vyhledávány výrazy: mendelu, is.mendelu.cz, uis čí mzlu v brně. Doporučení pro zvýšení ergonomie Hlavní stránka (is.mendelu.cz) je členěna do sekcí, každá z sekcí je zvýrazněna nadpisem a vhodnou ikonou. V jednotlivých sekcích jsou některé odkazy zvýrazněny. Odkazy by měly být řazeny dle užívání a zvýrazňovány. V některých sekcích toto není dodrženo, proto doporučuji tato vylepšení založených na získaných datech z Google Analytics. • Osobní administrativa v této sekci přeřadit odkaz Kde naleznu vhodné prohlížeče na druhé místo v pořadí nebo zanechat pořadí, ale zvýraznit jej. • Závěrečné práce v sekci Studijní informace zvýraznit a ponechat na stejném místě z důvodu řazení sekce dle abecedy. Osobní administrativa student (is.mendelu.cz/auth) po přihlášení UIS nabídne hlavní nabídku pro studenta členěnou do několika sekcí. • Portál veřejných informací v této sekci přeřadit pořadí odkazů tak, aby Zobrazení a tisk rozvrhů byl zvýrazněný a umístěný za první odkaz v této sekci. Z důvodu druhého nejpoužívanějšího odkazu. Poté zvýraznit odkaz Veřejný katalog předmětů. Z důvodu poměru zvýraznění jednotlivých odkazů je vhodné odkaz Informace o MENDELU, který není tak navštěvovaný vzhledem k sekci vypsat nezvýrazněným fontem.

4.3

Nedostatky při analýze

27

• Osobní management odkaz Stravování vyměnit v pořadí s odkazem Historie zásadních informací a zvýraznit jej, z důvodu vysoké návštěvnosti. Odkaz Diskuzní fóra vypsat nezvýrazněným fontem. • Technologie a její správa odkazy Certifikát bezdrátové sítě(eduroam) a Statistiky Faro a kolejní sítě zvýraznit a přeřadit na začátek sekce. • Dokumentace UIS v této sekci oba zvýrazněné odkazy nahradit nezvýrazněnými a odkazy Publikované texty o UIS a Často kladené otázky zvýraznit a umístit v pořadí na první a druhou pozici. • V sekci s názvem Nastavení informačního systému zvýraznit odkazy Odhlášení, Změna identity, Kontrola osobních údajů a Stravovací účet v systému KREDIT. Tyto odkazy v sekci seřadit postupně jak byly napsány. • Sekce Moje Studium přeřadit za nabídky Moje oblíbené, nebo na první místo v pořadí sekcí. Důvodem je nejčastěji používaný odkaz v této sekci.

Obr. 4: Nynější rozložení v částech UIS

4.3

Nedostatky při analýze

Zvolený nástroj pro využití sledování práce uživatele na webové prezentaci Google Analytics poskytnul základní metriky, které lze využít při analýze webové prezentace. Tyto metriky byly uvedeny výše v metodice. Z těchto metrik lze vyvodit doporučení pro zvýšení ergonimie webové prezentace, ale neposkytnou nám veškeré

4.4

Realizace vlastního Trackeru

28

údaje, které lze při práci uživatele sledovat. Tyto údaje nelze zjistit žádným analytickým nástrojem uvedeným v metodice. Z tohoto důvodu je přistoupeno k realizaci vlastního trackeru, který umožní sledovat práci uživatele podrobněji. Získáním podrobnějších informací o práci uživatele na webové prezentaci je možné dosáhnout lepší analýzy ergonomie webové prezentace.

4.4


Tracker oproti uvedeným nástrojům sleduje více informací o práci uživatele na webové prezentaci. Postup práce uživatele je sledován ve webovém prohlížeči. Z tohoto požadavku vyplývá realizace trackeru v jazyce JavaScript. Pro ulehčení zpracování události ve webovém prohlížeči a komunikace se serverem je využit framework jQuery. Data získaná od uživatele jsou odeslány na server, kde jsou zpracovány scriptovacím jazykem PHP a uloženy do databáze pro další zpracování. 4.4.1

Práce uživatele

Před realizací vlastního trackovacího nástroje je nutné zjistit jaké události jsou vyvolány při procházení webové prezentace uživatelem. Většina událostí vyvolaná uživatelem na webové prezentaci je spojena s procházením obsahu na základě akce. Jedná se zejména o posun obsahu a načtení nové části webové prezentace. Tyto události jsou sledovány tak, aby poskytli co nejvíce dat spojených s těmito akcemi. Je nutné podotknout že vypsané akce je možné vyvolat klávesnicí nebo myší. Každé z těchto zařízení vyvolává jiný typ události ve webovém prohlížeči. Vymezené události které budou trackovány: • posun myší • klik myší • posun obsahu webové prezentace • čas strávený na dané části prezentace • čas strávený na prezentaci 4.4.2

Formát komunikace

Komunikace mezi klientem a serverem může probíhat v mnoha formátech. Mimo standardizovaných formátů dat pro komunikaci je možné definovat i svůj vlastní formát dat. Výhodou využití standardizovaných formátů je podpora při jejich zpracování. Výběr formátu zápisu dat pro komunikaci byl volen mezi XML a JSON. Oba tyto formáty splňují základní požadavky: jednoduchost zápisu, otevřenost a čitelnost. JSON má menší režii přenosu, jelikož jednotlivá data jsou zapisována jako klíč

4.4

29


a hodnota oproti XML u kterého je zápis dat mezi dvě značky a to počáteční a koncovou. V JavaScriptu se lépe zpracovávají data přijatá ve formátu JSON (přijatá data po parsování představují JavaScriptový Objekt). Z uvedených důvodů byl pro komunikaci zvolen zapis ve formatu JSON. 4.4.3

Typ rozhraní komunikace

Pro volbu rozhraní ke komunikaci mezi serverem a klientem je několik možností a to JSON with padding (JSONP), XMLHttpRequest (XHR) a Cross-Origin Resource Sharing (CORS). Porovnání těchto rozhraní je v následující tabulce dle parametrů, které jsou nutné k realizaci trackovacího nástroje. Tab. 3: Porovnání rozhraní

Vlastnost Mezidoménové požadavky Omezená velikost dat

JSONP ano ano

XHR ne ne

Podpora webovými prohlížeči

ano

ano

Podpora v jQuery

ano

ano

Podpora formátu JSON

ano

ano

CORS ano ne ano (novější verze) ano (dodatečný plugin) ano

Rozhraní, pro komunikaci mezi serverem a klientem, je vhodnější JSONP, protože je podporován webovými prohlížeči a umožňuje komunikaci mezi jinými doménami. V případě XMLHttpRequestu by bylo nutné využití domovského serveru s podmínkou implementovaného proxy skriptu, který by poté odesílal data na vzdálený server. Komunikaci mezi doménami poskytuje sice i CORS, ale toto rozhraní je možné využít pouze u prohlížečů, které jej dovolují využít. 4.4.4

Databáze

Databáze byla volena dle kritéria finanční nenáročnosti. S tímto kritériem byly na výběr databáze MySql a PostgreSQL. Zvolil jsem databázi PostgreSQL z důvodu dostupnosti na školním serveru. Pro návrh databáze byla stanovena kritéria v části trackovaných událostí. V databázi se uchovají informace o jednotlivých návštěvnících. U těchto návštěvníků se zaznamenává druh webového prohlížeče, operačního systému a rozlišení obrazovky. Dále se uchovávají informace o jednotlivých cestách návštěvníka. U cest jsou požadované informace na URL adresu webové stránky, dobu strávenou na webové stránce, rozlišení zobrazené plochy prohlížeče a výška dokumentu prezetace. K jednotlivým cestám jsou poté přiřazeny údaje o pohybu myši a kliku myši. V údajích jsou zaznamenány pozice a posun na webové prezentaci a současně poloha zobrazené části a čas na ní strávený.

4.4


30

Pro generování primárních klíčů v tabulkách byli využity implementované sekvence, pro širší možnosti práce s primárními klíči tabulek. Návrh databáze splňuje 3. normální formu.

Obr. 5: Schéma databáze pro ukládání dat z trackeru

Popis schématu databáze Tabulka prohlizece zaznamenává názvy webových prohlížeču ve kterých uživatel prohlíží webovou prezentaci. Tabulka systemy zaznamenává názvy operačních systému ze kterého uživatel přistupuje. Tabulka rozliseni zaznamenává rozlišení monitoru uživatele. Tabulka navstevnici združuje údaje o návštěvníkovi včetně identifikátoru, který je uchováván i v dočasných souborech webového prohlížeče u uživatele. Tabulka displaye uchovává uživatelovu plochu zobrazené webové prezentace, včetně její celkové výšky. Údaje slouží především pro prezentaci dat. Tabulka adresy zaznamenává URL adresy částí webových prezentací. Tabulka cesty zaznamenává údaje k cestě návštěvníka na části webové prezentace. Združuje údaje o době strávené na části

4.4


31

webové prezentace, aktuálním zobrazení a identifikátor cesty, pokud během ní došlo k manipulaci s aktuálním zobrazením. Tabulka body zaznamenává body na webové prezentaci. Tabulka klik zaznamenává údaje o kliknutí na webové prezentaci. Údaj je tvořen identifikátorem cesty, bodem, kde bylo kliknuto návštěvníkem a odkazující adresou, pokud se jednalo o odkaz na webové prezentaci. Tabulka mys zaznamenává údaje o jednotlivých pohybech návštěvníka na webové prezentaci. Tabulka posun zaznamenává jednotlivé posuny obsahu ve webovém prohlížeči, obsahuje údaj o době strávené na tomto úseku, který je identifikován bodem. 4.4.5

Tracker

Tracker je realizován v programovacím jazyce JavaScript s využitím frameworku jQuery. Pro svoji práci využívá rozšíření pro práci s cookie a identifikaci webových prohlížeču a operačních systémů. Veškeré procedury a funkce byly umístěny v objektu tus z důvodu absence jmenných prostorů v jazyce JavaScript. Inicializace trackeru probíhá až po načtení celého DOM dokumentu z důvodu navázání funkcí na události prohlížeče. Při inicializaci dochází k odeslání inicializačního požadavku na server. Inicializační požadavek obsahuje údaj o identifikaci uživatele, rozlišení obrazovky, velikosti zobrazeného okna prohlížeče, typu prohlížeče, operačního systému a adresu URL. Při zpracování odpovědi se zaznamená identifikátor cesty, pokud návštěvník je nový na webové prezentaci, zapíše se do souboru cookie jeho identifikátor. V případě neúspěchu při zpracování odpovědi ze serveru, se zruší navázání funkcí na události z důvodu odstranění zátěže na běh webové prezentace. Při trackování uživatele se sledují události: scroll, klik, unload, mousemove a resize. U každé z těchto reakcí, jsou zaznamenány údaje, potřebné k jejich pozdější prezentaci. Scroll je událostí posunu stránky v prohlížeči. Při posunu se zaznamená pozice na webové stránce a čas strávený na tomto úseku stránky. Klik je událost vyvolaná myší při stisknutí tlačítka (či kolečka). Při vyvolání této události, se zaznamená pozice ukazatele myši na webové prezentaci a případná adresa odkazu. Unload je událost, vyvolána při odchodu ze stránky, zaznamenává současnou pozici webové prezentace a čas na ní strávený. Mousemove je událost vyvolaná myší při jejím pohybu. Pro snížení objemu dat při odeslání, je snímán každý desátý zaznamenaný posun ukazatele myši na stránce. Resize je událost prohlížeče, vyvolaná při změně velikosti zobrazení prohlížeče. K události resize se váže několik částí zpracování pro správnou pozdější prezentaci dat. První částí je zaznamenání velikosti zobrazení po události resize, které je možné zaznamenat v nové cestě. Do této nové cesty je nutné přiřadit identifikátor aktuální cesty pro celkový přehled strávené doby na části webové prezentace. Data odesílaná na server se odesílají po částech velikostí 2 KB z důvodu realizace odeslání JSONP, který využívá požadavků typu GET. Do každého požadavku na server jsou přiřazeny identifikátory uživatele a cesty, které mu byly přiřazeny při

4.5

Prezentace dat

32

inicializaci trackeru. Identifikátory jsou uloženy v tabulkách navstevnici a cesty jako primární klíče. Implementace trackeru do stránky Implementace trackeru je velmi snadná, stačí umístit do hlavičky či těla html dokumentu odkaz na daný tracker. Ke správné funkci trackeru jsou potřebná další rozšíření v podobě frameworku jQuery, pluginu pro práci s cookie a identifikaci webových prohlížeču a operačních systémů. Ukázka implementace (umístění určuje adresu, kde jsou skripty dostupné): <script src=’umisteni/jQuery.js’ type=’text/javascript’; <script src=’umisteni/cookie.js’ type=’text/javascript’; <script src=’umisteni/browser.js’ type=’text/javascript’; <script src=’umisteni/tus.js’ type=’text/javascript’; Ke korektním a úplným přehledům je potřeba tento tracker umístit na každou stránku webové prezentace. Zpracováni dat z trackeru Data odeslaná ve formátu JSON přes rozhraní JSONP jsou přijata na straně serveru a zpracována scriptovacím jazykem PHP. Po přijetí dat na server se data parsují do JSON pro snadnější zpracování. Pokud je požadavek inicializační a identifikátor návštěvníka je nulový (není veden v databázi) je vložen do databáze a nový identifikátor je poslán zpět trackeru. Při každém inicializačním požadavku je vložen do odpovědi identifikátor cesty návštěvníka. Pokud jsou na straně serveru přijata neinicializační data, jedná se pouze o data určena k uložení do databáze.

4.5

Prezentace dat

Prezentace získaných dat z vlastního trackeru je realizovaná ve webové aplikaci z důvodu dostupnosti a nenáročnosti na instalaci. Prezentace dat je rozdělena do několika přehledů, které se dělí na výpisy dat s grafy pro názornost a vizuální zobrazení dat na části webové prezentace na které byl implementován tracker. Při vizuálním zobrazení je načtena část webové prezentace do části webové aplikace, která je poté překryta získanými daty z trackeru. K realizaci jednotlivých prezentací je využito několika knihoven a frameworků, mezi které patří: jQuery, jQuery user interface, jqPlot a Tablesorter. 4.5.1

Komunikace se serverem

Webová aplikace komunikuje se serverem ve formátu JSON stejně jako vlastní trackovací script. Metoda pro komunikaci je zvolena POST, protože je potřeba přenášet

4.5

Prezentace dat

33

více informací než nám dovoluje metoda GET 2 KB. Kvůli metodě již není možné využít komunikace rozhraním JSONP založené na metodě GET. Z uvedených možností v metodice je tedy zvolena komunikace rozhraní XMLHttpRequest, která je zprostředkována jQuery. Jednotlivé požadavky na server jsou uvedené názvem funkce, která má být na serveru vykonána, případně s konkretizujícími daty. Požadavky zpracuje skciptovací jazyk PHP a vytvoří odpověď zpět webové aplikaci ve formátu JSON. Pro nejpřesnější vizualizaci dat je potřeba, aby každému bodu, který je zobrazen na webové prezentaci byla vygenerována jeho hodnota a přenesena do webové aplikace. U vizualizace o velikosti 800 na 600 bodů je to 480 000 bodů při datové režii na definici jednoho bodu 20 B je nutné přenést 9,15 MB jen pro definici. Takto přesná a datově náročná vizualizace není potřeba, jelikož prvky na webové prezentaci mívají větší zobrazení. Proto bylo přistoupeno k optimalizaci přenášených dat združením bodů do celků o velikosti 10 na 10 bodů, tímto datové nároky na definici dat klesly na 93,75 KB. Snížení datových nároků není konečné, další optimalizace spočívá v odesílání jen celků s neprázdnou hodnotou. 4.5.2

Přehledy

Celkový přehled zobrazuje informace vztahující se k webové prezentaci.

Obr. 6: Celkový přehled

Přehled celkem zahrnuje informace o návštěvnících a zobrazených stránkách. K těmto informacím je dostupná grafická podoba, vyjádřená ve dvou spojnicových

4.5

Prezentace dat

34

grafech, obsahující počty zobrazení a návštěvníků v jednotlivých dnech. U každého vyneseného bodu, je uvedena jeho hodnota a při najetí kurzoru myši, jsou zobrazeny informace o souřadnicích (den a počet). Tyto grafy poskytují náhled na průběh návštěvnosti v jednotlivých dnech a tím je možné odhadnout trend návštěvnosti uživatelů v následujícím období např. z důvodu aktualizace stránky či propagace výrobku. Přehled nabízí také informace v tabulce. V sekci návštěvníci to jsou informace o celkové návštěvnosti webové prezentace, návštěvnosti v aktuální den a počet nových návštěvníků na webové prezentaci. Tyto údaje poskytují náhled, kolik nových osob přistupuje na webovou prezentaci a kolik návštěvníků zaujal náš obsah natolik, aby se vrátili na webovou prezentaci. Sekce zobrazení, udává počet zobrazených stránek celkem a v aktuálním dni, také poměry počtu stran na návštěvníka. Tyto údaje nám poskytují informaci o zájmu uživatelů o webovou prezentaci. Následující přehled přehled stran nabízí údaje o trackovaných stránkách. Mezi nabízené údaje patří celkové zobrazení jednotlivých stránek, počet zobrazení v aktuální den, počet odchozích návštěvníků z dané stránky a průměrný čas strávený na dané stránce. Údaje jsou vyjádřeny v přehledné tabulce, data v tabulce lze seřadit dle jednotlivých sloupců. Hodnoty celkového zobrazení udávají preference uživatelů k jednotlivým stránkám. Poměr mezi počtem odchodů a počtem zobrazení udává, kolik uživatelů pokračovalo z této webové stránky na některý z odkazů webové stránky. Dále tento přehled nabízí bližší údaje o návštěvnosti stránek v jednotlivých dnech, vyjádřený spojnicovým grafem. K vybrané stránce také zobrazí údaje, vyjádřené v tabulce, o následujících stránkách navštívených z vybrané stránky (další krok návštěvníka z dané stránky).

Obr. 7: Výsečový graf webové prohlížeče

Další přehledy, zahrnující přehled variant o prohlížečích, operačních systémech a rozlišení obrazovky návštěvníků stránek, jsou vyjádřeny v tabulce. Tabulka obsa-

4.5

Prezentace dat

35

huje údaje o návštěvnících, vyjádřených počtem rozřazených dle jednotlivých variant a v procentuálním vyjádření. Data jsou také prezentována výsečovým grafem.

Vizualizace Data získaná z realizovaného trackeru mají vypovídající hodnotu v okamžiku vhodné prezentace. U přehledů webových prohlížečů či operačních systému postačuje tabulka s výsečový grafem. S daty získanými trackováním pohybem myši či posunem stránek je to složitější. Tyto data lze vypsat do tabulky, ale málo kdo by tento způsob získávání informací ocenil, proto je nejvhodnějším způsobem tyto data začlenit do konkrétní webové prezentace. Přehled vizualizace umožňuje právě toto zobrazení trackovaných dat. Před samotnou vizualizací dat je nutné zadat potřebné údaje, webovou stránku, typ vizualizace a šířku zobrazení webové prezentace(případně i minimální šířku pro vizualizaci).

Obr. 8: Ukázka rozhraní vizualizace

Výběr stránek pro vizualizaci je uspořádán dle URL adresy, tím jsou stránky seřazeny i dle případných sledovaných subdomén. Ve výběru se zobrazí stránky předem označené trackerem a ty, které jsou navštíveny návštěvníkem. Po výběru URL adresy se zpřístupní výběr šířky zobrazení pro vizualizaci. Šířky pro zobrazení jsou řazeny dle četnosti zobrazení stránek při této šíři okna prohlížeče. U výběru šířky zobrazení můžeme doplnit údaj o minimální šířce stránky, který slouží pro plné využití trackovaných dat za určitých podmínek. Nastavením parametru minimální šířky se dosáhne načtení všech dat, které splňují podmínku, že šířka zobrazení je menší než minimální šířka. Návrhy webových prezentací se dělí na statické (pevná šířka zobrazení) a dynamické (přizpůsobuje se šířce zobrazení, většinou mají definovanou minimální šířku). V případě dynamických návrhů webových prezentací je možné zadat parametr minimální šířky pouze do jejich navrhnuté minimální šířky, poté se data prezentují nekorektně. U návrhů statických nám do podmínek využití minimální šířky zasahuje zarovnání. Pokud je stránka zarovnaná na střed můžeme minimální šířku využít pouze do jeji navrhnuté šířky, jinak je obsah stránky posunut na střed a data se prezentují nekorektně. Statická stránka zarovnaná v levo nemá omezení pro využití minimální šířky, obsah webové prezentace se nikam neposunuje. Typy vizualizace webové prezentace jsou dostupné tři: klik na stránku, část stránky a myš na stránce. Vizualizace je realizována překrytím webové stránky,

4.5

Prezentace dat

36

načtené do iframu, se zvýrazněním jednotlivých celků barevně, dle poměru k nejvyšší hodnotě.

Obr. 9: Vizualizace kliku na stránce

Klik na stránku je vizualizací zobrazující četnost kliků na jednotlivých částech webové prezentace s přesností na 10 px, kvůli optimalizaci datového přenosu. Tímto přehledem je možné vizuálně zjistit, které odkazy na stránce jsou nejčastěji využívané, nebo kde návštěvníci očekávají od prezentace určitou reakci např. při kliknutí na vrchní část prezentace očekávají přejití na domovskou webovou stránku. V případě několika odkazů na stejnou webovou prezentaci je možné určit nejvyužívanější odkaz bez dalšího přidávání kódu na webovou stránku.

Obr. 10: Vizualizace část stránky

Část stránky je vizualizací umožňující získat přehled o době zobrazení jednotlivých částí stránek. Z této vizualizace je možné zjistit části stránek, které jsou pro návštěvníka nejzajímavější a využít je např. k umístění reklamního banneru na stránku či jiné formy reklamy. Přehled vizualizace části stranky je zobrazován s přesností 30 px, data pro realizaci přehledu jsou uchovávaná v tabulce posun.

4.5

Prezentace dat

37

Jednotlivé části webové prezentace určuje jejich funkčnost. Ideálním stavem můžeme nazvat stav, kdy na úseku s funkcí navigace uživatel tráví co nejméně času. Naopak na úseku obsahovém, uživatel tráví co nejvíce času, protože je to ten úsek, kvůli kterému na webovou prezentaci přišel. Tento přehled poskytne vypovídající hodnotu, zda se webová prezentace blíží k ideálnímu stavu. Myš na stránce je typ vizualizace zobrazující kudy uživatelé pohybovali kurzorem myši na webové prezentaci. Je to další způsob zjištění oblíbenosti určité části webové prezentace a to přesněji než předchozí vizualizace. Tato vizualizace není omezená pouze na jednotlivé výškové bloky jako u vizualizace části stránky. Pohyb kurzorem myši je zobrazen s přesností 10 px. Oproti vizualizaci část stránky potřebuje pro vyhodnocení vizualizace dat mnohem více návštěvníků (cest). Stylem pohybu myší, může uživatel vyznačit obsah či část webové prezentace, který jej zaujal. Mnoho uživatelů nevyhledává pouze vizuálně na obrazovce, ale zároveň tento pohyb kopíruje myší. To může vypovědět o intuitivnosti rozmístění jednotlivých informací při jejich vyhledávání.

Obr. 11: Ukázka vizualizace typu myš na stránce

4.6

38

Vyhodnocení práce

4.6 4.6.1

Vyhodnocení práce Relizace u demonstračního příkladu

Demonstrační stránky, pro trackování činnosti uživatele na webové prezentaci, byly drevostavbyok.cz. Tracker byl umístěn na každou stránku, mimo stránky samotných produktů. Z toho vyplývá, že výsledná data budou neúplná v případě návštěvností či zobrazení stránek. Hlavním cílem nebylo sledovat celkovou návštěvnost, ale otestovat možnosti vizualizace a získání dat pro ergonomii. 4.6.2

Doporučení pro zlepšení ergonomie stránky

Trackováním činnosti návštěvníků webové prezentace, byly získány data o jejich chování na určitých stránkách webové prezentace. Z těchto dat bylo možné vytvořit závěry. Z celkového přehledu stránky je vidět, že hlavní stránka www.drevostavbyok.cz/ má celkovou návštěvnost 145. Z poměru počtu odchodů a počtu zobrazení zjistíme, že 44 % lidí tato stránka zaujala natolik, aby pokračovala dále v prohlížení webové prezentace. Průměrný čas strávený uživatelem na této stránce je 16 s. což znamená, že tato stránka obsahuje málo informací, které návštavník hledal. Z přehledu kliků na stránce (obrázek 8.) je patrné, že uživatelé nejčastěji z hlavní stránky dále pokračují na odkaz dřevostavby a kontakty. Z těchto údajů můžeme vyvodit závěr o oblíbenosti odkazů. Tento závěr si je možné ověřit na přehledu stránek, kde jednotlivé údaje nabývají těchto hodnot. Tab. 4: Cesty ze stránky

Adresa www.drevostavbyok.cz/drevostavby.html www.drevostavbyok.cz/kontakty.html www.drevostavbyok.cz/rezivo.html www.drevostavbyok.cz/reference.html www.drevostavbyok.cz/zdene.html

Počet 32 8 5 4 3

Z vizualizace typu část stránky, můžeme vyvodit nejoblíbenější textovou část webové prezentace i nejoblíbenější variantu produktu. Z ukázky vizualizace část stránky, můžeme vyvodit závěr, že varianty produktu s červeným přebarvením návštěvníky nejvíce zaujala. Pro ergonomii na webové prezentaci by bylo vhodné přeřadit jednotlivé varianty dle oblíbenosti návštěvníků. Tím se umožní dalším návštěvníkům rychleji najít požadovanou variantu. Poslední vizualizací je vizualizace myš na stránce. Tento typ vizualizace může upřesnit, o co má daný návštěvník zájem, tím že si ukazuje myší na konkrétní produkt či na něj klikne pro zobrazení další nabídky či dialogového okna. Na obrázku vizualizace posunu myši je patrné, že si návštěvníci ukazují kurzorem myši čtený

4.6

Vyhodnocení práce

39

text. Největší výskyt kurzoru myši byl u nabídky prováděných výstaveb. Z vizualizace je také patrné, že návštěvníci preferují nabídku umístěnou v dolní části stránky oproti té horní. Tento jev může být způsoben nevhodným návrhem navigačních prvků. Z trackovaných dat je možné vyvodit závěry, které budou vést k optimalizaci ergonomie. Zejména zvýraznění navigačních prvků, seřazení prvků dle návštěvností jednotlivých sekcí za pomocí přehledů kliků či posunu na webové stránce. V případě uvedených příkladů je vidět, že prezentace dat se odchyluje od prvků. To je způsobeno různou interpretací jednotlivých webových prohlížečů. 4.6.3

Ekonomická efektivita

Trackováním činnosti uživatele můžeme dosáhnout zlepšení určitých prvků při optimalizaci ergonomie webové prezentace. Přínos trackování uživatele může být znatelný zejména při zlepšení navigace na webové prezentaci. Tím, že návštěvník najde svůj cíl efektivněji (méně procházených webových stránek) snížíme i objem webového provozu a tím dosáhneme určitých úspor. Snížením objemu provozu na serveru se docílí i rychlejší reakce na dotaz při jeho plném využití. Toto zrychlení při odpovědi serveru má vliv i na uživatele a jeho spokojenost s rychlostí webové prezentace. 4.6.4

Realizace v UIS

Provedení v Univerzitním informačním systému je možné. Implementování trackeru do jednotlivých stránek UIS by bylo stejné jako u demonstračního příkladu. V případě nasazení na celý UIS je nutné počítat s většími nároky na kapacitu ukládaných dat vzhledem k vyšší návštěvnosti než na demonstračním příkladu. Na demonstrační webové prezentaci je na jednu návštěvu webové stránky potřeba 4,7 kB prostoru pro uložení dat do databáze. Počet zobrazených stránek univerzitního informačního systému, za období analýzy, je průměrně 220989 stran za den. Z těchto hodnot tedy vyplývá, že na jeden den trackování univerzitního informačního systému, je potřeba 1GB prostoru pro uložení dat. Proto je před nasazením trackeru doporučeno provést optimalizace na takto rozsáhlý a navštěvovaný informační systém.

5

5

DISKUZE

40

Diskuze

Trackování postupu práce uživatele na webové prezentaci bylo realizováno za použití knihovny jQuery a dvou dodatečných pluginů (Browser, Cookie). Realizace trackeru je tímto závislá na jejich podpoře pro další verze jQuery. Další postup práce při vývoji trackeru se zaměří na samostatnost trackeru (oprostit se od ostatních knihoven a frameworků). Takto vylepšený trackovací skript bude více kompatibilní a sníží se tak datová zátěž pro uživatele. Se samostatností ale vzroste potřeba údržby trackeru při dalších verzích webových prohlížečů. V některých ohledech by měl tracker sbírat přesnější informace o návštěvnících např. verzi prohlížeče nebo odkud přišel návštěvník na webovou prezentaci. Formát zvoleného rozhraní JSONP je v nynějších podmínkách komunikace napříč doménami ideálním řešením. Nevýhodou je omezení odesílání množství dat (2 KB) kvůli realizaci metodou get. V budoucnu s rozšířením technologie CORS by mohl být tento problém vyřešen a tak využíto přenosu rozhraním XMLHttpRequestu i metody POST. Prezentace trackovaných dat je realizována v jednoduchém rozhraní s pomocí jQuery-UI. Pro další prvky jako jsou grafy a tabulky byly využity pluginy Tablesorter a jqPlot. Při dalším vývoji jednotlivých přehledů se jeví vhodné doplnit možnost časového výběru úseku prezentovaných dat. U přehledu stránek přidat možnost filtrování webových adres. Pro prezentaci byly zvoleny vhodné typy grafů, přesto nemusí vyhovět ideálnímu použití, proto je podporována myšlenka směřovat další vývoj k rozšíření možností výběru typu grafu pro prezentaci. Realizace vizualizace jednotlivých typů je provedena metodou načtení externí stránky do iframu. Tím, že webové stránky jsou z jiné domény, nastávají jistá omezení, jako dodatečný zápisu dat do iframu. Vizualizace musela být realizována pomocí překrytí iframu další průhlednou vrstvou s vizualizovanými daty. Jiná možnost načtení stránky do webové prezentace je problematická, protože se jedná o požadavky na webové stránky mezi doménami. Řešením je možnost rozšíření metody CORS mezi prohlížeči. Poté by vizualizace mohla být provedena vhodnějším způsobem.

6

6

ZÁVĚR

41

Závěr

Cílem mé bakalářské práce byla realizace softwarového nástroje pro trackování uživatele na webové prezentaci. Nástroj byl vyvíjen pro možnosti trackování postupu práce uživatele za účelem zvýšení ergonomie práce na webové prezentaci. Předpokladem pro realizaci byl průzkum nynějších aplikací pro trackováni uživatele na webové prezentaci, který ukázal, že součastné nástroje jsou podřízené marketingu a elektronickému obchodování a neposkytují informace v oblasti ergonomie webu. Nástroj byl realizován v jazyce JavaScript s využitím frameworku jQuery. Trackovací nástroj nabízí výsledky dat určených k celkové webové prezentaci i k jednotlivým stránkám. Získaná data z trackování uživatele lze zobrazit v tabulce s grafem nebo vizuálně na webové prezentaci. Nástroj byl otestován na demonstračním příkladu a byla z něj získána data ze kterých lze vyvodit závěry pro doporučení vyplývající pro práci na webu. • Vhodná a výrazná navigace na webových stránkách. • Položky řazené dle logických celků do skupin. • Řazení v jednotlivých skupinách dle návštěvnosti. • Zvýraznění nejnavštěvovanějších v jednotlivých sekcích. • Řazení nabídek dle preferencí návštěvníků. Dílčí částí byla integrace analytického nástroje do univerzitního informačního systému a demonstračního příkladu. Pro integraci jsem zvolil analytický nástroj Google Analytics. Nástrojem trackovaná data jsem analyzoval z pohledu využití pro ergonomii. Na základě vzniklé analýzy vzešla doporučení pro její optimalizaci. Doporučení se vyskytují v podkapitole Analýza UIS. V podkapitole Analýza DřevostavbyOk je uveden návrh práce s reklamními kampaněmi pro webové prezentace. Tato kapitola je psána s využitím nástroje Google Analytics. Kapitola pojednává o možnostech rozlišení jednotlivých raklamních kampaní dle dodatečných informací pro tracker.

7

7

42

LITERATURA

Literatura

AWStats [online]. [cit 25. 5. 2011]. .

Dostupné

na

About JavaScript [online]. [cit. 25. 5. 2011]. Dostupné .

WWW:

na

WWW:

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification [online]. [cit. 25. 5. 2011]. Dostupné na WWW: . Clifton, B. Google Analytics. Brno: Computer Press, 2009. 334 s. ISBN 978-80251-2231-0. . Cross-Origin Resource Sharing [online]. [cit. 25. 5. 2011]. Dostupné na WWW: . Document Object Model (DOM) [online]. [cit. 25. 5. 2011]. Dostupné na WWW: . Extensible Markup Language (XML) [online]. [cit. 25. 5. 2011]. Dostupné na WWW: . Garrett J. Ajax: A New Approach to Web Applications [online]. [cit. 25. 5. 2011]. Dostupné na WWW: . jqPlot pure javascript plotting [online]. [cit. 25. 5. 2011]. Dostupné na WWW: . jQuery [online]. [cit. 25. 5. 2011]. Dostupné na WWW: . jQuery UI [online]. [cit. .

25. 5. 2011].

Dostupné

na

WWW:

Netrefová, H. Nové postupy uplatňováné při návrhu uživatelsky přívětivých informačních systémů. Disertační práce. MENDELU Brno, 2005. 132 s. . O

doménách a DNS [online]. [cit. 25. 5. 2011]. Dostupné .

na

WWW:

Remote JSON - JSONP [online]. [cit. 25. 5. 2011]. Dostupné na WWW: . SiteCatalyst Actionable Web Analytics [online]. [cit. 25. 5. 2011]. Dostupné na WWW: . The Fireclick Advanced Warehouse [online]. [cit. 25. 5. 2011]. Dostupné na WWW: .

7

43

LITERATURA

Uniform Resource Locators (URL) [online]. [cit. 25. 5. 2011]. Dostupné na WWW: . Úvod do JSON [online]. [cit. 25. 5. 2011]. .

Dostupné

na

WWW:

XMLHttpRequest [online]. [cit. 25. 5. 2011]. Dostupné na .

WWW:

Přílohy

A

PŘÍLOHY NA CD

A

Přílohy na CD

• Bakalářská práce v dokumentu PDF • JavaScriptové skripty k prezentaci a trackování dat • JavaScriptové knihovny a pluginy • Skripty na straně serveru v PHP k prezentaci a trackování dat • Výpisy z nástroje Google Analytics • Tvorba tabulek a sekvencí v PostgreSQL

45

Systém trackování uživatele na webu

Recommend Documents