JavaScript jako popoháněč galejních otroků

Na námět jednoho ze čtenářů Interval.cz si dnes v tomto článku ukážeme skript, který hlídá aktivitu návštěvníků stránek a pokud zjistí, že dotyčný místo aktivní práce s naší stránkou jen tak sedí a zírá, popřípadě si odběhl někam pryč, provede předem stanovenou akci (například přesměrování na úvodní stránku webu).

Nejdříve si ukážeme, jak takový skript pracuje. Po kliknutí zde se otevře nové okno se stránkou tvořenou trojicí rámců. Jediný odkaz z této nové stránky nás přesměruje na stránku, na níž je JavaScriptem měřena aktivita návštěvníka. Pokud nedojde do 10ti vteřin k žádné uživatelské akci (pohyb či klik myší, stisk klávesy), je návštěvník přesměrován zpět na úvodní stránku ukázky. Aktivita návštěvníka je sledována nejen v hlavním (bílém) rámci, ale i ve dvou dalších rámcích – hlavičce a menu stránky.

Poznámka – Uvedený skript by měl v Intenet Exploreru kontrolovat tři různé druhy aktivity návštěvníka (pohyb myší, kliknutí myší a stisk klávesy na klávesnici), zatímco pod Netscape kontroluje pouze kliknutí myší a stisk klávesy. Důvodem jsou jako obvykle různá rozšíření Microsoftu javaScriptovského standardu – jak bude patrno ze skriptu níže na této stránce, Netscape se drží pouze kanonických událostí „onmousedown“ a „onkeydown“, kdežto v Redmontu vymysleli i událost „onmousemove“. K dalším specifikům, tentokrát již společným pro oba prohlížeče, se dostaneme v závěru článku.

Veškerý potřebný skript se nachází pouze v jedné ze čtveřice stránek, tvořících rámcovou konstrukci – jde o bílou stránku v hlavní části obrazovky, na níž běží časovač. Začneme definicí potřebných proměnných a konstant:

TimeToRedir je konstanta určující, po jak dlouhé nečinnosti se má něco stát (v našem případě přesměrovat stránka). MyTimer je pomocná proměnná, v níž je aktuálně zbývající čas do této události.

Postupné snižování nastaveného času a spuštění naprogramované akce zajistí funkce DecrementTimer, volaná pravidelně časovačem v intervalu jedné vteřiny:

Zde je naprogramovanou akcí (část else podmínky) přesměrování URL. V první části podmínky ve funkci DecrementTimer pro účely příkladu vypisujeme zbývající čas do editačního políčka ve formuláři – samozřejmě že pokud nechceme časovač ukazovat návštěvníkům, příslušný řádek kódu odstraníme. HTML kód formuláře použitého v příkladu je zde:

Pokud návštěvník stránky provede nějakou akci, je potřeba časovač nastavit zpět na začátek. K tomu nám poslouží funkce ResetTimer a její správné zavolání. Nejprve tedy kód funkce ResetTimer:

Druhý řádek opět slouží pouze k „debug“ účelům. Parametr evnt v tomto skriptu nevyužíváme – jde vlastně o popis nastávající události neboli eventu, neboť funkce ResetTimer není nic jiného než tzv. „event handler“.

Nakonec musíme rozkázat prohlížeči, aby funkci ResetTimer volal ve správných okamžicích, tedy vždy, když uživatel provede na stránce akci s myší nebo klávesnicí. Toto nám zajistí následujících devět řádků kódu. Nejprve tři řádky pro pohyb myší, tedy událost „onmousemove“, která, jak již bylo řečeno, pracuje pouze v Internet Exploreru:

První z trojice řádků nastavuje handler události „onmousemove“ pro aktuální rámec, tedy ten, v němž běží náš skript, další dva řádky nastavují tuto událost pro zbývající dva rámce okna prohlížeče. Názvy „menu“, popř. „header“ mezi objekty top a document v těchto řádcích jsou identické s názvy, přiřazenými příslušným rámcům v HTML stránce definující rámcovou strukturu stránky.

Zbývající dvě události – stisk tlačítka myši a stisk klávesy – pracují jak pod Netscape, tak pod Internet Explorerem:

Nikdo není dokonalý aneb poznámky k reálnému využití

Událost „stisk klávesy“ se spustí teprve tehdy, má-li příslušný rámec focus – jinými slovy: dokud návštěvník do některého z rámců nejprve neklepne myší, může „datlovat“ na klávesnici do úmoru, a událost „onkeydown“ se nespustí. Pod Netscape rovněž nedojde ke spuštění události onkeydown, pokud návštěvník právě píše do formulářového pole – událost prostě neprojde až na úroveň dokumentu. Zde je proto nutno volat občas funkci ResetTimer z některé příhodné události na formuláři či na jeho prvku (onblur, onfocus), nebo využít poměrně složitější techniky zachycování a přeposílání událostí (eventů).

Pod Internet Explorerem se problémy popsanými v předchozím odstavci nemusíme příliš zabývat, protože většinu aktivity návštěvníka bohatě podchytí často spouštěný handler pro událost „onmousemove“. Ovšem, i tento handler má svůj háček, který se mi dostupnými prostředky nepodařilo narovnat: pokud návštěvník posunuje obsahem delší stránky pomocí posuvníku (scroll baru), ke spouštění události „onmousemove“ nedochází – vyzkoušejte si to znova na připojené ukázce. Může tedy dojít k tomu, že aktivní návštěvník pečlivě čtoucí nějaký rozvláčný článek (třeba tento), bude neprávem označen za „neveslujícího galejníka“ a předčasně vyhozen.

Jako shrnutí lze tedy říci toto: uvedenou techniku lze jistě dobře použít, máme-li na paměti shora popsaná omezení, opatrnost však velí nastavit raději delší časovou konstantu (TimeToRedir) a namísto přesměrování URL použít získanou informaci pro méně nepřátelské akce – například natažení jiného obrázku do reklamního pole, nebo sledování aktivity pomocí cookies atd. Pokud přece jen hodláte být nelítostní a použít sledování aktivity pro změnu URL, doporučoval bych zkontrolovat verzi prohlížeče a pro Netscape tuto funkci jednoduše vypnout (stačí zablokovat volání funkce setInterval).

Přeji vám příjemný den.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.