Zdalna rejestracja zdarzeń na stronach www - część 1

Naszła mnie ostatnio ochota na stworzenie narzędzia pozwalającego śledzić określone zdarzenia na stronach. Całość ma działać na zasadach wtyczki - podobnie jak jest to rozwiązane w Google Analytics.

Podstawowy cel to maksymalna prostota części jaka ma zostać umieszczona na śledzonej stronie. Chodzi o ty by kod był prosty i czytelny. Jeśli zbyt wiele będziemy wymagać od właścicieli strony, raczej nie zgodzą się na ingerencję.

Inny ważny aspekt to możliwie jak największe bezpieczeństwo. Nie może stać się tak, że "pad" naszej maszyny spowoduje problemy w działaniu śledzonej witryny.

Oto pomysł jaki przyszedł mi do głowy.

Na początek wstawiamy kod inicjujący rejestrację zdarzeń. Możemy umieścić go w sekcji head śledzonej strony.

<script type="text/javascript">
   window._phpbustersT = window._phpbustersT || [];
   _phpbustersT.push(['key',  'IDENTYFIKATOR_ŚLEDZONEJ_STRONY' ] );
</script>

Dla jasności: powyższy kod utworzy nam tablicę globalną (jeśli jeszcze nie istniała) w polu "_phpbustersT" obiektu window. Tę tablicę będziemy nazywać "śladem", ponieważ to na niej będą się odciskać działania naszego użytkownika.

Teraz musimy określić sobie zdarzenia jakie chcemy logować, a następnie podpiąć do nich odpowiedni kod. Dla ułatwienia użyjemy jQuery.

<script type="text/javascript">
$('#orderButton').bind('click', function()
{
   window._phpbustersT = window._phpbustersT || [];
   _phpbustersT.push(['eOrder', { orderid : 12345678 } ] );
});
</script>

Teraz pozostaje nam już tylko dodanie skryptu js, który poinformuje nas o zdarzeniach na śledzonej stronie.

<script type="text/javascript">
(function() {
    var bust = document.createElement('script'); 
        bust.type = 'text/javascript'; 
        bust.async = true;
        bust.src = ('https:' == document.location.protocol ? 'https://' : 'http://')+
                    'tracker.phpbusters.eu/tracker.js?'+(Math.random());
    var s = document.getElementsByTagName('script')[0]; 
        s.parentNode.insertBefore(oi, s);
})();
</script>

W ostatnim skrypcie istotnych jest kilka elementów.

1. może zostać umieszczony w dowolnym miejscu w kodzie strony (oczywiście z zachowaniem poprawności HTML ;])
2. wywołuje się asynchronicznie dzięki czemu nie zawiesi nam strony, jeśli podczas jego pobierania wystąpią błędy lub opóźnienia.
3. jeśli skrypt nie zostanie pobrany lub będzie zawierał błędy składniowe - nie będzie to miało żadnych konsekwencji dla śledzonej strony.

Treść skryptu trackera oraz skrypt logujący przedstawię w kolejnym poście.