Jak měřit různé věci javascriptem
Na svých stránkách provádím různá měření chování uživatelů a jejich nastavení. Metoda, kterou používám, není nijak unikátní (používají ji v pozměněné formě skoro všechna počitadla a reklamní servery). Ale povědomí, že je takto možno sbírat data, není moc silné a možná se vám to bude hodit. V této stránce popisuji pouze filosofii, jak od o uživatelích nasbírat zajímavá data, nikoliv to, jak je vyhodnocovat.
Co potřebujete - Filosofie měřícího skriptu - Co se dá třeba měřit - Příklady měřícího kódu - Příklad kousku logu - Možnosti vyhodnocování - Není to špehování?
Co potřebujete
Jednak musíte mít svoje stránky, na které přichází zajímavé množství lidí, aby to potom bylo statisticky významné.
Dále musíte mít možnost někam zaznamenávat výsledky. Jsou v zásadě tyto způsoby:
- specializovaný PHP skript, který zaznamenává do databáze
- nebo normální logování na serveru (to používám já, protože mi to přijde jednodušší)
- v nouzi by se snad dala použít veřejná počítadla, ale to je drbání pravou rukou za levým uchem.
Hlavně potřebujete mít co měřit. Něco, co vás o uživatelích konkrétního webu bude zajímat. Na měření se vám bude hodit znalost javascriptu.
Filosofie měřícího skriptu
Javascriptem seskládáte požadavek na obrázek, který leží na serveru. Prohlížeč si pro obrázek sáhne. Požadavek se zaznamená do logu nebo do databáze. Do požadavku se dají dát různé parametry, které se zaznamenají a dají se později vyhodnotit.
Například budu chtít znát výšku obrazovky uživatelů. To je javascriptový objekt window.screen.height. Na server si umístím jednopixelový průhledný obrázek, který si pojmenuji třeba mereni.gif. Bude ležet třeba na adrese
http://mereni.jakpsatweb.cz/images/mereni.gif
Mým cílem je poslat z uživatelova prohlížeče skrytý požadavek, který mi změří výšku uživatelovy obrazovky. Výsledný požadavek bude vypadat takhle:
http://mereni.jakpsatweb.cz/images/mereni.gif?vyska=600
V logu potom uvidím toto:
GET /images/mereni.gif?vyska=600
Jak tam ale dostanu to číslo 600? Javascriptem. Třeba takto:
<script>
// Sestavení požadavku
var pozadavek ="http://mereni.jakpsatweb.cz/images/mereni.gif?vyska=" + window.screen.height;
// Poslání požadavku na server (zapíšu obrázek do dokumentu)
document.write("<img src='"+ pozadavek +"' width='1' heigh='1'>");
</script>
V logu se mi od každého uživatele, který načte stránku, objeví požadavek na obrázek se zaznamenanou výškou. Samozřejmě ho můžu obohatit o další údaje, třeba o šířku. Požadavek potom může vypadat následovně:
http://mereni.jakpsatweb.cz/images/mereni.gif?vyska=600&sirka=800
To, co s tím logem (s těmi záznamy) potom udělám, to je jiná otázka. Ale je to jedno. Každý si to zpracovává statistickým nástrojem, který má rád.
Zaznamenávání přes PHP
Pro lidi, kteří nemají přístup k logu, ale mají přístup do databáze, je výhodnější požadavek namířit nikoliv na obrázek gif, ale na soubor s příponou php. Výsledný požadavek může vypadat třeba takto:
http://mereni.jakpsatweb.cz/php/mereni.php?vyska=600
Co přesně bude v tom souboru mereni.php, to už záleží na tom, jak si to naprogramujete. V zásadě stačí chytit proměnnou $_GET["vyska"], někam ji uložit a na výstup poslat průhledný obrázek nebo http odpověď 204 no content.
Co se dá třeba měřit
Dá se měřit všechno, co je přístupné javascriptu jako vlastnost nějakého objektu. Jednak to jsou statické věci, jako třeba velikost obrazovky, nebo to mohou být dynamické události vyvolané uživatelem.
Skript pro statické měření se dá spouštět hned při načítání stránky (obvykle se umisťuje někam dolů). Naopak skript, který má sledovat uživatelské události, se většinou umisťuje na začátek dokumentu, ale spouští se až nějakou událostí uživatele. Například když chci měřit, zda uživatel na stránku kliknul, tak spustím měřící skript při události onclick.
Můžu třeba měřit, jestli uživatel kliknul na nějaký odkaz. Dělá se to tak, že volání skriptu umístím přímo do události onclick v odkazu (příklad bude níže).
Pokud si při načtení stránky do javascriptové proměnné zaznamenám aktuální čas (nebo spustím nějaký metronom), můžu si u každé uživatelské akce navíc zaznamenat čas, který od načtení stránky uplynul.
A tak dále, možnosti jsou velmi široké. Například se takto dají logovat i chyby javacriptu (chytání události onerror). Jediné omezení přinášejí schopnosti javascriptu dostat se k různým údajům. Když třeba prohlížeč uživatele javascript nepodporuje, tak mám smůlu a od tohoto uživatele se mi nic nezaznamená.
Příklady měřícího kódu
Zaznamenání výšky obrazovky už jsem popisoval výše. Když ale příklad trochu zkulturním a obohatím o zaznamenání šířky obrazovky, bude vypadat takto:
<script>
// Sestavení požadavku
var zdrojObrazku = "http://nejaky-server.cz/obrazek.gif";
var vyska = window.screen.height;
var sirka = window.screen.width;
var pozadavek = zdrojObrazku "?vyska=" + vyska + "&sirka" + sirka;
// Poslání požadavku na server (zapíšu obrázek do dokumentu)
document.write("<img src='"+ pozadavek +"' width='1' heigh='1' style='visibility:
hidden'>");
</script>
Výsledný požadavek by v logu mohl vypadat třeba takto:
/obrazek.gif?vyska=768&sirka=1024
Hezčí poslání požadavku
Tím, že se obrázek zapíše do dokumentu metodou document.write(), se obrázek začne načítat ze serveru. Problém této metody ovšem je, že zápis do dokumentu je možný pouze při načítání dokumentu, tedy na začátku. Jako reakce na uživatelské události je nepoužitelný. Naštěstí lze o obrázek server požádat i jinak, pomocí objektu Image.
// Poslání požadavku na server (vytvořím objekt Image)
var obrazek = new Image();
obrazek.src = pozadavek;
Co to dělá: napřed se vytvoří instance objektu Image. V dalším řádku říkám, že ten obrazek má vlastnost src a této vlastnosti přiřadím adresu obrázku (již dříve vyskládanou do proměnné pozadavek).
Obrázek se načte ze serveru, aniž by ovlivnil vzhled dokumentu (vidět tam nikde nebude).
Měření kliknutí na odkaz
Na začátku dokumentu je deklarovaná funkce nameritKliknuti():
<script>
var zdrojObrazku = "http://nejaky-server.cz/obrazek.gif";
function nameritKliknuti(){
var pozadavek = zdrojObrazku + "?kliknul=ano";
// Poslání požadavku na server
var obrazek = new Image();
obrazek.src = pozadavek;
}
</script>
V kódu stránky k měřenému odkazu přidám událost onclick:
<a href="kamkoliv" onmousedown="nameritKliknuti()">odkaz</a>
V logu se pak objeví záznam:
/obrazek.gif?kliknul=ano
Proč používám onmousedown a ne onclick? Událost onmousedown znamená stisknutí jakéhokoliv tlačítka, což odchytí i kliknutí pravým tlačítkem myši. Pokud si někdo odkaz otevře do nového okna přes kontextové menu (vyvolané pravým tlačítkem myši), tak by mi to onclick nevyvolalo. Onmousedown ano. Teoreticky sice někdo může dát myš dolů a pak z odkazu odjet, ale takových případů bude málo.
Tím by se dal příklad uzavřít. V praxi je ale potřeba měřit klikání na více než jeden odkaz. Mohou se odlišit třeba parametrem cil, do kterého si budu ukládat, co budu potřebovat. Je potřeba upravit funkci i její volání, prostě funkci přidám parametr kamKliknul.
Vylepšené měření kliknutí na odkaz
<script>
var zdrojObrazku = "http://nejaky-server.cz/obrazek.gif";
function nameritKliknuti(kamKliknul){
var pozadavek = zdrojObrazku + "?kliknul=" +
kamKliknul;
// Poslání požadavku na server
var obrazek = new Image();
obrazek.src = pozadavek;
}
</script>
Samotné odkazy upravím podle toho, co chci měřit. Můžu třeba všechny odkazy označit ručně nějakými svými identifikátory (v tomto příkladu je můj identifikátor řetězec "seznam"):
<a href="http://www.seznam.cz" onmousedown="nameritKliknuti('seznam')">odkaz</a>
v logu se potom objeví
/obrazek.gif?kliknul=seznam
Jiná možnost je sledovat cílové URL (to se bude hodit v automatizovanějších stránkách)
<a href="http://www.seznam.cz" onmousedown="nameritKliknuti(this.href)">odkaz</a>
Využívám toho, že odkaz má vlastnost href, ke které se dostanu přes objekt this (this reprezentuje tento konkrétní jeden odkaz). V logu se potom objeví:
/obrazek.gif?kliknul=http://www.seznam.cz
V praxi je ovšem lepší klikání na odkazy vyhodnocovat spolehlivěji z klasického serverového logu (a pomocí referrerů). Měření klikání na odkaz javascriptem uvádím spíše pro ilustraci.
Příklad kousku logu
Jak přesně bude vypadat log obrázku, to záleží na nastavení serveru. Na Windowsovském serveru IIS se to nějak naklikává, na serveru Apache se podoba logu řeší přes Logformat. Takto třeba vypadá kousek logu z mého nedávného měření šířek okna:
2005-01-17 06:07:01 81.60.163.136 GET /rozliseni.gif
?pismo=12pt&okno=1003&obrazovka=1024&session=579854&pageid=JPW/&cas=0&zmena=0
200 http://example.com/ "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT
5.1; Maxthon)"
2005-01-17 06:08:28 174.213.200.14 GET /rozliseni.gif ?pismo=12pt&okno=1004&obrazovka=1024&session=10426&pageid=JPW/&cas=0&zmena=0
200 http://example.com/ "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT
5.0)"
2005-01-17 06:21:35 82.146.74.22 GET /rozliseni.gif ?pismo=12pt&okno=576&obrazovka=800&session=153428&pageid=JPW/&cas=0&zmena=0
200 http://example.com/ "Mozilla/4.0 (compatible; MSIE 6.0; Windows
98)"
První je datum, čas a IP adresa. Potom pokračuje metoda, požadavek na soubor, parametry dotazu, kód odpovědi, referrer a nakonec otisk prohlížeče. Jak je z logu vidět, tentokrát jsem měřil spoustu věcí najednou (měřící javascript byl složitější, ale můžete se podívat, co mi vyšlo o oknech a o písmu).
Možnosti vyhodnocování
Jakmile máte v logu údaje o stahování obrázků s parametry, můžete se pustit do jejich vyhodnocování. Znám dva ne až tak složité způsoby, jak data vyhodnocovat:
- pomocí linuxových/unixových textových utilit (grep, cut, wc)
- pomocí Microsoft Excelu (práce s daty, kontingenční tabulka)
- určitě to půjde i jinak.
Vyhodnocování už ale není předmětem tohoto článku. Přesto si dovolím jednu linuxovou radu. Pokud máte velký log uložený třeba v souboru access.log, ale zajímají vás přístupy pouze na soubor tecka.gif, tak ty z logu dostanete tímto příkazem
$ grep "tecka.gif" access.log > tecka.log
Tím se vytvoří soubor tecka.log, který bude obsahovat pouze přístupy na měřící tečku (teoreticky všechny řádky, které obsahují řetězec "tecka.gif")
Není to špehování?
Trochu jo. Dívali jste se ale někdy na to, co všechno si o vás zaznamenávají obyčejné animované bannery? Všechno, co můžou. Nebo třeba Google si stahuje obrázek pokaždé, když kliknete na obrázek (podívejte se do kódu na funkci clk()).
Reklama
