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

Mamy już gotową obsługę naszego trackera, jaką należy wykonać na śledzonej stronie. Teraz zajmiemy się skryptami, jakie będą znajdowały się na naszym serwerze. Będą one odpowiedzialne za właściwą część związaną z rejestracją zdarzeń na zdalnym serwisie.

Na początek skrypt tracker.js

var bustersT = {
    _key : '',
    init : function(key) { 
        this._key = key;
    },
    _trackEvent : function(name, value) {
        var img = document.createElement('IMG');
        img.src = 'http://tracker.pl/'+value+'/'+name+'.png?'+(Math.random());
    },
    eOrder : function(options) {
        options.key = this._key;
        var opt64 = _base64(JSON.stringify(options));
        
        this._trackEvent('eOrder', opt64);
    }
}

var _phpbustersTtmp = [];

if((typeof window._phpbustersT) == 'object' && typeof window._phpbustersT.length != 'undefined' && window._phpbustersT.length > 0)
{
    _phpbustersTtmp = window._phpbustersT;
}

window._phpbustersT = {
    push : function(value)
    {
        if(value[0] == 'key')
        {
            bustersT.init(value[1]);
        }
        else
        {
            bustersT[value[0]](value[1]);
        }
    }
}

for(var i=0; i<_phpbustersTtmp.length; i++)
{
    window._phpbustersT.push(_phpbustersTtmp[i]);
}

W skrypcie wykorzystana jest metoda _base64. Takiej metody nie ma w javascript. Należy użyć zewnętrznej biblioteki do kodowania base64 lub napisać własną funkcję (to bardzo proste - postaram się opisać to w jednym z kolejnych postów).

Skrypt wykorzystuje kilka "sprytnych" możliwości JS.
Po pierwsze, można go załadować w dowolnym momencie, dzięki "symulacji" metody "push" obiektu Array.
Po drugie, skrypt dynamicznie tworzy nam element obrazka (tag img). Dzięki temu możemy przekazać dane do skryptu, który znajduje się w innej domenie niż śledzona strona (odwołanie AJAX zostało by zablokowane).
Po trzecie, dzięki temu, że skrypt również dynamicznie osadzamy w kodzie strony, nie będzie on powodował spowolnienia lub "zawieszenia" się śledzonego serwisu.

W kolejnym poście przedstawię skrypt php, który odbierze i zapisze dane z tracker.js.

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.