eské vysoké u£ení technické v Praze Fakulta elektrotechnická Katedra po£íta£·
Bakalá°ská práce
Realizace internetového obchodu
Samir Djellil
Vedoucí práce:
Ing. Jan Drchal
Studijní program: Softwarové technologie a management, Bakalá°ský
Obor: Softwarové inºenýrství
26. kv¥tna 2011
iv
v
Pod¥kování Pod¥kování pat°í p°edev²ím mému otci za velkou podporu mého studia a mé mamince, bez které bych se k takovému tématu práce v·bec nedostal. Zárove¬ d¥kuji vedoucímu této práce panu Ing. Janu Drchalovi za cenné rady a poznatky p°i vedení této práce.
vi
vii
Prohlá²ení Prohla²uji, ºe jsem práci vypracoval samostatn¥ a pouºil jsem pouze podklady uvedené v p°iloºeném seznamu. Nemám závaºný d·vod proti uºití tohoto ²kolního díla ve smyslu 60 Zákona £. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o zm¥n¥ n¥kterých zákon· (autorský zákon).
Abstract The main goal of this bachelor thesis is to introduce electronic commerce systems in the Czech environment, which is exempli ed by realization of the online shop based on PrestaShop solution. This means adjusting it to certain requirements and creating and testing user interface and also launching the online shop into runtime environment. This thesis is also focused on methods of presenting the online shop and its products by specialized advertising systems and by product oriented search engines, also back links aection on search engine's result positions are mentioned. Moreover, the online shop statistics and useful web optimalization tools are attached as the last part of the bachelor thesis. The result of this bachelor thesis is fully functional and gainful online shop.
Abstrakt P°ínosem této bakalá°ské práce je uvedení do problematiky elektronického obchodování v £eském prost°edí na p°íkladu realizace internetového obchodu zaloºeného na systému PrestaShop, coº v sob¥ zahrnuje jeho p°izp·sobení vlastním poºadavk·m, vytvo°ení a následné testování uºivatelského rozhraní a uvedení elektronického obchodu do produk£ního prost°edí. Práce zárove¬ seznamuje se zp·soby jak prezentovat a zviditelnit elektronický obchod a jeho produkty, zejména pomocí specializovaných reklamních systém· a vyhledáva£· zboºí, nebo s tím související vliv zp¥tných odkaz· na pozice ve vyhledáva£ích. V p°ílohách jsou zahrnuty statistické údaje z ostrého provozu a uºite£né nástroje pro optimalizaci webu. Výsledkem této bakalá°ské práce je pln¥ funk£ní a pro tující elektronický obchod.
Úvod P°ínosem této práce je uvedení do problematiky prodeje zboºí a sluºeb p°es Internet v £eském prost°edí na p°íkladu realizace internetového obchodu zaloºeného na systému PrestaShop. Základním rysem této bakalá°ské práce je zp·sob, jakým je psána. Je to takový pr·vodce a popis postup· °e²ení z pohledu £lov¥ka, který má za cíl si n¥která témata osvojit a prohloubit. Pro tento ú£el byl vybrán vý²e jmenovaný systém, Prestashop, coº je mladý projekt s otev°eným kódem a ²irokou uºivatelskou základnou, který je poskytován zcela zdarma ke komer£ním ú£el·m. Vytvo°ení e-shopu v sob¥ zahrnuje nastavení PrestaShopu a jeho p°izp·sobení vlastním poºadavk·m a pot°ebám, hlavn¥ z hlediska designu celého e-shopu, tedy vytvo°ení uºivatelského rozhraní, a jeho následné optimalizace a testování pomocí experimentu s o£ní kamerou provedeného na vybraném vzorku respondent·. Zárove¬ práce popisuje a seznamuje se zku²enostmi a problémy z následného uvedení eshopu do produk£ního prost°edí, za°ízení domén a s tím spojeného webhostingu. Samostatná kapitola je v¥nována integraci platebního systému do e-shopu jak z hlediska administrativních, tak technických úkon· k tomu pot°ebných. Velká £ást práce je v¥nována také zp·sob·m jak prezentovat a zviditelnit elektronický obchod a jeho produkty, zejména pomocí specializovaných reklamních systém· zaloºených na r·zných modelech inzerování a pomocí lidmi stále £ast¥ji pouºívaných vyhledáva£· zboºí. Není opomenuta ani problematika klasických vyhledáva£· z hlediska faktor·, které ovliv¬ují pozice e-shopu ve vyhledávání, zejména odkazující domény, respektive zp¥tné odkazy z t¥chto domén a jejich vliv na pozice ve vyhledáva£ích. V p°ílohách je seznámení s uºite£nými nástroji, které jsou vhodné k optimalizaci e-shopu jak z hlediska rychlosti na£ítání celého e-shopu, validity kódu, tak i nap°íklad sémantiky obsahu. U kaºdého nástroje jsou uvedeny problémy, které jím byly odhaleny, a postup, jakým byly tyto problémy vy°e²eny. Jako poslední je k práci p°ipojena p°íloha se statistickými údaji z více neº p·lro£ního provozu e-shopu v produk£ním prost°edí a jejich následný rozbor. My²lenka realizovat elektronický obchod m¥ napadla uº v roce 2007. Bohuºel jsem se od ní odklonil a znovu se vrátil aº po t°ech letech, kdy jsem dostal p°íleºitost zuºitkovat své teoretické a praktické znalosti a my²lenku uskute£nit. Tato práce je souhrnem více neº desetim¥sí£ního snaºení o proniknutí do problematiky elektronických obchod·.
1
2
KAPITOLA 1. ÚVOD
Kapitola 2
Vytvo°ení internetového obchodu V dne²ní dob¥ uº není tím hlavním poºadavkem, aby e-shop v·bec byl a fungoval, ale e-shop musí vynikat bu¤ sortimentem svého zboºí, nebo ur£itou p°idanou hodnotou. Tou p°idanou hodnotou m·ºe být práv¥ vzhled a uºivatelské rozhraní aplikace. Internet není uº tím místem, po kterém brouzdají lidé po£íta£ov¥ vzd¥laní, nebo tací, kte°í si p°ipojení k Internetu mohou dovolit. Dnes Internet pouºívá v podstat¥ kaºdý. E-shop musí být tedy
jednoduchý a p°ímo£arý, aby vyhov¥l v²em bez rozdílu. Kladl
jsem tedy velkou váhu na jednoduchost, p°ímo£arost a p°ív¥tivost uºivatelského rozhraní a v·bec na vzhled e-shopu jako takového. Vzhledem k t¥mto poºadavk·m a nedostatku £asu mi bylo jasné, ºe bych se nem¥l zabývat tvorbou e-shopu tak°íkajíc na zelené louce, implementace backendu a jeho odlad¥ní by totiº zabralo podstatnou £ást doby, na jejímº konci je spu²t¥ní e-shopu do ostrého provozu, ale
vyuºít jiº stávajícího °e²ení a p°izp·sobit ho tak, aby spl¬oval mé poºadavky na vzhled. Sáhl jsem proto po jiº hotovém °e²ení.
2.1
PrestaShop
PrestaShop [29] je
profesionální software pro provoz elektronického obchodu
napsaný v PHP a MySQL. Je to první komer£ní projekt, kterému byla v roce 2010 ud¥lena cena Open-Source Award v kategorii E-Commerce Applications. Je poskytován zcela
zdarma
ke komer£nímu pouºití, viz. jeho licence Open Software License v 3.0, ve které je °e£eno, ºe je nám poskytnuto právo tento software pouºívat, reprodukovat, p°ekládat, p°izp·sobovat, m¥nit, zobrazovat a distribuovat dále pod touto licencí. Stru£n¥ °e£eno m·ºeme si s ním d¥lat, co chceme.
2.1.1 Instalace Zdrojové soubory PrestaShopu verze 1.3.1.1 jsou ke staºení p°ímo na o ciálních stránkách PrestaShopu. V dob¥ psaní této bakalá°ské práce vy²la nová verze 1.4, která se podle mého názoru p°íli² neli²í od p°edchozí verze. Jádro systému je de facto stejné, pár drobností je odlad¥ných.
3
4
KAPITOLA 2. VYTVOENÍ INTERNETOVÉHO OBCHODU
Systémové poºadavky 1. Windows, Unix nebo Linux 2. Apache Web server 1.3 a vy²²í 3. PHP 5.0 a vy²²í (£asto je t°eba poºádat webhostera o p°epnutí z verze 4) 4. MySQL 4.1.14 a vy²²í
Pr·b¥h instalace PrestaShop jsem zprvu instaloval na svém po£íta£i. Aº jsem si byl jistý instalací, provedl jsem ty samé kroky jiº v produk£ním prost°edí. 1. PrestaShop pot°ebuje samoz°ejm¥ ke svému b¥hu n¥jaký DBMS, a to speciáln¥ MySQL, v které je t°eba mít vytvo°enou databázi. 2. Nainstaloval jsem si na lokálním po£íta£i webový server Apache verze 1.3 s podporou
1
PHP 5. Ke správnému chodu je t°eba mít nainstalovánu knihovnu GD , coº jsem ud¥lal odkomentovaním °ádku extension=php_gd2.dll v php.ini, coº je kon gura£ní soubor PHP. Následn¥ bylo t°eba provést restart, respektive reload. 3. Stáhnul jsem si PrestaShop verze 1.3.1, rozbalil a obsah sloºky /prestashop zkopíroval do ko°enového adresá°e mého webserveru. 4. Následn¥ jsem nastavil práva k zápisu (chmod 777) sloºkám /con g, /upload, /down-
load, /tools/smarty/compile, ale ne rekurzivn¥, tedy ne pro podsloºky. Sloºkám /img, /mails, /modules, /themes/prestashop/lang, /translations jsem nastavil taktéº právo zápisu, ale rekurzivn¥ pro v²echny soubory v nich. 5. Spustil jsem webový prohlíºe£ a zadal adresu http://localhost/install, kde se spustil pr·vodce instalací PrestaShopu, viz. 2.1. 6. V n¥kolika málo krocích byli zaprvé zkontrolovány systémové poºadavky, pak jsem byl poºádán o zadání svých p°ístupových údaj· k databázi (hostitel, databáze, uºivatelské jméno a heslo) a posledním krokem pr·vodce bylo nastavení názvu eshopu, údaj· o majiteli apod. (v²e lze samoz°ejm¥ m¥nit aº poté v administraci e-shopu). 7. Posledním krokem bylo smazání sloºky /install a p°ejmenování sloºky pro p°ístup k administraci z /admin na jiný název
2 kv·li v¥t²ímu zabezpe£ení.
Jakmile jsem v²echny tyto kroky provedl, mohl jsem se na dané adrese podívat na jiº b¥ºící e-shop, viz. 2.2. Ten je po instalaci v základním vhledu. R·zné ²ablony vzhledu lze stáhnout z Internetu jednak zdarma ke komer£nímu pouºití, jednak si lze zakoupit i profesionální ²ablony vhledu. Je jich opravdová spousta. Já jsem zvolil t°etí cestu, a to
si ²ablonu sám, viz. kapitola Vytvo°ení uºivatelského rozhraní. 1
GD je open source knihovna pro dynamické vytvá°ení obrázk·, která je napsána v jazyce C.
2
Název zde samoz°ejm¥ zve°ej¬ovat nebudu. P°ejmenování by totiº pak postrádalo smysl.
vytvo°it
2.1. PRESTASHOP
Obrázek 2.1: Jednoduchý pr·vodce instalací PrestaShopu (není p°eloºen do £e²tiny)
Obrázek 2.2: Naistalovaný PrestaShop se základním vhledem
5
6
KAPITOLA 2. VYTVOENÍ INTERNETOVÉHO OBCHODU
2.1.2 Administrace e-shopu Webové rozhraní administrace e-shopu je dostupné z adresy http://hostitel/admin (respektive název p°ejmenované sloºky). Rozhraní je jednoduché a p°ehledné. M·ºeme zde provád¥t správu objednávek (Faktury, Dodací listy, Zákaznické zprávy, Vrácené zboºí), zákazník· (Adresy, Zprávy, Ko²íky), na²eho zboºí, instalovat a nastavovat moduly (více v podsekci Moduly do PrestaShopu), nastavovat zp·soby plateb a dopravy, zálohovat databázi a mnoho dal²ích v¥cí.
Administrace je opravdu komplexní a pro standardní
pouºití dosta£ující.
2.1.3 Architektura PrestaShop je napsán celý v jazyce PHP za pouºití databáze MySQL. Architektura principiáln¥ vychází z modelu
MVC (Model View Controller ). PrestaShop se nesnaºí dodrºovat
striktn¥ model MVC, ale pro jednoduchost je dobré z n¥j vycházet, abychom mohli pochopit, jak to celé funguje. Zárove¬ PrestaShop pouºívá pro zobrazování stránek ²ablonovací systém Smarty, který je jiº v n¥m integrován, ale na n¥j se podívám podrobn¥ji aº v dal²í kapitole.
Model Modely jsou v PrestaShopu poskytovány z mnoºiny t°íd, které jsou v²echny potomkem abstraktní t°ídy ObjectModel, která de nuje obecné chování, nap°íklad zapouzd°ení pro tabulky databáze. Zárove¬ poskytuje klasický CRUD (Create, Read, Update and Delete). Kaºdá
t°ída reprezentující ur£itou entitu je uloºena v samostatném PHP souboru
ve sloºce /classes. Konvencí je pojmenovávat modely p°esn¥ podle toho, co reprezentují (objednávka - Order, zákazník - Customer apod.).
View Prezenta£ní vrstvu zaji²´uje
²ablonovací systém Smarty. Tyto pohledy, které jsou
uloºeny ve sloºce /themes, zaji²´ují odd¥lení business logiky od prezenta£ní vrstvy. Ve striktn¥ pouºitém modelu MVC by se nem¥lo stát, aby
vrstva View je²t¥ n¥jakým zp·sobem
zpracovávala data z Controlleru. Ve v¥t²in¥ p°ípadech tomu tak v PrestaShopu je, ale v n¥kterých pohledech je ob£as pouºit JavaScript pro provedení dodate£ných zm¥n.
Controller Hlavní logika webových stránek PrestaShopu je v PHP souborech v ko°enovém adresá°i eshopu. Tyto soubory jsou
odpov¥dné za interakci s modely a zobrazování výsledných
dat pomocí pohled· z prezenta£ní vrstvy.
2.1. PRESTASHOP
7
2.1.4 Princip tvorby modul· V moºnosti instalace p°ídavných modul· tkví jeden z
nejhlavn¥j²ích klad· Presta-
Shopu. V¥t²ina základních modul· a t¥ch nejpouºívan¥j²ích je jiº obsaºena v základní instalaci. V²echny moduly lze nainstalovat, respektive odinstalovat ve webovém rozhraní administrace e-shopu, nejprve ale sloºku s modulem musíme zkopírovat do sloºky /modules. V²echny moduly jsou potomkem abstraktní t°ídy Module, která de nuje jejich základní funkcionalitu. Tato t°ída také poskytuje rozhraní mezi administrací modulu z e-shopu a samotného modulu. Zárove¬ poskytuje funkcionalitu °e£eno
hook managamentu, coº je stru£n¥
metoda, jak doslova p°ichytit daný modul na ur£ité místo na stránkách e-
shopu, nap°íklad umíst¥ní modulu do levého sloupce). Základ modulu tedy vytvo°ím tak, ºe ve sloºce /modules vytvo°ím sloºku /mujmodul a v ní PHP skript se stejným názvem. Následující ukázka skriptu je základ mého modulu. Takový modul je jiº moºné vid¥t v administraci e-shopu v sekci Moduly. M·ºu ho tedy nainstalovat a poté odinstalovat.
1
class
MujModul
extends
Module
{
4 5
function
__construct ( )
{
6
$ t h i s −>name =
7
p a r e n t : : __construct ( ) ;
8
$ t h i s −>t a b =
9
$ t h i s −>v e r s i o n =
' mujmodul ' ; ' MujModul ' ; ' 0.1.0 ' ;
10
$ t h i s −>d i s p l a y N a m e = $ t h i s −> l ( ' Muj
prvni
modul ' ) ;
11
$ t h i s −>d e s c r i p t i o n = $ t h i s −> l ( ' Muj
prvni
modul ,
12
ktery
nedela
nic . ' ) ;
}
13 } 14 ?>
scripts/prestashop/modul1.php
P°idáním následujících dvou funkcí do t°ídy MujModul zajistím
zobrazení a úpravu
kon gurace modulu pomocí HTML formulá°e v administraci e-shopu. Funkce Con guration::updateValue() mi zajistí uloºení mnou de novaných hodnot.
C o n f i g u r a t i o n : : u p d a t e V a l u e ( $ t h i s −>name . ' _message ' ,
3
private
function
$ t h i s −>_html
_displayForm ( ) .=
'
{
Tools : : getValue
8
13
KAPITOLA 2. VYTVOENÍ INTERNETOVÉHO OBCHODU
a c t i o n =" ' . $_SERVER [ 'REQUEST_URI ' ] . ' "
method=" p o s t ">
14
< l a b e l > ' . $ t h i s −> l ( ' Moje
15
t y p e =" t e x t " name="m o j e _ z p r a v a " />
16
t y p e ="s u b m i t " name="s u b m i t "
z p r a v a ' ) . ' v a l u e =" ' . $ t h i s −> l ( '
Update ' ) . ' " /> 17
' ;
18
}
scripts/prestashop/modul2.php
Následující dv¥ funkce taktéº vloºím do t°ídy MujModul a zajistím tak instalaci, p°esn¥ji
p°ichycení mého modulu do levého sloupce webového rozhraní e-shopu. Funkce Con guration::get() vrací mnou uloºené hodnoty.
1
public
2 3
if
4 5 6
function
i n s t a l l ()
{
parent : : i n s t a l l () ; ( ! $ t h i s −>r e g i s t e r H o o k ( ' l e f t C o l u m n ' ) ) return
false ;
}
7 8
public
9 10
function
return
hookLeftColumn ( )
{
C o n f i g u r a t i o n : : g e t ( $ t h i s −>name
.
' _message ' ) ;
}
scripts/prestashop/modul3.php
Moduly v PrestaShopu velmi usnad¬ují p°idávání nových funkcí do stávající aplikace.
Kapitola 3
Vytvo°ení uºivatelského rozhraní Jak je uvedeno v p°edchozí kapitole, systém Prestashop je °e²ený vícemén¥ jako architektura MVC. Dle zadání bylo práv¥ nutné ud¥lat £ást View, coº jsou ²ablony Smarty uloºené v adresá°i /themes/avebijoux1. ablonovací systém Smarty je pom¥rn¥ jednoduchý nástroj, takºe vytvo°it ²ablony vzhledu nebylo tak náro£né na sloºitost jako pracné. De facto ²lo pouze o to, jak zobrazit data uloºená v prom¥nných, která se vytvá°ejí a plní v p°íslu²ných PHP souborech v ko°enovém adresá°i. Tyto soubory m·ºeme brát jako Controller celé aplikace. Ze za£átku tedy ²lo o to napsat kód z hlediska významového, tedy kód v XHTML. Pr·b¥ºn¥ jsem ale dopl¬oval styly CSS, aby se to dalo n¥jakým zp·sobem v·bec zobrazovat, p°ípadn¥ ladit. Takovým zp·sobem tedy probíhal vývoj vzhledu e-shopu. V²echny gra cké prvky jsem vytvá°el za pouºití gra ckého nástroje Adobe Photoshop CS 5, se kterým mám jiº n¥kolikaleté zku²enosti.
3.1
Pouºité technologie
K vytvo°ení ²ablon vzhledu jsem vyuºil jazyka XHTML a CSS.
Jazyk XHTML XHTML (zkratka anglického extensible hypertext markup language roz²i°itelný hypertextový zna£kovací jazyk) je zna£kovací jazyk pro tvorbu hypertextových dokument· v prost°edí WWW vyvinutý W3C. P·vodn¥ se p°edpokládalo, ºe se stane nástupcem jazyka HTML, jehoº vývoj byl verzí 4.01 ukon£en. V roce 2007 v²ak do²lo k zaloºení pracovní skupiny, která má za cíl vytvo°it novou verzi HTML, která ponese ozna£ení HTML 5 a její XML variantu XHTML 5. Vedle toho paraleln¥ pokra£uje i vývoj XHTML 2.0. [36]
•
V XHTML na rozdíl od HTML musí být v²echny tagy ukon£ené a to v£etn¥ nepárových jako jsou <meta>, , , nebo . Zápis m·ºe mít více podob. Bu¤ pouºijeme klasické (a validní) nebo zkrácené nebo mírn¥ upravené . První zp·sob se nedoporu£uje pouºívat, zasíláme-li XHTML dokument s typem text/html. Druhý zp·sob, bez mezery, se nedoporu£uje pouºívat kv·li
9
10
KAPITOLA 3. VYTVOENÍ UIVATELSKÉHO ROZHRANÍ
postar²ím prohlíºe£·m, které by v takovém p°ípad¥ mohly vynechat poslední atribut, je-li n¥jaký uvedený.
•
V XHTML na rozdíl od HTML musí být v²echny tagy a jejich atributy zapsány malými písmeny a to z toho d·vodu, ºe jsou takto deklarované v odkazované DTD a X(HT)ML je case sensitive, tedy záleºí na velikosti písem. Pokud bychom si deklarovali vlastní DTD, m·ºeme sm¥le pouºívat i velká písmena.
•
V²echny hodnoty atribut· musí být uzav°eny do uvozovek.
•
Dokument musí za£ínat XML deklarací. Její pouºití není povinné, pokud je dokument kódován v UTF-8 nebo pokud ur£ujeme kódování vy²²í protokolem (http nap°íklad).
•
Pokud pot°ebujeme pracovat s rámy, m·ºeme deklarovat XTHML 1.0 Frameset a pro jednotlivé stránky XHTML 1.0 Transitional.
•
XHTML dokument bychom m¥li zasílat s jiným MIME typem neº klasické HTML dokumenty.
•
Dal²í rozdíly jiº nejsou natolik d·leºité a £asté. [36]
Kaskádové styly Kaskádové styly (v anglickém originále Cascading Style Sheets se zkratkou CSS) je jazyk pro popis zp·sobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. Jazyk byl navrºen standardiza£ní organizací W3C, autorem prvotního návrhu byl Håkon Wium Lie. Byly vydány zatím dv¥ úrovn¥ speci kace CSS1 a CSS2, dokon£uje se revize CSS 2.1 a pracuje se na verzi CSS3. Hlavním smyslem je umoºnit návrhá°·m odd¥lit vzhled dokumentu od jeho struktury a obsahu. P·vodn¥ to m¥l umoºnit uº jazyk HTML, ale v d·sledku nedostate£ných standard· a konkuren£ního boje výrobc· prohlíºe£· se vyvinul jinak. Star²í verze HTML obsahují celou °adu element·, které nepopisují obsah a strukturu dokumentu, ale i zp·sob jeho zobrazení. Z hlediska zpracování dokument· a vyhledávání informací není takový vývoj ºádoucí. [7]
3.2
ablonovací systém Smarty
Odd¥lení aplika£ní vrstvy od prezenta£ní je v PrestaSHopu dosaºeno pouºitím ²ablonovacího systém Smarty, coº je ²ablonovací systém vytvo°ený za pouºití skriptovacího jazyka PHP. Zárove¬ se jedná o o ciální projekt PHP. Jak jiº bylo °e£eno, jeho cílem je odd¥lit aplika£ní logiku od obsahu prezentace. I kdyº je Smarty ur£en k odd¥lení aplika£ní a prezenta£ní logiky, není omezen pouze na tvorbu ²ablon pomocí HTML zna£ek. ablonovací stroj umoº¬uje pouºití °ídících struktur, cykl·, vestav¥ných funkcí pro práci s °et¥zci, £asem apod. Pouºití funkcí v prezenta£ní £ásti není omezené, a to díky tzv. plugin·m. [33] Na následující ukázce je vid¥t jednoduchá ²ablona za pouºití Smarty.
3.2. ABLONOVACÍ SYSTÉM SMARTY
11
html> < t i t l e >Smarty T e m p l a t e
M e s s a g e : { $ m e s s a g e } !
1 < 2 3 4 5 6 7 8
scripts/smarty/template.html
Smarty pouºívá konstantu SMARTY_DIR, která obsahuje celou cestu k adresá°i libs/. Pokud se poda°í bez problému na£íst hlavní t°ídu Smarty.class.php, není pot°eba tuto konstantu de novat a pouºívat. V p°ípad¥, ºe dojde k chyb¥, nap°íklad tím, ºe umíst¥ní
Smarty.class.php neodpovídá include_path, je nutné SMARTY_DIR nade novat ru£n¥ a pouºít. Zdrojový kód souboru controller.php s pouºitím SMARTY_DIR :
1
define ( "SMARTY_DIR" , require (SMARTY_DIR .
2 3
" /home/www/ " ) ; " Smarty . c l a s s . php " ) ;
4
$ s m a r t y = new
5
$ s m a r t y −>t e m p l a t e _ d i r = " . / " ;
Smarty ( ) ;
6
$ s m a r t y −>c o m p i l e _ d i r = " . / c o m p i l e " ;
7
$ s m a r t y −>c a c h e _ d i r = " . / c a c h e " ;
8
$ s m a r t y −>c o n f i g _ d i r = " . / c o n f i g s " ;
9
$ s m a r t y −>a s s i g n ( "name" ,
"AHOJ ! " ) ;
$ s m a r t y −>d i s p l a y ( " t e m p l a t e . t p l " ) ;
10 11 ?>
scripts/smarty/controller.php
3.2.1 ablony e-shopu ablony vzhledu mého e-shopu jsou uloºeny ve sloºce /themes/avebijoux1. Níºe je seznam v²ech ²ablon spolu s jejich významem.
ablony vzhledu • 404
- neexistující URL
• address
- formulá° pro vytvo°ení a zm¥nu adresy
• addresses
- seznam adres uºivatele
• authentication • breadcrumb
- vytvo°ení nového uºivatelského pro lu, p°ihla²ování/odhla²ování
- aktuální cesta v e-shopu (nap°. Dom· > Kategorie > Náhrdelníky)
• category-tree-branch
- seznam kategorií rekurzivn¥
12
KAPITOLA 3. VYTVOENÍ UIVATELSKÉHO ROZHRANÍ
• category
- zobrazí produkty v kategorii a popis kategorie (vyuºívá ²ablony product-
sort, product-list, pagination )
• cms
- vkládá odkaz na hlavní stranu e-shopu do £lánku
• contact-form • discount • errors
- formulá° Napi²te nám
- správa slevových kupón· v administraci uºivatele
- úvodní stránka pro lu uºivatele (HOOK_CUSTOMER_ACCOUNT )
- stránkování
• password-guest
- aktivace plnohodnotného ú£tu v p°ípad¥, ºe zákazník jiº provedl
objednávku
• password
- reset a zaslání nového hesla, pokud svoje heslo zákazník zapomene
• prices-drop
- zobrazi produkty ve sleve (podobné ²ablon¥ category )
• product-list
- seznam produkt· s názvem, popisem, obrázkem a cenou
• product-sort • product
- °azení produkt· v kategorii
- detail produktu
• productbrand • productlist • search
- vkládá dodate£nou informaci do detailu produktu
- podobný product-list, ale bez názvu, popisu a ceny
- vyhledávání
• shopping-cart-product-line • shopping-cart
- jednotlivý produkt v nákupním ko²íku
- nákupní ko²ík
3.3. KOMPATIBILITA WEBOVÝCH PROHLÍE
3.3
13
Kompatibilita webových prohlíºe£·
Trocha historie Na po£átku Internetu byl Netscape, který byl na Internetu pr·kopnickou organizací vyvíjející webový prohlíºe£. V té dob¥ nebylo ºádné CSS nebo JavaScript - existoval pouze jazyk HTML, který de nuje strukturu dokumentu, ne jeho vzhled. Proto musel Netscape vizuální zobrazení stav¥t na svých vlastních nápadech. Ud¥lal n¥kolik velmi rozumných voleb: nadpisy by se m¥ly zobrazovat v¥t²í a tu£n¥j²í neº ostatní text. Odstavce by m¥ly obsahovat malý vn¥j²í okraj nad a pod odstavcem. Poloºky neuspo°ádaného seznamu, jak jdou za sebou, by m¥ly mít odráºky apod.
Vyvíjelo se to pom¥rn¥ dob°e, dokud spole£nost Microsoft neobjevila trh, na n¥mº zatím nedominovala,
a nerozhodla se do tohoto prostoru vstoupit se svým
vlastním prohlíºe£em, který nazvala Internet Explorer . Internet Explorer vykresloval stránky podobn¥ jako Netscape, byly zde v²ak drobné rozdíly. Ob¥ spole£nosti za£aly na ost°í noºe soupe°it o to, který z prohlíºe£· si vybere v¥t²ina uºivatel·. Aby toho dosáhly, ob¥ spole£nosti se snaºily nabídnout webovým designer·m a vývojá°·m p°idané hodnoty, které byly velmi podobné, ale v kaºdém prohlíºe£i vyºadovaly r·zný kód HTML. Jakmile výrobci prohlíºe£· poprvé implementovali CSS, problém se nijak nezlep²il. Spí²e
1 výrobci prohlíºe£·
neº podpora speci kací CSS (a HTML) tak, jak je de novala W3C ,
jednodu²e vytvá°eli své prohlíºe£e tak, aby fungovali, jak si mysleli, ºe by m¥ly coº vedlo k velkým nesrovnalostem. Na po£átku roku 2000 za£ali webový designé°i a vývojá°i tla£it na výrobce prohlíºe£· se svými poºadavkem, aby zm¥nili vykreslovací jádra tak, aby se stránky zobrazovaly podle doporu£ení speci kace. To bylo jednodu²²í °íct neº ud¥lat; jednodu²e protoºe zm¥na prohlíºe£· by zni£ila v¥t²inu stránek na Internetu, nebo´ jejich kód vyhovoval práv¥ v²em nesrovnalostem prohlíºe£·, spí²e neº by odpovídal speci kacím HTML a CSS, jak je na£rtla spole£nost W3C. Ale p°esto nastala zm¥na a díky chytrému mechanismu (DOCTYPE) to bylo moºné provést bez zni£ení Internetu.
Dnes se jiº v¥t²ina webových prohlíºe£· snaºí o dodrºo-
vání standard·. Problém je, ºe velká £ást uºivatel· stále pouºívá zastaralé verze ur£itých prohlíºe£·, nap°íklad práv¥ Internet Explorer ve verzi 6 je toho zá°ným p°íkladem. [38]
Internet Explorer Internet Explorer spole£nosti Microsoft je nejroz²í°en¥j²ím prohlíºe£em ve sv¥t¥, p°edev²ím zásluhou toho, ºe to je výchozí prohlíºe£ ve Windows, nejpopulárn¥j²ím systému na sv¥t¥. Po tom, co na konci devadesátých let vyhrál válku prohlíºe£·, byl podíl Internet Exploreru na celosv¥tovém trhu prohlíºe£· v roce 2002 okolo 96 procent. Po vydání Firefoxu a Safari v²ak tento podíl výrazn¥ klesl. Weboví designé°i a vývojá°i jsou frustrováni £asem, jejº musí strávit nad opravou chyb, ²patné podpory a nedostate£nými zabudovanými vlastnostmi Internet Exploreru, i kdyº by m¥l jednoduchý, £istý a na standardech zaloºený zdrojový kód fungovat nap°í£ spektrem prohlíºe£·. Na²t¥stí vydání sedmé a dal²ích verzí °e²í velkou £ást t¥chto problém·. 1
World Wide Web Consortium (W3C) je mezinárodní konsorcium, jehoº £lenové spole£n¥ s ve°ejností
vyvíjejí webové standardy pro World Wide Web.
14
KAPITOLA 3. VYTVOENÍ UIVATELSKÉHO ROZHRANÍ
Tohle v²ak bude dobré aº ve chvíli, kdy v¥t²ina uºivatel· p°ejde z verze 6 na vy²²í verze, takºe se je²t¥ n¥jakou dobu vývojá° bude muset potýkat s frustracemi ohledn¥ IE 6. [38]
Firefox asto se na n¥j weboví designé°i a vývojá°i nahlíºejí jako na
zlatý standard mezi
prohlíºe£i. Firefox spole£nosti Mozilla Corporations je prohlíºe£ typu open source, jehoº ºivot za£al rozv¥tvením vývoje softwarového balíku Mozilla Suite, ale od té doby se stal primárním cílem vývoje této spole£nosti. Firefox je ke staºení ve verzi 4 a je dostupný pro Windows, Linux a Mac OS X. Vedle poskytování mnoha dopl¬k· pro koncové uºivatele se Firefox stal známým pro svou výbornou podporu webových standard·. V¥t²ina webových designér· jej, kdyº p°ijde na vykreslování p°esn¥ podle speci kace, povaºuje za nejspolehliv¥j²í a nejp°esn¥j²í dostupný prohlíºe£. Firefox taktéº obsahuje n¥které zabudované nástroje (jako je DOM Inspector) a dal²í voln¥ dostupná roz²í°ení (jako je Firebug), která se hodí k lad¥ní výsledk· na webu, viz. sekce Dal²í uºite£né nástroje a dopl¬ky v p°íloze C. Vykreslovací jádro Firefoxu, zvané
Gecko, je dostupné odd¥len¥ pod licencí typu open source, takºe si na n¥m kdokoli m·ºe postavit jiný prohlíºe£. [38]
Vzhled jsem testoval na prohlíºe£ích Firefox verze 3 a 4, Google Chrome 11, Opera 11, Safari 5 a Internet Explorer verze 6, 7, 8 a 9. Velké problémy nastaly u prohlíºe£e Internet Explorer 6. Nedokázal jsem upravit kód ²ablony kaskádových styl· tak, aby se vzhled zobrazoval jak v Internet Explorer 6, tak v ostatních prohlíºe£ích stejným zp·sobem. Otázka je, jesti by to v·bec n¥jak ²lo. Nakonec jsem ale p°istoupil na zp·sob, kdy jsem do hlavi£ky ²ablony header.tpl (/themes/avebijoux1/header.tpl ) nastavil tuto podmínku:
1 <
link href=" { $ b a s e _ d i r } / g l o b a l . c s s " type=" t e x t / c s s " r e l=" s t y l e s h e e t "
2 < !−− [ i f 3
<
IE
/>
6] >
link href=" { $ b a s e _ d i r } / g l o b a l − i e 6 . c s s " type=" t e x t / c s s " r e l=" s t y l e s h e e t "
/>
4 < ! [ e n d i f ]−−>
scripts/ie6.html
která zajistí na£tení souboru CSS p°ímo ur£eným pro Internet Explorer 6, pokud je práv¥ v n¥m e-shop zobrazován.
Kapitola 4
Experiment s o£ní kamerou O£ní kamera je moderní za°ízení ur£ené pro sledování pohybu o£í, kterou jsem v tomto experimentu vyuºil pro otestování nejen mého e-shopu. Této metod¥ se °íká také n¥kdy
eye-tracking. O£ní kamera se pouºívá hlavn¥ v marke-
tingovém výzkumu, kde se pomocí ní testuje nap°. ú£innost leták· a podobných tiskových materiál·. Není zcela jasné, zda je tato metoda p°ímo ur£ena pro testování webových aplikací, ale dají se pomocí ní ur£it¥ vypozorovat n¥jaké v¥ci, které bychom jiným zp·sobem nezjistili. S o£ní kamerou m·ºeme tedy otestovat
pouze informa£ní design izolovaných strá-
nek. Nezjistíme zkrátka nic o webu jako celku. Testování o£ní kamerou m·ºe být podmnoºinou uºivatelského testování. Pokud v uºivatelském testování zjistíte ur£ité chyby, ale nedovedete si je snadno vysv¥tlit, o£ní kamera vám m·ºe pomoct. Díky p°edm¥tu Marketingový výzkum vyu£ovaném paní doc. Ing. V¥rou Vávrovou z Katedry ekonomiky, manaºerství a humanitních v¥d, jsem m¥l moºnost vyzkou²et si o£ní kameru. Tímto paní docentce d¥kuji za ochotu a její £as, který experimentu v¥novala. P°i experimentu mi asistoval pan Ing. Tomá² Ru£ka, kterému touto cestou také d¥kuji.
4.1
Cíle
Hlavním cílem experimentu s o£ní kamerou bylo otestovat vzhled úvodní stránky, stránku se zobrazenými produkty (kategorie) a stránku s detailem produktu, a to hlavn¥ z hlediska, jestli dané rozmíst¥ní gra ckých prvk· bylo zvoleno správn¥ £i nikoliv, nap°íklad zda jsou reklamy viditelné a respondent si jich v²imne. Jako vedlej²í cíl jsem zvolil otestování úvodních stránek konkuren£ních e-shop·. Cht¥l jsem zjistit, co d¥lají dob°e, respektive ²patn¥, a vzít si z toho ponau£ení pro budoucí vývoj mého e-shopu. Do výb¥ru jsem zahrnul n¥kolik e-shop·, které se zabývají prodejem podobných produkt· jako my.
15
16
KAPITOLA 4. EXPERIMENT S ONÍ KAMEROU
4.2
Hypotézy
Pro tento experiment jsem stanovil n¥kolik hypotéz, které jsou uvedeny níºe v seznamu.
1. Respondent si v²imne výrazného titulku v hlavi£ce stránky. 2. Respondenta zaujmou p°edev²ím obrázky a fotky produkt·, textový obsah bude p°echázet. 3. Respondent si v²imne reklamy umíst¥né v prost°edním sloupci a reklamy v pravém sloupci. Ob¥ dv¥ tyto reklamy jsou totiº výrazným gra ckým prvkem na stránce. 4. Respondent si obtíºn¥ zapamatuje jména konkuren£ních e-shop·, vyjma webu Mandarine, který má velmi výrazné logo.
4.3
Zp·sob a rozsah ²et°ení
4.3.1 Výb¥r vzorku respondent· Vzhledem k zam¥°ení mého e-shopu jsem jako hlavní poºadavky pro výb¥r vzorku lidí ur£il to, aby byl respondent ºenského pohlaví a zárove¬ nikdy v minulosti nevid¥l a nev¥d¥l nic o mém e-shopu. Nakonec se mi poda°ilo sehnat vzorek
osmi respondent· ve v¥ku 21 -
22 let, kte°í byly ochotni podstoupit tento experiment. Tímto d¥kuji své p°ítelkyni Martin¥ Sk°ivánkové, které vd¥£ím za takový po£et ú£astník·.
4.3.2 Pr·b¥h experimentu Experiment probíhal zp·sobem, kdy byl kaºdý z respondent· p°iveden do místnosti, kde byl usazen k po£íta£i a na hlavu mu byla p°ipevn¥na o£ní kamera. Respondent byl pou£en, ºe se má pokusit nehýbat s hlavou, jinak mohou být zachycená data zkreslena. Aº byl respondent pohodln¥ usazen, spustila se kalibrace o£ní kamery, coº byl £erven¥ blikající bod na r·zných místech obrazovky, který m¥l respondent bez hnutí sledovat. Po kalibraci následoval samotný experiment, tedy sekvence snímk·, kde kaºdý snímek
1
byl screenshot úvodních stránek konkuren£ních e-shop· . Po konkuren£ních e-shopech následovaly t°i snímky mého e-shopu (úvodní strana, zobrazené produkty v n¥jaké kategorii, detail n¥jakého produktu). asové intervaly mezi snímky byly rozdílné vzhledem k povaze jednotlivých snímk· a typu testování (v¥t²inou to ale bylo 6 s). Jako poslední snímek jsem dal obrázek, na jehoº levé stran¥ byla umíst¥na fotka zmrzliny a na pravé fotka sklenky s
2
kávou . U snímk· konkuren£ních e-shop· se zaznamenávala pouze trajektorie pohybu oka. Výstupem z takového m¥°ení jsou tabulková data (£íslo snímku, £as, sou°adnice oka, pr·m¥r 1
Mezi konkuren£ní stránky jsem samoz°ejm¥ za°adil i snímek s úvodní stránkou mého e-shopu, abych m¥l
ni£ím nezkreslené výsledky. 2
Z výsledk· jsem cht¥l zjistit, na co respondenty po experimentu pozvu, zda na kávu nebo na zmrzlinu!
4.3. ZPSOB A ROZSAH ETENÍ
17
3
pupily ), výstup ve form¥ videa a také obrázek se zazna£enými místy, kam a na jak dlouho se respondent díval. V²echna tato data jsou uloºena v p°iloºeném CD ve sloºce /eye-tracking.
Na obrázku 4.1 je vid¥t výstup s ozna£enými místy, kam a na jak dlouho se respondent díval.
Obrázek 4.1: Obrazový výstup z o£ní kamery pouºité na úvodní stránce mého e-shopu
U snímku mého e-shopu a posledního snímku jsem navíc nastavil tzv. zóny. Snímek lze pomocí zón rozd¥lit na £ásti, u kterých se pak vyhodnotí, jak dlouho se respondent díval na danou £ást z celkového £asu, který m¥l na snímek ur£en.
3
O£ní kamerou jsme schopni m¥°it také pr·m¥r pupily nebo-li zorni£ky oka. V na²em p°ípad¥ jsou tyto
nam¥°ené údaje ale irelevantní.
18
KAPITOLA 4. EXPERIMENT S ONÍ KAMEROU
Obrázek 4.2: Snímek Detail produktu bez nastavených zón
Obrázek 4.3: Snímek Detail produktu s nastavenými zónami
4.3. ZPSOB A ROZSAH ETENÍ
19
4.3.3 Výhody a nevýhody navrºeného postupu Obecnou nevýhodou pouºití o£ní kamery je fakt, ºe respondent by nem¥l ud¥lat s hlavou ºádný pohyb. Kamera se p°ed experimentem zkalibrovala na ur£itou polohu hlavy. Kaºdý pohyb hlavy tedy výsledek zkresloval. Na²t¥stí jsem respondenty pozorn¥ sledoval a zapisoval si, kdo a u kterého snímku ud¥lal n¥jaký pohyb. Tomuto snímku jsem bu¤ nev¥noval tolik pozornosti nebo se snaºil trajektorii pohybu oka zobrazenou na daném snímku posunout takovým zp·sobem, aby dávala smysl. Nespornou nevýhodou je také to, ºe mám na svém webu dynamické gra cké prvky (hlavi£ka webu, m¥nící se reklamy). Snímky v experimentu jsou ale statické, takºe z tohoto pohledu jsou výsledky trochu zkreslené. P°ece jenom pohybující se v¥c na jinak statickém webu zaujme oko respondenta více. Vymyslel jsem to, ºe bychom umístili n¥kolik snímk· za sebou, ve kterých by se m¥nila pouze nap°íklad reklama. Bohuºel p°echod mezi dv¥ma snímky není proveden hladce, takºe z této varianty se²lo. Výhoda o£ní kamery je ta, ºe pomocí ní m·ºeme minimalizovat fakt, ºe je respondent p°esv¥d£en, ºe n¥co d¥lá, respektive ned¥lá. Kdyº nám respondent °ekne, ºe on se p°ece na reklamy nedívá, o£ní kamera je schopna ukázat opak. Nap°íklad v mém experimentu respondenti sice ve v¥t²in¥ p°ípad· v dotazníku uvedli, ºe by si dali kávu, podle snímk· je ale zaujala práv¥ zmrzlina.
4.3.4 Dotazník Kaºdému respondentovi jsem ihned po ukon£ení experimentu s o£ní kamerou dal k vypln¥ní dotazník. Bral jsem to pouze jako vedlej²í výzkum, ale odnesl jsem si z n¥j n¥kolik cenných poznatk·. Dotazník obsahoval tyto otázky a odpov¥di:
4 a zárove¬ zvolená tak, abychom zjistili, jak byl kdo
soust°ed¥ný. 4
Je dobré na za£átku odleh£it situaci, a´ uº to je dotazník nebo cokoliv jiného. To d¥láme práv¥ pomocí
t¥chto otázek.
20
KAPITOLA 4. EXPERIMENT S ONÍ KAMEROU
Cílem druhé otázky bylo zjistit, jak si respondenti zapamatovali názvy e-shop·, jejichº weby byly promítnuty ve snímcích experimentu. Do odpov¥dí byly zahrnuty t°i názvy eshop·, které reáln¥ existují, ale
nebyly sou£ástí experimentu. Byly to weby eská biºuterie,
OdvarkaBijoux a perky.cz.
Úmyslem t°etí a zárove¬ poslední otázky (víc otázek nem¥lo ani smysl) bylo pouze ov¥°it si správnost p°edposledního snímku experimentu (zmrzlina a káva ), kde jsem zji²´oval, který produkt respondenta zaujal více, respektive na který produkt se díval déle.
4.4
Výsledky
Nad výsledky z o£ní kamery a dotazníku by se dalo napsat n¥kolik desítek stránek textu. Proto jsem se rozhodl vybrat pouze ty nejzajímav¥j²í výsledky a ty, které zap°í£inily zm¥ny mého e-shopu, kterým se v¥nuji dále v textu.
4.4.0.1
Výsledky o£ní kamery
Výsledky z testování pomocí o£ní kamery byly ve form¥ tabulkových dat, ze kterých £lov¥k nic nevy£te. Tato data se dají ale znázornit p°ímo na snímku jako zelená kole£ka, ve kterých je £íslo udávající, jak dlouho zde zrak respondenta spo£inul. Bohuºel z toho ale nezjistíme, na jakém míst¥ za£al a jakým sm¥rem se oko pohybovalo.
Nejlep²ím výstupem pro analýzu výsledk· je tudíº p°ímo obrazový výstup formou videa. Mohl jsem si tedy zp¥tn¥ p°ehrávat to, kam a jak dlouho se respondent díval, a hlavn¥ z videa lze p°esn¥ poznat, kde respondent s díváním za£al a kde skon£il.
Nejvýznamn¥j²ím výsledkem pro m¥ bylo to, ºe jsem si opravdu potvrdil, ºe náv²t¥vníka webu zaujmou hlavn¥ obrázky, a´ se týkají £ehokoliv. Taktéº reklamy na mém e-shopu respondenty zaujaly. Titulku v¥novalo pozornost ale jen £ást respondent·.
E-shop
Mandarine [22] krásn¥ ukázal, jak je d·leºité mít správn¥ navrºené logo. V¥t²ina
respondent· zanechala zrak práv¥ na n¥m. M¥lo to i dal²í d·sledek, ale o n¥m víc aº ve výsledcích dotazníku.
4.4. VÝSLEDKY
21
Obrázek 4.4: Snímek webu www.mandarine.cz
E-shop
Simply Me [32] zase ukázal, jak se logo d¥lat opravdu nemá. Název e-shopu
si nepamatoval opravdu nikdo. A v·bec najít tento název p°ímo na webu je docela tvrdý
5
o°í²ek .
5
Název e-shopu je umíst¥n v malé hv¥zdi£ce, kterou drºí dívka v ruce...
22
KAPITOLA 4. EXPERIMENT S ONÍ KAMEROU
Obrázek 4.5: Snímek webu www.simply-me.cz
Zajímavým výsledkem, kdy jsem vyuºil zóny, byl výsledek snímku Káva a zmrzlina. V¥t²in¥ respondent· spo£inul déle zrak na káv¥ neº na zmrzlin¥. Dotazník ale následn¥ ukázal, ºe v¥t²í £ást respondent· by si dalo zmrzlinu!
4.4. VÝSLEDKY
23
Obrázek 4.6: Snímek Káva a zmrzlina
Obrázek 4.7: Zóny u snímku Káva a zmrzlina
4.4.0.2
Výsledky dotazníku
V následující tabulce jsou vid¥t výsledky dotazníku. Ke kaºdé odpov¥di je p°i°azeno £íslo udávající, kolik respondent· zvolilo danou odpov¥¤.
24
KAPITOLA 4. EXPERIMENT S ONÍ KAMEROU
1. Jaké
zví°átko bylo na za£átku?
opice
6
ko£ka
1
ºádné
1
2. Za²krtni, která
jména e-shop· si pamatuje².
eská biºuterie
1
Stylová Biºuterie
3
BiºuterieShopping
2
Bijou Trend
1
OdvarkaBijoux
2
AveBijoux
7
Monika
4
Mish Mash
1
Simply Me
0
perky.cz
0
Chic-Bijoux
3
Mandarine
6
3. Zmrzlina nebo káva?
zmrzlina
5
kafe
3
Jeden respondent za²krtl
ºádné, jeden ko£ka, a to zví°átko (opice) bylo p°itom na
prvních £ty°ech snímcích prezentace pouºité v experimentu. Snímky jsem navíc koncipoval tak, ºe na kaºdém byla pouze opice a krátký text. Je tedy udivující, ºe de facto £tvrtina respondent· nebyla schopna si tohle zapamatovat! U druhé pro nás d·leºité otázky dva lidé odpov¥d¥li, ºe si pamatují e-shop
OdvarkaBi-
joux [27] a eská biºuterie [4]. Oba dva nebyly p°itom obsaºeny v experimentu! Na jejich obranu musím ale °íct, ºe jsem ºádnému respondentovi p°ed experimentem ne°ekl, ºe by se m¥l snaºit zapamatovat si jména e-shop·, které budou na snímcích. Efektem toho ale bylo, ºe jsem doopravdy zjistil, které e-shopy zvládli navrhnout a umístit své logo tak, aby bylo podv¥dom¥ snadno zapamatovatelné. Z odpov¥dí musíme vyjmout m·j e-shop
AveBijoux, jelikoº v experimentu jsem mu
v¥noval více prostoru. Je tedy samoz°ejmé, ºe si ho respondenti pamatovali. První místo tedy zaujal e-shop
Mandarine [22]. Celé hlavi£ce webu vévodí tenhle název a zárove¬ je
na £erveném podklad¥, nikdo si ho nem·ºe nev²imnout. Z výsledk· o£ní kamery také vyplynulo, ºe na jejich logu kaºdý respondent spo£inul del²í £as neº obvykle. Dal²í web, který si respondenti dob°e pamatovali, byl e-shop
Monika [25]. Jejich logo je jednodu²e £itelné a je
na bílém neru²ícím podklad¥.
4.4.0.3
Názory respondent·
Z názor· respondent·, které jsem zjistil o n¥kolik dní pozd¥ji, bych cht¥l vyzdvihnout dva. První názor byl Je tam moc textu. P°i²la jsem si sem koupit biºuterii a ne si o ní £íst!. Samoz°ejm¥
nejideáln¥j²ím °e²ením by bylo mít na hlavní stránce pouze velké obrázky
produkt· a co nejmén¥ zbyte£ného textu. Problém je v tom, ºe jeden z hlavních faktor· toho,
4.4. VÝSLEDKY
25
na jaké pozici pro dané hledané slovo se bude umis´ovat web, je to, jak moc se tomuto slovu daný web v¥nuje, tedy jak moc toto slovo obsahuje. Samoz°ejm¥. Jenºe co je pro vyhledáva£ obsah? Musíme si totiº uv¥domit, ºe vyhledáva£ je schopný pochopit pouze text. Není schopen vid¥t, co je na obrázku. Posuzuje tedy web jenom na základ¥ textového obsahu. Na co nám tedy bude web, který je sice krásný s mnoha obrázky, ale neumis´uje se na rozumných pozicích ve vyhledáva£ích? Jde tedy o to najít správný pom¥r mezi textovým obsahem a tím mediálním. Ob¥ tyto v¥ci leºí na jiné misce jedné váhy. Kdyº p°idáte na jedné stran¥, uberete vám to zkrátka na druhé. Problém jsem se snaºil zmen²it aspo¬ tak, ºe jsem na web umístil sice více obrázk·, coº lahodí zákazníkovu oku, ale zárove¬ jsem textový obsah, d·leºitý pro vyhledáva£e, p°esunul na konec hlavní stránky. Z p·vodních ²esti zobrazených produkt· se jich nyní na hlavní stran¥ zobrazuje 24! Nutno také °íct, ºe se zde samoz°ejm¥ nezobrazují stále ty jedny samé produkty, ale náhodn¥ se vybírají z kategorie Doporu£ené zboºí. Text je tedy na stránce stále p°ítomen, ale není uº tím ru²ivým prvkem! Taktéº jsem zru²il úpln¥ pravý sloupec, nechal jsem tedy jenom levý. Aby se mi ale do n¥j ve²ly d·leºité v¥ci, musel jsem odstranit samoz°ejm¥ n¥co jiného. Jako první jsem odstranil £ást Newsletter. Ze statistik bylo stejn¥ z°ejmé, ºe málokdo
6
si sám od sebe zaregistruje e-mail, aby mu na n¥j pak n¥kdo posílal newsletter . Dále jsem odstranil £ást Ak£ní sleva, kde se zobrazoval náhodn¥ produkt ve slev¥. Do hlavi£ky jsem místo toho dal rovnou odkaz na v²echny slevy. Odstranil jsem i £ást s tzv. tagy, tedy nejvíce hledanými slovy v e-shopu. Tato £ást m¥la stejn¥ jenom význam textu pro vyhledáva£e. Uºitek pro zákazníka byl totiº minimální. Hlavní £ást webu se zobrazenými produkty jsem se snaºil odd¥lit také opticky. Produkty a hlavní prvky uºivatelského rozhraní (horní menu s n¥kolika d·leºitými odkazy dob°e viditelnými pro mén¥ zku²ené uºivatele Internetu, kategorie zboºí na levé stran¥ a t¥sn¥ pod nimi nákupní ko²ík) jsou umíst¥ny na bílém podklad¥ a text pro vyhledáva£e a odkazy na dal²í nemén¥ d·leºité stránky (Kontakt, Napi²te nám!, V²eobecné podmínky, Reklamace, V¥rnostní program, Výhody registrace, Záruka vrácení pen¥z, Dal²í skv¥lé výhody apod.) jsou na tmav¥ ²edém pozadí, v pati£ce stránky. Krásné obrázky zboºí jsou tedy opticky odd¥lené od textu. Do budoucna bych rád zv¥t²il i formát fotek produkt·, a´ si potenciální zákazník m·ºe opravdu do detailu prozkoumat výrobek, který by si rád koupil. P°edchozí zm¥ny m¥ donutili zm¥nit krom¥ pati£ky zárove¬ i celou hlavi£ku. Odstranil jsem p°edchozí gra cký prvek (animace ve Flashi), která zabírala moc místa jak z hlediska datového (355 kB), tak i optického (náv²t¥vník musel aº p°íli² scrollovat). Místo ní jsem umístil jednoduché menu s nejd·leºit¥j²ími odkazy a nad n¥j logo. Na základ¥ výsledk· dotazníku (samoz°ejm¥ výsledk· druhé otázky) jsem se rozhodl
zm¥nit zcela logo mého e-shopu. V¥t²ina respondent· si zapamatovala e-shop Mandarine [22], £ást z nich také 6
Chic-Bijoux [5] . Pro budování rmy a v·bec budování znalosti zna£ky
Nejlep²í varianta je p°i registraci zákazníka uvést pole Chci dostávat newsletter a to nechat implicitn¥
za²krtnuté!
26
KAPITOLA 4. EXPERIMENT S ONÍ KAMEROU
je naprosto zásadní, aby logo bylo vid¥t a bylo dob°e zapamatovatelné. Zv¥t²il jsem tedy jeho velikost a zárove¬ jsem ho umístil na neru²ící pozadí. S touto zm¥nou souvisel i druhý názor, a to názor Jak se to vlastn¥ £te?. Bylo zvolit jako název mého e-shopu jméno, jehoº p·vod je francouzský, a to
chybou
AveBijoux. Logo
tém¥° nikdo nep°e£etl správn¥. A ten kdo ho p°e£etl, si stejn¥ nebyl schopen ho zapamatovat. To m¥ vedlo aº k gistroval doménu
zm¥n¥ názvu e-shopu. Místo nezapamatovatelné domény jsem zare-
www.luxusnibizuterie.cz. Název Luxusní biºuterie je sice pon¥kud
del²í, ale je lehce zapamatovatelný a hlavn¥ náv²t¥vníkovi p°esn¥ sd¥luje, co v e-shopu nalezne. Není tedy t°eba ºádného dodate£ného titulku. Tato zm¥na je zatím ale ve fázi p°íprav.
4.5
Záv¥r
Díky tomuto experimentu jsem m¥l moºnost vyzkou²et si p°ímo v praxi, jak se takový výzkum d¥lá, jaké jsou jeho výhody, respektive jeho nedostatky. Jsem rád, ºe výzkum nebyl jenom o tom si tuto technologii vyzkou²et, ale mohl jsem o£ní kameru pouºít p°ímo na reálný projekt a vid¥t reálné výsledky. Díky tomuto experimentu a výsledk·m z n¥j plynoucích jsem se pustil do celkem rozsáhlých zm¥n mého e-shopu, které jsem p°edtím nem¥l v·bec v plánu. Samoz°ejm¥ teprve ukáºe, jak moc byly provedené zm¥ny úsp¥²né!
£as nám
4.5. ZÁV R
27
Obrázek 4.8: Vzhled e-shopu p°ed experimentem
28
KAPITOLA 4. EXPERIMENT S ONÍ KAMEROU
Obrázek 4.9: Vzhled e-shopu po úprav¥
Kapitola 5
Systém pro elektronické platby Internetový obchod, který nepodporuje jiné zp·soby platby neº klasicky dobírkou nebo bankovním p°evodem, je dnes out. Na trhu existuje celá °ada platebních systém·. Nejznám¥j²í z nich je ur£it¥ PayPal, dále MoneyBookers nebo PayPay. Vyjmenované platební systémy jsou ale zahrani£ní. Nejznám¥j²ím £eským platebním systémem je bezpochyby GoPay. Klasický platební systém funguje tak, ºe zákazník e-shopu vlastní ú£et na p°íslu²ném platebním systému. Aby mohl vyuºívat tento ú£et k placení, musí na n¥m mít uloºené pen¥ºní prost°edky. Obchodník (provozovatel e-shopu) musí mít moºnost platby p°es tento systém integrován do svého e-shopu.
Nejv¥t²í výhodou takových platebních systém·
je okamºité p°ijetí platby na rozdíl od bankovního p°evodu, kdy zákazník musí £ekat 1-3 pracovní dny, neº se £ástka p°ipí²e obchodníkovi na ú£et, a ten následn¥ teprv odesílá objednané zboºí.
5.1
GoPay
GoPay [13] je moderní platební prost°edek pro rychlé a bezpe£né platby na internetu. GoPay zaru£uje uºivatel·m pohodlí b¥ºných plateb po síti a obchodník·m jistotu okamºité platby za sluºby a zboºí v elektronické komerci. GoPay integruje dal²í platební systémy, takºe jeho portfolio nabízených zp·sob· plateb je opravdu velké. Na obrázku 5.1 je vid¥t postup v jednoduchých krocích, jak probíhá platba pro zákazníka mého e-shopu. P°ijaté pen¥ºní prost°edky (z r·zných platebních metod) pak obchodník eviduje na obchodním ú£tu GoPay, který je t°eba si u GoPay z°ídit.
Obrázek 5.1: Pr·b¥h platby p°es £eský platební systém GoPay
29
30
KAPITOLA 5. SYSTÉM PRO ELEKTRONICKÉ PLATBY
V krocích 3 a 4 je zákazník na webu GoPay, respektive ve webovém rozhraní jeho platební brány. Po potvrzení platby je zákazník p°esm¥rován zp¥t na e-shop. V administraci e-shopu je platba zárove¬ potvrzena, takºe obchodník m·ºe bez obav expedovat objednané zboºí. Platební systém
GoPay centralizuje platební metody tak, aby zákazníkovi m¥l na
moºnost vybrat si, jakým zp·sobem chce zaplatit. Kaºdý e-shop si tak m·ºe zvolit platební metody, které chce poskytovat svým zákazník·m. Do mého e-shopu jsem si vybral tyto zp·soby plateb:
GoPay pen¥ºenka - Takový zp·sob zvolí samoz°ejm¥ zákazník, který má p°ímo ú£et (GoPay pen¥ºenku) u GoPay. Jedná se o elektronickou variantu b¥ºné pen¥ºenky pro snadnou a rychlou úhradu drobných £ástek v prost°edí internetu.
Banka - Moºnost standardního bankovního p°evodu z libovolného bankovního ú£tu na obchodní ú£et s p°esn¥ de novaným zadáním platby.
Platební karty - Provoz platebních karet VISA, VISA Electron, MasterCard, Amex, JCB prost°ednictvím ov¥°eného systému 3D-Secure.
ePlatby - Platební systém pro bezhotovostní úhrady z b¥ºného ú£tu vedeného u Raieisenbank. Provoz zaji²´uje Raieisenbank a.s.
MojePlatba - Platební systém pro bezhotovostní úhrady z b¥ºného ú£tu vedeného u Komer£ní banky. Provoz zaji²´uje Komer£ní banka, a.s.
MoneyBookers - Elektronická pen¥ºenka pro celosv¥tové internetové platby a mezinárodní p°evody. Provoz zaji²´uje Moneybookers Ltd.
mPeníze - Platební systém pro bezhotovostní úhrady z b¥ºného ú£tu vedeného u mBank. Provoz zaji²´uje BRE Bank S.A.
GoPay dále nabízí platební metody
superCASH1 a Premium SMS2 , které jsou pro
m¥ ale zbyte£né a pro zákazníky nevýhodné. Na obrázcích 5.2, 5.3 a 5.4 je vid¥t, jak p°esn¥ probíhá platba v tomto platebním systému za pouºití
GoPay peneºenky, platby kartou nebo bankovním p°evodem p°es
Platební systém superCASH nabízí hotovostní zp·sob úhrady ceny prost°ednictvím terminál· spole£nosti
SAZKA a.s. a eské po²ty, s.p. Provoz zaji²´uje spole£nost Manum, s.r.o. 2
Online platby prost°ednictvím Premium SMS z mobilního telefonu.
5.1. GOPAY
31
Obrázek 5.2: Platba p°es GoPay pen¥ºenku
Obrázek 5.3: Platba kartou
32
KAPITOLA 5. SYSTÉM PRO ELEKTRONICKÉ PLATBY
Obrázek 5.4: Platba bankovním p°evodem
5.2
Integrace
5.2.1 Administrativní a právní úkony Na www stránkách GoPay jsem vyplnil poptávkový formulá°. Do n¥kolika dní m¥ kontaktoval jejich obchodník. Následn¥ mi p°edali podklady pro integraci na testovací instanci GoPay. Na základ¥ uzav°ení obchodní dohody bylo p°ipraveno testovací prost°edí pro zprovozn¥ní GoPay na e-shopu. Údaje o parametrech testovacího prost°edí mi byly p°edány e-mailem a SMS zprávou. V této fázi jsem provedl integraci do e-shopu dle pokyn·, viz. dále. Na základ¥ dokon£ení integrace provedl GoPay ov¥°ení implementace (testovací objednávkou) a kontrolu prezentace GoPay v rámci e-shopu (je povinné mít £lánek o platebním systému GoPay na stránkách e-shopu). Po provedení a otestování integrace jsem podepsal s GoPay smlouvu. Integrace byla zakon£ena p°edáním údaj· pot°ebných pro p°echod na provozní prost°edí.
5.2.2 Technické úkony Pro integraci je moºné pouºít p°ipravených API pro PHP, Javu, ASP.NET, ASP.Classic. Dále je moºné pouºít
platební moduly GoPay pro open-source °e²ení jako je PrestaShop,
Magento, Joomla nebo ZenCart.
5.2. INTEGRACE
33
Úplná integrace v PHP pomocí SOAP Poºadavky na programové prost°edí, pokud zvolíme integraci v PHP pomocí SOAP, jsou následující:
•
PHP (verze 5.1.2 a vy²²í)
•
modul soap
•
modul openssl (nastavená vlastnost allow_url_open = On)
•
modul mcrypt
•
modul mhash
Ukázka souboru pay.php z modulu GoPay znázor¬uje
zaplacení vytvo°ené objed-
návky pomocí t°ídy GopaySpecial a Gopay, která je zd¥d¥ná ze t°ídy PaymentModule implementované p°ímo v PrestaShopu (classes/PaymentModule.php).
1
include ( dirname (__FILE__) include ( dirname (__FILE__) include ( dirname (__FILE__)
.
' / . . / . . / c o n f i g / c o n f i g . i n c . php ' ) ;
.
' / g o p a y . php ' ) ;
.
' / g o p a y S p e c i a l . php ' ) ;
6 7
$errors =
8
$result
=
' ' ;
false ;
9 10 $ g o p a y = new Gopay ( ) ; 11 $ g o p a y S p e c i a l = new
GopaySpecial ( ) ;
12 13 //
parametry
zadane
v
konfiguraci
trim ( C o n f i g u r a t i o n : : g e t ( 'GOID ' ) ) ; $gopayKey = trim ( C o n f i g u r a t i o n : : g e t ( 'GOPAY_KEY ' ) ) ; $ f a i l e d U r l = trim ( C o n f i g u r a t i o n : : g e t ( 'GOPAY_FAILED_URL ' ) ) ; $ s u c c e s s U r l = trim ( C o n f i g u r a t i o n : : g e t ( 'GOPAY_SUCCESS_URL ' ) ) ; $ g o p a y B a s e U r l = trim ( C o n f i g u r a t i o n : : g e t ( 'GOPAY_BASE_URL ' ) ) ; $ h i s t o r y U r l = trim ( C o n f i g u r a t i o n : : g e t ( 'GOPAY_HISTORY_URL ' ) ) ;
14 $ g o I d = 15 16 17 18 19 20 21 //
redirect
param
22 $param = $_POST [ ' param ' ] ; 23 24 //
cart
z
parametru
25
$ c a r t I d = $_POST [ ' c a r t I d ' ] ;
26
$ c a r t = new
Cart ( $ c a r t I d ) ;
27 28 $ p a y m e n t C h a n n e l s = $ g o p a y S p e c i a l −>g e t P a y m e n t C h a n n e l s ($_POST [ ' methodGoPay ' ] , $_POST [ ' methodCardsA ' ] ,
$_POST [ ' methodCardsB ' ] ,
$_POST [ ' me th odM one ybo oke rs ' ] , methodMojeplatba ' ] ,
$_POST [ ' m e t h o d E p l a t b y ' ] ,
$_POST [ ' methodBank ' ] ) ; 29 30 //
castka
predavana
$_POST [ ' m e t h o d S u p e r c a s h ' ] ,
$_POST [ ' methodSms ' ] ,
validateOrder
31 $cartSummary = $ c a r t −>g e t S u m m a r y D e t a i l s ( ) ;
$_POST [ '
$_POST [ ' methodMpenize ' ] ,
34
KAPITOLA 5. SYSTÉM PRO ELEKTRONICKÉ PLATBY
32 $nonConvertedAmount = $cartSummary [ ' t o t a l _ p r i c e ' ] ; 33 34
if
( $ c a r t −>O r d e r E x i s t s ( ) )
{
$gopay −>g e t L ( ' a l r e a d y P a i d ' ) ;
35
$errors
.=
36
T o o l s : : r e d i r e c t L i n k ( " $ h i s t o r y U r l ? e r r o r s=$ e r r o r s " ) ;
37 } 38 39 //
ziskani
id
ceske
meny
40 $ c z k _ i d = C u r r e n c y : : g e t I d B y I s o C o d e ( 'CZK ' ) ; 41 42 //
overeni
43
( $ c z k _ i d ==
if
existence
' ')
ceske
meny
s
ISO CZK
{
$gopay −>g e t L ( ' c z k ' ) ;
44
$errors
45
T o o l s : : r e d i r e c t L i n k ( " $ h i s t o r y U r l ? e r r o r s=$ e r r o r s " ) ;
46 }
else
.=
{
47
//
48
$ c a r t −>i d _ c u r r e n c y =
49
$ c a r t −>s a v e ( ) ;
cart
v CZK
intval ( $ c z k _ i d ) ;
50 51
//
52
$gopay −>v a l i d a t e O r d e r ( $ c a r t −>i d , _PS_OS_GOPAY_,
vytvoreni
a
nacteni
nove
objednavky
$nonConvertedAmount ,
$gopay −>d i s p l a y N a m e ) ; 53
$ o r d e r I d = O r d e r : : g e t O r d e r B y C a r t I d ( $ c a r t −>i d ) ;
54
$ o r d e r = new
Order ( $ o r d e r I d ) ;
55 56
$ p ro d uc t Na m eC o nc a t = $ g o p a y S p e c i a l −>c o n c a t P r o d u c t s N a m e s ( $ o r d e r ) ;
57
$amount =
58 59
if
(
round ( $ o r d e r −>t o t a l _ p a i d ∗
isset ( $order ) )
100) ;
{
60
//
61
$ p a y m e n t S e s s i o n I d = GopaySoap : : c r e a t e E s h o p P a y m e n t (
vytvoreni
platby
62
$goId ,
63
$productNameConcat ,
64
$amount ,
65
$orderId ,
66
$successUrl ,
67
$failedUrl ,
68
$gopayKey ,
69
$paymentChannels
70
);
71
if
72
( $paymentSessionId > 0)
73
{
$ e n c r y p t e d S i g n a t u r e = GopayHelper : : e n c r y p t (
74
GopayHelper : : hash (
75
GopayHelper : : c o n c a t P a y m e n t S e s s i o n (
76
$goId ,
77
$paymentSessionId ,
78
$gopayKey
79
)
80
) ,
81 82
}
else
83
$errors
84 85 86
$gopayKey ) ; { .=
$gopay −>g e t L ( ' p a y m e n t C r e a t i o n F a i l e d ' ) ;
}
}
else
{
$errors
.=
$gopay −>g e t L ( ' u n d e f i n e d O r d e r F a u l t y S t a t e ' ) ;
5.2. INTEGRACE
87
35
}
88
if
89
(
90
empty ( $ e r r o r s ) ) { i f ( i s s e t ( $param ) )
91
{
T o o l s : : r e d i r e c t L i n k ( " $ g o p a y B a s e U r l ? s e s s i o n I n f o . p a y m e n t S e s s i o n I d= $ p a y m e n t S e s s i o n I d& s e s s i o n I n f o . e s h o p G o I d=$ g o I d& s e s s i o n I n f o .
92
}
else
93
e n c r y p t e d S i g n a t u r e=$ e n c r y p t e d S i g n a t u r e $ p a r a m " ) ; {
T o o l s : : r e d i r e c t L i n k ( " $ g o p a y B a s e U r l ? s e s s i o n I n f o . p a y m e n t S e s s i o n I d= $ p a y m e n t S e s s i o n I d& s e s s i o n I n f o . e s h o p G o I d=$ g o I d& s e s s i o n I n f o . e n c r y p t e d S i g n a t u r e=$ e n c r y p t e d S i g n a t u r e " ) ;
94
}
95
}
else
96
{
T o o l s : : r e d i r e c t L i n k ( " $ h i s t o r y U r l ? e r r o r s=$ e r r o r s " ) ;
97
}
98 } 99 ?>
scripts/gopay/pay.php
Následující ukázka souboru validation.php znázor¬uje
vyhodnocení objednávky po
návratu z platební brány GoPay, tedy kontrolu návratových hodnot a následnou zm¥nu stavu objednávky na Zaplaceno nebo Zru²eno.
1
include ( dirname (__FILE__) include ( dirname (__FILE__) include ( dirname (__FILE__)
.
' / . . / . . / c o n f i g / c o n f i g . i n c . php ' ) ;
.
' / g o p a y . php ' ) ;
.
' / g o p a y S p e c i a l . php ' ) ;
6 7
$errors =
' ' ;
8 $ g o p a y = new Gopay ( ) ; 9 $ g o p a y S p e c i a l = new
GopaySpecial ( ) ;
10 11 //
parametry
obsazene
v
redirectu
po
potvrzeni
platby
−
zruseni
platby
12 $ r e t u r n e d P a y m e n t S e s s i o n I d = $_GET [ ' p a y m e n t S e s s i o n I d ' ] ; 13 $ r e t u r n e d G o I d = $_GET [ ' e s h o p G o I d ' ] ; 14 $ r e t u r n e d O r d e r I d = $_GET [ ' v a r i a b l e S y m b o l ' ] ; 15 $ r e t u r n e d E n c r y p t e d S i g n a t u r e = $_GET [ ' e n c r y p t e d S i g n a t u r e ' ] ; 16 17 //
parametry
zadane
v
konfiguraci
trim ( C o n f i g u r a t i o n : : g e t ( 'GOID ' ) ) ; $gopayKey = trim ( C o n f i g u r a t i o n : : g e t ( 'GOPAY_KEY ' ) ) ; $ h i s t o r y U r l = trim ( C o n f i g u r a t i o n : : g e t ( 'GOPAY_HISTORY_URL ' ) ) ;
18 $ g o I d = 19 20 21
22 $ o r d e r = new 23 $amount = 24 25 26 27
if
Order ( $ r e t u r n e d O r d e r I d ) ;
round ( $ o r d e r −>t o t a l _ p a i d ∗
( $ o r d e r −>g e t C u r r e n t S t a t e ( )
if
(
i s s e t ( $ o r d e r −>i d )
100) ;
!= _PS_OS_PAYMENT_)
{
&& ( ( $ o r d e r −>g e t C u r r e n t S t a t e ( ) == _PS_OS_GOPAY_)
$ o r d e r −>g e t C u r r e n t S t a t e ( ) == _PS_OS_OUTOFSTOCK_) ) 28 29
{
$ p ro d uc t Na m eC o n ca t = $ g o p a y S p e c i a l −>c o n c a t P r o d u c t s N a m e s ( $ o r d e r ) ;
||
36
KAPITOLA 5. SYSTÉM PRO ELEKTRONICKÉ PLATBY
30
//
kontrola
if
31
validity
potvrzeni ,
parametru
zruseni
v
redirectu ,
$returnedGoId ,
33
$returnedPaymentSessionId ,
34
$returnedOrderId ,
35
$returnedEncryptedSignature ,
36
$goId ,
37
$ o r d e r −>i d ,
38
$gopayKey ) )
proti
podvrzeni
( GopayHelper : : c h e c k P a y m e n t I d e n t i t y (
32
39
opatreni
platby
{
40
//
41
$result
overeni
platby
u
Gopay
= GopaySoap : : isEshopPaymentDone (
42
$returnedPaymentSessionId ,
43
$goId ,
44
$ o r d e r −>i d ,
45
$amount ,
46
$productNameConcat ,
47
$gopayKey
48
);
49 50
$ r e s u l t E r r o r s = $ g o p a y S p e c i a l −>c h e c k H e l p e r R e s u l t ( $ r e s u l t ) ;
51
$errors
52
}
else
53
$errors
54
.=
$resultErrors ;
.=
$gopay −>g e t L ( ' f a u l t y P a y m e n t I d e n t i t y ' ) ;
{
}
55
}
else
56
{
$errors
57
.=
$gopay −>g e t L ( ' u n d e f i n e d O r d e r F a u l t y S t a t e ' ) ;
}
58
if
59
(
60
empty ( $ e r r o r s ) ) //
zmena
stavu
{ objednavky
61
$ h i s t o r y = new
62
$ h i s t o r y −>i d _ o r d e r =
OrderHistory () ;
63
$ h i s t o r y −>c h a n g e I d O r d e r S t a t e (
64
$ h i s t o r y −>a d d W i t h e m a i l ( ) ;
intval ( $ o r d e r −>i d ) ; intval (_PS_OS_PAYMENT_) , intval ( $ o r d e r −>
id ) ) ; 65
T o o l s : : r e d i r e c t L i n k ( " $ h i s t o r y U r l ? p a y m e n t S t a t e=d o n e " ) ;
66
}
else
67
{
T o o l s : : r e d i r e c t L i n k ( " $ h i s t o r y U r l ? e r r o r s=$ e r r o r s " ) ;
68
}
69 } 70
else
{
T o o l s : : r e d i r e c t L i n k ( " $ h i s t o r y U r l ? p a y m e n t S t a t e=d o n e " ) ;
71 } 72 ?>
scripts/gopay/validation.php
Nakonec jsem se ale rozhodl implementovat tento systém pomocí
modulu pro Presta-
shop, protoºe mi integrace p°ímo do zdrojových kód· mého e-shopu nefungovala tak, jak by správn¥ m¥la.
Kapitola 6
PPC reklamní systémy Je samoz°ejmé, ºe musím n¥jakým zp·sobem nasm¥rovat zákazníky na cestu, m·ºu °íct dokonce URL, která vede do mého e-shopu. E-shop bez náv²t¥vník· (potenciálních zákazník·) nem·ºe nikdy vyd¥lávat. Jednou z moºností jak to ud¥lat je reklama pomocí specializovaných reklamních systém· integrovaných na stránkách vyhledáva£·, tzv. patrné,
Pay Per Click systém·. Jak je z názvu
platíme pouze za proklik inzerátu, ne za jeho zobrazení. Výhodou PPC
reklamy je její plánovatelnost a m¥°itelnost. Na²e inzeráty jsou zobrazovány na námi zadaná klí£ová slova, v dobu, kdy ur£íme a jejich pozice ve vyhledáva£i je závislá na námi nastavené
maximální cen¥, kterou jsme za daný proklik ochotní zaplatit. V¥t²ina z nich dále zobrazuje základní statistiku zobrazení inzerát·, a to hlavn¥ tzv.
míry prokliku, coº je
po£et zobrazení inzerátu vyd¥lený po£tem proklik·. N¥které systémy nabízejí propracované moºnosti nastavení kampaní, jako jsou vylu£ovací slova, víceslovná spojení, p°esné shody, regionální a £asové cílení. Celosv¥tov¥ nejznám¥j²ím systémem (by´ nikoli nejstar²ím) je z°ejm¥ AdWords od spole£nosti Google. V esku byl prvním PPC systémem eTarget, který vznikl v kv¥tnu 2003. V roce 2006 rozjely své PPC systémy spole£nosti Centrum (pod názvem adFOX ) a Seznam (pod názvem SKlik ). Internetovou reklamu podle modelu PPC ale nabízí i mnoho dal²ích reklamních systém·. PPC reklamní systémy od Googlu a hlavn¥ od Seznamu jsem za£al vyuºívat zhruba m¥síc a p·l p°ed Vánoci v roce 2010. Z míry proklik· a v·bec ze statistik mého e-shopu bylo vid¥t, ºe to byl správný krok. Tato forma reklamy je dle mého názoru velmi d·leºitá, zejména v p°ípad¥, ºe s prodejem teprve za£ínáme. Umoº¬uje to
rychle zviditeln¥ní se za relativn¥
malé peníze. Existují i jiné moºnosti, respektive modely placení. Krom¥ platby za proklik je moºné za reklamu platit nap°íklad na základ¥ po£tu zobrazení inzerátu (PPV pay per view,
CPM cost per mille, CPT cost per thousand, CPI cost per impression ). Dal²í model je nancován pevnou cenou za zobrazení v daném £ase na daném míst¥ ( at rate ), ale i komplikovan¥j²ími modely, jako je platba za n¥jakou akci £i aº prodej uskute£n¥ný díky reklam¥ (CPA/PPA cost/pay per action,
CPS/PPS cost/pay per sale ).
37
38
KAPITOLA 6. PPC REKLAMNÍ SYSTÉMY
6.1
Google AdWords
Jak jsem jiº uvedl,
nejznám¥j²ím a nejpouºívan¥j²ím PPC reklamním systémem
v celosv¥tovém m¥°ítku je Google AdWords [1]. Inzeráty AdWords se zobrazují v horní £ásti vyhledávání fulltextu a v bo£ní £ásti. V horní £ásti jsou umíst¥ny v¥t²inou 1 aº 3 nejúsp¥²n¥j²í inzeráty, a to p°ímo nad výsledky vyhledávání. Uºivatel je tedy vidí d°ív neº klasické odkazy, viz. heatmapa 6.1 zobrazující, kam se nej£ast¥ji uºivatel dívá.
Obrázek 6.1: Heatmapa vyhledáva£e Google [19]
Jak jsem jiº psal, pozice inzerátu je ovlivn¥na maximální cenou za proklik. Pozici ale ovliv¬ují i jiné faktory. Nejd·leºit¥j²ím je rozhodn¥
relevance slova inzerátu s vyhledá-
vaným slovem. Výhodou systému AdWords je
nástroj pro m¥°ení konverzního pom¥ru. Ten se
dá pouºít i pro m¥°ení konverze i v ostatních systémech PPC a nebo i m¥°ení konverzí v e-mailové kampani. Webové rozhraní administrace reklamních kampaní je celkem robustní a podle mého názoru je pro za£ínající uºivatele nep°ehledné. Na druhou stranu je více variabilní neº nap°íklad administrace Skliku.
6.2. SEZNAM SKLIK
6.2
39
Seznam Sklik
Princip systému Sklik je stejný jako u Google AdWords, i pozice inzerát· jsou umíst¥ny na stejných místech ve vyhledávání jako inzeráty od Googlu. Hierarchie ú£tu je tvo°ena Kampan¥mi a Sestavami, které obsahují Klí£ová slova a Inzeráty. Díky této struktu°e m·ºeme pro lep²í p°ehlednost logicky £lenit reklamu. Ú£et m·ºe obsahovat neomezený po£et kampaní, sestav, klí£ových slov a inzerát·.
Obrázek 6.2: Webové rozhraní administrace reklamního systému SKlik
Na následujícím obrázku je ukázka, jak m·ºe vypadat takový inzerát. Titulek a popisek inzerátu podléhá p°ísným obsahovým pravidl·m (velká písmena, pouºití interpunk£ních znamének, názvy registrovaných obchodních zna£ek apod.) a je hlavn¥ omezen svojí délkou.
Obrázek 6.3: Vzorový inzerát Skliku
40
KAPITOLA 6. PPC REKLAMNÍ SYSTÉMY
Kapitola 7
Vyhledáva£e zboºí V minulé kapitole jsem zboºí z mého e-shopu propagoval pomocí placených reklamních systém·. Jde to ale i jinak a hlavn¥ zadarmo. Vyhledáva£e zboºí jsou dnes stále atraktivn¥j²ím nástrojem, který je nám nápomocen p°i nakupování zboºí p°es Internet. Je ur£en pro ty, kte°í mají v úmyslu n¥co zakoupit a
necht¥jí
prohledávat kaºdý e-shop zvlá²´. Vyhledáva£e porovnávají p°edev²ím ceny jednotlivých produkt· a pomáhají zákazníkovi najít zcela konkrétní produkt na jednotlivých e-shopech.
7.1
Princip vyhledáva£·
Nejv¥t²í zbraní t¥chto vyhledáva£· je moºnost porovnávat dané zboºí nejen podle ceny, ale také podle dostupnosti nebo zp·sobu platby. Novinkou posledních let je
hodnocení e-
shop· zákazníky na základ¥ kvality poskytnutých sluºeb. U e-shopu si zakoupím výrobek a následn¥ ohodnotím pozitiva a negativa nákupu u daného e-shopu. Tuto cestu za£al v £eském internetovém rybní£ku razit nap°íklad vyhledáva£ zboºí Heuréka [20]. Stále v¥t²í po£et lidí nakupuje práv¥ pomocí vyhledáva£· zboºí. Zvolí si zboºí, které cht¥jí zakoupit, p°ípadn¥ ho naleznou kdekoliv na Internetu. Následn¥ zamí°í na jejich oblíbený vyhledáva£ zboºí a zde porovnávají, v jakém e-shopu dané zboºí nakonec zakoupí. Nebudeme si nalhávat, ºe hlavní výhodou t¥chto vyhledáva£· je, ºe mají zákazníci
velmi jednoduchý
zp·sob jak nalézt dané zboºí s nejniº²í cenou. Problém ale nastává, kdyº se naleznou obchodníci, kte°í neustále hlídkují ceny a nastavují své ceny pokaºdé o n¥co málo niº²í neº má konkurence. T¥mto cenám se nakonec musí p°izp·sobovat i ostatní obchodníci, pokud cht¥jí své zboºí prodat. Vychytralý obchodník ale následn¥ znovu sníºí ceny. Takovým zp·sobem jdou ceny zboºí stále níº a níº... Ne vºdy tomu ale tak je. Na obrázku 7.1 je krásn¥ vid¥t, jakou
obranu proti t¥mto obchodník·m a obecn¥
proti vyhledáva£·m zboºí zvolili n¥které e-shopy.
perky.cz [34] je maloobchod a záro-
ve¬ velkoobchod, od kterého dal²í e-shopy nakupují. Tento e-shop poskytuje velkoobchodní prodej svého zboºí, zárove¬ ale svým zákazník·m, dal²ím prodejc·m, doslova
doporu£ené ceny.
41
nadiktuje
42
KAPITOLA 7. VYHLEDÁVAE ZBOÍ
Obrázek 7.1: Krásná ukázka kartelové dohody
astým jevem, který je moºné vid¥t u mnoha e-shop·, je to, ºe
nabízejí zboºí, které
nemají skladem, viz. také 7.1. Udávaná dostupnost je zde do týdne v e-shopu. Tyto e-shopy se zdají navenek jako e-shopy s velkým sortimentem zboºí, ale bohuºel opak je pravdou. Fotky produkt· mají od velkoobchodních dodavatel·, kte°í jim zárove¬ £asto ur£ují podmínky prodeje.
7.2
Jak to celé funguje?
Princip celého systému spo£ívá v tom, ºe si já jako obchodník, majitel e-shopu, vytvo°ím ú£et na daném vyhledáva£i zboºí a tam si zaregistruji sv·j e-shop, p°ípadn¥ doplním informace o e-shopu (výdejny, zp·soby platby, dodání apod.). Zárove¬ k registrovanému e-shopu ur£ím URL cestu ke
XML feedu zboºí, coº je soubor ve formátu XML, ve kterém jsou
obsaºeny ve²keré údaje o mých produktech pot°ebné pro vyhledáva£e. Nic pak uº nebrání v tom, aby se námi prodávané produkty za£aly zobrazovat ve vyhledávaní. Nicmén¥ v mnohých vyhledáva£ích je
moºné si navíc p°edplatit p°ednostní
výpisy. Zjednodu²en¥ °e£eno kdo víc zaplatí, ten má lep²í pozici ve vyhledávaní. Platba probíhá r·znými zp·soby. N¥které vyhledáva£e mají pau²ální platbu, jiné up°ednost¬ují platbu CPC (Cost Per Click ), coº je platba za klik. Znamená to, ºe zaplatím za kaºdého náv²t¥vníka, který klikne na produkt z na²eho e-shopu. Tato platba má výhodu v tom, ºe platím skute£n¥ jenom za konkrétní klienty, kte°í z vyhledáva£· p°ijdou na m·j e-shop. Dal²í vyhledáva£e zase poºadují místo platby umíst¥ní ikonky se zp¥tným odkazem na daném webu. Nejd·leºit¥j²ím prvkem systému je vý²e zmín¥ný XML feed. Ten je t°eba udrºovat v co
nejaktuáln¥j²ím stavu. Kdyº zm¥níme nap°íklad cenu u výrobku, ale zákazníkovi se
ve vyhledáva£i stále zobrazuje stará cena, není to ta nejlep²í v¥c. XML feed zboºí vypadá nej£ast¥ji jako následující ukázka.
7.2. JAK TO CELÉ FUNGUJE?
1
xml version=" 1 . 0 "
43
e n c o d i n g=" u t f −8" ?>
2 <SHOP> 3
<SHOPITEM>
4
P r o d u k t
5
P o p i s e k
6
h t t p : / /www . a v e b i j o u x . c z / p r o d u k t
7
h t t p : //www . a v e b i j o u x . c z / p r o d u k t
8
1 0 0 0
9
1 produktu
1
− 1. h t m l − 1. j p g
0
10
11
<SHOPITEM>
12
P r o d u k t
13
P o p i s e k
14
h t t p : //www . a v e b i j o u x . c z / p r o d u k t
15
h t t p : //www . a v e b i j o u x . c z / p r o d u k t
16
2 0 0 0
17 18
2 produktu
2
− 2. h t m l − 2. j p g
0
19
scripts/zbozi.xml
Vidíme, ºe hlavní element XML dokumentu <SHOP> obsahuje elementy <SHOPITEM>, kterých zde m·ºe být 0 aº N. Element <SHOPITEM> je ur£en jiº pro jednotlivé produkty. Tento element obsahuje dal²í elementy, které p°ímo popisují daný produkt:
- název produktu - popis produktu - URL produktu - URL obrázku produktu - cena (s daní) - datum dodání (0 nej£ast¥ji znamená skladem) stahuje XML feed produkt· v p°ibliºn¥ stejných £asových intervalech, nej£ast¥ji jednou £i dvakrát za den1 . Ve webovém rozhraní vyhleVyhledáva£ zboºí si z ur£ené cesty
dáva£e máme moºnosto kontrolovat, jestli nemáme v na²em feedu n¥jaké chyby, nap°íklad jsme poskytli ²patnou cestu k obrázku produktu. Jak jsem jiº psal, je d·leºité XML feed udrºovat v co nejaktuáln¥j²í podob¥. Je z°ejmé, ºe v obchod¥, který má po£et zboºí v tisících, bude t°eba n¥jakým zp·sobem
zautomatizovat
tento proces. Napsal jsem si proto modul (k nalezení v modules/zbozi ), jehoº spu²t¥ní mi zajistí vygenerování XML feed·. Tento modul, respektive p°ímo jeden daný skript, volám 1
Vyhledáva£e mají algoritmy, které ur£ují jak £asto stahovat XML feed z daného e-shopu. Záleºí, jak £asto
e-shop m¥ní své produkty, na jeho náv²t¥vnosti a na mnoha dal²ích faktorech
44
KAPITOLA 7. VYHLEDÁVAE ZBOÍ
2 jedenkrát za den v no£ních hodinách. Nastavení Cronu jsme provedl ve
pomocí Cronu
webovém rozhraní mého poskytovatel webhostingu, viz. kapitola Domény a webhosting.
1
class
4
FeedSeznam
public
5
extends
function
cFeed
global
$link ;
6
global
$id_lang ;
7
$output = "" ;
8
$feedpath = $feeddir
if
9 10
(
{
CreateFeed ( $products ,
.
$feeddir )
{
" / z b o z i . xml " ;
file_exists ( $ f e e d p a t h ) ) unlink ( $feedpath ) ;
11
$fp =
if
12
fopen ( $ f e e d p a t h
,
"w+" ) ;
( ! $fp )
echo " f a i l e d t o o p e n " . $ f e e d p a t h ; fputs ( $ f p , "\n " ) ; fputs ( $ f p , "<SHOP>\n " ) ; foreach ( $ p r o d u c t s AS $ p r o d u c t ) { i f ( $ t h i s −>i s A v a i l a b l e ( $ p r o d u c t ) ) { $ i m a g e = Image : : g e t I m a g e s ( intval ( $ i d _ l a n g ) , $ p r o d u c t [
13 14 15 16 17 18
'
id_product ' ] ) ;
substr ( $ p r o d u c t [
19
$description =
20
$ i t e m = " \ t<SHOPITEM>\n " ;
21
$ i t e m .=
" \ t \ t"
.
$ i t e m .=
" \ t \ t"
.
$ i t e m .=
.
htmlspecialchars ( $ d e s c r i p t i o n )
.
" \ t \ th t t p : / /www . a v e b i j o u x . c z "
.
htmlspecialchars (
$ l i n k −>g e t p r o d u c t L i n k ( $ p r o d u c t [ ' i d _ p r o d u c t ' ] , link_rewrite ' ] ,
if
24 25
$affiliate )
.
( $image [ 0 ] [ ' id_product ' ] )
img / p / "
.
])
.
.
$image [ 0 ] [ ' id_product ' ]
id_image ' ] ) $ i t e m .=
.
.
__PS_BASE_URI__ .
"−"
.
.
"
$image [ 0 ] [ '
"−w a t e r m a r k . j p g \n " ;
" \ t \ t"
.
htmlspecialchars ( $ p r o d u c t [
' price '
"\n " ;
27
$ i t e m .=
28
$ i t e m .= " \ t \n " ;
" \ t \ t0\n " ;
fputs ( $ f p ,
30
.
"\n " ;
htmlspecialchars (_PS_BASE_URL_
29
$product [ '
Tools : : getValue ( ' id_category ' ) )
$ i t e m .= " \ t \ th t t p : / /www . a v e b i j o u x . c z "
26
510) ;
' name ' ] )
"\n " ; 23
0,
htmlspecialchars ( $ p r o d u c t [
"\n " ; 22
' description_short ' ] ,
$item ) ;
}
31
}
fputs ( $ f p , "" ) ; fclose ( $fp ) ;
32 33 34
}
35 } 36 ?>
scripts/FeedSeznam.php
2
Cron je aplikace (p°esn¥ji proces spu²t¥ný na pozadí Unix-like systém·), jehoº úkolem je slouºit jakoºto
plánova£ úloh, který umoº¬uje opakované spou²t¥ní periodicky se opakujících proces· (nap°. práv¥ no£ní b¥hy dávkových úloh p°i hromadném zpracování dat, viz. generování mých XML feed·).
7.3. NEJZNÁM JÍ A NEJPOUÍVAN JÍ VYHLEDÁVAE
45
Následující ukázka znázor¬uje mnou napsaný skript v PHP, který p°ímo sestavuje XML feed pro vyhledáva£ od Seznamu -
Zboºí [37]. Spou²t¥ní tohoto a dal²ích skript·, které
vytvá°ejí XML feedy pro dal²í vyhledáva£e, zaji²´uje skript modules/zbozi/feeds.php.
7.3
Nejznám¥j²í a nejpouºívan¥j²í vyhledáva£e
A jaké tedy existují na trhu konkrétní vyhledáva£e zboºí? Jsou jimi nap°. www.zbozi.cz,
www.heureka.cz, p°ípadn¥ www.heureka.sk, www.srovnanicen.cz, www.hyperzbozi.cz, www.hledejceny.cz, www.naakup.cz a mnoho dal²ích. Na £eském i slovenském trhu je jich k nalezení opravdu velké mnoºství. Ale
pouze n¥kolik z nich je pouºíváno v¥t²inou lidí na £eském Internetu.
7.3.1 Zboºí Zboºí, respektive Zboºí.cz [37] je
vyhledáva£ £eské spole£nosti Seznam, která mimo
jiné provozuje jeden z nejv¥t²ích portál· na na²em trhu [31] spolu s fulltextovým vyhledáva£em. Uº proto je jejich vyhledáva£ zboºí nejznám¥j²í a z°ejm¥ nejpouºívan¥j²í mezi £eskými uºivateli.
Webové rozhraní vyhledáva£e je velmi jednoduché a mén¥ komplexní, neº je tomu u jiných konkuren£ních vyhledáva£·. Ale zde platí víc neº kdy jindy, ºe v jednoduchosti je síla, viz. 7.2. Máme zde na moºnost hledat v novém £i bazarovém zboºí, °adit vyhledané zboºí vzestupn¥ nebo sestupn¥ podle ceny, nebo rovnou up°esnit cenové rozmezí produktu.
Obrázek 7.2: Webové rozhraní Zboºí u vyhledaného produktu
46
KAPITOLA 7. VYHLEDÁVAE ZBOÍ
7.3.2 Heuréka Heuréka [20] je jeden z dal²ích vyhledáva£· zboºí, který je ²iroce oblíbený mezi uºivateli. Z mého pohledu je moºná lep²í neº práv¥ jmenovaný konkurent Zboºí, jelikoº máme moºnost vid¥t
hodnocení daného obchodu ze strany zákazník· a hlavn¥ nabízí mnohem více
moºností porovnání neº konkuren£ní Zboºí.
Obrázek 7.3: Webové rozhraní Heuréky u vyhledaného produktu
XML feed pro Heuréku je vícemén¥ shodný jako pro Zboºí. Lze p°idat je²t¥ dal²í elementy jako je nap°íklad , který usnad¬uje Heuréce za°azení produktu do jejich kategorií, nebo <MANUFACTURER> (výrobce/zna£ka), <EAN> (kód je pouºíván k ozna£ování jednotlivých druh· zboºí) a n¥kolik dal²ích element·.
Ov¥°eno zákazníky Aby Heuréka dokázala doporu£it nejlep²í obchod, musí zváºit mnohem více aspekt·, neº jen cenu. Kv·li odbourání strachu z on-line nakupování a pro zamezení ²patných zku²eností musí zohled¬ovat p°edev²ím
kvalitu sluºeb obchodu (od p°ehlednosti stránek, uvád¥ní
kompletní informace o cen¥, dodací lh·ty, °e²ení reklamací, ...). Proto Heuréka p°i²la se sluºbou
Ov¥°eno zákazníky [28].
Na internetu dnes existují moºnosti anonymn¥ hodnotit obchody - je to skv¥lý prostor pro po²pin¥ní konkurencí a pro sebechválu ze strany obchodu, bohuºel informa£ní hodnota je velmi malá. Proto se
Ov¥°eno zákazníky ptá opravdu jen uºivatel·, kte°í v obchod¥
nakoupili. 10 dní po provedení nákupu jim po²le cílený dotazník, který mají moºnost vyplnit. Cílem tedy je získat objektivní a ov¥°ený názor na kvalitu obchodu, který dá vyniknout kvalit¥ a minimalizuje fale²ná hodnocení. Pro nastavení sluºby dotazník spokojenosti je t°eba
pouºít unikátní klí£ pro kaºdý
e-shop zvlá²´. Unikátní klí£ je k nalezení v administraci obchod· pod názvem obchodu. Tento 32 znakový °et¥zec je pouºit p°i odesílání informací o objednávkách. Uloºení informace o provedené objednávce se provádí zavoláním následující adresy:
7.3. NEJZNÁM JÍ A NEJPOUÍVAN JÍ VYHLEDÁVAE
47
http://www.heureka.cz/direct/dotaznik/objednavka.php?id=idobchodu [email protected]&produkt[]=produkt1&produkt[]=produkt2 kde id je unikátní klí£ e-shopu, email je email zákazníka, produkt[] = název objednaného produktu (pokud zákazník objednal více produkt·, je moºné parametr produkt[] zadat vícenásobn¥). V²echny uvedené parametry mimo produkt[] jsou povinné. Jestliºe jsou v²echny zadané parametry v po°ádku, skript vrátí °et¥zec ok, v opa£ném p°ípad¥ vypí²e chybovou hlá²ku. Do mého e-shopu jsem sluºbu Ov¥°eno zákazníky implementoval tak, ºe vý²e danou
URL volám ve fázi potvrzení objednávky. Následující skript jsem tedy musel vloºit do funkce validateOrder t°ídy PaymentModule (classes/PaymentModule.php ). Tento skript vyuºívá t°ídy HeurekaOvereno, která je ke staºení p°ímo v administraci e-shopu na Heuréce. 1 require_once 2 try
(
dirname (__FILE__) .
' . . / H e u r e k a O v e r e n o . php ' ) ;
{ H e u r e k a O v e r e n o ( ' ∗∗∗ ' ) ;
3
$ o v e r e n o = new
4
$ o v e r e n o −>s e t E m a i l ( $ c u s t o m e r −>e m a i l ) ;
foreach
5
( $products
AS $ p r o d u c t )
{
$ o v e r e n o −>a d d P r o d u c t ( $ p r o d u c t [ ' name ' ] ) ;
6 7
} $ o v e r e n o −>s e n d ( ) ;
8 9 } 10
catch
( Exception
print
$e )
{
$e −>g e t M e s s a g e ( ) ;
11 }
scripts/OverenoZakazniky.php
Po správném provedení implementace, tedy aby se p°i kaºdé nové objednávce zavolal daný skript na Heuréce, mi do týdne od první takové testovací objednávky Heuréka zaslala smlouvy.
Po podepsání smluv ob¥ma stranami do²lo ke spu²t¥ní ostré verze. Od té
doby uº je jenom otázkou £asu, respektive co nejv¥t²ího po£tu kladných hodnocení ze strany mých zákazník·, aby mi Heuréka ud¥lila
Certi kát Ov¥°eno zákazníky, viz. obrázek 7.4.
Obrázek 7.4: Logo certi kátu Ov¥°eno zákaníky
48
KAPITOLA 7. VYHLEDÁVAE ZBOÍ
Kapitola 8
Linkbuilding aneb budování zp¥tných odkaz· V této kapitole bych rád v krátkosti p°iblíºil význam budování zp¥tných odkaz· na pozice webu ve vyhledáva£ích. Uº v po£átcích realizace mého e-shopu jsem v¥d¥l o zp¥tných odkazech. Bohuºel jsem jim nep°ikládal takovou váhu, jakou si doopravdy zaslouºí. Nyní uº mám jasno v tom, ºe zp¥tné odkazy jsou jeden z nejd·leºit¥j²ích, nebál bych se °íct i
nejd·leºit¥j²í z faktor·,
který ovliv¬uje pozice webu. Z více neº p·lro£ního sledování pozice mého e-shopu a hlavn¥ sledování pozic konkuren£ních web· v závislosti na zp¥tných odkazech jsem si tento fakt potvrdil.
Zp¥tné odkazy
zásadn¥ ovliv¬ují pozice webu, zejména algoritmus fulltextového vyhledáva£e od Seznamu zp¥tné odkazy zohled¬uje mnohem více neº konkuren£ní vyhledáva£ Google. Ten dává zp¥tným odkaz·m mnohem men²í váhu. Na rozdíl od Seznamu ale zase zohled¬uje star²í weby p°ed nov¥j²ími, respektive domény zaregistrované d°íve. Nejsnáze se základní zp¥tné odkazy získávají v katalozích. Sta£í si vyhlédnout tematickou stránku n¥jakého katalogu a zaregistrovat do ní ru£n¥ URL a popisek stránky. ím více registrací v r·zných katalozích, tím lépe. Jakmile ale nemá vyhlédnutá stránka katalogu PageRank alespo¬ 3, je otázka, zda má cenu mít na takové stránce odkaz. Dobrý nápad je oslovovat sp°ízn¥né weby se ºádostí o vým¥nu odkaz·.
ím mén¥ je na zdrojové stránce
odkaz·, tím je odkaz hodnotn¥j²í.
8.1
PageRank
Celá tematika zp¥tných odkaz· úzce souvisí s pojmem rank webu, coº je
£íslo, které
vyhledáva£ p°i°azuje ke kaºdé stránce (p°esn¥ji °e£eno ke kaºdému URL). Vyjad°uje n¥co jako v¥rohodnost nebo d·leºitost stránky.
1
Google má sv·j rank nazvaný PageRank . N¥kdy se pí²e zvlá²´ jako Page Rank a zkracuje se do zkratky PR. Pagerank v klasickém pojetí dosahuje hodnot od nuly do jedné. 1
Jeden ze zakladatel· Google se jmenuji Lawrence Page. P°ízna£né pro £lov¥ka, který se zabývá celý sv·j
Google si PageRank po£ítá (zjednodu²en¥ °e£eno) podle toho, kolik a jak d·leºitých stránek
2
na tu po£ítanou stránku odkazuje. Existuje na to zjednodu²ený vzorec , viz. 8.1. PageRank stránky A ozna£ím jako PR(A). Vypo£ítá se z PageRank· stránek, které na ni odkazují. To jsou stránky B, C, D, ...
Obrázek 8.1: Zjednodu²ený vzorec pro výpo£et PageRanku
kde d je zeslabující faktor (nastavený pravd¥podobn¥ na hodnotu 0,85), N je celkový po£et zaindexovaných stránek, L(X) je po£et odkaz· vedoucích ze stránky X. Jako vstupní hodnoty PR(X) se berou hodnoty PageRanku stránek z minulé iterace výpo£tu. Vzore£ek po n¥kolika iteracích dob°e konverguje (tím lépe, £ím je niº²í d). Hodnoty PageRanku v²ech stránek se pohybují t¥sn¥ nad nulou. PageRank je veli£ina skalární, tedy
pro kaºdou stránku jde o jediné £íslo.
8.2
Analýza konkurence z hlediska po£tu zp¥tných odkaz·
Na následujícím obrázku 8.2 je tabulka, ve které jsem se pokusil o
analýzu konku-
rence z hlediska po£tu odkazujících domén a hlavn¥ po£tu zp¥tných odkaz· z nich. V²echny zde uvedené weby se zobrazují na 1. a 2. stránce vyhledávání na Googlu a Seznamu na klí£ové slovo biºuterie, které je pro m¥ de facto nejd·leºit¥j²í. V²imn¥te si doslova
explo-
zivního nár·stu zp¥tných odkaz· mého webu (www.avebijoux.cz), který je d·sledkem mého
týdenního linkbuildingu. Za týden jsme díky tomu ve vyhledáva£i Seznam na klí£ové
slovo biºuterie
posko£ili z 44. pozice na 5. pozici, tedy na první stranu!
B¥hem pár dní jsem vym¥nil velký po£et odkaz· s r·znými weby.
Nejv¥t²í váhu mají
zp¥tné odkazy umíst¥né na hlavních stránkách. Nap°íklad odkaz, který umístí spolupracující web do pati£ky svých stránek se zobrazuje na kaºdé stránce daného webu, takºe daná doména generuje mnohem více odkaz· na m·j web, neº kdyº p°idám odkaz do sekce P°átelské weby nebo Partne°i, jak m·ºeme £asto vid¥t na r·zných stránkách. Pozor si musíme dát na vychytralé webmastery spolupracujících web·, kte°í
pozm¥ní atributem
rel
s hodnotou
ná² odkaz
nofollow , viz. následující ukázka takového odkazu.
Tím daný odkaz dává vyhledáva£i, ºe ho nemá brát v potaz, odkaz tedy
Obrázek 8.3: Statistika hledanosti slova biºuterie na Seznamu [3]
Kapitola 9
Záv¥r Tato bakalá°ská práce pro m¥ byla velikým p°ínosem. Díky této práci jsem se dostal i k témat·m, které jsou mimo rámec mnou studovaného oboru. M¥l jsem moºnost zdokonalit se v pouºitých technologiích, a to hlavn¥ v oblasti tvorby vzhledu pomocí kaskádových styl·, a zárove¬ jsem vyuºil moºností, které mi poskytly r·zné p°edm¥ty. Nap°íklad díky p°edm¥tu Marketingový výzkum jsem m¥l moºnost vyuºít o£ní kameru na otestování vhledu e-shopu.
9.1
Zhodnocení projektu
Uºivatelské rozhraní Podle mého názoru se mi poda°ilo vytvo°it vzhled, respektive uºivatelské rozhraní, které je jednoduché, p°ehledné a je vhodné pro e-shop s daným sortimentem zboºí. Vzhled je kompatibilní ve v²ech standardních prohlíºe£ích jako je Firefox, Chrome, Opera, Internet Explorer, a to dokonce i v Internet Exploreru verze 6. Testováním statického webu pomocí o£ní kamery jsem narazil na zásadní problém, a to nepom¥r textu v·£i obrázk·m produkt· zejména na hlavní stran¥ e-shopu. Vyhledáva£e pot°ebují text, zákazníci pot°ebují hlavn¥ fotky produkt·. Tento problém jsem na²t¥stí jiº vy°e²il rozd¥lením stránky na dv¥ opticky odli²né sekce. Následn¥ jsem dotazníkovým ²et°ením zjistil, ºe si z obrázk· pouºitých v pr·b¥hu experimentu v¥t²ina respondent· nebyla schopna vybavit název e-shopu, p°estoºe se ve snímcích objevoval n¥kolikrát. Bylo tedy nutné zm¥nit vzhled loga (názvu e-shopu) a hlavn¥ domény. Av²ak do zm¥ny doménového jména jsem se nepustil. Je t°eba více prostudovat následky zm¥ny domén, aby to nezp·sobilo nap°íklad ztrátu pozic získaných ve vyhledáva£ích.
Prezentace e-shopu Poda°ilo se mi zprovoznit reklamní kampan¥ v systémech Google AdWords a Seznam Sklik bez v¥t²ích problém·. Narazil jsem akorát na problém exportu kampaní z d·vodu urychlení vytvá°ení a zm¥ny inzerát· z Skliku do AdWords a opa£n¥, coº se mi nepoda°ilo ºádným elegantním zp·sobem vy°e²it.
53
54
KAPITOLA 9. ZÁV R
Úsp¥²n¥ jsem napsal modul pro PrestaShop, který se stará o vytvá°ení XML feed· pro vyhledáva£e zboºí jako je Zboºí, Heuréka a Hyperzboºí. XML feedy jsou aktualizovány jednou denn¥ v no£ních hodinách, takºe tyto vyhledáva£e mají neustále p°ístup k aktuálním informacím o produktech. Integrace certi kátu Ov¥°eno zákazníky od Heuréky se taktéº zda°ila, proces certi kování je jiº spu²t¥n.
Umíst¥ní ve vyhledáva£ích Nejd·leºit¥j²í pro elektronický obchod je být dob°e vyhledatelný, tedy zobrazovat se na co nejvy²²ích pozicích na klí£ová slova spjatá s p°edm¥tem podnikání. Jak jsem jiº psal v kapitole o zp¥tných odkazech, poda°ilo se mi dosáhnout úsp¥chu v umíst¥ní mého webu ve výsledcích vyhledávání na Seznamu, kdy jsem b¥hem jednoho týdne za pomocí linkbuildingu posunul web ze 46. pozice na 5. pozici ve vyhledávání klí£ového slova biºuterie. Po£et zp¥tných odkaz· vzrostl za týden z 285 na 11 755. Potvrdilo se mi, ºe algoritmus pro hodnocení web· vyhledáva£em od Seznamu je velice ovlivnitelný práv¥ po£tem odkazujících domén, respektive zp¥tných odkaz· z nich. Samoz°ejm¥ záleºí také na hodnot¥ takového zp¥tného odkazu. Stále ale platí £ím více, tím lépe. Sta£í se podívat na po£et zp¥tných odkaz· web·, které jsou na prvních stránkách ve vyhledávání. Jsou to práv¥ ty weby, které mají nejv¥t²í po£et zp¥tných odkaz·. P°edchozí tvrzení nem·ºu ale uplatnit pro vyhledáva£ Google, jelikoº tam se zm¥na v pozici na dané klí£ové slovo neprojevila tak zásadn¥. Tento fakt chci podrobit v budoucnu dal²ímu zkoumání.
Ostatní V pr·b¥hu projektu jsem se seznámil s mnoha nástroji, bez kterých si jiº vývoj webu nedokáºu ani p°edstavit. Byly to hlavn¥ nástroje slouºící k analýze z hlediska SEO. Díky nim jsem pronikl mnohem hloub¥ji do problematiky optimalizace web· pro vyhledáva£e. Výsledky t¥chto optimalizací se promítli zcela jist¥ také na ovlivn¥ní pozic ve vyhledáva£ích.
9.2
Moºnosti pokra£ování
Vzhledem k tomu, ºe aplikace je jiº v provozu a je výd¥le£ná, je jasné, ºe má cenu se zabývat jejím dal²ím vývojem a zdokonalováním. Dal²í vývoj vidím ve snaze sledovat nové technologie a ty vhodné integrovat, p°ípadn¥ implementovat. Zárove¬ je t°eba stále optimalizovat a vylep²ovat stávající aplikaci tak, aby byla pro uºivatele je²t¥ p°ív¥tiv¥j²í a pouºiteln¥j²í. Je jasné, ºe jediným smyslem takového projektu je produkovat zisk, na druhou stranu, i kdyby nem¥l mít tento projekt dlouhého trvání, jeho vývojem jsem m¥l moºnost nau£it se spoustu nových v¥cí z r·zných obor· a zdokonalit se v t¥ch stávajících, takºe jiº te¤ mi tato práce byla p°ínosem.
P°íloha A
Uºite£né nástroje O web se musí bedliv¥ pe£ovat a stále se snaºit posouvat ho dál. Sledovat nové technologie a ty vhodné integrovat je správné. Ale optimalizovat a zlep²ovat to stávající, to je, o£ tu b¥ºí. Existuje plno nástroj·, které nám s diagnostikou a optimalizací web· pom·ºou. Vývoj webu má n¥kolik fází, mezi které pat°í návrh, následuje implementace a v¥t²inou kone£nou fází je lad¥ní. A£ m·ºe poslední fáze na první pohled p·sobit relativn¥ banáln¥ a stále se najde °ada lidí, kte°í ji prost¥ podce¬ují jedná se £asto o proces tém¥° nejzdlouhav¥j²í a moºná také nejpracn¥j²í. Nástroje, které si zde chci p°edstavit, budou práv¥ k této t°etí £ásti sm¥°ovat p°edev²ím a m¥ly by tak nabídnout dostate£ný prostor pro to, aby i záv¥re£ná práce na kontrole a drobných úpravách webu byla pokud moºno co nejrychlej²í a nejlep²í.
A.1
Google Webmasters Tools
Google Webmasters Tools [18] aneb Nástroje pro webmastery Google poskytuje informace o viditelnosti va²ich stránek ve vyhledáva£i Google a jejich diagnostiku tím, ºe mu sami poskytneme moºnost prohlédnout na²e stránky. Abychom mohli tuto sluºbu vyuºívat, je t°eba mít samoz°ejm¥ ú£et u Google. Pak se do rozhraní tohoto nástroje jednodu²e p°ihlásíme. Abychom mohli získávat informace o n¥jaké stránce, musíme ji v rozhraní zaregistrovat. Zárove¬ musíme n¥jakým zp·sobem nechat Google ov¥°it, ºe tyto stránky jsou opravdu na²e. Kdyº budeme v rozhraní p°idávat nový web, nabídne nám Google sám, jak si p°edstavujeme ov¥°ení. Jedna cesta je, aby kaºdá stránka m¥la v hlavi£ce p°íslu²ný meta tag.
meta name=" g o o g l e − s i t e − v e r i f i c a t i o n " content=" ∗∗∗ "
1 <
/>
scripts/gwebmasterstools/script.html
55
56
PÍLOHA A. UITENÉ NÁSTROJE
Dal²ím zp·sobem je nahrát si speciální HTML soubor, který Google nabídne ke staºení, do ko°enového adresá°e webu. Posledním zp·sob je mít jiº stránky ov¥°eny p°es sluºbu Google
Analytics [? ]. Tuto moºnost lze vyuºít v p°ípad¥, ºe va²e stránky jiº mají m¥°icí kód sluºby
1
Google Analytics, který pouºívá asynchronní fragment . V kaºdé námi registrované stránce máme moºnost zjistit vý²e zmín¥né údaje. Tyto jsou rozd¥leny do £ty°ech kategorií. V kaºdé kategorii se zabývám pouze t¥mi nástroji, které stojí za zmínku a jsou obecn¥ uºite£né.
A.1.1 Kon gurace stránek V sekci Kon gurace stránek lze nastavit soubor robots.txt, ze kterého v¥t²ina vyhledáva-
2
cích robot· £erpá informace . Samoz°ejm¥ si tento soubor m·ºeme vytvo°it sami a vloºit ho do ko°enového adresá°e na²eho webu. D·leºitým souborem je taktéº soubor sitemap.xml, ve kterém °íkáme Googlebotu, jaké stránky chceme indexovat (pokud na n¥ totiº nenarazil) a zárove¬ jak £asto si p°edstavujeme, ºe by danou stránku m¥l robot nav²t¥vovat. Stejn¥ jako soubor robots.txt si ho m·ºeme vytvo°it sami, je zde ale daná p°esná de nice, jak má tento XML soubor vypadat.
A.1.2 Va²e stránky na webu Sekce Va²e stránky na webu obsahuje hlavn¥ statistiky o vyhledávaných dotazech (po£et dotaz·, trendy vyhledávaní), ºeb°í£ek klí£ových slov, viz. A.1., nebo nap°íklad p°ehled stránek, které odkazují na ná² web.
Obrázek A.1: eb°í£ek klí£ových slov mého e-shopu
1
Asynchronní verze Google Analytics mnohem mén¥ zat¥ºuje zdroje p°i na£ítání webu.
2
Lze v n¥m nap°íklad nastavit, které stránky nechceme indexovat, nap°íklad vloºením °ádku:
Disallow: /nase-stranka.html.
A.1. GOOGLE WEBMASTERS TOOLS
57
A.1.3 Diagnostika V sekci Diagnostika nás Google m·ºe upozornit, zda se na na²ich stránkách nenalézá
3
n¥jaký malware . Google nám zde poskytuje také moºnost vyzkou²et si, jak jeho vyhledávací robot vidí na²i stránku a také statistiky procházení na²ich stránek Google robotem viz. A.2.
Nejd·leºit¥j²ím bodem Diagnostiky je sekce HTML - návrhy a Chyby procházení, kde
4
nám Google dává moºnost vid¥t, které stránky nenalezl, p°estoºe na n¥ existují odkazy . A zárove¬ nám v sekci HTML - návrhy dává doporu£ení k obsahu na²ich stránek, kterých bychom se m¥li drºet, viz. obrázek A.3. Nem¥li bychom mít na webu totiº stránky, které mají duplicitní obsah, nap°. titulek stránky by m¥l být opravdu jedine£ný.
3
Malware je obecn¥ software, který má za cíl ²kodit.
4
U e-shop· obecn¥ se tohle d¥je £asto, jelikoº n¥které produkty nejsou skladem, tak se stránky s t¥mito
produkty ani nezobrazují.
58
PÍLOHA A. UITENÉ NÁSTROJE
Obrázek A.3: Návrhy ze strany Googlu k obsahu mého e-shopu
A.1.4 Laborato° Google V této sekci je moºnost zjistit, jak jsou na tom na²e stránky s rychlostí na£ítání v pom¥ru v·£i ostatním stránkám, které má Google povolení m¥°it. Na grafu A.4 je vid¥t, jak si stojí m·j e-shop v porovnání s ostatními stránkami. Bohuºel tyto údaje jsou je²t¥ p°ed optimalizacemi, které jsem provád¥l aº v pozd¥j²í dob¥.
Obrázek A.4: Graf s výkonností mého e-shopu
A.2. GOOGLE SPEED TRACER
A.2
59
Google Speed Tracer
Speed Tracer [17] je roz²í°ení pro prohlíºe£ Google Chrome5 , pomocí kterého lze ur£it a opravit problémy s výkonem webových aplikací. Toto roz²í°ení zobrazí metriky nam¥°ené v bodech instrumentace na nízké úrovni uvnit° prohlíºe£e a analyzuje je za b¥hu aplikace. Pomocí roz²í°ení Speed Tracer je moºné získat lep²í p°ehled o tom, která £ást webové aplikace vyºaduje pro svou práci více £asu.
Za pomoci Speed Traceru je moºné ud¥lat si obrázek o tom, kde se na²e aplikace neobvykle zdrºuje. To zahrnuje problémy jako je parsování a vykonávání JavaScriptu £i problémy s
6
7
layoutem , CSS styly, DOM , nadm¥rné zatíºení sí´ových zdroj·, chyby ve vykreslování atd.
Speed Tracer analyzuje sledovanou webovou stránku a v souhrnném reportu zobrazí informace o potenciálních problémech (tzv. hints). Ty jsou rozd¥leny dle závaºnosti podle barev: zelená (informational), oranºová (warning) a £ervená (critical).
Záloºka Sluggishness, doslova nete£nost, indikuje na £asové ose, do jaké míry je prohlíºe£ schopen reagovat na akce ze strany uºivatele. Vrcholy v grafu znamenají, ºe v daný £asový úsek prohlíºe£ není schopen reagovat na uºivatelovy akce, lépe °e£eno prohlíºe£ zamrzl.
Obrázek A.5: Události
5
Roz²í°ení funguje pouze ve vývojá°ské verzi prohlíºe£e (Google Chrome Developer Channel) a zárove¬
vyºaduje spustit prohlíºe£ s parametrem - -enable-extension-timeline-api. 6
rozvrºení prvk· na stránce
7
Document Object Model
60
PÍLOHA A. UITENÉ NÁSTROJE
Záloºka Network indikuje, jak moc a kdy jsou zat¥ºovány sí´ové zdroje. Graf zobrazuje po£et a vytíºení sí´ových zdroj· v daný £asový úsek.
Obrázek A.6: Zatíºení sí´ových zdroj·
Obrázek A.7: Souhrnný report
A.3. GOOGLE PAGE SPEED
A.3
61
Google Page Speed
Podobnou aplikací jako je Google Speed Tracer je i Page Speed [15], taktéº analytický nástroj pro webové vývojá°e od spole£nosti Google. Lze ho nainstalovat jako roz²í°ení do prohlíºe£· Google Chrome a Mozilla Firefox, anebo pouºít aplikaci dostupnou p°ímo online. Doporu£ení jsou rozd¥leny barevn¥ jako u Speed Traceru (£ervená, oranºová, zelená). ím niº²í hodnocení, tím je více prostoru pro provedení optimalizací. Ideální skóre je tedy 100/100. Na následujícím obrázku je vid¥t výstup auditu, který provedl Page Speed pro m·j eshop.
Obrázek A.8: Výsledek auditu
62
PÍLOHA A. UITENÉ NÁSTROJE
Budu se v¥novat pouze doporu£ením s vysokou a st°ední prioritou:
A.3.1 Doporu£ení s vysokou prioritou Leverage browser caching Nastavení data expirace nebo maximální délky ºivota v HTTP hlavi£ce statickým zdroj·m (jakékoliv obrázky, Flash animace, CSS styly, JavaScript) °ekne prohlíºe£i, aby na£etl tyto zdroje z lokálního disku uloºené z p°edchozího staºení, neº aby je znovu stahoval ze sít¥.
8
e²ením je p°idání kódu do souboru .htaccess , který nastaví t¥mto statickým zdroj·m
9
del²í expirace . Nap°íklad tedy:
1
Header
" \ . ( i c o | p d f | f l v | j p g | j p e g | png | g i f | s w f | c s s | j s ) \ $ ">
set
Expires
"Wed ,
4 May 2 0 1 1
2 0 : 0 0 : 0 0 GMT"
3
scripts/gpagespeed/script.html
Optimize images Doporu£ení optimalizovat obrázky pomocí bezztrátové komprese. Výhodou je, ºe tu optimalizaci Page Speed ud¥lá za nás. Ukládá totiº rovnou optima-
10 .
lizované soubory do ur£ené sloºky, ty tedy m·ºeme rovnou pouºít
A.3.2 Doporu£ení se st°ední prioritou Combine images into CSS sprites Rad¥ji neº mít plno malých obrázk· je výhodn¥j²í mít pár obrázk·, které obsahují tyto malé obrázky. To je princip CSS Sprites [9]. Hodn¥ malých soubor· generuje totiº p°íli² HTTP poºadavk·, coº znamená zbyte£n¥ velkou reºii.
Inline Small JavaScript Zdrojové soubory JavaScriptu, které obsahují málo kódu, je lep²í rovnou vloºit do stránky neº je na£ítat extern¥. Je to rychlej²í neº posílat samostatný HTTP poºadavek o soubor, ve kterém skoro nic není (podobn¥ jako u p°edchozího doporu£ení)!
Minify JavaScript Zmen²ení JavaScript kódu znamená odstran¥ní v²ech nepot°ebných znak· ze zdrojového kódu bez zm¥ny funk£nosti. Page Speed to ud¥lá za nás jako u optimalizace obrázk·, tedy uloºí tyto zmen²ené zdrojové soubory do ur£ené sloºky. M·ºeme ale také nap°íklad vyuºít n¥jaký on-line nástroj [24].
8
Soubor .htaccess je kon gura£ní soubor serveru.
9
V na²em p°ípad¥ se hodnocení zvý²ilo ze 67 na 80 ze 100.
10
Zm¥na u²et°ila 352 kB a hodnocení se zvý²ilo z 80 na 88 ze 100.
A.3. GOOGLE PAGE SPEED
Aº na vyuºití CSS Sprites
63
11 jsem v²ech doporu£ení vysoké a st°ední priority uposlechl
a pokusil se je napravit. Ostatní doporu£ení by dle mého názoru nep°inesly ºádný viditelný uºitek.
Obrázek A.9: Výsledek auditu
11
Tuto zm¥nu plánuji v budoucnu, nyní by nep°inesla tolik ovoce :-)
64
PÍLOHA A. UITENÉ NÁSTROJE
A.4
SEO-servis.cz
Na webu SEO-servis [30] lze provést jednoduchou analýzu webových stránek se zam¥°ením na SEO12 . Tato analýza není rozhodn¥ ur£ena profesionál·m, ale lidem se základními znalostmi v oblasti web·. Jednoduchou formou a hlavn¥ zdarma lze provést analýzu zejména v t¥chto oblastech:
Zdrojový kód - Analýza zdrojového kódu webové stránky z hlediska správnosti, sémantiky a obsahu. ím vy²²í £íslo vyjde, tím lépe (ideáln¥ 100).
Síla webu - Obsahuje p°edchozí analýzu a zárove¬ kalkulace zp¥tných odkaz· a jejich potenciálu, náv²t¥vnosti a pozic ve vyhledáva£ích a aktuální Google Pagerank, S-rank a Alexa rank. Hodnocení je také od 0 do 100.
Vyhledáva£e - Informace o umíst¥ní webu ve vyhledáva£ích na zadanou frázi, po£et zp¥tných odkaz· a zaindexovaných stránek.
Obrázek A.10: Analýza zdrojového kódu
A.4.1 Zdrojový kód Z analýzy zdrojového kódu mého e-shopu je vid¥t, ºe zdrojový kód lehce p°ekra£uje optimální velikost. Nikde není samoz°ejm¥ stanovena optimální velikost kódu, zde je to pouze 12
Search Engine Optimalization je metodika vytvá°ení a upravování webových stránek takovým zp·sobem,
aby jejich forma a obsah byly vhodné pro automatizované zpracování internetovými vyhledáva£i.
A.4. SEO-SERVIS.CZ
65
subjektivní názor autora této analýzy. E-shop byl ohodnocen známkou 97/100.
Obrázek A.11: Analýza zdrojového kódu
Sémantické zvýraz¬ování textu znamená, ºe pro zvýrazn¥ní ur£itého obsahu pouºijeme
13 .
ty správné elementy 13
Nap°íklad místo elementu
(tu£né písmo) pouºít
<strong>
(zd·razn¥ní) a pro tento element
nastavit tu£né písmo aº pomocí CSS stylu, tedy odd¥lit vzhled od obsahu/formy.
66
PÍLOHA A. UITENÉ NÁSTROJE
U obsahové £ásti je zejména d·leºité, aby nadpisy byly správn¥ strukturované, tedy aby se nestalo nap°íklad, ºe bude nadpis h3 mezi nadpisy h1 a h2, nebo aby se vyskytoval nadpis h1 na stránce pouze jednou!
A.4.2 Síla webu Ve výsledku této analýzy je vid¥t výsledek p°edchozí analýzy zdrojového kódu (97/100), která je zahrnuta do celkového hodnocení. Z obrázku je vid¥t, ºe je Pagerank od Googlu
14 , coº je samoz°ejm¥ ²patn¥, zatímco S-rank od Seznamu dosahuje hodnoty 5/10.
nulový
Pozice na Seznamu a na Googlu je zji²´¥ní, na jaké pozici se vyskytuje daná stránka po zadání prvních £ty°ech slov titulku webové stránky do daného vyhledáva£e. A Popularita URL adresy není nic jiného neº po£et výsledk· speciálního dotazu zadaného do Googlu
15 .
Obrázek A.13: Síla webu
14
V £ase provedení této analýzy Google diskvali koval m·j e-shop z neznámých d·vod·...
15
"www.avebijoux.cz"-site:www.avebijoux.cz
68
PÍLOHA A. UITENÉ NÁSTROJE
Po£et indexovaných stránek na dané domén¥ vyhledáva£em Google lze zjistit také speciálním dotazem do samotného vyhledáva£e
16 .
Dal²ím zajímavým údajem je Alexa rank, který p°edstavuje hodnocení náv²t¥vnosti webu. ím niº²í £íslo, tím v¥t²í náv²t¥vnost. Nejzajímav¥j²ím údajem jsou ale Zp¥tné odkazy na doménu. V prost°edí £eského internetového rybní£ku je to v¥c, které bychom m¥li klást zvlá²t¥ velkou pozornost. Pro vyhledáva£ od Seznamu je to totiº nejd·leºit¥j²í faktor pro jeho S-Rank ! Seznam narozdíl od Googlu nedokáºe posoudit, zda jsou tyto odkazy vytvo°ené p°irozen¥ (máme zajímavý web, n¥kdo na n¥j tedy odkáºe), nebo um¥le (známe sekce jako Partne°i £i Partnerské weby ). Tomuto tvo°ení odkaz· se °íká linkbuilding. Google je na tohle po£ínání ale opravdu alergický a jeho algoritmy to dokáºou poznat.
Google tvrd¥ penalizuje. Bu¤ umíst¥ním úpln¥ na poslední pozice ve vy17 hledávání, nebo do tzv. Sandboxu . Proto není divu, ºe vidíme weby, které mají S-Rank
Takové weby
vysoký a PageRank nulový.
Obrázek A.14: Síla webu (pokra£ování)
16
Lze zjistit zadáním dotazu site:www.domena.cz do vyhledávání Googlu.
17
Sandbox je vlastn¥ píse£ek na hraní pro neposlu²né weby. Zde z·stávají do té doby, dokud se nepolep²í.
A.4. SEO-SERVIS.CZ
69
A.4.3 Vyhledáva£e Tato analýza zobrazuje pozice zadané fráze ve vyhledáva£ích Google, Seznam, Bing
18 ,
19 a Morfeo20 a navíc je²t¥ po£et zp¥tných odkaz· a zaindexovaných stránek v t¥chto Jyxo vyhledáva£ích.
Obrázek A.15: Pozice ve vyhledáva£ích na danou frázi
18
Neslavn¥ proslulý vyhledáva£ od Microsoftu viz. £lánek na iv¥.cz [2]
19
Jeden z mála £eských vyhledáva£·, který je zárove¬ kvalitní.
20
Speciální £eský vyhledáva£ stránek, zpráv a obrázk· s ohýbáním slov, p°eklepy a slovníkem synonym.
Pozor, vyhledává pouze weby v domén¥ .cz!
70
PÍLOHA A. UITENÉ NÁSTROJE
A.5
Dal²í uºite£né nástroje a dopl¬ky
Výborné nástroje pro vývoj a optimalizaci webu jsou n¥které dopl¬ky pro webový prohlíºe£ Firefox21 . Následující popisy jednotlivých nástroj· byly p°evzaty z £lánku Dopl¬ky Firefox pro webmastery, který vy²el na webu Lupa.cz [21].
FireBug - Firebug [11] je jedním z nejpopulárn¥j²ích dopl¬k· pro Firefox. Nabízí moºnost zkontrolovat HTML kód, upravovat CSS £i layout stránky, obsahuje debugger pro JavaScriptu. Mimo to také analyzuje vyuºití sít¥ a výkonu po£íta£e, poradí si s DOM, AJAX atp. Pokud pot°ebujete získat informace o tom, co je na webu pomalé, nabízí Firebug neocenitelné informace. Svojí robustností se hodí nejen pro lad¥ní samotných stránek, ale t°eba také pro tvorbu samotného vzhledu p°ímo v n¥m.
Web Developer - Dal²ím nepostradatelným nástrojem pro vývoj webu je Web Developer [35], který nabízí opravdu nep°eberné mnoºství nástroj· pro záv¥re£né lad¥ní od moºnosti analýzy jednotlivých objekt· p°es zm¥nu velikosti okna aº po vypínání £i editaci CSS. M·ºete testovat validitu kódu nebo pracovat se soubory cookies. Moºností je opravdu hodn¥ a je moºné jej vyuºívat jak k lad¥ní vlastních stránek, tak také k analýze web· jiných a zji²´ování, jak vlastn¥ fungují.
CSS usage - Soubory s kaskádovými styly jsou £asto psány dosti univerzáln¥ a ne vºdy jsou v²echny parametry nebo formáty vyuºity a jen zbyte£n¥ zabírají místo a zpomalují web. Práv¥ pro tyto p°ípady je k dispozici CSS usage [8], který umí prohledat web a °íci, kolikrát je který atribut uºit, a nabídne také moºnost odstran¥ní nepot°ebných £ástí kódu.
DOM Inspector - DOM Inspector [10] nabízí jednoduchou editaci DOM jak na webových stránkách, tak také v XUL aplikacích. K dispozici je jednoduché a p°ehledné prost°edí, které zaji²´uje pohodlnou a kvalitní práci.
GridFox - Dal²ím dob°e pouºitelným nástrojem pro návrh stránek je GridFox [16]. Tato jednoduchá utilita umí jen na stránku nakreslit m°íºku (dle vámi zvolených parametr·), takºe m·ºete pak jednodu²e a rychle p°emís´ovat jednotlivé objekty (nap°íklad pomocí Firebug) nebo jim m¥nit velikosti tak, abyste dosáhli efektního výsledku.
MeasureIt - Podobn¥ orientovaným nástrojem je také MeasureIt [23], který slouºí jako virtuální pravítko, nebo´ umoº¬uje m¥°it rozm¥ry jednotlivých objekt· nebo £ástí stránky. Jedná se o velmi uºite£ný nástroj v kombinaci s GridFox.
ColorZilla - Volba správného odstínu barvy není ni£ím jednoduchým. ColorZilla [6] p°idá do Firefoxu kapátko, které funguje velmi podobn¥ jako v gra ckých editorech. Kliknete na libovolný element stránky a zjistíte nastavení barev. To m·ºete uºít jak p°i testování stejnobarevnosti r·zných objekt· na va²em webu, tak také, kdyº vás zaujme n¥jaká barva kdekoli jinde.
21
Firefox je mezi vývojá°i Zlatý standard díky jeho bezchybnému dodrºování webových standard·.
P°íloha B
Statistické údaje z ostrého provozu Co bych to byl za £lov¥ka, kdybych u svého e-shopu nesledoval aspo¬ náv²t¥vnost! Na²t¥stí není t°eba si n¥co takového programovat sám, ale na sv¥t¥ existuje °ada nástroj·, které to d¥lají bez mrknutí oka za nás. Takový Google Analytics je toho zá°ným p°íkladem.
B.1
Google Analytics
Webová aplikace Google Analytics [12] je perfektní nástroj, který lze jednodu²e implementovat do webové stránky, u které chceme sledovat náv²t¥vnost a plno dal²ích nemén¥ d·leºitých údaj·.
1
2
Níºe je vid¥t kód , který je ur£en do hlavi£ky HTML souboru , u kterého chceme sledovat náv²t¥vnost a dal²í související údaje. Celý °et¥zec UA-XXXXX-YY se nazývá identi kátor webu, které je t°eba vygenerovat ve webovém rozhraní Google Analytics pro kaºdou doménu. 1 <s c r i p t
t y p e=" t e x t / j a v a s c r i p t ">
2
var
_gaq = _gaq
3
_gaq . p u s h ( [ ' _ s e t A c c o u n t ' ,
||
[];
4
_gaq . p u s h ( [ ' _ t r a c k P a g e v i e w ' ] ) ;
'UA−XXXXX−YY ' ] ) ;
5 6
( function ()
7
var
8
ga . t y p e =
9
ga . s r c =
10
{
g a = document . c r e a t e E l e m e n t ( ' s c r i p t ' ) ; ' text / javascript ' ;
ga . a s y n c =
true ;
( ' h t t p s : ' == document . l o c a t i o n . p r o t o c o l
?
' https :// s s l '
:
' h t t p : / /www ' )
+ ' . g o o g l e − a n a l y t i c s . com/ g a . j s ' ;
11 12
var
13
s . p a r e n t N o d e . i n s e r t B e f o r e ( ga ,
14
s = document . getElementsByTagName ( ' s c r i p t ' ) [ 0 ] ; s);
}) ( ) ;
15
scripts/ganalytics/script.js 1
Kód se mírn¥ li²í podle toho, zda ho chceme pouºít na jednu p°esn¥ danou doménu, doménu s n¥kolika
subdoménami nebo na n¥kolik domén nejvy²²í úrovn¥. 2
V mém e-shopu je tento kód integrován pomocí modulu ganalytics.
71
72
PÍLOHA B. STATISTICKÉ ÚDAJE Z OSTRÉHO PROVOZU
Je t°eba podotknout, ºe
statistiky lze ovlivnit svým vlastním p°ístupem na webové
stránky, který se samoz°ejm¥ zcela li²í od p°ístupu normálního náv²t¥vníka. Náv²t¥vník bude asi t¥ºko obnovovat jednu stránku tisíckrát za sebou, coº ale v p°ípad¥ webového vývojá°e není tak neobvyklé!
Z tohoto d·vodu vymysleli vývojá°i z Googlu ltry, kterými m·ºeme od ltrovat sami sebe ze sbíraných údaj·. Tento ltr slouºí k vylou£ení proklik· z ur£itých zdroj·. M·ºete zadat jednu IP adresu nebo rozsah více adres. Sta£í znát tedy IP adresu, ze které se p°ipojujeme, a pro tuto adresu ltr vytvo°it.
Integrace tohoto nástroje do mého e-shopu prob¥hla o n¥kolik týdn· pozd¥ji po jeho spu²t¥ní do ostrého provozu, a to p°esn¥
1. zá°í 20103 .
B.1.1 Trendy náv²t¥vnosti Co je moºné naleznout v sekci Trendy náv²t¥vnosti, je vid¥t souhrnn¥ na obrázku B.1. Údaje jsou za
období od 1.9.2010 do 31.3.2011.
Obrázek B.1: Souhrnný p°ehled statistik
3
M·j e-shop byl spu²t¥n p°esn¥ 17. srpna 2010. Téhoº dne p°ijal i svou první objednávku!
B.1. GOOGLE ANALYTICS
73
Obrázek B.2: Graf náv²t¥vnosti e-shopu v období od 1.9.2010 do 31.3.2011
Na grafu B.2 je krásn¥ vid¥t
vzestupný trend náv²t¥vnosti od konce °íjna související
s p°íchodem váno£ních svátk·. Vrcholu je dosaºeno jiº za£átkem prosince. Z toho by ²lo usuzovat, ºe v¥t²ina lidí, pokud chce nakoupit na Internetu, tak to d¥lá s p°edstihem. ím víc se blíºí Vánoce, tím lidé dávají rad²i p°ednost kamenným obchod·m. Zboºí si mohou rovnou odnést a nemusejí se obávat toho, ºe jim zboºí nep°ijde, jako je tomu u nemalé £ásti internetových obchod·. Zárove¬ je z grafu z°ejmý útlum náv²t¥vnosti t¥sn¥ po váno£ních svátcích, trvající aº do konce ledna. U nás to bylo z £ásti také ovlivn¥no tím, ºe jsme v této dob¥ utlumili na²i reklamní £innost. Faktem posledních let ale je, ºe e-shopy mívají nejv¥t²í trºby ne p°ed Vánoci, ale práv¥ po svátcích. Z informací dostupných na Internetu jsem zjistil, ºe
trºby
za£átkem roku dosahují aº t°ikrát v¥t²ích objem·! Je ale z°ejmé, ºe takový vývoj se p°edpokládá samoz°ejm¥ u obchod· prodávajících elektroniku, spot°ebi£e, oble£ení apod., kde lidé o£ekávají pováno£ní výprodeje.
Obrázek B.3: Vizualizace náv²t¥vnosti na map¥
74
PÍLOHA B. STATISTICKÉ ÚDAJE Z OSTRÉHO PROVOZU
Na obrázku B.3 je krásn¥ vid¥t, ze kterého m¥sta p°i²lo na m·j e-shop nejvíce náv²t¥vník·. Je to
Praha s necelými 10 000 unikátními náv²t¥vníky za p·l roku od spu²t¥ní
e-shopu.
B.1.2 Loajalita náv²t¥vník· V následujících grafech je zobrazena
loajalita náv²t¥vník·, pod kterou si m·ºeme
zjednodu²en¥ p°edstavit to, jak moc je náv²t¥vník spokojen s na²ím webem, jak £asto se na n¥j vrací a kolik zde stráví £asu.
Obrázek B.4: V¥rnost aneb kolikrát se náv²t¥vník vrátil
Obrázek B.5: Délka náv²t¥vy aneb kolik £asu náv²t¥vník pr·m¥rn¥ strávil v e-shopu
B.1. GOOGLE ANALYTICS
75
Z výsledk· je vid¥t, ºe rozhodn¥ není m·j e-shop pro náv²t¥vníka nezajímavý. Stráví na n¥m celkem dost £asu. Bohuºel necelých 80% náv²t¥vník· tohle ud¥lá pouze jednou... Nakoupí a jiº se nevrátí. Z výsledk· je vid¥t, ºe je dobré se za£ít zabývat marketingem, a to hlavn¥
komunikací se zákazníkem v dob¥ po jiº uskute£n¥ném nákupu (newslettery4 ,
První newsletter se mi poda°ilo dát dohromady aº n¥kdy v dubnu 2011, do této doby jsem se zabýval
stále technickými v¥cmi kolem e-shopu. Newsletter je k nalezení bu¤ p°ímo na p°iloºeném CD ve sloºce /newsletter, nebo p°ímo v mém e-shopu [26]
76
PÍLOHA B. STATISTICKÉ ÚDAJE Z OSTRÉHO PROVOZU
B.1.3 Parametry prohlíºe£e V této £ásti statistik je moºné nahlédnout do toho, jaký
software a hardware ná-
v²t¥vník pouºil k p°ístupu na m·j e-shop.
Obrázek B.7: Opera£ní systém
V opera£ních systémech je
pozice Microsoft Windows zcela neot°esitelná. V pou-
ºitých webových prohlíºe£ích je ale situace jiº p°ízniv¥j²í pro alternativní prohlíºe£e.
Obrázek B.8: Webový prohlíºe£
B.1. GOOGLE ANALYTICS
77
V barevném reºimu pouºitého zobrazovacího za°ízení
p°evládá 32-bitový reºim. 24-
bitového reºimu se ale obávat nemusíme, protoºe i v n¥m je web dob°e vid¥t.
Obrázek B.9: Barevný reºim
Na pozoru by m¥l ale vývojá° webu být v p°ípad¥ pouºitého rozli²ení monitoru. M·j e-shop je na²t¥stí navrºen tak, aby jeho maximální ²í°ka byla n¥co málo p°es 1 000 pixel·. Tudíº ho lze
zobrazit bez problém· ve v¥t²in¥ p°ípad·.
Obrázek B.10: Rozli²ení obrazovky
78
PÍLOHA B. STATISTICKÉ ÚDAJE Z OSTRÉHO PROVOZU
B.2
Statistiky poskytovatele webhostingu
Kaºdá spole£nost, která se zabývá webhostingem, v¥t²inou poskytuje mén¥ £i více podrobné
statistiky k jednotlivým doménám. Níºe jsou dv¥ zajímavé ukázky ze statistik
na²í domény www.avebijoux.cz, kterou nám spravuje spole£nost Active24, s.r.o. Na grafu B.11 jsou vid¥t
útlumy v £ase, kdy lidé nej£ast¥ji ob¥dvají, respektive ve£e°í.
Obrázek B.11: Náv²t¥vnost dle hodiny
Na druhém grafu je nejzajímav¥j²í fakt, ºe nás lidé nav²t¥vovali
nejmén¥ v úterý.
Z°ejm¥ v tenhle den je pracující £lov¥k nejvíce zavalen prací a nemá £as brouzdat po Internetu!
Obrázek B.12: Náv²t¥vnost dle dne v týdnu
P°íloha C
Obsah p°iloºeného CD Na obrázku C.1 je vid¥t
adresá°ová struktura p°iloºeného CD, na kterém jsou
mimo jiné k nalezení zdrojové soubory mého e-shopu, obrázky z výsledk· experimentu s o£ní kamerou, grafy statistik z ostrého provozu a mnoho dal²ích nemén¥ zajímavých v¥cí.
AT X [39]. Zárove¬ jsou zde obsaºeny i zdrojové soubory této bakalá°ské práce napsané v L E
Obrázek C.1: Obsah p°iloºeného CD
79
80
PÍLOHA C. OBSAH PILOENÉHO CD
Literatura [1] Google AdWords - Online reklama od Googlu [online]. [cit. 21. 5. 2011].
[9] CSS Sprites: What They Are, Why They Are Cool, and How To Use Them | CSS-Tricks [online]. [cit. 21. 5. 2011]. Dostupné z: . [10] DOM Inspector :: Dopl¬ky aplikace Firefox [online]. [cit. 21. 5. 2011].
