Nejnavštěvovanější stránky Ataxo (návod jak jsem kdysi měřil H1.cz)

Před dávnou dobou jsem napsal článek Známe nejnavštěvovanější stránky (služby) na webu H1.cz, který vzbudil odezvy typu "jak že jsem to jenom změřil" či “on něco takového umí Google Spreadsheet”. Doba pokročila a tak jsem se rozhodl připravit krátký nástin toho, jak jsem to provedl. Některé z níže popisovaných věcí již nemusí fungovat a proto budu psát v minulém čase (jednotného čísla, třetí osoby, pohlaví mužského). Předně také musím napsat a upozornit na slovo “odhad” návštěvnosti. Sám vím, že nejde o 100% přesnou metodu, ale v rámci možnosti jste byli schopni alespoň rámcově či poměrově odvodit návštěvu jednotlivých stránek (např. kolik % uživatelů z hlavních stránky navštíví stránky kontaktů nebo o jaké služby je nejvíce zájem). Nemusíte se, prosím, namáhat upozorňovat na nepřesnosti a kritizovat správnost. 

U webu H1.cz jsem prováděl odhad návštěvnosti cca v době září-říjen 2010 a u ATAXO pak v době říjen 2010 - duben 2012 (nechal jsem to prostě běžet :-)

1) Seznam stránek
V prvním kroku jsem musel získat seznam stránek daného webu. U většiny webů naleznete něco jako sekce Mapa webu (http://www.ataxo.cz/mapa-webu) a u těch SEO lepších pak dokonce i sitemapu XML (http://www.ataxo.cz/sitemap.xml). Tato data jsem si zparsoval a udělal nich txt soubor. To pro případ když bych měřil déle a web se dynamicky změnil. Tento txt soubor jsem si uložil na server (netradičně ataxo.txt)

2) CSS hack (teorie)
Kdysi dávno měla většina prohlížečů (později už jen část těch méně chytrých) velmi zajímavý bug/feature. Každý navštívený odkaz (link) změní v prohlížeči svoji barvu. Uživatel má tedy přehled, na jakých stránkách již byl. A právě k této hodnotě se dostane JavaScript.

3) CSS hack (praxe)
Vytvořil jsem si PHP stránku, která automaticky načetla všechny URL odkazy z ataxo.txt a vytvořila HTML kód

<a id="s0" href="http://www.ataxo.cz/">http://www.ataxo.cz/</a><br>
<a id="s1" href="http://www.ataxo.cz/nabizime/male-firmy">http://www.ataxo.cz/nabizime/male-firmy</a><br>
<a id="s2" href="http://www.ataxo.cz/nabizime/velke-firmy">http://www.ataxo.cz/nabizime/velke-firmy</a>

V CSS jsem vytvořil styl, který zjistil navštívené odkazy (přes a:visited) a nastavil jim horní odsazení na 100 pixelů

#odkazy a:visited { top: 100px; }

4) JavaScriptu tomu vládne
V JavaScriptu jsem si načetl všechny odkazy z minulého kroku a zjistil jsem jaký je jejich offset (tedy které jsou těch 100 pixelů posunuté). Toto měli vlastně dle CSS stylu jen ty weby, na kterých daných návštěvník byl. Pak jsem podle jednoduché binární logiky vytvořil serii 0 a 1 (pořadí odpovídá pak dané stránce). Např. 010 znamená, že uživatel navštivil pouze prostředí stránku (tedy “s1” http://www.ataxo.cz/nabizime/male-firmy)
Toto číslo jsem si pomocí AJAXu uložil to TXT souboru, kde jsou již hodnoty z minulých návštěv (takže by tedy přičetla návštěva k druhému webu).

5) Sháníme crowd
No a co dál? Tento skript (např. iVan.php) jsem pomocí IFRAME vložil na potřebné stránky, gadgety a další srandy po webu :) Převážně šlo o můj blog (v kódu nehledejte, už je fuč :)

Pokud tedy uživatel navšítvil web, automaticky se v iframe načetl můj skript (iVan.php), který načetl seznam všech stránek webu Ataxo (z textaku ataxo.txt), vykreslil HTML kód. CSS styl změnil vlastnosti již u navštívených odkazů a tyto jejich hodnoty (vlastně URL) uložil do dalšího souboru, který byl sumou všech návštěv pro jednotlivé stránky. Nejblíže byl vlastně Lukáš Zaplatílek,který o variantě CSS hacku hovořil a  čímž získává prvního bludišťáka. Gratulujeme!

6) Statistika (ne)nuda je!
Protože mám rád Google Spreadsheety a myslím že se hodí na všechno (kromě otevírání konzerv), tak jsem si importoval data právě sem. Vytvořil jsem si z toho pěkné (někdy i barevné) grafy a ukazoval je církvi, králi, vlasti, múzam a světu. (K. H. B.).

7) Intepretace výsledků 
Nejnavštěvovanější stránky (ad procenta - pokud má hlavní stránká 25 000 přístupů a v závorce je 20% tak stránká má 5 000 přístupů)

• ataxo.cz/o-nas/reference/rozdeleni-podle-produktu/seo-optimalizace-pro-vyhledavace/list (58%) 
• ataxo.cz/o-nas/reference/zakaznicke-segmenty/velke-firmy-a-korporace/list (57%) 
• ataxo.cz/produkty/sprava-ppc/odmena-z-media (51%) 
• ataxo.cz/produkty/sprava-ppc/garantovana-cena (43%) 
• ataxo.cz/nabizime/male-firmy/emailing (35%) 
• ataxo.cz/o-nas/reference/rozdeleni-podle-produktu/sprava-ppc/list (31%) 
• ataxo.cz/o-nas/proc-ataxo (30%) 
• ataxo.cz/o-nas/reference/zakaznicke-segmenty/zivnostnici-a-male-firmy/list (28%) 
• ataxo.cz/nabizime/male-firmy (26%)

Nejvíce je zájem o o reference, u H1 to bylo O nás a Tým. Zajmavé, že..

Graf ve velkém, barevném provedení na  http://jsbin.com/aqiduk (pokud si z toho chcete udělat plakát)

Zajímá tě více? @codeas

Tweet