Skrypty JavaScript osadzane są w kodzie strony w pliku zewnętrznym bądź „inline”, czyli w źródle strony. Zarówno plików zewnętrznych jak i bloków JavaScript osadzonych „inline” może w dokumencie HTML występować wiele, co powoduje znaczne zwiększenie objętości kodu w stosunku do treści. Pod względem przyjazności dla wyszukiwarki jest to sytuacja wpływająca negatywnie na SEO. Dlatego też…
Często jedną z rekomendacji SEO, mającą na celu przyśpieszenie ładowania strony i ograniczenie ilości kodu w źródle, jest przeniesienie skryptów JavaScirpt do zewnętrznego pliku. Przeniesienie wszystkich skryptów do jednego pliku ma tę zaletę, że w źródle strony ogranicza się do jednej linijki kodu, a w kontekście komunikacji z serwerem, na którym znajduje się strona, sprowadza się do wysłania jednego żądania. Istnieje jednak ryzyko, że część skryptów przestanie działać poprawnie ponieważ wymaga do działania innych skryptów, które powinny być ładowane wcześniej. Problem ten dotyczy synchronicznego kodu Google Analytics – starego kodu, który jeszcze w dużym stopniu występuje na stronach. Standardowo kod ten ma postać:
<script type=”text/java_script”>
var gaJsHost = ((„https:” == document.location.protocol) ? „https://ssl.” : „http://www.”);
document.write(unescape(„%3Cscript src='” + gaJsHost + „google-analytics.com/ga.js' type=’text/java_script’%3E%3C/script%3E”));
</script>
<script type=”text/java_script”>
var pageTracker = _gat._getTracker(„UA-XXXXXX-YY”);
pageTracker._trackPageview();
</script>
Kod jest osadzany za pomocą dwóch znaczników pobierany jest plik ga.js z serwera Google Analytics, natomiast w drugim bloku definiowany jest kod śledzący i zliczane są odwiedziny. Bardzo ważne jest, aby plik ga.js został załadowany przed zdefiniowaniem trackera, bo w przeciwnym wypadku obiekt _gat odpowiedzialny za utworzenie trackera nie zostanie wykryty i pojawi się błąd, a w konsekwencji odwiedziny nie zostaną zliczone. Istotne jest też, aby plik ga.js i kod śledzący trackera definiować w dwóch oddzielnych blokach
document.write(unescape(„%3Cscript src='” + gaJsHost + „google-analytics.com/ga.js' type=’text/java_script’%3E%3C/script%3E”));
definiujący dynamicznie kolejny blok JavaScript, następny w kolejności wykona się blok dynamiczny, a dopiero po nim kolejna sekcja kodu JavaScript.
Z tego sposobu działania wynika konieczność umieszczenia synchronicznego kodu śledzącego Google Analytics w dwóch oddzielnych znacznikach i to w dokładnie takiej kolejności, ponieważ najpierw musi zostać załadowany plik ga.js z serwera Google, by w następnym kroku można było utworzyć obiekt trackera i zliczyć odwiedziny. Kolejność odwrotna spowoduje błąd, ponieważ w momencie tworzenia trackera obiekt _gat odpowiedzialny za jego utworzenie nie będzie jeszcze istniał. Umieszczenie w jednym bloku zarówno definicji pliku ga.js jak i kodu trackera również spowoduje taki błąd. Podobna sytuacja wystąpi kiedy będziemy chcieli przenieść wszystko do jednego zewnętrznego pliku – w momencie wykonywania skryptu z pliku zewnętrznego obiekt _gat nie będzie załadowany do pamięci podręcznej, ponieważ pobranie pliku ga.js nastąpi dopiero w momencie zakończenia aktualnie przetwarzanego bloku JavaScript.
Stąd też następujący kod:
var gaJsHost = ((„https:” == document.location.protocol) ? „https://ssl.” : „http://www.”);
document.write(unescape(„%3Cscript src='” + gaJsHost + „google-analytics.com/ga.js' type=’text/java_script’%3E%3C/script%3E”));
var pageTracker = _gat._getTracker(„UA-XXXXXX-YY”);
pageTracker._trackPageview();
niezależnie od tego czy będzie umieszczony w zewnętrznym pliku JavaScript czy wewnątrz strony (znaczniki ) nie będzie działał poprawnie.
Jeśli więc konieczne jest umieszczenie skryptów JavaScript w plikach zewnętrznych np. ze względu na rekomendacje SEO dotyczące skryptów JS, zawsze należy zastosować dwa odrębne pliki
<script type=”text/javascript” src=”gahost.js”></script>
<script type=”text/javascript” src=”gatracker.js”></script>
umieszczając w pierwszym procedurę ładowania pliku ga.js:
var gaJsHost = ((„https:” == document.location.protocol) ? „https://ssl.” : „http://www.”);
document.write(unescape(„%3Cscript src='” + gaJsHost + „google-analytics.com/ga.js' type=’text/java_script’%3E%3C/script%3E”));
i w drugim definicję trackera:
var pageTracker = _gat._getTracker(„UA-XXXXXX-YY”);
pageTracker._trackPageview();
Konrad Dopieralski